Kurs XHTML 1.0 - część druga

Logiczna struktura dokumentu (1)

Jak już wspominałem w pierwszej części kursu, XHTML jest językiem służącym wyłącznie do przedstawienia zawartości strony (i ewentualnego powiązania jej z odpowiednimi wpisami CSS), bez zbędnego upiększania. Przecież hipertekst to tekst, któremu jest nadany odpowiedni typ: nagłówek, akapit, stopka itd. itp.

Każdy dokument powinien być podzielony na bloki zwane akapitami lub paragrafami (ang. paragraph - specjalnie zwracam uwagę na angielskie odpowiedniki). Nad nimi mogą znajdować się nagłówki (ang. headlines), część tekstu może być zaakcentowana (ang. emphase) lub wyróżniona (ang. strong). W tekście mogą znajdować się kotwice (ang. anchor), listy, wypunktowania, numerowania (ang. list), cytaty (ang. quotation, citation), ale także coś co nie występuje w zwykłych dokumentach, czyli kontenery (ang. division - podział, sekcja), bloki gromadzące w sobie inne elementy np. kilka paragrafów i nagłówki.
Należy pamiętać, że treść strony musi zawierać się pomiędzy znacznikami <body> i </body>.

Podstawowe tagi

Nagłówki

XHTML daje nam możliwość wykorzystania aż sześciu poziomów nagłówków. Wbrew pozorom jest to bardzo dużo i zazwyczaj "normalny śmiertelnik" nie używa więcej niż trzech poziomów. Jak sama nazwa wskazuje służą do oznaczania tytułów i podtytułów. Każdy nagłówek jest elementem blokowym w XHTML 1.0 Strict, czyli zawsze się rozpocznie od nowej linii, oraz wszystko co jest za nim będzie rozpoczęte od nowej linii. Znaczniki nagłówków to: <h1>Nagłówek pierwszego stopnia</h1>, <h2>Nagłówek drugiego stopnia</h2>, <h3>Nagłówek trzeciego stopnia</h3>, ..., <h6>Nagłówek szóstego stopnia</h6>. Przykładami nagłówków są chociażby podtytuły poszczególnych części tego dokumentu.

<h1>Nagłówek pierwszego stopnia</h1>
<h2>Nagłówek drugiego stopnia</h2>

Akapity

Akapit jest ciągiem słów, które odnoszą się na przykład do tytułu lub podtytułu umieszczonego powyżej. Akapity są najczęściej wykorzystywanymi tagami w dokumentach hipertekstowych. Akapit, tak samo jak nagłówek, jest elementem blokowym, czyli nie ma prawa być wtopiony pomiędzy inne elementy strony; zawsze powinien być odróżnialny. Akapit definiuje się tagiem: <p>Tekst akapitu</p>. Koniecznie muszę przypomnieć, że akapit to nie tylko kilkuznakowe "wcięcie" w pierwszej linijce bloku tekstu, ale cały ten blok!
Jednak czasami się zdarza, że w pewien tekst mimo, że logicznie będący częścią akapitu powinien zostać umieszczony w nowej linii. Nie powinno się tworzyć dla niego specjalnego akapitu, bo to niszczy strukturę dokumentu. Do wstawienia nowej linii w ramach tego samego akapitu służy znacznik <br />. To jest typowy przykład znacznika "samozamykającego się": Jeden znacznik, który otwiera i zamyka całe polecenie dla przeglądarki. Przykładem użycia tego znacznika jest "złamanie linii" w tym akapicie.

<p>Tekst akapitu... Następuje złamanie linii<br />
Druga linia akapitu</p>
<p>Drugi akapit</p>

Kotwice - odnośniki

Jedną z najważniejszych zalet hipertekstu jest możliwość tworzenia odnośników, czli "klikalnego" tekstu, który przenosi nas do odpowiedniego miejsca w dokumencie lub do innego dokumentu. Do tego zadania służy znacznik <a>Tekst odnośnika</a>. Tego znacznika używa się w dwóch celach: do określania punktu, w którym znajduje się kotwica oraz do odwoływania się do innych dokumentów lub kotwic. Najczęściej jednak tworzy się odnośniki do dokumentów lub plików. Taki odnośnik uzyskuje się w bardzo prosty sposób: <a href="http://www.strona.pl/dokument.html">Dokument</a>. Odnośniki tego typu mogą być relatywne (zależne od aktualnego katalogu) lub bezwzględne (zawsze poprowadzą do celu, niezależnie od aktualnego katalogu). Wcześniej podany przykład to odnośnik bezwzględny, odnośnik relatywny może mieć postać na przykład taką: <a href="plik.html">Dokument</a> - tego typu odnośnik poprowadzi nas tam gdzie trzeba pod warunkiem, że przeglądany dokument oraz dokument, do którego się łącze odnosi znajdują się w tym samym katalogu.
Odnośniki mogą być tworzone do różnych zasobów, np: <a href="ftp://ftp.serwer.pl/pub/plik.zip">Ściągnij</a> do plików umieszczony na serwerze FTP, <a href="mailto:adres@pocztowy.pl">Napisz do mnie</a> jeśli chcemy stworzyć łącze, które uruchomi program pocztowy, tworząc nową wiadomość pod nasz adres. W rzeczywistości możemy tam wpisywać różne protokoły, a to czy będą działać zależeć będzie od systemu i przeglądarki.
Innym sposobem wykorzystania kotwic jest tworzenie punktów odniesienia. Często można na różnych stronach zauważyć link, który nie przenosi do innego dokumentu, ale w pewne miejsce w tym samym dokumencie. Bardzo łatwo jest taki efekt uzyskać. W miejscu, w którym chcemy taki punkt utworzyć musimy wstawić obiekt (na przykład nagłówek) o jakimś identyfikatorze (id): <h3 id="wazne">Ważne</h3>, natomiast link, który będzie odnosił do tego punktu to <a href="#wazne">Skocz do ważnych</a>.
Kotwice są elementami inline, czyli ich wstawienie nie powoduje wyświetlania nowych linii.

<a href="mailto:ktos@domena.pl">Napisz do mnie</a>

Obrazy

No, ale czymże jest strona bez obrazków? Każdy obrazek zmienia ogólny wizerunek strony na trochę inny, w zależności od jego typu na lepszy lub gorszy. Dokumenty hipertekstowe posiadają możliwość wstawiania obrazów. Takie działanie wykonuje się przy pomocy tagu <img />. Najprostszym sposobem jest: <img src="plik.jpg" alt="Tekst zastępczy" title="Malowniczy widok" />. Sam tag <img /> bez swoich parametrów jest bezużyteczny i tak: parametr src definiuje nazwę obrazka z ewentualną ścieżką do niego, parametr alt definiuje tekst alternatywny, czyli tekst, który ma pojawić się tylko i wyłącznie jeśli nie udało się załadować obrazka, a nie jak w Internet Explorerze po najechaniu kursorem na obrazek, a parametr title to tekst, który ma się pojawić po najechaniu. Parametry src i alt są wymagane. Obrazki wbrew pozorom są elementami inline.

<img src="obrazy/zdjecie.png" alt="obrazy/zdjecie.png (25 KB)" title="To moje zdjecie" />