Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod źródłowy przykładowej strony
Na dokument HTML składa się tekst, w który wplecione są znaczniki czyli polecenia języka HTML umieszczone w nawiasach kątowych. Znaczniki informują przeglądarkę jak wyświetlić stronę WWW na ekranie na ekranie nie widać znaczników, tylko efekty ich działania. W większości przypadków znaczniki występują w parach: <znacznik>...</znacznik>. Taką parę znaczników nazywa się elementem. Ten pierwszy <znacznik> jest nazywany znacznikiem otwierającym i mówi, odkąd działa polecenie podane w nawiasach kątowych. Drugi </znacznik> (uwaga na ukośnik /) to znacznik zamykający mówi nam, gdzie kończy się działanie podanego polecenia. Oto przykład: Polecenie <b> odpowiada za pogrubienie tekstu, zatem tekst otoczony takim znacznikiem w źródle dokumentu HTML, na ekranie zostanie wyświetlony jako tekst pogrubiony. W przypadku niektórych elementów, takich jak <hr> wstawienie linii albo <img> wstawienie obrazka, nie występują znaczniki zamykające. Elementy mogą być zagnieżdżone, ale nie mogą nachodzić na siebie, czyli element, który był otwarty jako ostatni, musi zostać zamknięty jako pierwszy, np. <b><i> ten tekst będzie pogrubiony i pochylony </i></b> (<b> pogrubienie, <i> pochylenie). Niektóre elementy, oprócz nazwy znacznika, mogą zawierać w ostrokątnym nawiasie dodatkowe informacje tzw. atrybuty służące do określenia cech elementu. Atrybuty definiuje się tylko w znaczniku otwierającym i dotyczą one całego elementu. Każdy atrybut ma swoją nazwę i wartość. Atrybuty oddzielane są od nazwy i pozostałych atrybutów znakami spacji, zaś wartość atrybutu ujęta jest w znaki cudzysłowu i zapisywana po znaku równości następującym po nazwie atrybutu: <nazwaznacznika atrybut1= wartość1 atrybut2= wartość2 >... </nazwaznacznika>. Jak widać, niektóre ze znaków mają w języku HTML specjalne znaczenie (np. nawiasy kątowe) lub nie mogą być wpisane ze standardowej klawiatury (np. znak c). Umieszczenie takich znaków w dokumencie nie spowoduje wyświetlenia ich na ekranie. Aby umieścić w tekście tego typu znaki tak, aby nie zostały zinterpretowane jako część składni HTML, należy użyć specjalnego zapisu czyli encji. Encja zawsze rozpoczyna się znakiem &, a kończy średnikiem, np. - odpowiedzialne jest za dodatkową spację. Układ tekstu w dokumencie HTML (łamanie wierszy, odstępy) nie ma wpływu na to, jak tekst będzie prezentował się na ekranie wygląd na ekranie zależy tylko i wyłącznie od znaczników. W języku HTML wielkość liter, jakimi zostaną zapisane znaczniki nie ma znaczenia, czyli element <html> i <HTML> to ten sam element. Na tym wykładzie znaczniki będą zapisywane małymi literami, ponieważ już następca języka HTML 4.01 (XHTML) wymaga, aby w nazwach znaczników (i atrybutów) używać małych liter. PODSTAWOWA STRUKTURA DOKUMENTU HTML Na Rysunku 2 oznaczone zostały pewne charakterystyczne elementy dla każdej strony WWW. Teraz elementy te zostaną omówione: 1. W tym miejscu umieszcza się deklarację typu dokumentu (DTD). <!DOCTYPE> określa format strony oraz informuje jakich standardów dana strona przestrzega. W tym przykładzie <!DOCTYPE> definiuje DTD dla HTML 4.01 Transitional. Lista poprawnych deklaracji typów DTD dostępna jest pod adresem: http://www.w3.org/qa/2002/04/valid-dtd-list.html. Deklaracja taka musi zostać umieszczona przed wszystkimi znacznikami znajdującymi się w dokumencie. 2. Wszystkie dokumenty HTML muszą zawierać trzy identyczne znaczniki: <html>, <head>, <body> oraz odpowiednie ich zamknięcia. Znaczniki te określają poszczególne części strony WWW. Znacznik <html> informuje przeglądarkę o tym, gdzie rozpoczyna oraz kończy się dokument czyli wszystko, co znajduje się na stronie musi znaleźć się między <html> a </html>. 3. Znacznik <head> otacza nagłówek dokumentu HTML. Większość informacji zawartych
w nagłówku nie jest wyświetlana poza tytułem strony (3a), który jest wymagany. Tytuł strony w dokumencie HTML znajduje się pomiędzy znacznikami <title>, zaś dla odbiorcy wyświetlany jest na pasku tytułu przeglądarki. Tytuł pełni jeszcze dodatkową rolę jego nazwa jest umieszczana jest w katalogu Ulubione. Część <head> dokumentu może również zawierać znaczniki <meta>, które służą do przekazywania informacji i poleceń przeglądarce zawierają dane na temat dokumentu. Jedną z ważniejszych informacji jest ta, dotycząca sposobu zakodowania polskich znaków diakrytycznych. Można wybierać pomiędzy Unicode, Normą ISO i kodowaniem windowsowym Win1250. Kodowanie polskich znaków należy ustawić w dwóch miejscach: w edytorze tekstu, w którym tworzona jest strona i w kodzie strony WWW. Jeżeli jedno i drugie ustawienie nie będzie się zgadzać, to tekst zostanie wyświetlony nieprawidłowo. Na przykład w edytorze ked kodowanie ustawia się za pomocą polecenia Zmień stronę kodową z menu Plik. Jeżeli edytor nie oferuje opcji wyboru kodowania to najprawdopodobniej używa kodowania Win1250. Jeżeli wiemy już jak koduje nasz edytor to powinniśmy taką informację umieścić w dokumencie HTML, np. dla kodowania iso-8859-2 należy to zrobić w następujący sposob: <meta http-equiv="contenttype" content="text/html; charset=iso-8859-2">. Element <meta> służy także do przekazywania informacji wyszukiwarkom, np. opis zawartości strony: <meta name="description" content="wstaw tu opis strony">, słowa kluczowe charakteryzujące zawartość strony: <meta name="keywords" content="wstaw tu słowa kluczowe rozdzielone przecinkami">, informacje o autorze strony: <meta name="author" content="dane autora">. 4. Główna, wizualna zawartość dokumentu znajduje się wewnątrz znacznika <body>. Tak przygotowaną stronę powinniśmy zapisać na dysku twardym komputera. Należy pamiętać o zapisywaniu wyników swojej pracy co pewien (nie za długi) czas. Dokumenty HTML powinny być zapisywane w plikach o rozszerzeniu.html (lub.htm). Rezultat każdej zmiany w kodzie można na bieżąco oglądać w oknie przeglądarki internetowej. Aby wyświetlić zawartość strony WWW w przeglądarce, należy dwukrotnie kliknąć ikonę pliku w oknie folderu. Innym sposobem jest wybranie z menu Plik przeglądarki opcji Otwórz plik (np. w przeglądarce Mozilla Firefox) i wskazanie odpowiedniego pliku. Aby przeglądarka wyświetliła stronę, aktualna wersja kodu strony musi być zapisana na dysku twardym. Jeżeli w oknie przeglądarki już jest otwarta potrzebna strona należy zaktualizować zawartość okna przeglądarki poprzez kliknięcie przycisku Odśwież lub naciśnięcie klawisza F5. FORMATOWANIE DOKUMENTU HTML HTML opisuje strukturę dokumentu i znaczenie poszczególnych jego części, czyli rozbija dokument na sekcje za pomocą nagłówków, układa tekst w akapity, listy i tabele oraz nadaje bardziej precyzyjne formatowanie słowom czy zdaniom, oznaczając ich rolę w dokumencie jak np. cytat lub odnośnik. Większość elementów HTML można zaliczyć do jednej z grup: Elementy blokowe otaczają tekst, najczęściej są same w linii, np. akapit, tabela, lista, nagłówek. Mogą zawierać w sobie elementy liniowe i niektóre elementy blokowe; Elementy liniowe są wplecione w tekst, np. wyróżnienie, odnośnik. Są przenoszone do nowej linii razem z tekstem, który zawierają. Elementy liniowe nie mogą zawierać elementów blokowych. Komentarze Szczególnym rodzajem znacznika jest znacznik komentarza: <!-- treść komentarza -->. To co znajduje się wewnątrz takiego znacznika nie jest wyświetlane na ekranie, nawet jeżeli tekst rozciąga się na kilka linijek. Komentarze mają za zadanie ułatwić pracę twórcy strony ułatwiają organizację pracy na stroną. Elementy blokowe Nagłówki HTML ma sześć predefiniowanych znaczników nagłówka. Są to znaczniki: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> oraz ich zamknięcia. Znacznik <h1> definiuje najwyższy poziom
nagłówka, znacznik <h6> określa poziom najniższy. Każdy nagłówek zaczyna się w nowym wierszu oraz po nagłówku występuje dodatkowy odstęp. Wyższy poziom nagłówka określony jest za pomocą większej czcionki. Nagłówki pozwalają nam podzielić stronę na rozdziały. Rysunek 3: Nagłówki w kodzie HTML Rysunek 4: Nagłówki w przeglądarce Akapit do wydzielenia akapitu na stronie służy znacznik <p>: <p>treść akapitu</p>. Każdy akapit na stronie powinien zostać otoczony znacznikiem <p>, gdyż gwarantuje to takie samo formatowanie dla każdego z nich. Każdy akapit rozpoczyna się w nowym wierszu, pomiędzy akapitami wstawiany jest dodatkowy odstęp. Tekst znajdujący się w akapicie jest na ekranie automatycznie łamany do szerokości akapitu, dlatego nie należy w akapitach wymuszać łamania wiersza, o ile nie jest to konieczne, np. w wierszach, przy dialogach. Przeglądarka pomija nadmiarowe białe znaki (spacje, tabulatory, podziały wiersza) występujące w kodzie źródłowym strony. Podział wiersza Aby ręcznie wstawić podział wiersza należy użyć znacznika <br>. Znacznik ten nie ma zamknięcia! Linia linie poziome służą do wizualnego oddzielania poszczególnych części dokumentu, np. akapitów. Znacznik <hr> (brak zamknięcia!) tworzy w wybranym miejscu linię od lewego do prawego marginesu. Rysunek 5: Akapity w kodzie źródłowym
Rysunek 6: Akapity w przeglądarce Cytowany fragment znacznik <blockquote> służy do cytowania długich fragmentów tekstu: <blockquote>długi cytat</blockquote>. Tekst preformatowany element <pre> służy do wyświetlania tekstu z zachowaniem wszystkich spacji i podziałów wiersza, tak jak zostały zapisane w kodzie źródłowym: <pre> tekst sformatowany w kodzie źródłowym </pre>. Tekst jest wyświetlany czcionką o stałej szerokości znaku (patrz Rysunek 7 i Rysunek 8). Rysunek 7: Znacznik pre w kodzie źródłowym Rysunek 8: Znacznik pre w przeglądarce
Listy HTML oferuje trzy rodzaje list: uporządkowane (numerowane), nieuporządkowane (punktowane), listy definicji (dla zaprezentowania par: termin i definicja). We wszystkich typach list obowiązują następujące zasady: listę definiujemy za pomocą pary znaczników początku i końca listy: lista uporządkowana: <ol> lista </ol>, lista nieuporządkowana: <ul> lista </ul>, lista definicji: <dl> lista </dl>; każdy element listy definiujemy osobnym znacznikiem (znaczniki elementów listy nie muszą zostać zamknięte): lista uporządkowana: <li> element listy, lista nieuporządkowana: <li> element listy, lista definicji: <dt> termin <dd> objaśnienie terminu. Rysunek 9: Wykazy kod źródłowy Rysunek 10: Wykazy w przeglądarce
Rysunek 11: Lista definicji - kod źródłowy Rysunek 12: Lista definicji w przeglądarce
Listy można zagnieżdżać: w tym celu wewnątrz elementu <li> listy nadrzędnej należy osadzić kolejny element listy (<ul> albo <ol>), a w nim jego własne elementy <li> tworzące pozycje listy podrzędnej. Sekcja div znacznik <div> umieszcza podziały w dokumencie, grupując wybrane akapity lub inne elementy blokowe. Jego znaczenie dokładniej zostanie przedstawione podczas omawiania kaskadowych arkuszy stylów. Elementy liniowe Znaczniki służące do wyróżniania tekstu to <em> oraz silniejszy <strong>. Domyślnie element <em> wyświetlany jest czcionką pochyłą, a element <strong> czcionką pogrubioną. Znaczniki te wprowadzają formatowanie logiczne dają możliwość stylom urozmaicenia wyróżnień. Istnieje też kilka znaczników formatowania wizualnego: Rysunek 13: Lista zagnieżdżona źródło Rysunek 14: Lista zagnieżdżona przeglądarka <b> - pismo pogrubione, <i> pismo pochyłe, <tt> pismo maszynowe, <big> powiększenie czcionki, <small> pomniejszenie czcionki. Do elementow liniowych zaliczają się także: <sup> indeks dolny, <sub> indeks górny, <code> kod programu, tekst pisany czcionką o stałej szerokości, <q> cytat służy do cytatów krótkich. Istnieje jeszcze jeden znacznik, który sam nie znaczy nic: <span>. Ogólnie definiuje on sekcję dokumentu dzięki temu możliwe jest zastosowanie do sekcji rożnych stylów. Jego znaczenie dokładniej zostanie przedstawione podczas omawiania kaskadowych arkuszy stylów.
Rysunek 15: Elementy liniowe w kodzie źródłowym Rysunek 16: Elementy liniowe w przeglądarce