Rozdział 6. u Więcej o formatowaniu tekstu w HTML-u 155
W dwóch poprzednich rozdziałach zapoznałeś się z podstawami języka HTML, czyli zasadniczymi elementami strony oraz hiperpołączeniami. Wyposażony w tę wiedzę możesz przystąpić do lektury rozdziału 6, w którym dowiesz się, co jeszcze HTML ma do zaoferowania w kwestii układu strony i formatowania tekstu. Są tu opisane pozostałe znaczniki, które potrzebne są do konstruowania stron WWW, zaczynając od standardu HTML 2.0, na wersji 4.0 kończąc, jak również niektóre znaczniki specyficzne dla konkretnych przeglądarek.
Tak więc w poniższym rozdziale nauczysz się, jak:
n określać wygląd czcionki (pogrubiona, kursywa, czcionka maszynowa),
n wstawiać do tekstu znaki specjalne (znak praw autorskich, litery akcentowane itp.),
n tworzyć tekst preformatowany (z zachowaniem spacji i tabulacji),
n wyrównywać tekst do lewej, prawej i środkować go,
n zmieniać rodzaj i rozmiar czcionki,
n tworzyć inne elementy stron w HTML-u, jak, na przykład, linie poziome, adresy i cytaty.
Poza tym dowiesz się, czym różni się standard HTML-a od jego rozszerzeń i kiedy należy korzystać z jednego, a kiedy z drugiego. Po przeczytaniu rozdziału utworzysz przykładową stronę, która będzie zawierała większość z poznanych do tej pory znaczników.
Liczba znaczników i wszelkich opcji, przedstawionych w tym rozdziale, jest naprawdę duża, możesz więc poczuć się nieco przytłoczony nadmiarem informacji. W żadnym razie nie próbuj tego wszystkiego zapamiętać! Postaraj się tylko zorientować, jakie możliwości daje HTML, a do szczegółów zawsze będziesz mógł powrócić później.
Dotychczas poznane znaczniki HTML, które dotyczyły akapitów, list i nagłówków, odnosiły się do pewnego fragmentu tekstu traktowanego jako całość, powodowały zmianę atrybutów czcionki, odległości pomiędzy liniami bądź wstawienie dodatkowego znaku (listy wypunktowane). Style znaków to znaczniki funkcjonujące inaczej — służą do zmiany wyglądu pojedynczych wyrazów czy nawet znaków, będących częściami składowymi innych elementów HTML-a.
Do zmiany wyglądu zbioru znaków, znajdujących się w tekście, służą dwa rodzaje znaczników: style logiczne i fizyczne.
Znaczniki z grupy stylów logicznych określają, w jaki sposób dany fragment tekstu ma zostać w dokumencie wykorzystany, a nie wyświetlony. Są one w zasadzie bardzo podobne do znaczników akapitu czy nagłówków, nie wskazują bowiem konkretnie, w jaki sposób tekst ma zostać sformatowany, ale jaka jest jego rola w dokumencie. Style logiczne to, na przykład, definicje, fragmenty kodu bądź wyróżnione słowa.
Znaczniki stylów logicznych określają rolę tekstu w dokumencie, a nie sposób jego formatowania na ekranie.
W wypadku stylów logicznych rolę określenia tego, w jaki sposób tekst będzie wyświetlony na ekranie bierze na siebie przeglądarka. Nie ma żadnej gwarancji, że tekst objęty tymi znacznikami zawsze będzie wyświetlony kursywą czy pogrubiony (dlatego też nie powinieneś bezgranicznie im ufać).
W HTML-u 4.0 stworzony został mechanizm poszerzający możliwości stylów fizycznych i logicznych — tzw. Arkusze stylów. Za pomocą owych arkuszy autor strony będzie mógł dokładniej określić sposób wyświetlania (np. rozmiar czy rodzaj czcionki) poszczególnych elementów dokumentu lub nawet całych grup elementów (na przykład, list wypunktowanych). Szczegółowy opis arkuszy stylów znajdziesz w rozdziałach 31. i 32.
Każdy z omawianych w tym punkcie znaczników składa się ze znacznika początkowego oraz końcowego i ma wpływ na tekst, znajdujący się pomiędzy nimi. Oto opis ośmiu znaczników stylów logicznych, zawartych w standardzie języka HTML.
<EM>
Znacznik ten mówi, że tekst powinien być w jakiś sposób wyróżniony, czyli sformatowany inaczej niż reszta dokumentu. W przeglądarkach graficznych zwykle do tego celu wykorzystywana jest kursywa. Oto przykład:
<p>Mrówkojad jest <em>najdziwniej</em> wyglądającym zwierzęciem,nieprawdaż?</p>
<STRONG>
Znaki objęte tym znacznikiem powinny być wyróżnione jeszcze wyraźniej, niż ma to miejsce w wypadku <EM>. Większość przeglądarek wykorzystuje do tego celu pogrubienie:
<p>Skręć <strong>w lewo</strong> przy <strong>stacji benzynowej</strong></p>
<CODE>
Tekst objęty taką parą znaczników to fragment kodu (na przykład, programu lub po prostu HTML-a) i powinien być wyświetlony czcionką o stałej szerokości znaku (w graficznych przeglądarkach jest to Courier):
<P><CODE>#include "trans.h" </CODE></P>
<SAMP>
Ten znacznik oznacza tekst przykładowy, który jest wyświetlany bardzo podobnie do <CODE>:
<P>URL tej strony, to SAMP>http://www.cern.ch/</SAMP> </P>
<KBD>
W tym wypadku chodzi o tekst, który powinien być wpisany przez użytkownika z klawiatury (stąd nazwa znacznika, która jest skrótem od ang. keyboard — klawiatura):
<P>Wprowadź następującą komendę:<KBD>find . –name "prune" -print</KBD></P>
<VAR>
Ten znacznik wskazuje nazwę zmiennej lub innego elementu, który powinien zostać zastąpiony przez jakąś wartość. Z reguły jest wyświetlany kursywą lub podkreślony:
<P><CODE>chown </CODE><VAR>twoje_imie nazwa_pliku</VAR></P>
<DFN>
Znacznik definicji. Jest on wykorzystywany do oznaczania słowa, które będzie lub właśnie zostało zdefiniowane:
<P>Style używane jak wyżej nazywamy<DFN>stylami znaków</DFN>.</P>
<CITE>
Za pomocą tego znacznika oznacza się krótkie cytaty, na przykład:
<P>Oberżyna jest znana ze swych właściwości do wywoływania ostrych mdłości<CITE> (Lemay, 1994)</CITE></P>
Wszystkie wymienione znaczniki, z wyjątkiem <DFN>, są zdefiniowane w standardzie HTML 2.0. <DFN> został dodany w wersji 3.2.
W HTML-u 4.0 wprowadzono dwa kolejne znaczniki stylów logicznych. Znaczniki te są najbardziej przydatne w przeglądarkach dźwiękowych (czyli takich, które prezentują strony WWW w formie dźwiękowej). Przeglądarki graficzne, takie jak Internet Explorer oraz Netscape Navigator nie będą wyświetlały tych znaczników w inny sposób. Jednak, gdy przeglądarka dźwiękowa przeanalizuje tekst umieszczony wewnątrz jednego z tych dwóch znaczników, każda jego litera zostanie przeczytana indywidualnie, na przykład, słowo LIS zostanie odczytane nie w normalny sposób, lecz jako L-I-S.
Oba te elementy wykorzystują oba znaczniki — otwierający i zamykający — i mają wpływ na tekst umieszczony wewnątrz nich. Wymieniam je poniżej.
<ABBR>
Ten znacznik oznacza skrót słowa; oto przykład jego zastosowania:
<p>Zastosuj standardowe skróty oznaczające nazwy stanów(takie jak <abbr>CA</abbr> oznaczający Kalifornię).</p>
<ACRONYM>
Podobny do znacznika <ABBR>, oznacza słowo utworzone z pierwszych liter kilku innych słów, na przykład:
<p>Największym polskim ubezpieczycielem jest<acronym>PZU</acronym> (Powszechny Zakład Ubezpieczeń).</p>
Zapamiętałeś już wszystkie znaczniki? Jeżeli tak, to bardzo dobrze, bowiem na końcu rozdziału czeka Cię krótki sprawdzian. Poniższy fragment pokazuje, jak można praktycznie wykorzystać znaczniki stylów logicznych na stronie WWW. Rysunek 6.1 pokazuje, jak wygląda rezultat wyświetlony w przeglądarce Internet Explorer.
<p>Mrówkojad jest <em>najdziwniej</em> wyglądającym zwierzęciem, nieprawdaż?</p>
<p>Skręć <strong>w prawo</strong> przy <strong>Wesołym Sklepie Dee Dee</strong></p>
<p><code>#include "trans.h"</code></p>
<p>URL tej strony to: <samp>http://www.cern.ch/</samp></p>
<p>Wpisz następujące polecenie: <kbd>find . -name "prune" -print</kbd></p>
<p><code>chown </code><var>nazwa_użytkownika</var></p>
<p>Style których nazwy odpowiadają sposobowi ich użycia są określane jako <dfn>style logiczne</dfn>.</p>
<p>Oberżyny mogą u niektórych osób powodować mdłości
<cite> (Lemay, 1994)</cite>.</p>
<p>Zastosuj standardowe skróty oznaczające nazwy stanów (takie jak <abbr>CA</abbr> oznaczający Kalifornię).</p>
<p>Największym polskim ubezpieczycielem jest <acronym>PZU</acronym> (Powszechny Zakład Ubezpieczeń).</p>
Rysunek 6.1.
Wyniki wyświetlone w przeglądarce Internet Explorer
Obok stylów logicznych, opisanych w poprzednim punkcie, funkcjonuje także inna grupa znaczników, które pozwalają na ściśle określoną zmianę wyglądu danego fragmentu tekstu (pogrubienie, kursywa, jednakowa szerokość liter). Znaczniki te noszą nazwę stylów fizycznych.
Style fizyczne określają sposób, w jaki tekst powinien zostać sformatowany (pogrubienie, kursywa itp.).
Podobnie jak znaczniki stylów logicznych, tak i w tym przypadku każdy znacznik ma swój początek i koniec. W standardzie HTML 2.0 zdefiniowano trzy znaczniki stylów fizycznych:
<B>
Pogrubienie,
<I>
Kursywa,
<TT>
Czcionka maszynowa (znaki o jednakowej szerokości).
W HTML-u 3.2 pojawiły się kolejne:
<U>
Podkreślenie (zarzucony w wersji 4.0),
<S>
Przekreślenie (zarzucony w wersji 4.0),
<BIG>
Czcionka większa od reszty tekstu,
<SMALL>
Czcionka mniejsza od reszty tekstu,
<SUB>
indeks dolny,
<SUP>
indeks górny.
Korzystając z przedstawionych znaczników, szczególnie z tych dostępnych dopiero od wersji HTML 3.2, musisz być świadom, że nie wszystkie przeglądarki będą potrafiły sobie z nimi poradzić. Zastanów się, czy nie można sformatować tekstu w inny sposób, czy też w ogóle pominąć formatowanie. Wprawdzie najnowsze wersje przeglądarek, jak, na przykład, Netscape Navigator czy Internet Explorer radzą sobie w takich sytuacjach doskonale, ale całe mnóstwo użytkowników korzysta jeszcze ze starszych wersji, które mogą zachować się w różny sposób. A już na pewno z częścią tych znaczników nie poradzi sobie przeglądarka tekstowa, taka jak Lynx, bowiem w tym trybie wyświetlenie pewnych rodzajów zapisu jest po prostu niemożliwe.
W takiej sytuacji Lynx będzie próbował obejść problem i w jakiś sposób wyróżni zaznaczony tekst, ale może to prowadzić do nieoczekiwanych rezultatów.
Znaczniki fizyczne mogą być w sobie wzajemnie zagnieżdżane, tak że dany fragment tekstu może być, na przykład, jednocześnie pogrubiony i pochylony.
<B><I>Ten tekst jest pogrubiony i pochylony</I></B>
Ale, niestety, końcowy rezultat powyższego zapisu jest zależny od przeglądarki. Tekst niekoniecznie będzie zarówno pogrubiony, jak i pochylony. Może się zdarzyć, że uwzględniony zostanie tylko jeden z tych dwóch sposobów formatowania.
Poniższy przykład pokazuje sposób wykorzystania znaczników stylów fizycznych, a rysunek 6.2 przedstawia rezultat w przeglądarce Internet Explorer.
<p>W <i>Piekle</i> Dantego, Złe Doły były ósmym kręgiem, a przebywali tam złośliwcy i oszuści.</p>
<p>Wszystkie zgłoszenia należy przesłać do <b>26 sierpnia 1996</b>.</p>
<p>Wpisz <tt>lpr -Pbirch myfile.txt</tt>, by wydrukować ten plik.</p>
<p>Wpisz nazwisko w zaznaczonym miejscu <u>Podpisz tutaj</u>:</p>
<p>Ludzie noszący pomarańczowe podkoszulki i zwykłe
kalesony <s>nie mają gustu</s> są wyzywający.</p>
<p>Maty podłogowe dają <big>WIELKIE</big> oszczędności!</p>
<p>Wtedy, z rogu pokoju dobiegł do niego <small>cichy głos</small>.</p>
<p>Na dzisiejszej giełdzie wartość akcji Consolidated Orange Trucking wzrosła o <sup>1</sup>/<sub>4</sub> punktu.</p>
Rysunek 6.2.
W większości przypadków tekst z pliku HTML jest formatowany przez przeglądarkę wyłącznie na podstawie znajdujących się w nim znaczników. Jak już wspomniałam w rozdziale 3. — „Wprowadzenie do HTML”, wszelkie dodatkowe znaki spacji, tabulacji czy nowej linii są ignorowane.
Jedynym wyjątkiem od tej reguły jest znacznik tekstu preformatowanego <PRE>. Każda spacja, znajdująca się pomiędzy znacznikami <PRE> i </PRE>, zostanie wyświetlona. Za pomocą tej pary znaczników możesz formatować tekst w dowolny sposób, mając przy tym pewność, że właśnie tak zostanie on pokazany przez przeglądarkę.
Chwyt polega na tym, że tekst preformatowany jest wyświetlany (przynajmniej przez przeglądarki graficzne) za pomocą czcionki o stałej szerokości znaku (Courier). Tego typu formatowanie nadaje się doskonale do prezentacji fragmentów kodu programu, gdy chcemy zachować wszystkie wcięcia i komentarze. Ponieważ pomiędzy znacznikami </PRE> i </PRE> mogą znajdować się również spacje, można ich z powodzeniem używać do tworzenia prostych tabel, choć tabele wyświetlane tego typu czcionką mogą nie wyglądać zbyt atrakcyjnie (prawdziwe tabele nauczysz się tworzyć w rozdziale 11. — „Tabele”). Oto przykład takiej tabeli i rezultat w przeglądarce Internet Explorer (rysunek 6.3).
<PRE>
Średnica Odległość Obrót Obrót
(mile) od Słońca wokół wokół
(miliony orbity osi
mil)
-----------------------------------------------------------
Merkury 3100 36 88 dni 59 dni
Wenus 7700 67 225 dni 244 dni
Ziemia 7920 93 365 dni 24 godz.
Mars 4200 141 687 dni 24 godz. 24 min.
Jupiter 88640 483 11.9 lat 9 godz. 50 min.
Saturn 74500 886 29.5 lat 10 godz. 39 min.
Uran 32000 1782 84 lat 23 godz.
Neptun 31000 2793 165 lat 15 godz. 48 min
Pluton 1500 3670 248 lat 6 dni 7 godz.
</PRE>
Rysunek 6.3.
Tabela, utworzona za pomocą znacznika <PRE>
Tworząc tekst, który będzie preformatowany, możesz używać stylów znaków oraz znaczników połączeń, nie możesz natomiast korzystać z nagłówków i znaczników akapitu. Linie nie powinny być dłuższe niż 60 znaków, bowiem okna pewnych przeglądarek mogą okazać się zbyt „wąskie”, żeby wyświetlić całość tekstu. Tekst preformatowany nie jest w żaden sposób dopasowywany do szerokości okna, tak więc należy być bardzo ostrożnym i uchronić czytelników przed przewijaniem tekstu, co jest bardzo frustrującą czynnością.
Równie ostrożnie należy korzystać z tabulacji. Liczba znaków tabulacji jest różna dla różnych przeglądarek — w jednym przypadku będą to cztery znaki, w innym osiem. Jeżeli fragment tekstu preformatowanego, który tworzysz, jest uzależniony od liczby znaków tabulacji, spróbuj zastąpić je spacjami, tak będzie bezpieczniej.
...
djmathew18