Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Struktura szkieletu dokumentu HTML:
<HTML>
<HEAD>
<TITLE> Tytuł w nagłówku okna </TITLE>
</HEAD>
<BODY>
Tu będą elementy pojawiające się na stronie - główna wizualna część dokumentu HTML </BODY>
</HTML>
Zwrócić uwagę na początek i koniec bloków oznaczonych znacznikami HTML, HEAD i BODY.
Utworzyć przy pomocy Notatnika Windows plik tekstowy o powyższej strukturze, zmienić mu nazwę na index.html (ważne rozszerzenie nazwy, dobrze jest w trakcie zapisu ustalić kodowanie UTF8 dla prawidłowego wyświetlania przez IExplorera polskich znaków diakrytycznych), a następnie obejrzeć efekt otwierając dokument w przeglądarce internetowej.
Można też korzystać z lepszego notatnika Notepad2 (ściągnąć z internetu), który numeruje wiersze, koloruje tekst i daje możliwość wielokrotnego cofania operacji edycyjnych (CTRL+z).
Znaczniki HTML mają ogólną strukturę:
<ZNACZNIK atrybuty> Treść </ZNACZNIK>
Składnikiem treści może być inny znacznik (zagnieżdżanie). Znaczniki bez treści (np. BR, IMG, HR i inne) można zapisać:
<ZNACZNIK atrybuty />
Najważniejsze znaczniki:
Znacznik |
Znaczenie |
Przykład |
P |
akapit tekstowy |
<P> Tekst </P> |
TABLE |
tabela |
<TABLE> <TR> <TD> AA </TD> <TD> AB </TDx/TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> |
TR |
wiersz tabeli | |
TD |
komórka tabeli | |
UL |
lista wypunktowana |
<UL> <LI> tekst punktu pierwszego</LI> <LI> tekst punktu drugiego</LI> <LI> tekst punktu trzeciego</LI> </UL> |
OL |
lista numerowana | |
U |
element listy | |
IMG |
grafika |
<IMG SRC="obrazki/l.jpg" /> |
A |
odnośnik (hiperłącze) |
<A HREF= " http://www.wp.pl" > Wirtualna Polska </A> |
BR |
zmiana wiersza |
<P> jakiś tekst <BR /> inny tekst</P> |
HR |
linia pozioma |
<HR /> |
Przykłady znaczników:
Akapit tekstowy - znacznik <P>
Przykłady:
<P style=”text-align:center"> Jakiś tekst </P>
<P style="text-align:center; font-size:28px;color:#887755"> Inny tekst</P>
Jak wynika z powyższego przykładu wiele parametrów dla znacznika można ustalić dzięki atrybutowi style. Atrybut ten może posiadać wiele cech o określonych wartościach. Jest to lista reguł ustalających w jaki sposób mają zostać wyświetlone przez przeglądarkę wybrane elementy HTML.