Rozdział 6.
Więcej o formatowaniu tekstu w HTML-u

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:

• określać wygląd czcionki (pogrubiona, kursywa, czcionka maszynowa),

• wstawiać do tekstu znaki specjalne (znak praw autorskich, litery akcentowane itp.),

• tworzyć tekst preformatowany (z zachowaniem spacji i tabulacji),

• wyrównywać tekst do lewej, prawej i środkować go,

• zmieniać rodzaj i rozmiar czcionki,

• 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.

Style znaków

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.

Style logiczne

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

Style fizyczne

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. Wyniki wyświetlone w przeglądarce Internet Explorer

Tekst preformatowany

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 roz­dziale 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.

Znacznik <PRE> nadaje się doskonale do wstawiania fragmentów tekstu, które zostały wcześniej utworzone i sformatowane w jakimś edytorze tekstowym, jak, na przykład, wiadomości poczty elektronicznej czy grup dyskusyjnych. Wystarczy tylko umieścić znaczniki <PRE> oraz </PRE> na początku i na końcu tekstu, a taki plik stanie się elementem strony HTML bez potrzeby żmudnej konwersji i wstawiania odpowiednich znaczników formatujących, jak w poniższym przykładzie:

<pre>

Do: [e-mail]

From: [e-mail]

Temat: Opowieści o przeprowadzce prosto z piekła

Data: piątek, 26 sierpień 1994 14:13:38 +08000

Cały dzień spędziłem kierując przez telefon pracą ekipy przeprowadzkowej z Północnej Kalifornii, ustalając co mają zabrać, co zostawić, jak to przy przeprowadzce.

Okazuje się jednak, że gdy już się tam dodzwonisz, to najpierw przez nieskończenie długi czas słyszysz w słuchawce jakąś miłą melodyjkę, a gdy w końcu odzywa się ktoś z działu obsługi klienta, nie dość że jest opryskliwy, to jeszcze słabo go słychać. Ostatecznie, gdy się bardzo starasz, zostajesz z łaską obsłużony.

</PRE>

Kreatywny sposób wykorzystania znacznika <PRE> pozwala na tworzenie „rysunków ASCII” na stronach WWW. Kolejny przykład pokazuje rysunek krowy, wykonany za pomocą kodów ASCII i wyświetlony w przeglądarce Internet Explorer (patrz rysunek 6.4).

	<PRE> ( ) Muu (oo) \/-------\ || | \ ||---W|| * || || </PRE>
Rysunek 6.4. Wyniki wyświetlone w przeglądarce Internet Explorer

Linie poziome

Znacznik <HR> nie posiada znacznika zamykającego, ani też nie jest w żaden sposób związany z tekstem, jego zadaniem jest wstawienie na stronie poziomej linii. Jest to doskonała metoda wizualnego oddzielania od siebie fragmentów strony WWW, na przykład, zasadniczego tekstu od elementów listy itp.

W HTML nie jest konieczne zamykanie znacznika <HR>. Aby przygotować się do używania składni XHTML oraz jednocześnie zachować kompatybilność z przeglądarkami HTML, na jego końcu dodaj znak spacji i ukośnik: <hr /> Jeśli linia pozioma ma przypisane jakieś atrybuty, ukośnik nadal występuje na końcu znacznika, tak jak w poniższym przykładzie: <hr size="2" /> <hr width="75%" /> <hr align="center" size="4" width="200" />

W przykładzie przedstawionym poniżej zademonstrowano linię w połączeniu z listą utworzoną według standardu XHTML 1.0. Rysunek 6.5 przedstawia rezultaty wyświetlone w przeglądarce Internet Explorer.

	<hr /> <h2>Do zrobienia w piątek</h2> <ul> <li>Iść do pralni</li> <li>Wysłać Fedexowi obrazy</li> <li>Obiad z Moli</li> <li>Przeczytać Email</li> <li>Zainstalować Ethernet</li> </ul> <hr />
Rysunek 6.5. Wyniki wyświetlone w przeglądarce Internet Explorer

Atrybuty znacznika <HR>

Znacznik <HR> występuje w HTML-u 2.0 bez znacznika zamykającego, jak również bez żadnych atrybutów, jednakże w wersji 3.2 poszerzono nieco możliwości kontroli wyglądu poziomej linii, dodając kilka nowych atrybutów. W specyfikacji HTML 4.0 wszystkie te atrybuty zostały uznane za przestarzałe i należy je zastępować arkuszami stylów.

Pomimo że atrybuty SIZE, WIDTH i ALIGN nadal są używane w HTML 4.0, zamiast nich zalecane jest posługiwanie się arkuszami stylów.

Atrybut SIZE określa grubość linii, podawaną w pikselach. Standardową wartością jest 2, i jest to również najmniejsza możliwa grubość. Rysunek 6.6 przedstawia linie o różnych grubościach.

	<h2>2 piksele</h2> <hr size="2" /> <h2>4 piksele</h2> <hr size="4" /> <h2>8 pikseli</h2> <hr size="8" /> <h2>16 pikseli</h2> <hr size="16" />
Rysunek 6.6. Linie poziome o różnych grubościach

Atrybut WIDTH określa długość linii w poziomie. Może ona zostać podana w pikselach, ale też jako określony procent aktualnej szerokości ekranu (30 procent, 50 procent), co oznacza, że jej faktyczna długość będzie się zmieniała wraz ze zmianą rozmiarów okna. Przykłady linii o różnych długościach pokazano na rysunek 6.7.

	<h2>100%</h2> <hr width="100%" /> <h2>75%</h2> <hr width="75%" /> <h2>50%</h2> <hr width="50%" /> <h2>25%</h2> <hr width="25%" /> <h2>10%</h2> <hr width="10%" />
Rysunek 6.7. Linie poziome o różnych długościach

Jeżeli linia nie będzie wypełniała całej szerokości ekranu, można określić jej położenie, służy do tego atrybut ALIGN. Można więc dosunąć linię do lewej strony ekranu (ALIGN= "left"), do prawej (ALIGN="right") lub też ją wyśrodkować (ALIGN="center"). Standardowo linie poziome są wyśrodkowane.

Projektanci stron WWW często wykorzystują kombinacje linii poziomych o różnych atrybutach do tworzenia ciekawych wzorów. Poniższy przykład przedstawia wzór utworzony z linii poziomych, jego wygląd pokazany został na rysunku 6.8.

	<hr align="center" size="4" width="200" /> <hr align="center" size="4" width="300" /> <hr align="center" size="4" width="400" /> <h1 align="center">Wypożyczalnia kaset wideo</h1> <hr align="center" size="4" width="400" /> <hr align="center" size="4" width="300" /> <hr align="center" size="4" width="200" /> <h2 align="center">Prezentuje</h2>
Rysunek 6.8. Wzór utworzony za pomocą linii poziomych

Ostatnim atrybutem jest NOSHADE, który powoduje, że linia w większości przeglądarek jest rysowana bez cienia, który nadaje jej trójwymiarowy wygląd. Przykład pokazano na rysunku 6.9.

	<hr align="center" size="4" width="200" noshade="noshade" /> <hr align="center" size="4" width="300" noshade="noshade" /> <hr align="center" size="4" width="400" noshade="noshade" /> <h1 align="center">Wypożyczalnia kaset wideo</h1> <hr align="center" size="4" width="400" noshade="noshade" /> <hr align="center" size="4" width="300" noshade="noshade" /> <hr align="center" size="4" width="200" noshade="noshade" /> <h2 align="center">Prezentuje</h2>
Rysunek 6.9. Linie poziome bez cienia
	W specyfikacji języka HTML 4.0 oraz wcześniejszych wersjach HTML-a nie trzeba podawać wartości atrybutu NOSHADE. Atrybut ten jest zatem wykorzystywany w następujący sposób: <hr align="center" size="4" width="200" noshade> Jednak według specyfikacji XHTML 1.0 wartość ta musi zostać podana. Przedstawiony poniżej przykład prezentuje, w jaki sposób należy używać atrybut NOSHADE znacznika <HR> według proponowanej specyfikacji XHTML 1.0.

Łamanie linii

Znacznik <BR> powoduje przełamanie linii, co oznacza, że tekst następujący po nim jest wyświetlany przez przeglądarkę od nowej linii, czyli od lewego marginesu, przy czym jest to margines odpowiedni dla elementu strony, w którym wystąpił <BR>. Znacznik ten może bowiem występować w obrębie innych elementów, czyli akapitów lub list, ale nie powoduje on żadnych dodatkowych zmian w wyglądzie tych części tekstu. Nie wstawia pustych linii przed lub po sobie, nie ma żadnego wpływu na rozmiar czy rodzaj czcionki — jedyną jego funkcją jest rozpoczęcie wyświetlania tekstu od nowej linii.

Podobnie jak w przypadku znacznika <HR>, nie jest konieczne zamykanie znacznika <BR>. Aby przygotować się do używania składni XHTML oraz jednocześnie zachować kompatybilność z przeglądarkami HTML, na jego końcu dodaj znak spacji i ukośnik, tak jak pokazano w poniższym przykładzie: Jak gdyby włosem jasnym; a lewego czoło<br /> Najeżone łozami, wierzbami czubate;<br /> Oba stawy ubrane w zieloności szatę.</p>

Poniższy przykład to akapit, w którym każda linia zakończona jest znacznikiem <BR>. Rysunek 6.10 przedstawia rezultat w przeglądarce Internet Explorer.

	<p>Zaiste, okolica była malownicza!<br /> Dwa stawy pochyliły ku sobie oblicza<br /> Jako para kochanków; prawy staw miał wody<br /> Gładkie i czyste jako dziewicze jagody;<br /> Lewy, ciemniejszy nieco, jako twarz młodziana<br /> Smagława i już męskim puchem osypana.<br /> Prawy złocistym piaskiem połyskał się wkoło<br /> Jak gdyby włosem jasnym; a lewego czoło<br /> Najeżone łozami, wierzbami czubate;<br /> Oba stawy ubrane w zieloności szatę.</p>
Rysunek 6.10. Kod wyświetlony w przeglądarce Internet Explorer
	Ze znacznikiem <BR> związany jest atrybut CLEAR. Używany jest on w przypadku obrazów, które są otoczone tekstem. Więcej o tym atrybucie przeczytasz w rozdziale 7. — „Wykorzystywanie obrazów, kolorów i tła”.

Adresy

Para znaczników <ADDRESS>…</ADDRESS> służy do wstawiania do stron WWW czegoś w rodzaju podpisu. Wstawia się go zwykle na dole strony, a obejmuje, takie informacje jak: nazwisko twórcy, sposób kontaktu z nim, datę powstania strony, informacje o prawach autorskich itp. Adresy są zwykle poprzedzane linią poziomą (<HR>), a poszczególne linie oddzielane są od siebie za pomocą znacznika <BR>.

<hr />

<address>

Laura Lemay [e-mail] <br />

Serwis Laury Lemay, Sp. z o.o. <br />

ostatnia korekta - 30 kwiecień 1997 <br />

Copyright Laura Lemay 1994 wszelkie prawa zastrzeżone <br />

Niestosowanie się do przepisów będzie karane. Nie drażnić konduktora.

</address>

Gdyby nie adres czy też jakikolwiek inny sposób „podpisywania” stron WWW, odnalezienie ich autorów byłoby prawie niemożliwe. Jeżeli będziesz umieszczał swoje dane za pomocą znacznika <ADDRESS> na każdej stronie, będziesz miał pewność, że każdy, kto zechce się z Tobą skontaktować, będzie mógł to swobodnie uczynić.

Poniższy prosty przykład pokazuje, jak tekst oznaczony jako adres jest przedstawiany w przeglądarce Internet Explorer (rysunek 6.11).

	<hr /> <address> Laura Lemay [e-mail] <br /> Serwis Laury Lemay, Sp. z o.o. <br /> ostatnia korekta - 30 kwiecień 1997 <br /> Copyright Laura Lemay 1994 wszelkie prawa zastrzeżone <br /> Niestosowanie się do przepisów będzie karane. Nie drażnić konduktora. </address>
Rysunek 6.11. Internet Explorer

Cytaty

Znacznik <BLOCKQUOTE> służy do oznaczania cytatów (w przeciwieństwie do <CITE>, który oznaczał cytaty krótsze, <BLOCKQUOTE> powinien być stosowany tylko do dłuższych fragmentów, które nie są zagnieżdżone w akapitach). Cytaty są z reguły wyróżnione za pomocą wcięć. Tekst, który posłużył mi za przykład przy łamaniu linii, wyglądałby dużo lepiej jako cytat typu <BLOCKQUOTE> niż jako zwykły akapit. Oto inny przykład:

<blockquote> "Jeżeli ktoś stara się dorównać chlubnym imieniem Bolesławowi, niech pracuje nad tym, by swoje życie upodobnić do jego chwalebnego żywota. Wtedy będzie zasługiwała na pochwałę dzielność czynów rycerskich, gdy życie rycerza przyozdobi się chwalebnymi obyczajami. Taką to była pamiętna sława wielkiego Bolesława, i taką cnotę należy głosić ku pamięci potomnych jako wzór do naśladowania" -- Gall Anonim </blockquote>

Podobnie jak w akapitach, także linie w obrębie znaczników <BLOCKQUOTE> mogą być łamane za pomocą <BR>. Poniższy przykład pokazuje, jak taki tekst może wyglądać w przeglądarce Internet Explorer (rysunek 6.12).

	<blockquote> A co wiedzieć, gdzie chodzisz, moja dziewko śliczna, <br /> A mnie tymczasem trapi teskność ustawiczna;<br /> Jakoby słońce zaszło, kiedy nie masz ciebie,<br /> A z tobą i w pół nocy zda się dzień na niebie.<br /> --Jan Kochanowski </blockquote>
Rysunek 6.12. Przykład wyświetlony w przeglądarce Internet Explorer

Znaki specjalne

Jak już niejednokrotnie wspominałam, pliki HTML to tekst ASCII, który nie powinien zawierać żadnych znaków formatujących. Tak naprawdę, jedynymi znakami, które powinny znajdować się w pliku HTML, są te bezpośrednio wypisane na klawiaturze. Jeżeli do uzyskania jakiegoś znaku potrzebna jest kombinacja klawiszy inna niż zwykłe naciśnięcie SHIFT, oznacza to, że plik HTML nie jest odpowiednim miejscem dla niego. Ten zakaz obejmuje znaki często używane w tekstach, takie jak znak dash (^) czy też pojedynczy cudzysłów.

„Chwila, chwila — możesz powiedzieć — przecież mogę wpisać z klawiatury za pomocą odpowiedniej kombinacji klawiszy dużą kropkę czy też polskie litery, które są potem doskonale widoczne po przetworzeniu pliku przez przeglądarkę, więc w czym problem?”

Problem polega na tym, że wewnętrzne tłumaczenie zestawu znaków, które wykonuje komputer (i które pozwala na to, aby znaki te były widoczne na ekranie edytora i przeglądarki) nie zawsze (tzn. nie na wszystkich komputerach) jest wykonywane tak samo. Jakiś czytelnik, znajdujący się gdzieś w Internecie po odczytaniu Twojej strony, zamiast owych znaków, może zobaczyć coś zupełnie innego, czasem kompletną bzdurę. Może też zdarzyć się, że ten dziwny znak zostanie zgubiony w trakcie transportu pliku przez sieć i w efekcie nie będzie go wcale.

Mówiąc żargonem technicznym, pliki HTML muszą zawierać znaki ze standardowego (7 bitowego) zbioru ASCII, nie mogą natomiast zawierać elementów zestawu rozszerzonego (8 bitowego), bowiem definicje dodatkowych znaków różnią się na różnych komputerach (a przede wszystkim w różnych krajach). Przeglądarki HTML odczytują kody z górnego zakresu zbioru ASCII w formacie ISO-Latin-1 (ISO-8859-1), który jest podzbiorem ASCII.

Ale co można na to poradzić? HTML dostarcza odpowiednie rozwiązanie. W standardzie języka zdefiniowano zestaw kodów, zwanych kodami znaków, które zastępują najczęściej używane znaki. Gdy przeglądarka napotka taki kod, wyświetli go na pewno w sposób odpowiedni dla danej platformy.

Kody znaków specjalnych

Kody znaków dzielą się na nazwane i numerowane.

Kody nazwane rozpoczynają się od znaku &, a kończą średnikiem (;). Pomiędzy tymi symbolami znajduje się nazwa znaku (a raczej jej skrócona wersja, gdzie oczywiście skrót pochodzi od angielskiej nazwy danego znaku). Nazwy te, w przeciwieństwie do pozostałych znaczników HTML są zależne od wielkości liter, tak więc należy wpisywać je bardzo uważnie. Kody nazwane wyglądają mniej więcej tak:

&agrave;

&quot;

&laquo;

&copy;

Kody numerowane również rozpoczynają się od znaku & i kończą się średnikiem, ale zamiast nazwy zawierają znak # (hash) i liczbę. Liczba odpowiada numerowi znaku w zbiorze ISO-Latin-1 (ISO-8859-1). Każdy znak, dla którego istnieje kod nazwany, posiada swój odpowiadający sobie kod numerowany. Oto przykłady kodów numerowanych:

&#130;

&#245;

Wstawianie kodów znaków do tekstu w HTML-u polega na tym, że umieszcza się je dokładnie w tym samym miejscu, w którym powinien znaleźć się żądany symbol.

By więc poprawnie napisać słowo resume w pliku HTML, należy wstawić:

r&eacute;sum&eacute;

lub

r&#233;sm&#233

W dodatku B „Krótki opis języka HTML 4.0” znajduje się pełna lista kodów nazwanych. Jeżeli zajdzie taka potrzeba, zawsze możesz z niej skorzystać.

HTML korzysta z zestawu znaków ISO-Latin-1, co pozwala wyświetlić większość akcentowanych liter na większości platform, ma to jednak również swoje ograniczenia. Takie znaki jak duże kropki czy okrągły cudzysłów nie są elementami tego zbioru, nie są więc dostępne w HTML-u. Dodatkowym problemem jest to, że część znaków może się wprawdzie znajdować w zbiorze ISO-Latin-1, ale nie będzie wyświetlona przez przeglądarkę ze względu na możliwości danej platformy lub czcionkę. W wersji 4.0 zaproponowano, aby obowiązującym standardem dla dokumentów HTML stał się Unicode. Jest to standard kodowania znaków, który jest wstecznie zgodny ze zbiorem ASCII, a oprócz tego ma możliwość zakodowania prawie każdego znaku z każdego języka na świecie (łącznie z chińskimi i japońskimi obrazkami). Oznacza to, że bez większych problemów będzie można tworzyć dokumenty wielojęzyczne. Niektóre przeglądarki już obsługują ten standard, na przykład, Netscape Communicator, jeżeli tylko pozwolą mu na to zainstalawane czcionki, potrafi przedstawić dokument w bardzo wielu językach obsługiwanych przez Unicode. Jest to bardzo istotny krok w rozwoju WWW, bowiem Unicode urasta do miana faktycznego standardu kodowania znaków. Jest on wykorzystywany jako standard przez język Java, a system Windows NT również go obsługuje.

Kody znaków zarezerwowanych

W większości przypadków będziesz w stanie znaleźć kod znaku, który nie jest częścią standardu ASCII. Jednakże istnieje kilka wyjątków, mowa tu o znakach, które mają specjalne znaczenie w samym HTML-u. W ich wypadku również należy skorzystać z kodów.

Załóżmy, że zechcesz napisać zdanie, które w HTML-u będzie wyglądać następująco:

<P><CODE>if x < 0 do print i</CODE></P>

Nic w tym niezwykłego, nieprawdaż? Niestety, żadna przeglądarka nie wyświetli tej linii tak, jakbyśmy chcieli. Dlaczego? Problem tkwi w znaku mniejszości (<). W HTML-u każdy znak mniejszości oznacza początek znacznika, ponieważ w tym kontekście tak nie jest, przeglądarka najprawdopodobniej nie będzie wiedziała, co z tym fantem zrobić. Podobny problem pojawi się w przypadku znaku większości (>), ponieważ jest to koniec znacznika HTML. Powyższy fragment, zapisany poprawnie wyglądałby więc następująco:

<P><CODE>if x &lt; 0 do print i</CODE></P>

W HTML-u zdefiniowano kody dla każdego znaku, będącego jego częścią oraz dla podwójnego cudzysłowu.

Podwójny cudzysłów wydaje się być nieco tajemniczy. Z technicznego punktu widzenia, aby stworzyć poprawny kod HTML, nie należy bezpośrednio posługiwać się cudzysłowem z klawiatury, ale skorzystać z odpowiadającego mu kodu. W praktyce jednak nie napotkałem przeglądarki, która miałaby problemy z wyświetlaniem zwykłego cudzysłowu, nie widziałem też zbyt wielu stron, w których wykorzystywano by kod &quot;. Tak więc możesz bezpiecznie używać zwykłego cudzysłowu, wpisując go prosto z klawiatury.

Tabela 6.1:

Kody znaków,używanych w definicjach znaczników

Kod	Rezultat
&lt;	<
&gt;	>
&amp;	&
&quot;	„

Położenie tekstu na stronie

Możliwość rozmieszczania tekstu na stronie oznacza tyle, że można wyrównać go do lewego marginesu (standard), do prawego marginesu oraz wycentrować. W HTML-u 2.0 nie było żadnych mechanizmów, które umożliwiałyby tego typu kontrolę położenia tekstu, wszystko zależało od przeglądarek, które w większości po prostu wyrównywały go do lewej strony.

W HTML-u 3.2 pojawiły się atrybuty, które pozwalają na kontrolę położenia tekstu i innych elementów strony, a ich obsługa została dość szybko wdrożona w większości przeglądarek. Zostały one zachowane również w wersji 4.0, ale gdy tylko twórcy stron przyzwyczają się do korzystania z arkuszy stylów, właśnie one powinny stać się najpopularniejszą metodą kontroli położenia tekstu.

Kontrola położenia pojedynczych elementów

Aby ułożyć w dowolny sposób nagłówek lub akapit, możesz skorzystać z atrybutu ALIGN. Posiada on trzy wartości: LEFT, RIGHT i CENTERED. Przyjrzyj się poniższym przykładom:

<H1 ALIGN=CENTER>MalPol, Sp. z o.o</H1>

<P ALIGN=CENTER>To nie my pomalowaliśmy miasto na czerwono.</P>

<h1 align=left>Fuksiarze Sp. z o.o.</h1>

<h2 align=right><a href="who.html">Kim jesteśmy</a></h2>

<h2 align=right><a href="products.html">Co robimy</a></h2>

<h2 align=right><a href="contacts.html">Jak się z nami skontaktować</a></h2>

Przedstawiony poniżej przykład ilustruje różne wyrównanie kilku nagłówków. Rysunek 6.13 pokazuje rezultat wyświetlony w przeglądarce Internet Explorer.

Kontrola położenia grup elementów

Nieco bardziej elastyczną metodą kontroli położenia elementów tekstu jest znacznik <DIV>. Znacznik ten posiada kilka atrybutów wymienionych w dodatku B. Jednym z nich jest atrybut ALIGN (uznany za przestarzały w HTML-u 4.0), umożliwiający wyrównanie grupy elementów do lewej (LEFT), prawej (RIGHT) lub wyśrodkowanie ich (CENTER), tak samo jak w przypadku nagłówków i akapitów.

	<h1 align=left>Fuksiarze Sp. z o.o.</h1> <h2 align=right><a href="who.html">Kim jesteśmy</a></h2> <h2 align=right><a href="products.html">Co robimy</a></h2> <h2 align=right><a href="contacts.html">Jak się z nami skontaktować</a></h2>
Rysunek 6.13. Przykładowy kod wyświetlony w przeglądarce Internet Explorer

Jednakże <DIV> służy do oznaczenia dowolnego fragmentu kodu HTML (który może zawierać również inne znaczniki) — ma on wtedy wpływ na wszystko, co znajdzie się pomiędzy znacznikiem otwierającym i zamykającym (</DIV>). Oto dwa zasadnicze pun­kty, które ukazują prze-wagę <DIV> nad korzystaniem tylko z atrybutu ALIGN.

• <DIV> używamy tylko raz — nie ma potrzeby ciągłego wstawiania ALIGN przy każdym znaczniku,

• <DIV> może zostać użyte do zmiany położenia wszystkiego (nagłówków, akapitów, cytatów, obrazów, tabel itp.), natomiast atrybut ALIGN dostępny jest tylko dla nagłówków i akapitów.

Odpowiednie wyrównanie fragmentu kodu HTML polega na tym, że na początku tekstu należy wstawić znacznik otwierający (<DIV>), na końcu zamykający (</DIV>), a do pierwszego z nich należy dopisać atrybut ALIGN z odpowiednią wartością (LEFT, RIGHT lub CENTERED), jak w poniższym przykładzie:

<H1 ALIGN=LEFT>Fuksiarze Sp. z o.o.</H1>

<DIV ALIGN=RIGHT>

<H2 ALIGN=RIGHT><A HREF="whol.htm">Kim jesteśmy</A></H2>

<H2 ALIGN=RIGHT><A HREF="products.html">Co robimy</A></H2>

<H2 ALIGN=RIGHT><A HREF="contacts.html">Jak się z nami skontaktować</A></H2>

</DIV>

Wszystko, co znajdzie się pomiędzy dwoma znacznikami <DIV>, zostanie ułożone zgodnie z wartością atrybutu ALIGN. Jeżeli jednak atrybut ten zostanie użyty w jednym z nagłówków lub paragrafów, objętych znacznikiem <DIV>, uwzględnione będzie to indywidualne ustawienie, co oznacza, że dany element zostanie wyświetlony inaczej.

Zauważ, że <DIV> sam z siebie nie definiuje żadnego elementu tekstu. Znaczniki <P>, <H1>, <UL>, <BLOCKQUOTE> są wciąż wymagane.

Oprócz <DIV> istnieje jeszcze znacznik, służący tylko i wyłącznie do środkowania tekstu i innych elementów — <CENTER>. W specyfikacji HTML jest on zdefiniowany jako skrót <DIV ALIGN="CENTER"> i działa dokładnie tak samo, powodując, że wszystko co znajdzie się pomiędzy <CENTER> i </CENTER> zostanie wyśrodkowane na ekranie.

<CENTER>

<H1>MalPol, Sp. z o.o</H1>

<P>To nie my pomalowaliśmy miasto na czerwono.</P>

</CENTER>

Dla zachowania spójności kodu, radzę jednak środkować elementy stron za pomocą <DIV> i ALIGN.

Czcionki i ich rozmiar

Znacznik <FONT>, będący częścią standardu HTML 3.2 i uznany za przestarzały w HTML-u 4.0 (także jego należy zastępować arkuszami stylów) służy do zachowania kontroli nad fragmentami tekstu, nie objętymi stylami znaków. Początkowo znacznik ten służył tylko i wyłącznie do określania rozmiaru czcionki, którą wyświetlany był objęty nim tekst, ale z czasem jego zastosowanie poszerzyło się o możliwość wyboru rodzaju czcionki i jej koloru.

W tym miejscu zajmę się tylko zmianą rodzaju i rozmiaru czcionki. W rozdziale 7. — „Wykorzystywanie obrazów, koloru i tła” opowiem więcej o kolorach, również w kontekście czcionek.

Zmiana rozmiaru czcionki

Najpowszechniejszym zastosowaniem znacznika <FONT> jest zmiana rozmiaru czcionki pojedynczego znaku, słowa, zdania czy też innego fragmentu tekstu. Wybrany tekst znajduje się pomiędzy znacznikami <FONT> i </FONT>, a atrybut SIZE przy pierwszym z nich określa żądany rozmiar. SIZE może przyjmować wartości od 1 do 7, gdzie 3 jest wartością standardową. Rozpatrzmy następujący przykład:

<P>Znudził Cię stary wygląd czcionki?

<FONT SIZE=5>Zmień go.</FONT></P>

Rysunek 6.14 przedstawia typowe rozmiary czcionki dla każdej wartości atrybutu SIZE.

Rysunek 6.14. Wielkości czcionki w przeglądarce Internet Explorer

Rozmiar czcionki można określać także w stosunku do rozmiaru standardowego, za pomocą znaków + i - umieszczonych po atrybucie SIZE. Ponieważ standardowy rozmiar czcionki wynosi 3, zmiana relatywna do niego może wynosić od -3 do +4, na przykład:

<P>Zmień ponownie<FONT SIZE="+2">rozmiar</FONT> czcionki.</P>

Jeżeli obejrzysz ten przykład w przeglądarce, obsługującej taki typ zapisu, słowo rozmiar (znajdujące się pomiędzy znacznikami <FONT>) będzie większe o dwa poziomy od czcionki standardowej.

Relatywna zmiana wielkości czcionki opiera się tak naprawdę na wartości, ustalanej za pomocą znacznika <BASEFONT>, który jest kolejnym elementem uznanym za przestarzały w standardzie 4.0. Dla tego znacznika należy również zdefiniować atrybut SIZE z wartością od 1 do 7, wszelkie relatywne zmiany wielkości czcionki będą od miejsca wstawienia <BASEFONT> odnosić się do tej właśnie wartości.

Staraj się unikać stosowania znacznika <FONT> do powiększania czcionek w nagłówkach (<H1>, <H2> itd.), czy też do wyróżniania pojedynczych słów i zdań. Jeżeli dokumenty będą oglądane w przeglądarkach, które nie obsługują zmiany wielkości czcionki, tekst ten nie będzie się niczym wyróżniał. Jeżeli będziesz opierał swoje strony na znacznikach zgodnych z rolą tekstu, niezależnie od przeglądarki nagłówek zawsze pozostanie nagłówkiem. Postaraj się ograniczyć użycie znacznika <FONT> tylko do paru efektów specjalnych.

Zmiana rodzaju czcionki

Rozwój znacznika <FONT> to typowy przykład ewolucji HTML-a, której motorem jest wojna przeglądarek. Znacznik ten po raz pierwszy pojawił się wraz z przeglądarką Netscape 1.0, a Microsoft podjął wyzwanie i w kolejnej wersji Internet Explorera rozszerzył go o atrybut FACE. Atrybut ten stał się elementem standardu HTML 3.2, natomiast w wersji 4.0 do określania używanych czcionek zalecane są raczej arkusze stylów.

Wartością atrybutu FACE jest zbiór nazw czcionek, zapisanych w cudzysłowach i oddzielonych przecinkami. Przeglądarka, po napotkaniu takiego znacznika, będzie przeglądać swój lokalny system operacyjny w poszukiwaniu czcionki o podanej nazwie. Jeżeli nie znajdzie pierwszej z nich, zacznie szukać drugiej, potem trzeciej, aż znajdzie tę, która rzeczywiście będzie w systemie zainstalowana. Jeżeli okaże się, że przeglądarka nie znajdzie żadnej z wymienionych czcionek, użyta zostanie czcionka standardowa.

Spójrz na poniższy przykład, ten tekst powinien być w pierwszej kolejności wyświetlony za pomocą czcionki Futura. Jeżeli nie będzie jej w systemie, powinna zostać użyta Helvetica, a jeżeli tej czcionki również nie będzie, użyta zostanie czcionka standardowa.

<P><FONT FACE="Futura,Helvetica">Sans Serif, to czcionka bez małych dodatków na zakończeniach każdego znaku. </FONT></P>

Korzystając z atrybutu FACE, musisz mieć na uwadze, że niewiele przeglądarek potrafi go obsłużyć, będzie więc niedostępny dla sporej grupy czytelników. Kolejny problem to fakt, że te same czcionki nazywają się różnie w różnych systemach, Times w jednym miejscu nazywa się po prostu Times, gdzie indziej Times Roman, a jeszcze gdzie indziej Times New Roman. Z tych dwóch przyczyn, czyli małego rozpowszechnienia oraz niejednolitego nazewnictwa czcionek, atrybut FACE nie powinien być zbyt szeroko używany, a już na pewno nie powinieneś opierać na nim swojej prezentacji.

Migający <BLINK>

Znacznika <BLINK> nie znajdziesz w oficjalnej dokumentacji produktu firmy Netscape. Możliwość wyświetlania migającego tekstu została do Netscape'a dołączona jako cecha ukryta i nieudokumentowana, coś w rodzaju Zajączka Wielkanocnego. Jednakże wiele stron w sieci WWW ciągle korzysta z tej możliwości.

Para znaczników <BLINK>…</BLINK> powoduje, że tekst zawarty pomiędzy nimi wyświetlany jest z efektem migania. W zależności od wersji przeglądarki Netscape, tekst albo całkowicie znika i pojawia się ponownie, albo za tekstem pojawia się i znika szary lub biały prostokąt. Migający tekst to często używany sposób przyciągnięcia uwagi czytelnika do pewnego fragmentu strony.

Problem z miganiem polega na tym, że stanowi ono zbyt mocne wyróżnienie fragmentu tekstu. Ma ono tę cechę, że nigdy się nie kończy i przyciąga uwagę cały czas, co może być tak absorbujące, że czytelnik w efekcie nie przeczyta innych fragmentów strony. Wielu twórców stron WWW (w tym ja) odradza używanie znacznika <BLINK>, bowiem rzesze odbiorców uważają ten sposób za zbyt agresywny i bardzo denerwujący. Rolę <BLINK> w HTML-u można porównać do odcisków palców na czystej, czarnej tablicy. Jeżeli jednak uważasz użycie tego znacznika za konieczne, rób to bardzo oszczędnie (nie więcej niż kilka słów na stronie). Pamiętaj również o tym, że w niektórych wersjach przeglądarek Netscape miganie może zostać wyłączone. Jeżeli chcesz wyróżnić słowo lub zdanie, skorzystaj raczej z tradycyjnych i pewniejszych metod, bowiem w tym wypadku nie masz nawet gwarancji, że wszyscy czytelnicy korzystający z przeglądarek Netscape będą w stanie zobaczyć efekt końcowy.

<NOBR> i <WBR>

Para znaczników <NOBR>…</NOBR> jest przeciwieństwem znacznika <BR>. Tekst, znajdujący się w obrębie tych znaczników zawsze będzie wyświetlany w jednej linii. Jest to metoda używana wtedy, gdy zdanie lub wyrażenie z jakichś powodów musi zostać wyświetlone w jednym wierszu, należy jednak korzystać z niej bardzo ostrożnie.

Długie linie mogą sprawić, że strona będzie wyglądała dość dziwnie, poza tym zachodzi niebezpieczeństwo, że długość linii przekroczy szerokość ekranu.

Znacznik <WBR> oznacza punkt łamania linii (zwykle pomiędzy znacznikami <NOBR>… </NOBR>). W przeciwieństwie do <BR>, który wymusza łamanie linii, <WBR> tylko wskazuje miejsce, w którym linia powinna zostać przełamana. Jeżeli zmieści się ona na ekranie, znacznik ten zostanie zignorowany. W XHTML 1.0 należy zamknąć znacznik, zapisując go w następującej postaci: <WBR />.

Żaden z tych znaczników nie jest elementem specyfikacji HTML-a ani w wersji 3.2, ani też 4.0. Stanowią one rozszerzenia, wprowadzone przez Netscape Communications i są obsługiwane zarówno przez oprogramowanie tej firmy, jak i przez Microsoft Internet Explorera.

Ćwiczenie 6.1: Tworzymy prawdziwą stronę HTML

Nadszedł moment, w którym będziesz mógł zastosować w praktyce wszystko to, czego się do tej pory nauczyłeś i stworzyć prawdziwą stronę WWW. Koniec z oderwanymi od siebie, bezsensownymi przykładami. Strona, którą stworzysz, będzie się nadawała do publikacji w prawdziwej sieci WWW.

Twoim zadaniem będzie wykreowanie strony księgarni o nazwie „Bookworm”, specjalizującej się w sprzedaży starych i rzadkich książek, prawdziwych „białych kruków”.

Rozplanuj stronę

W rozdziale 2.— „Grunt to organizacja” mówiłam dużo o tym, że wstępne zaplanowanie strony przed rozpoczęciem jej tworzenia jest bardzo pomocne i ułatwia pracę. Najpierw zastanów się dobrze, co powinno znaleźć się na stronie. Oto kilka pomysłów:

• adres i numer telefonu księgarni,

• krótki opis księgarni i wyjątkowego charakteru jej oferty,

• kilka najnowszych tytułów,

• zapowiadane wydarzenia.

Teraz kolej na hiperpołączenia — należy zaplanować, dokąd powinny one prowadzić. Każdy tytuł z listy nowości wydaje się być doskonałym kandydatem. Możesz stworzyć połączenia do stron ze szczegółowymi informacjami na temat poszczególnych książek, autorów czy też wydawnictw.

W części poświęconej zapowiadanym zdarzeniom możesz również zawrzeć kilka połączeń, których liczba będzie zależna od tego, jak wiele miejsca zechcesz poświęcić poszczególnym tematom. Jeżeli będą to tylko dwa lub trzy zdania, lepiej będzie opisać je wszystkie na jednej stronie. W takim wypadku tworzenie osobnych stron nie ma większego sensu, po co bowiem skazywać czytelników na stratę czasu, potrzebnego na załadowanie z sieci kolejnej strony?

W trakcie pracy nad tekstem może okazać się, że wpadniesz na kilka nowych, ciekawych pomysłów na połączenia, ale na razie taki prosty plan powinien wystarczyć.

Utwórz szablon strony

Następnym krokiem będzie stworzenie fragmentu kodu, który musi posiadać każda strona w HTML-u. Są to oczywiście znaczniki struktury dokumentu, tytuł i wstępny nagłówek. Zwróć uwagę na tytuł: jest krótki i przejrzysty. Dłuższy tytuł można wstawić w nagłówku typu <H1>, w tekście zasadniczym.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Księgarnia Bookworm</title>

</head>

<body>

<h1>Bookworm: księgarnia z lepszą książką</h1>

<h2>Zawartość</h2>

<h2>O księgarni Bookworm</h2>

<h2>Najnowsze tytuły</h2>

<h2>Zapowiadane wydarzenia</h2>

</body>

</html>

Każdy z nagłówków, które umieściłeś na swojej stronie, oznacza początek danej sekcji na stronie. Jeśli przy każdym nagłówku umieścisz odnośnik, będziesz mógł łatwo przemieszczać się pomiędzy różnymi sekcjami. Przykładowo nazwy odnośników mogą być następujące: nagłówek (dla początkowego nagłówka), zawartość (dla spisu treści) oraz informacje, nowości i wydarzenia dla trzech sekcji umieszczonych na stronie. Po wstawieniu odnośników, zmieniony kod wygląda następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Księgarnia Bookworm</title>

</head>

<body>

<a name="top"><h1>Bookworm: księgarnia z lepszą książką</h1></a>

<a name="contents"><h2>Zawartość</h2></a>

<a name="about"><h2>O księgarni Bookworm</h2></a>

<a name="#recent"><h2>Najnowsze tytuły</h2></a>

<a name="upcoming"><h2>Zapowiadane wydarzenia</h2></a>

</body>

</html>

Kolej na treść

Teraz możesz zacząć tworzyć treść strony. Ponieważ działasz na polu literatury, dobrze byłoby rozpocząć stronę od jakiegoś ładnego cytatu na temat starych książek. Ponieważ będzie to dłuższy cytat, można wyróżnić go za pomocą znacznika <BLOCKQUOTE>, a tytuł dodatkowo ująć w znaczniki <CITE>.

<blockquote>

"Najlepsze są stare książki -- ten język, te historie<br />

Towarzyszą nam latami!"<br />

- Clarence Urmy, <cite>Stare piosenki są najlepsze</cite>

</blockquote>

Adres księgarni potraktuj jak zwykły akapit, w którym każda linia zakończona będzie znacznikiem <BR>:

<p>Księgarnia Bookworm<br />

1345 Applewood Dr<br />

Springfield, CA 94325<br />

[phone]

</p>

Dodawanie spisu treści

Przeglądanie całej utworzonej przez Ciebie strony wymaga żmudnego przewijania jej zawartości. Miłym ułatwieniem byłoby utworzenie na początku strony małego spisu treści, w postaci listy wypunktowanej. Kiedy użytkownik kliknie na jedno z połączeń w spisie treści, zostanie automatycznie odesłany do interesującej go sekcji. Ponieważ już utworzyłeś odnośniki, łatwo sprawdzić, gdzie Cię skierują.

Utworzyłeś już wcześniej nagłówek dla spisu treści. Musisz jeszcze dodać listę wypunktowaną i poziomą linię. Następnie tworzysz połączenia do odpowiednich sekcji na stronie. Kod źródłowy wygląda następująco:

<a name="contents"><h2>Zawartość</h2></a>

<ul>

<li><a href="#about">O księgarni</a></li>

<li><a href="#recent">Najnowsze tytuły</a></li>

<li><a href="#upcoming">Zapowiadane wydarzenia</a></li>

</ul>

<hr />

Rysunek 6.15 pokazuje pierwszą część strony księgarni Bookworm, wyświetloną w przeglądarce Internet Explorer.

Rysunek 6.15. Początkowa część strony księgarni Bookworm

Tworzenie opisu księgarni

Najwyższy czas zająć się pierwszym nagłówkiem na stronie. Utworzymy sekcję zawierającą opis księgarni. Za nagłówkiem (umieszczonym w pierwszej linii poniższego przykładu) do opisu dołączyłam listę podkreślającą zalety księgarni:

<a name="about"><h2>O księgarni Bookworm</h2></a>

<p>Od 1933 roku księgarnia Bookworm oferuje tytuły rzadkie i trudnodostępne,

dla wymagających czytelników. Księgarnia Bookworm oferuje:</p>

<ul>

<li>Przyjazną, kompetentną i uprzejmą obsługę</li>

<li>Kawę i soki dla klientów</li>

<li>Jasną czytelnię, gdzie można spokojnie poczytać książkę przed zakupem</li>

<li>Cztery przyjazne kotki: Esmeraldę, Katarzynę, Dulcyneę oraz Beatrycze</li>

</ul>

Na koniec tej części pojawi się krótka notka o godzinach otwarcia sklepu, w której właściwe godziny zostały wyróżnione:

<p>Zapraszamy codziennie <strong>od 10 do 21</strong>, a w weekendy

<strong>od południa od 17</strong>.</p>

Następnie na końcu sekcji dodamy połączenia do spisu treści i początku strony oraz poziomą linię, aby zaznaczyć koniec tej sekcji.

<p><a href="#contents">Do spisu treści</a> | <a href="#top">Na początek</a></p>

<hr />

Rysunek 6.16 przedstawia wygląd fragmentu strony zawierającego informacje o księgarni wyświetlonego w przeglądarce Internet Explorer.

Rysunek 6.16. Fragment strony zawierający informacje o księgarni

Treści ciąg dalszy

Jak już wcześniej wspomniałem, lista najnowszych tytułów to klasyczny przykład menu połączeń. Można tu skorzystać z listy wypunktowanej, a tytuły potraktować jako cytaty (znacznik <CITE>). Na końcu sekcji umieść kolejną linię poziomą.

Po nagłówku Najnowsze tytuły (widocznym w pierwszej linii poniższego) wpisz następujący kod:

<a name="recent"><h2>Najnowsze tytuły</h2></a>

<ul>

<li>Sandra Bellweather, <cite>Belladonna</cite></li>

<li>Johnathan Tin, <cite>20-minutowe posiłki dla samotnych</cite></li>

<li>Maxwell Burgess, <cite>Legion Gromu</cite></li>

<li>Alison Caine, <cite>Duch Banquo</cite></li>

</ul>

<hr />

Teraz należy dodać do tej listy znaczniki połączeń. Tylko, jak wiele słów powinno reprezentować połączenie? Czy powinna być to cała linia (autor i tytuł), czy tylko tytuł? Decyzja zależy od Ciebie, nie ma tu bowiem żadnych obiektywnych kryteriów. Ja osobiście wolę tworzyć niewielkie połączenia, aby mieć pewność, że będą się one wyróżniać z tekstu. W tym przypadku połączeniami będą wyłącznie tytuły książek. Jednocześnie, poniżej listy, dodałam połączenia do Spisu treści oraz na sam początek strony:

<a name="recent"><h2>Najnowsze tytuły</h2></a>

<ul>

<li>Sandra Bellweather, <a href="belladonna.html">

<cite>Belladonna</cite></a></li>

<li>Johnathan Tin, <a href="20minmeals.html">

<cite>20-minutowe posiłki dla samotnych</cite></a></li>

<li>Maxwell Burgess, <a href="legion.html">

<cite>Legion Gromu</cite></a></li>

<li>Alison Caine, <a href="banquo.html">

<cite>Duch Banquo</cite></a></li>

</ul>

<p><a href="#contents">Do spisu treści</a> | <a href="#top">Na początek</a></p>

<hr />

Zauważ, że znacznik <CITE> został umieszczony pomiędzy znacznikami <A>. Równie dobrze mogłabym umieścić go po stronie zewnętrznej, znaczniki stylów znaków funkcjonują poprawnie w każdym miejscu. Należy tylko uważać na przeplatanie znaczników, o czym już wcześniej wspominałam, bowiem przeglądarka najprawdopodobniej nie będzie wiedziała co zrobić w takiej sytuacji:

<a href="banquo.html"><cite>Duch Banquo</a></cite>

Spójrzmy teraz, jak ta sekcja strony wygląda po wyświetleniu w przeglądarce Internet Explorerze. Nasza przykładowa strona została przedstawiona na rysunku 6.17.

Rysunek 6.17. Fragment strony zawierający listę najnowszych tytułów

Uzupełnianie sekcji Zapowiadane wydarzenia

Przejdźmy teraz do części „Zapowiadane wydarzenia”. Na etapie planowania nie mogłeś się zdecydować, czy lepiej będzie utworzyć w tym miejscu kolejne menu połączeń, czy też wystarczy tylko umieścić krótki komentarz na każdy temat. W tym wypadku jest to również tylko i wyłącznie Twoja decyzja, zależy bowiem od ilości tekstu i tego, co wolisz zrobić. Ponieważ w mojej wersji tekstu nie ma zbyt wiele, tworzenie połączeń do kilkuzdaniowych stron nie miałoby większego sensu. Utworzyłam więc listę menu (za pomocą znacznika <UL>), co w efekcie dało kilka krótkich akapitów (w niektórych przeglądarkach są one wypunktowane). Zauważ, że zdania na początku akapitów zostały pogrubione. Są one podsumowaniem treści i pozwalają czytelnikowi na pominięcie tematu, jeżeli nie jest nim zainteresowany.

Analogicznie, jak w poprzednich sekcjach, także na końcu tej sekcji dodaj połączenia do spisu treści i początku strony oraz poziomą linię.

<a name="upcoming"><h2>Zapowiadane wydarzenia</h2></a>

<ul>

<li><b>Środowy Przegląd Książek</b>, czyli spotkania i dyskusje przy kawie. Zadzwoń do nas

po informacje, jak się przyłączyć do grupy oraz o czym będziemy rozmawiali w tym

tygodniu.</li>

<li><b>Godzina dla Dzieciaków</b>, to spotkania w każdą sobotę o 13, by poczytać, w coś zagrać

lub inaczej spędzić wolny czas. Podajemy również mleko i ciasteczka.</li>

<li>W piątek 16 września księgarnię odwiedzi <b>Carole Fenney</b>, aby recytować fragmenty swego

zbioru wierszy <cite>Pająki na stronach WWW</cite>.</li>

<li><b>Księgarnia będzie nieczynna</b> 1 października z powodu przeprowadzki rodziny nietoperzy,

która uwiła sobie gniazdko w wieży. Lubimy je bardzo, ale ten bałagan, który robią...

</li>

</ul>

<p><a href="#contents">Do spisu treści</a> | <a href="#top">Na początek</a></p>

<hr />

Podpisz swoją stronę

Na koniec podpisz stronę, tak aby czytelnicy wiedzieli, komu zawdzięczają to, co właśnie przeczytali. W moim przykładzie oddzieliłam podpis od reszty dokumentu poziomą linią. Dołączyłam także datę ostatniej aktualizacji, moje nazwisko jako administratora strony oraz krótką notkę o prawach autorskich (skorzystałam tu z kodu &#169;).

<address>

Ostatnia aktualizacja: 11/11/99<br />

WebMaster: Laura Lemay [e-mail]<br />

&#169; copyright 1999 Księgarnia Bookworm<br />

</address>

Rysunek 6.18 przedstawia dolną część strony zawierającą listę zapowiadanych wydarzeń oraz podpis strony, wyświetloną w przeglądarce Internet Explorer.

Rysunek 6.18. Sekcja Zapowiadane wydarzenia oraz podpis strony wyświetlone w przeglądarce Internet Explorer

Co z tego wyszło?

Oto całość kodu, który powstał do tej pory:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Księgarnia Bookworm</title>

</head>

<body>

<a name="top"><h1>Bookworm: księgarnia z lepszą książką</h1></a>

<blockquote>

"Najlepsze są stare książki -- ten język, te historie<br />

Towarzysz± nam latami!"<br />

- Clarence Urmy, <cite>Stare piosenki są najlepsze</cite>

</blockquote>

<p>Księgarnia Bookworm<br />

1345 Applewood Dr<br />

Springfield, CA 94325<br />

[phone]

</p>

<a name="contents"><h2>Zawartość</h2></a>

<ul>

<li><a href="#about">O księgarni</a></li>

<li><a href="#recent">Najnowsze tytuły</a></li>

<li><a href="#upcoming">Zapowiadane wydarzenia</a></li>

</ul>

<hr />

<a name="about"><h2>O księgarni Bookworm</h2></a>

<p>Od 1933 roku księgarnia Bookworm oferuje tytuły rzadkie i trudnodostępne,

dla wymagających czytelników. Księgarnia Bookworm oferuje:</p>

<ul>

<li>Przyjazną, kompetentną i uprzejmą obsługę</li>

<li>Kawę i soki dla klientów</li>

<li>Jasną czytelnię, gdzie można spokojnie poczytać książkę przed zakupem</li>

<li>Cztery przyjazne kotki: Esmeraldę, Katarzynę, Dylcyneę oraz Beatrycze</li>

</ul>

<p>Zapraszamy codziennie <strong>od 10 do 21</strong>, a w weekendy

<strong>od południa od 17</strong>.</p>

<p><a href="#contents">Do spisu treści</a> | <a href="#top">Na początek</a></p>

<hr />

<a name="recent"><h2>Najnowsze tytuły</h2></a>

<ul>

<li>Sandra Bellweather, <a href="belladonna.html">

<cite>Belladonna</cite></a></li>

<li>Johnathan Tin, <a href="20minmeals.html">

<cite>20-minutowe posiłki dla samotnych</cite></a></li>

<li>Maxwell Burgess, <a href="legion.html">

<cite>Legion Gromu</cite></a></li>

<li>Alison Caine, <a href="banquo.html">

<cite>Duch Banquo</cite></a></li>

</ul>

<p><a href="#contents">Do spisu treści</a> | <a href="#top">Na początek</a></p>

<hr />

<a name="upcoming"><h2>Zapowiadane wydarzenia</h2></a>

<ul>

<li><b>Środowy Przegląd Książek</b>, czyli spotkania i dyskusje przy kawie. Zadzwoń do nas

po informacje, jak się przyłączyć do grupy oraz o czym będziemy rozmawiali w tym

tygodniu.</li>

<li><b>Godzina dla Dzieciaków</b>, to spotkania w każdą sobotę o 13, by poczytać, w coś zagrać

lub inaczej spędzić wolny czas. Podajemy również mleko i ciasteczka.</li>

<li>W piątek 16 września księgarnię odwiedzi <b>Carole Fenney</b>, aby recytować fragmenty swego

zbioru wierszy <cite>Pająki na stronach WWW</cite>.</li>

<li><b>Księgarnia będzie nieczynna</b> 1 października z powodu przeprowadzki rodziny nietoperzy,

która uwiła sobie gniazdko w wieży. Lubimy je bardzo, ale ten bałagan, który robią...

</li>

</ul>

<p><a href="#contents">Do spisu treści</a> | <a href="#top">Na początek</a></p>

<hr />

<address>

Osatnia aktualizacja: 11/11/99<br />

WebMaster: Laura Lemay [e-mail]<br />

&#169; copyright 1999 Księgarnia Bookworm<br />

</address>

</body>

</html>

Mamy tu kilka nagłówków, jakiś tekst i parę połączeń, co stanowi podstawę każdej dobrej strony WWW. W tym momencie, gdy większość treści jest już na swoim miejscu, zastanów się, co jeszcze mogłoby się na tej stronie znaleźć.

We wprowadzeniu wspomniano o czterech kotach, które można spotkać w księgarni. Wątek ten można łatwo rozwinąć, choć nie było tego w pierwotnych planach. Każdy kot może posiadać własną stronę ze zdjęciem, z której połączenia prowadziłyby z powrotem do strony głównej lub do pozostałych kotów.

Czy opisywanie kotów ma w ogóle jakiś sens? Ty jesteś projektantem strony i tylko Ty o tym decydujesz. W ten sposób można połączyć każde słowo, znajdujące się na stronie z czymś interesującym (jeżeli tylko jest z czym). Możesz połączyć nazwę księgarni z lokalną Izba Gospodarczą, cytat z Encyklopedią Cytatów, a wzmiankę o darmowej kawie ze stroną miłośników kawy.

Więcej o tym, co warto łączyć ze sobą (i jak robić to, nie wychodząc z siebie) opowiem w rozdziale 11. — „Tworzenie i projektowanie stron WWW: zalecenia i przeciwwskazania”. Wspominam o tym akurat w tym miejscu dlatego, że na tym etapie, kiedy strona jest prawie gotowa, wzrasta zwykle chęć tworzenia dodatkowych, niezaplanowanych wcześniej połączeń. Dlatego dobrze jest zatrzymać się w tym punkcie i skonfrontować efekt ze wstępnymi założeniami.

Dla celów tego przykładu nie będziemy wstawiać żadnych nowych połączeń. Jesteśmy już bardzo blisko celu, nie chcę więc niepotrzebnie przedłużać oczekiwania na końcowy efekt.

Obejrzyj efekt końcowy

Teraz, kiedy cały kod jest już na swoim miejscu, możesz spróbować obejrzeć go w przeglądarce. Rysunki od 6.15 od 6.18 przedstawiają wygląd poszczególnych części strony wyświetlonych w przeglądarce Internet Explorer. Tak naprawdę, strona ta wygląda tak dopiero po usunięciu wszelkich błędów w pisowni, zapomnianych znaczników i innych dziwnych pomyłek, które zawsze wkradają się do kodu HTML za pierwszym razem. Zdarza się to dokładnie wszystkim, nawet najbardziej doświadczonym twórcom stron WWW. Jeżeli skorzystasz z edytora HTML lub jakiegoś innego pomocnego narzędzia, błędów tych będzie na pewno mniej, ale mimo wszystko będą. Dlatego właśnie powinieneś często oglądać stronę w przeglądarce, żeby te błędy wyłapać, zanim odnajdą je inni.

Czy można zrobić coś jeszcze?

To, co do tej pory znalazło się na stronie to czysty, poprawny aż do bólu HTML, który będzie czytelny dla każdej bez wyjątku przeglądarki świata (i w każdej z nich będzie wyglądał tak samo). W tym miejscu można się jednak zastanowić nad dodaniem kilku znaczników i atrybutów, które nie powinny nic zepsuć, a użytkownikom niektórych przeglądarek mogłyby ukazać tę stronę w nieco atrakcyjniejszej postaci.

Jakie więc mogłyby być to atrybuty? Wybrałam dwa:

• wyśrodkowanie tytułu strony, cytatu i adresu sklepu,

• niewielka zmiana wielkości czcionki samego adresu.

Aby wyśrodkować górną część strony, należy skorzystać ze znacznika <DIV>, umieszczając wewnątrz niego nagłówek, cytat i adres księgarni:

<div align="center">

<a name="top"><h1>Bookworm: księgarnia z lepszą książką</h1></a>

<blockquote>

"Najlepsze są stare książki -- ten język, te historie<br />

Towarzyszą nam latami!"<br />

- Clarence Urmy, <cite>Stare piosenki są najlepsze</cite>

</blockquote>

<p>Księgarnia Bookworm<br />

1345 Applewood Dr<br />

Springfield, CA 94325<br />

[phone]

</p>

</div>

Aby zmienić wielkość czcionki adresu, należy objąć ten fragment znacznikiem <FONT>:

<p><font size="+1">Księgarnia Bookworm<br />

1345 Applewood Dr<br />

Springfield, CA 94325<br />

[phone]

</font></p>

Rysunek 6.19 przedstawia ostateczny rezultat w przeglądarce Internet Explorer. Zwróć uwagę na to, że żaden z użytych dodatkowo znaczników nie ma wpływu na wygląd strony w przeglądarkach, które ich nie obsługują. Strona wygląda po prostu tak, jakby ich nie było.

Kiedy powinieneś używać znaczników i atrybutów, służących do formatowania tekstu? Zasada jest następująca: tylko wtedy, gdy nie przeszkadzają one w oglądaniu strony za pomocą starszych przeglądarek. Sytuacja ma się podobnie z HTML-em 4.0, jego twórcy zachęcają wprawdzie do korzystania z arkuszy stylów zamiast znaczników typu <FONT> i atrybutu ALIGN, ale przecież tylko najnowsze programy potrafią je obsługiwać. Chcąc, aby strony były dostępne dla jak największej liczby czytelników, musisz wciąż trzymać się opisanych w tym rozdziale znaczników i atrybutów.

Więcej o formatowaniu tekstu i potrzebnych do tego znacznikach oraz atrybutach opowiem w rozdziale 22

Podsumowanie

Znaczniki, znaczniki, znaczniki... W tym rozdziale zapoznałeś się z większością pozostałych znaczników języka HTML, służących do prezentacji tekstu oraz z kilkoma dodatkowymi znacznikami, które poszerzają nieco możliwości jego formatowania. Podjąłeś także próbę stworzenia prawdziwej strony WWW. Tak naprawdę mógłbyś przerwać lekturę w tym miejscu i ze zdobytą do tej pory wiedzą rozpocząć karierę projektanta całkiem przyzwoitych stron, ale przed nami jeszcze tyle ciekawych rzeczy, że naprawdę nie radzę tego robić.

W poniższej tabeli przedstawiłam krótkie podsumowanie wszystkich znaczników i atrybutów, o których mówiłam w tym rozdziale i które znalazły się w specyfikacji HTML 4.0.

Rysunek 6.19. Ostateczna postać strony księgarni Bookworm

Tabela 6.2.

Znaczniki HTML opisane w rozdziale 5

Znacznik	Atrybut	Opis
<ADDRESS>…</ADDRESS>		Podpis pod stroną WWW, zwykle umieszczany w dolnej części strony, zawiera informacje o kontakcie z autorem, dane o prawach autorskich itp.
<B>…</B>		Tekst pogrubiony.
<BIG>…</BIG>		Tekst wyświetlony czcionką większą niż reszta.
<BLINK>…</BLINK>		(rozszerzenie firmy Netscape) Powoduje, że zaznaczony tekst wyświetlany jest jako migający.
<BLOCKQUOTE>… </BLOCKQUOTE>		Dłuższy cytat.
<CITE>…</CITE>		Cytat.
<CODE>…</CODE>		Fragment kodu.
<DFN>…</DFN>		Definicja lub termin, który należy zdefiniować.
<EM>…</EM>		Tekst wyróżniony.
<I>…</I>		Kursywa.
<KBD>…</KBD>		Tekst, który powinien być wpisany przez użytkownika.
<PRE>…</PRE>		Tekst preformatowany — wszystkie spacje, tabulacje i znaki końca linii zostają zachowane, a tekst jest wyświetlany czcionką o stałej szerokości znaku.
<S>…</S>		Tekst przekreślony (przestarzały w HTML 4.0).
<SAMP>…</SAMP>		Tekst przykładowy.
<SMALL>…</SMALL>		Tekst wyświetlony czcionką mniejszą niż reszta.
<STRONG>…</STRONG>		Tekst mocno wyróżniony.
<SUB>…</SUB>		Indeks dolny.
<SUP>…</SUP>		Indeks górny.
<TT>…</TT>		Tekst wyświetlony czcionką maszynową, o jednakowej szerokości znaku (Courier).
<U>…</U>		Tekst podkreślony.
<VAR>…</VAR>		Nazwa zmiennej.
<HR>		Pozioma linia w danym miejscu tekstu. W HTML-u nie stosuje się znacznika zamykającego, natomiast w XHTML-u na końcu znacznika, za jego atrybutami należy umieścić znak ukośnika (/), jak w poniższym przykładzie: <hr size="2" width="75%" />
	SIZE	Grubość linii, podawana w pikselach (przestarzały w HTML 4.0).
	WIDTH	Długość linii w pikselach lub jako procent szerokości ekranu (przestarzały w HTML 4.0).

Tabela 6.2.

Znaczniki HTML opisane w rozdziale 5 (ciąg dalszy)

Znacznik	Atrybut	Opis
	ALIGN	Ułożenie linii na stronie — możliwe wartości to LEFT, RIGHT i CENTER (przestarzały w HTML 4.0).
	NOSHADE	Linia jest wyświetlana bez trójwymiarowego cienia (przestarzały w HTML 4.0).
<BR>		Łamanie linii — powoduje, że następujący po nim znak jest wyświetlany od nowej linii (nie tworzy jednak w ten sposób nowego akapitu czy też elementu listy). W HTML-u nie stosuje się znacznika zamykającego, natomiast w XHTML-u na końcu znacznika, za jego atrybutami należy umieścić znak ukośnika (/), jak w poniższym przykładzie: <br clear="left" />.
<NOBR>…</NOBR>		Powoduje, że zaznaczony tekst jest wyświetlany w jednej linii. (Znacznik niestandardowy obsługiwany zarówno przez przeglądarkę Internet Explorera jak i Netscape Navigatora.)
<WBR>		(rozszerzenie) Powoduje, że linia jest łamana w tym miejscu, ale tylko wtedy, gdy jest to konieczne. (Znacznik niestandardowy obsługiwany zarówno przez Internet Explorera jak i Netscape Navigatora.) W XHTML 1.0 należy dodać na jego końcu znak ukośnika.
<P>, <H1-6>	ALIGN="LEFT"	Powoduje, że tekst akapitu lub nagłówka jest dosunięty do lewego marginesu (przestarzały w HTML 4.0).
	ALIGN="RIGHT"	Powoduje, że tekst akapitu lub nagłówka jest dosunięty do prawego marginesu (przestarzały w HTML 4.0).
	ALIGN="CENTER"	Powoduje, że tekst akapitu lub nagłówka jest wyśrodkowany (przestarzały w HTML 4.0).
<DIV>…</DIV>	ALIGN="LEFT"	Powoduje, że cała treść, znajdująca się pomiędzy tymi znacznikami jest dosunięta do lewego marginesu (przestarzały w HTML 4.0).
	ALIGN="RIGHT"	Powoduje, że cała treść, znajdująca się pomiędzy tymi znacznikami jest dosunięta do prawego marginesu (przestarzały w HTML 4.0).
	ALIGN="CENTER"	Powoduje, że cała treść, znajdująca się pomiędzy tymi znacznikami jest wyśrodkowana (przestarzały w HTML 4.0).
<CENTER>…</CENTER>		Powoduje, że cała treść, znajdująca się pomiędzy tymi znacznikami jest wyśrodkowana (przestarzały w HTML 4.0).
<FONT>…</FONT>	SIZE	Określa wielkość czcionki dla tekstu pomiędzy znacznikami albo bezwzględnie od 1 do 7, albo relatywnie do wielkości określonej za pomocą znacznika <BASEFONT>, przy użyciu znaków +N i -N (przestarzały w HTML 4.0).

Tabela 6.2.

Znaczniki HTML opisane w rozdziale 5 (ciąg dalszy)

Znacznik	Atrybut	Opis
	FACE	Nazwa lub lista nazw czcionek, które mają zostać użyte do wyświetlenia tekstu zawartego pomiędzy znacznikami (przestarzały w HTML 4.0).
<BASEFONT>	SIZE	Określa standardową wielkość czcionki, w stosunku do której może ona być zmieniana za pomocą znacznika FONT (przestarzały w HTML 4.0). W HTML-u nie stosuje się znacznika zamykającego, natomiast w XHTML-u na końcu znacznika, za jego atrybutami należy umieścić znak ukośnika (/), jak w poniższym przykładzie: <basefont size="-1" />.

Warsztaty

Ponieważ zbliżasz się już do następnego rozdziału (naprawdę długiego!), przed Tobą stają kolejne zadania. Pytania, które opracowałam, są dość łatwe. Przygotowałam także kilka ćwiczeń, polegających na dodaniu paru stron do Twojej witryny.

Pytania i odpowiedzi

P. Jeżeli istnieje znacznik łamania linii, to czy można też łamać całą stronę?

O. W HTML-u nie istnieje znacznik łamania strony. Zastanów się, czym właściwie jest strona w kontekście dokumentu WWW. Jeżeli cały dokument jest właśnie ową stroną, to jedyny sposób na jej „przełamanie”, to podział całości na kilka plików. W żadnej przeglądarce nie istnieje pojęcie strony w obrębie jednego dokumentu, jest to jedna całość, której nie można podzielić w ten sposób.

Nawet jeżeli jako stronę potraktować to, co w danym momencie widoczne jest na ekranie, wciąż nie wiadomo, co oznaczałoby łamanie takiej strony, bowiem rozmiary ekranu są ściśle uzależnione od przeglądarki oraz od takich czynników, jak rozmiary monitora, czcionka, ilość linii na ekranie itp., których nie da się kontrolować za pomocą HTML-a.

Jako projektant stron WWW nie powinieneś przyjmować koncepcji strony, takiej jak to ma miejsce w publikacjach na papierze. Pamiętaj o tym, że siła HTML-a polega na jego elastyczności, zamiast zastanawiać się nad łamaniem stron pomyśl, jak najkorzystniej połączyć ze sobą małe porcje informacji, tak aby stanowiły spójną prezentację.

P. W jaki sposób mogę włączyć do tekstu okrągły cudzysłów?

O. Nie możesz. Znak ten nie jest zdefiniowany w zbiorze ISO-Latin-1, nie jest więc dostępny w HTML-u. HTML 4.0 powinien rozwiązać ten problem, obsługuje on bowiem standard Unicode, który umożliwia dostęp do znacznie bogatszego zestawu znaków.

P. „Rolę <BLINK> w HTML-u można porównać do odcisków palców na czystej, czar­nej tablicy”. Czy to nie lekka przesada?

O. Przepraszam, nie mogłam się oprzeć.

Znam wielu ludzi, którzy szczerze nienawidzą wszelkiego migania na stronach WWW i potrafią dyskutować o tym z taką zaciekłością, jakby mówili o polityce czy religii. Są tacy, którzy od razu zrezygnują z czytania stron, na których ktoś nieopatrznie użył znacznika <BLINK>. Czy warto, wobec tego ograniczać liczbę odbiorców swoich stron dla tak marnego efektu?

Quiz

1. Jakie są różnice pomiędzy stylem logicznym a fizycznym?

2. W jakim celu można używać znacznika <PRE> (tekst preformatowany)?

3. Jakie jest najczęstsze użycie znacznika <ADDRESS>?

4. Starsze wersje HTML umożliwiają wyrównanie oraz wyśrodkowanie tekstu na stronie. Jaki jest najlepszy sposób wykonania tych czynności w HTML 4.0?

5. Nie zaglądając do tabeli 6.2, wymień wszystkie osiem znaczników stylów logicznych oraz możliwości ich zastosowania. Wyjaśnij, dlaczego powinno się używać stylów logicznych, zamiast fizycznych.

Odpowiedzi

1. Style logiczne wskazują sposób użycia podświetlonego tekstu (cytat, definicja, kod itd.). Style fizyczne prezentują, w jaki sposób jest wyświetlany podświetlony tekst (pogrubiony, kursywa, czcionką o stałej szerokości, na przykład, Courier, itd.)

6. Tekst preformatowany może zostać użyty w tabelach tekstowych, przykładach kodu, obrazkach ASCII oraz w dowolnym elemencie strony, w którym konieczne jest dodawanie dodatkowych znaków spacji, aby wyrównać dany tekst.

7. Znacznik <ADDRESS> służy najczęściej do formatowania na stronie WWW informacji o charakterze podpisu. Są to informacje o twórcy strony, możliwościach kontaktowania się, prawach autorskich, daty czy też ostrzeżenia. Informacje te pojawiają się najczęściej u dołu strony.

8. Zalecane jest, aby w HTML 4.0 funkcje wyrównania i wyśrodkowania wywoływać za pomocą stylów.

9. Osiem logicznych stylów to: <EM> (wyróżniony tekst), <STRONG> (tekst pogrubiony), <CODE> (kod programów), <SAMP> (użycie podobnie jak <code>), <KBD> (tekst wprowadzony przez użytkownika), <VAR> (nazwy zmiennych), <DFN> (definicje) oraz <CITE> (krótkie cytaty). Formatowanie wyglądu znaczników logicznych należy już do zadań przeglądarki.

Ćwiczenia

1. Skoro masz już swoją pierwszą stronę za sobą, rzuć okiem na swoją stronę domową. Jak mógłbyś ją jeszcze rozwinąć, aby zachęcić użytkowników do zagłębienia się w jej zawartość? Nie zapomnij dodać połączeń do innych stron na swojej witrynie.

10. Oto małe ćwiczenie. Wynalazłeś urządzenie, które gwarantuje, że żadna skarpetka nie zgubi drugiej skarpetki od swojej pary podczas prania lub suszenia. Zaprojektuj stronę, która przedstawiłaby wszystkie zalety tego urządzenia oraz podała powody, dla których żaden dom nie mógłby się bez niego obejść! Użyj różnych stylów, aby zaakcentować i podkreślić najważniejsze punkty na stronie.

156 Część 2. Tworzenie prostej strony WWW

Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 155

---