Nagłówki, tak jak w dokumencie edytora Word, dzielą tekst na części, a dzięki temu, że nadają tekstowi rzucający się w oczy wygląd, zwracają na ten podział uwagę czytelnika. Wszyscy użytkownicy edytora Word wiedzą, o co chodzi – musimy jedynie nauczyć się korzystać z innego narzędzia. Aby przekształcić fragment tekstu w nagłówek, wystarczy zawrzeć go między znacznikami nagłówka, tak jak w tym przykładzie:
<h1> To jest nagłówek pierwszego poziomu </h1>
Znaczniki nagłówka powiększają tekst i dodają do niego pogrubienie. Masz do dyspozycji sześć rozmiarów nagłówka – pokazane są one na rysunku 3.1. Polecałabym korzystanie nagłówków drugiego poziomu, <h2> </h2>. Jeśli chcesz, aby nagłówek był nieco mniejszy, użyj pary <h3> </h3>. Nagłówki naprawdę ogromne uzyskasz stosując <h1> </h1>, ale większość projektantów stron ich unika ze względu na dysproporcję wielkości w stosunku do zwykłego tekstu. Nagłówki <h4>, <h5> i <h6> także są rzadko wykorzystywane, ponieważ ich rozmiar jest bliski rozmiarowi tekstu, a w przypadku nagłówka <h6> nawet mniejszy (patrz rysunek 3.1).
Rys. 3.1.
Sześć poziomów nagłówka i zwykły tekst
W rozdziale 2 nauczyłeś się definiować podstawowy szkielet strony WWW. Skorzystamy teraz z niego i będziemy go rozbudowywać o nowe elementy. Wczytaj do edytora tekstu (Notatnika lub Webbera) plik HTML zawierający ten podstawowy kod. Zmień dowolnie tytuł strony (jak pamiętasz, tytuł zawarty jest między znacznikami <title></title>).
Aby zdefiniować nagłówek, wstaw między znacznikami <body> </body> parę znaczników nagłówka, na przykład <h2> </h2>, a między nimi wpisz tekst nagłówka (patrz wydruk 3.1). Zapisz plik i wyświetl stronę w przeglądarce. Ponieważ rozbudowywana teraz strona będzie już zapisywana pod tą samą nazwą (zapisując szkielet strony WWW zdefiniowaliśmy nazwę mojastrona.html – patrz rozdział 2), możesz nacisnąć w oknie przeglądarki przycisk Odśwież lub Reload, aby ukazała się uaktualniona wersja strony (patrz rysunek 3.2).
Wydruk 3.1. Definiujemy nagłówek
<html>
<head>
<title>Zwierzaki</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body>
<h1>Koty duże</h1> <!-- to jest nagłówek poziomu h1-->
<h2>Koty małe</h2> <!-- to jest nagłówek poziomu h2-->
</body>
</html>
Rys. 3.2.
W oknie przeglądarki pojawiły się zdefiniowane przed chwilą nagłówki
Nagłówek jest wyrównany do lewego marginesu – oznacza to, że jest dosunięty do lewej krawędzi strony. Wynika to z domyślnych ustawień przeglądarki. Możesz go umieścić na środku strony – nazywa się to wyśrodkowaniem, zagnieżdżając znaczniki nagłówka w obrębie znacznika <center>:
<center><h2>Twój nagłówek</h2></center>
lub dodając w znaczniku nagłówka atrybut align=”center”:
<h2 align=”center”>Twój nagłówek</h2>
Strona ma już tytuł i nagłówek, wprowadźmy więc jej zawartość tekstową. W wersji HTML 4 akapit jest definiowany za pomocą pary znaczników <p> </p>. Jak już wspominałam, brak znacznika zamykającego nie spowoduje katastrofy, ale tutaj będziemy go stosować (tym bardziej, że w specyfikacji XHTML wymagania są znacznie ostrzejsze).
Otwórz plik strony w oknie edytora. Przygotuj treść strony i wpisz tekst między znacznikami <p> </p>, w obrębie elementu body. Wydruk 3.2 pomoże Ci zorientować się o co chodzi. Zapisz stronę i zobacz jak się prezentuje w przeglądarce (patrz rysunek 3.3).
Wydruk 3.2. Akapity tekstu
<h1 align="center">Koty duże</h1> <!-- to jest nagłówek poziomu h1-->
<!-- to jest pierwszy akapit tekstu-->
<p>Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami. Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy sa zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p>
<h2 align="center">Koty małe</h2> <!-- to jest nagłówek poziomu h2-->
<!-- to jest drugi akapit tekstu-->
<p>Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata). Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p>
Rys. 3.3.
Strona została zaopatrzona w wycentrowane nagłówki oraz w tekst
Pamiętaj, że efekt wizualny jaki wywrze Twoja strona, zależy w dużym stopniu od ustawień na komputerach czytelników. Niektórzy mają duże monitory, inni małe, parametry kart grafiki różnią się, różne są w związku z tym ustawienia. Tekst będzie też przeformatowywany przy każdej zmianie rozmiarów okna przeglądarki. Twórcy strony WWW zależy na tym, aby tak sformatować zawartość strony, żeby zniosła bezpiecznie te pułapki. Nigdy jednak nie próbuj formatować tekstu w edytorze dodając puste wiersze lub spacje (od tej zasady jest pewien wyjątek – omawiam go w następnym punkcie). To nie ma sensu. Dodatkowe spacje zostaną i tak potraktowane jako jeden odstęp. Nie wstawiaj też pustych akapitów, a więc par: <p></p>, które nie zawierają żadnego tekstu.
W takim razie jak sobie poradzić, gdy wprowadzany automatycznie przed i za nagłówkami oraz akapitami wolny obszar nie wystarcza? Zastosuj znacznik <br>. Ten znacznik, o czym powinieneś pamiętać, nie ma znacznika zamykającego. Znacznik pozbawiony znacznika zamykającego nosi miano pustego.
Wydruk 3.3 pokazuje, w jaki sposób można dodać wolny obszar w samym akapicie. Efekt tej operacji przedstawiono na rysunku 3.4.
Wydruk 3.3. Dodatkowy wolny obszar – znacznik <br>
<p>Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.<br><br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p>
<p>Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata). <br><br>Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p>
Rys. 3.4.
Do akapitu wprowadzono dodatkowe wolne obszary
A jeśli mimo wszystko chcesz zachować wprowadzone do tekstu liczne spacje i łamania wierszy? Czy jest taka możliwość? Tak. Daje ją znacznik <pre>. Jest to doskonałe narzędzie do prezentacji dokumentów, które z natury swojej mają określoną strukturę, jak na przykład programy komputerowe.
Wydruk 3.5 pokazuje sposób użycia elementu pre – zwróć uwagę, że umieszczone w kodzie odstępy są zachowane na wyświetlanej w przeglądarce stronie (patrz rysunek 3.5).
Wydruk 3.4. Tekst preformatowany
<pre>
To jest tekst
preformatowany.
Zachowuje on zarówno odstępy
jak i łamania wierszy.
</pre>
<p>Znacznik pre jest doskonały do
prezentacji kodu programu:</p>
for i = 1 to 10
print i
next i
Rys. 3.5.
Element pre pozwala na zachowanie dodatkowych odstępów – porównaj wygląd wydruku i strony
Jeśli przyglądniesz się stronie z rysunku 3.4, zauważysz, że aż się prosi wyróżnić pewne fragmenty tekstu – na przykład nazwy łacińskie napisać kursywą, a nazwy polskie czcionką pogrubioną. Innymi słowy konieczne jest zastosowanie formatowania.
Formatowanie pozwala między innymi wprowadzić tekst pisany czcionką pogrubioną, kursywą oraz indeksy górne. W specyfikacji HTML 4 zalecane jest co prawda korzystanie przy formatowaniu z arkuszy stylu (poznasz je w rozdziale 4., Kaskadowe arkusze stylów), lecz w przypadku prostego formatowania można korzystać także ze znaczników stylów z wcześniejszych wersji języka HTML. Tabela 3.1 prezentuje listę takich znaczników wraz z opisem i przykładami.
Tabela 3.1. Style fizyczne i logiczne znaków
Znacznik
Opis
Przykład zastosowania
Style fizyczne
<b>
Pogrubienie
<p><b>Ten tekst jest pisany czcionką pogrubioną</b></p>
<i>
Kursywa
<p><i>Ten tekst jest pisany kursywą</i><p>
<tt>
Czcionka maszynowa (znaki o jednakowej szerokości)
<p>Wpisz <tt>copy nazwa_pliku lpt:</tt>, aby wydrukować plik</p>
<big>
Czcionka większa od reszty tekstu
<p>Moje oczy zrobiły się <big>WIELKIE</big></p>
<small>
Czcionka mniejsza od reszty tekstu
<p>Krasnoludki są tak <small>malutkie</small>, że ich nie widać</p>
<sub>
Indeks dolny
H<sub>2</sub>O
<sup>
Indeks górny
<sup>31</sup>P
Style logiczne
<em>
Emfaza, wyróżnienie tekstu (zazwyczaj kursywa)
<p>Lubię Cię <em>bardzo.</em></p>
<strong>
Wyraźne wyróżnienie (zazwyczaj pogrubienie)
<p>Lubię Cię <strong>ogromnie.</strong></p>
<code>
Wskazuje, że fragment tekstu to kod programu, który ma być wyświetlony czcionką o stałej szerokości
<p><code>For a=1 to 100 </code></p>
<samp>
Wskazuje, że jest to tekst przykładowy (podobnie jak <code>)
<p>Adres URL: <samp>http://www.microsoft.com.pl</samp></p>
...
kicaniec