Prezentacja tekstu

Prezentacja tekstu

Do elementów odpowiedzialnych za prezentację tekstu w języku XHTML i HTML możemy zaliczyć nagłówki, akapity, cytaty, indeksy górnej i dolne, znaczniki łamania wiersza, poziomie linie oraz znacznik <div></div>. Dalej przyjrzymy się konstrukcji każdego z tych elementów. Pamiętaj, że wszystkie one muszą się znajdować wewnątrz znacznika <body></body>.
Zgodnie ze specyfikacją XHTML oraz HTML 4.01 znaczniki opisane poniżej służą jedynie do nadania poszczególnym elementom określonej formy. Natomiast dokładne określenie struktury takiego elementu, np. koloru, wyrównania czy czcionki, zostało oddzielone od języka XHTML/HTML i weszło w skład kaskadowych arkuszy stylów.

Nagłówki

Specyfikacja języka XHTML i HTML przewiduje możliwość utworzenia nagłówków o sześciu zróżnicowanych rozmiarach. Oto ogólny przepis na nagłówek:

<hx>Nagłówek stopnia X</hx>

Za pomocą litery x oznaczyłem stopień nagłówka. W praktyce w to miejsce wstawiamy cyfry z przedziału od 1 do 6. Wbrew pozorom, znacznik <hl></hl> jest największym nagłówkiem, a <h6></h6> najmniejszym. Konkretny przykład nagłówka znajduje się poniżej.

<body>
<h1>Nagłówek stopnia pierwszego</h1>
<h2>Nagłówek stopnia drugiego</h2>
<h3>Nagłówek stopnia trzeciego</h3>
<h4>Nagłówek stopnia czwartego</h4>
<h5>Nagłówek stopnia piątego</h5>
<h6>Nagłówek stopnia szóstego</h6>
</body>

Akapity
Kolejnym sposobem prezentacji tekstu jest jego grupowanie w akapity. Tekst znajdujący się w akapicie automatycznie dopasowuje się do szerokości okna przeglądarki lub —jak kto woli — do rozdzielczości. Dlatego na jednym komputerze akapit może mieć trzy wiersze tekstu, a na innym wiersze mogą być zaledwie dwa.

Jest to rzecz jak najzupełniej normalna i, niestety, bardzo często przy źle zaprojektowanej stronie może prowadzić do powstawania problemu — popularnego „rozjeżdżania się” zawartości okna przeglądarki.

Za definicję akapitu odpowiada znacznik <p></p>, który zawsze występuje z elementem domykającym.

<body>
<p>Przykład prostego akapitu.</p>
</body>

Strona może zawierać dowolną liczbę akapitów, a każdy z nich jest oddzielony od pozostałych pustym wierszem. Przerwa ta jest domyślnie wstawiana przez przeglądarki, a do jej kontroli musisz użyć kaskadowych arkuszy stylów.

Weź pod uwagę, że teoretyczna możliwość stworzenia nieograniczonej liczby akapitów na stronie WWW nie może być nadużywana. W praktyce, osoba czytająca zawartość strony WWW, przegląda jedynie zawartość pierwszych dwóch ekranów monitora. Dlatego w przypadku publikacji sporej ilości tekstu najlepiej podzielić go na kilka części, dzięki temu będzie on znacznie łatwiej przyswajalny przez czytelnika.

Pamiętaj, że wszystkie znaczniki można ze sobą łączyć w celu uzyskania ciekawie wyglądającego dokumentu.

W praktyce łączenie akapitów z nagłówkami może mieć następującą postać:

<body>
<h3>Nagłówek stopnia trzeciego</h3>
<p>Treść akapitu</p>
<h3>Nagłówek stopnia trzeciego</h3>
<p>Treść akapitu</p>
</body>

Cytaty

Jeżeli chcesz zacytować większy fragment tekstu w kodzie strony, musisz skorzystać ze znacznika <blockquote></blockquote>. Konstrukcja tego elementu jest następująca:

<blockquote>
Vestibulum ante ipsum primis in faucibus orci luctus et ul tri ces posuere cubilia Curae; Morbi blandit. Etiam mattis pede at lacus.
</blockquote>

Jak zapewne wiesz, cytować możemy również wewnątrz bloku tekstu, a w celu skorzystania z tej możliwości na stronie WWW musimy sięgnąć po znacznik <q></q>.

<p>
Autor książki napisał: <q>Specyfikacja HTML 4.01 oddziela formatowanie elementu od struktury języka, oddając go w ręce kaskadowych arkuszy stylów</q>, ale nie miał do końca racji, gdyż uważam, że…
</p>

Tekst cytowany za pomocą znacznika <blockquote></blockquote> jest nieznacznie wcięty względem pozostałych akapitów na stronie. Natomiast element cytowany we wnętrzu bloku tekstu za pomocą znaczników <q></q> został ujęty w cudzysłów.

Indeks górny i dolny

Korzystając z kolejnych znaczników języka XHTML i HTML, możemy wymusić prezentację fragmentu tekstu jako indeksu górnego lub dolnego. Niezbędne znaczniki to <sub></sub> oraz <sup></sup>.

Indeks górny E=mc2
<p>E=mc<sup>2</sup></p>

Indeks dolny E=mc2
<p>E=mc<sub>2</sub></p>