Język HTML to język znaczników. A znacznik charakteryzuje się tym, że jest zawarty w nawiasach ostrych.
Na przykład: znacznik <p> oznacza rozpoczęcie akapitu (bo akapit to po angielsku paragraph.
Język XHTML wywodzi się z połączenia języka HTML ze ścisłymi zasadami języka XML. Szczegóły historyczne nie są w tej chwili istotne, ważne żeby pamiętać podstawowe zasady:
Resztę zasad poznasz w praniu, natomiast teraz czas przyjrzeć się naszemu plikowi html. Otwórz więc w swoim edytorze plik index.html naszego szablonu. Jeżeli używasz programu HateML, upewnij się, że masz kolorowanie składni (menu Widok - Poświetlanie składni) ustawione na HTML.
Plik index to plik strony głównej każdego serwisu www
Na przykładzie tego pliku wytłumaczymy ogólną strukturę strony.
Plik html zaczyna się od określenia typu dokumentu, tak zwanej deklaracji DOCTYPE:
Deklaracja ta zawiera informację o tym, w jakim jezyku napisana jest strona. W naszym przypadku jest to język XHTML 1.0 Transitional. Z tego fragmentu kodu korzysta Walidator stron, który sprawdza poprawność strony pod względem zgodności z definicją języka. Choć kod ten może wyglądać trochę niezrozumiale to nie masz co się tym przejmować gdyż wygląda on dla danej odmiany języka zawsze tak samo. Wystarczy więc go przy tworzeniu nowej strony po prostu skopiować skądś i wkleić.
Zauważ, że deklaracja jeszcze nie trzyma się opisanych wyżej zasad, nie jest to element języka. Od tej pory już wszystkie elementy będą zgodne z zasadami.
Po deklaracji typu dokumentu mamy znacznik rozpoczynający stronę www:
Zwróć uwagę na to, że znacznik ma tutaj dodatkowy parametr o nazwie xmlns. Wartość tego parametru zawarta jest nastęnie w cudzysłowiu po znaku równości. Parametr ten również informuje o tym, że mamy do czynienia z językiem XHTML i jest wymagany przez walidator.
Znacznik <html> ma na samym dole pliku odpowiadający mu znacznik zamykający:
Wszystko, co znajduje się między znacznikami <html> i </html> to właśnie cały dokument html.
W przypadku naszej strony napotykamy teraz na coś takiego:
Jest to tylko i wyłącznie informacja dla osoby, która zagląda w kod strony (czyli od dzisiaj również dla Ciebie). Tekst znajdujący się pomiędzy znacznikami <!-- oraz --> jest traktowany przez przeglądarkę jak komentarz i nie jest brany pod uwagę podczas wyświetlania strony. Możesz to również wykorzystać jeżeli chcesz na chwilę wyłączyć wyświetlanie jakiegoś fragmentu strony, lub umieszczenie w kodzie strony notatki dla siebie (tak na wszelki wypadek, jeśli zapomnisz skąd coś się tam wzięło). Twój edytor powinien również odpowiednio pokolorować ten fragment, najczęściej na szaro albo na zielono. Jeżeli komentarzy w stronie jest dużo możesz je spokojnie usunąć żeby zmniejszyć objętość pliku.
Kolejnym elementem strony jest nagłówek zawarty między znacznikami <head> oraz </head>. Nagłówek zawiera informacje o stronie, które również nie są wyświetlane w oknie przeglądarki. Przyjrzymy się mu za niedługą chwilę.
No i po nagłówku mamy nareszcie znacznik <body>, który rozpoczyna właściwą zawartość Twojego serwisu www.
Dalej następuje cała treść (którą również omówimy w dalszej części), a kiedy już się ona skończy pojawia się znacznik zamykający, czyli </body>.
Raz jeszcze struktura dokumentu html:
A zagnieżdżenie znaczników (zwanych czasem tagami) można przedstawić tak:
Czyli oprócz najbardziej charakterystycznych znaczników strony zapamiętaj sobie to, że między danym znacznikiem otwierającym i zamykającym mogą się również zawierać inne znaczniki. Mówimy wówczas, że są one zawarte (zagnieżdżone) węwnątrz siebie, (tak jak <head> i <body> są zawarte w <html>).
-- XHTML --
-- CSS --
-- Ćwiczenia --