Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

HTML podstawy

Podstawowe znaczniki języka HTML- analiza kodu

Poznaliśmy już budowę dokumentu HTML, potrafimy stworzyć prostą stronę zgodną ze standardami XHTML 1.1. Znamy także znaczniki odpowiedzialne za formatowanie tekstu. Teraz przyszedł czas na poznanie kolejnych możliwości języka HTML, oraz przeanalizowanie kodu praktycznych przykładów.

<html>
     <head>
         <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
         <title>Analiza kodu HTML</title>
     </head>
     <body bgcolor="yellow">
         <p>Akapit tekstu <b>tekst pogrubiony, <big>TEKST POGRUBIONY I POWIĘKSZONY</big></b></p>
         <p><i>Kursywa</i> <u>Podkreślenie</u></p>
         <p>Ten tekst zostanie przełamany w tym miejscu <br />za pomocą znacznika html.</p>
         <hr align="center" color="blue" />
         <p>H<sub>2</sub>O – przykład zastosowania indeksu dolnego</p>
         <p>Pan Miotła<sup>TM</sup>- przykład zastosowania indeksu górnego</p>
         <hr color="green" size="5" width="50%" />
         <blockquote>
             To jest cytat z wcięciem. <strike>tekst przekreślony</strike>. Jak widać cytat jest wcięty w prawą stronę. Co odróżnia dany fragment tekstu od reszty.
         </blockquote>
     </body>
</html>
lekcja1-strona3

Do niektórych znaczników w HTML-u można przypisać wysokość (height) i szerokość (width). Wartości tych atrybutów, przypisujemy w postaci liczb. Liczby domyślnie wyrażone są w pikselach (px). Zapis height=”100″ oznacza więc wysokość 100 pikseli, a width=”200″ oznacza szerokość 200 pikseli. Możemy te wartości podawać również za pomocą procentów (%). Wówczas wartość tyczy się obszaru w którym dany obiekt się znajduje. Zapis height=”50%” oznacza połowę wysokości obszaru, w którym dany obiekt się znajduje.

Strony: 1 2 3 4 5 6 7 8

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

Dodaj komentarz

Odpowiedz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest