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. Wyposasony w tę wiedzę mosesz 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ównies niektóre znaczniki specyficzne dla konkretnych przeglądarek.

Tak więc w ponisszym 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ósni się standard HTML-a od jego rozszerzeń i kiedy nalesy 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ę dusa, mosesz więc poczuć się nieco przytłoczony nadmiarem informacji. W sadnym razie nie próbuj tego wszystkiego zapamiętać! Postaraj się tylko zorientować, jakie mosliwoś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łusą 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łusą 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ósnione słowa.

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 sadnej gwarancji, se tekst objęty tymi znacznikami zawsze będzie wyświetlony kursywą czy pogrubiony (dlatego tes nie powinieneś bezgranicznie im ufać).

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

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, kasda 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 ponisej.

Zapamiętałeś jus wszystkie znaczniki? Jeseli tak, to bardzo dobrze, bowiem na końcu rozdziału czeka Cię krótki sprawdzian. Ponisszy fragment pokazuje, jak mosna praktycznie wykorzystać znaczniki stylów logicznych na stronie WWW. Rysunek 6.1 pokazuje, jak wygląda rezultat wyświetlony w przeglądarce Internet Explorer.

Style fizyczne

Obok stylów logicznych, opisanych w poprzednim punkcie, funkcjonuje takse 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.

Podobnie jak znaczniki stylów logicznych, tak i w tym przypadku kasdy znacznik ma swój początek i koniec. W standardzie HTML 2.0 zdefiniowano trzy znaczniki stylów fizycznych:

W HTML-u 3.2 pojawiły się kolejne:

Korzystając z przedstawionych znaczników, szczególnie z tych dostępnych dopiero od wersji HTML 3.2, musisz być świadom, se nie wszystkie przeglądarki będą potrafiły sobie z nimi poradzić. Zastanów się, czy nie mosna sformatować tekstu w inny sposób, czy tes 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 usytkowników korzysta jeszcze ze starszych wersji, które mogą zachować się w rósny sposób. A jus 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 niemosliwe.

W takiej sytuacji Lynx będzie próbował obejść problem i w jakiś sposób wyrósni zaznaczony tekst, ale mose to prowadzić do nieoczekiwanych rezultatów.

Znaczniki fizyczne mogą być w sobie wzajemnie zagniesdsane, tak se dany fragment tekstu mose być, na przykład, jednocześnie pogrubiony i pochylony.

<B><I>Ten tekst jest pogrubiony i pochylony</I></B>

Ale, niestety, końcowy rezultat powysszego zapisu jest zalesny od przeglądarki. Tekst niekoniecznie będzie zarówno pogrubiony, jak i pochylony. Mose się zdarzyć, se uwzględniony zostanie tylko jeden z tych dwóch sposobów formatowania.

Ponisszy przykład pokazuje sposób wykorzystania znaczników stylów fizycznych, a rysunek 6.2 przedstawia rezultat 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 jus 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>. Kasda spacja, znajdująca się pomiędzy znacznikami <PRE> i </PRE>, zostanie wyświetlona. Za pomocą tej pary znaczników mosesz formatować tekst w dowolny sposób, mając przy tym pewność, se właśnie tak zostanie on pokazany przez przeglądarkę.

Chwyt polega na tym, se 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. Poniewas pomiędzy znacznikami </PRE> i </PRE> mogą znajdować się równies spacje, mosna ich z powodzeniem usywać 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).

Tworząc tekst, który będzie preformatowany, mosesz usywać stylów znaków oraz znaczników połączeń, nie mosesz natomiast korzystać z nagłówków i znaczników akapitu. Linie nie powinny być dłussze nis 60 znaków, bowiem okna pewnych przeglądarek mogą okazać się zbyt „wąskie”, seby wyświetlić całość tekstu. Tekst preformatowany nie jest w saden sposób dopasowywany do szerokości okna, tak więc nalesy być bardzo ostrosnym i uchronić czytelników przed przewijaniem tekstu, co jest bardzo frustrującą czynnością.

Równie ostrosnie nalesy korzystać z tabulacji. Liczba znaków tabulacji jest rósna dla rósnych przeglądarek — w jednym przypadku będą to cztery znaki, w innym osiem. Jeseli fragment tekstu preformatowanego, który tworzysz, jest uzalesniony 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 smudnej konwersji i wstawiania odpowiednich znaczników formatujących, jak w ponisszym przykładzie:

<pre>

Do: lemay@lne.com

From: jokes@lne.com

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, se gdy jus 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ść se jest opryskliwy, to jeszcze słabo go słychać. Ostatecznie, gdy się bardzo starasz, zostajesz z łaską obsłusony.

</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).

Linie poziome

Znacznik <HR> nie posiada znacznika zamykającego, ani tes nie jest w saden 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 przykładzie przedstawionym ponisej 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.

Atrybuty znacznika <HR>

Znacznik <HR> występuje w HTML-u 2.0 bez znacznika zamykającego, jak równies bez sadnych atrybutów, jednakse w wersji 3.2 poszerzono nieco mosliwoś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 nalesy je zastępować arkuszami stylów.

Atrybut SIZE określa grubość linii, podawaną w pikselach. Standardową wartością jest 2, i jest to równies najmniejsza mosliwa grubość. Rysunek 6.6 przedstawia linie o rósnych grubościach.

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

Jeseli linia nie będzie wypełniała całej szerokości ekranu, mosna określić jej połosenie, słusy do tego atrybut ALIGN. Mosna więc dosunąć linię do lewej strony ekranu (ALIGN= 'left'), do prawej (ALIGN='right') lub tes ją wyśrodkować (ALIGN='center'). Standardowo linie poziome są wyśrodkowane.

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

Ostatnim atrybutem jest NOSHADE, który powoduje, se 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.

Łamanie linii

Znacznik <BR> powoduje przełamanie linii, co oznacza, se 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 mose bowiem występować w obrębie innych elementów, czyli akapitów lub list, ale nie powoduje on sadnych dodatkowych zmian w wyglądzie tych części tekstu. Nie wstawia pustych linii przed lub po sobie, nie ma sadnego wpływu na rozmiar czy rodzaj czcionki — jedyną jego funkcją jest rozpoczęcie wyświetlania tekstu od nowej linii.

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

Adresy

Para znaczników <ADDRESS>¼</ADDRESS> słusy 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 lemay@lne.com <br />

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

ostatnia korekta - 30 kwiecień 1997 <br />

Copyright Laura Lemay 1994 wszelkie prawa zastrzesone <br />

Niestosowanie się do przepisów będzie karane. Nie drasnić konduktora.

</address>

Gdyby nie adres czy tes jakikolwiek inny sposób „podpisywania” stron WWW, odnalezienie ich autorów byłoby prawie niemosliwe. Jeseli będziesz umieszczał swoje dane za pomocą znacznika <ADDRESS> na kasdej stronie, będziesz miał pewność, se kasdy, kto zechce się z Tobą skontaktować, będzie mógł to swobodnie uczynić.

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

Cytaty

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

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

Znaki specjalne

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

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

Problem polega na tym, se 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, mose zobaczyć coś zupełnie innego, czasem kompletną bzdurę. Mose tes zdarzyć się, se ten dziwny znak zostanie zgubiony w trakcie transportu pliku przez sieć i w efekcie nie będzie go wcale.

Ale co mosna 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 usywane 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ą zalesne od wielkości liter, tak więc nalesy wpisywać je bardzo uwasnie. Kody nazwane wyglądają mniej więcej tak:

&agrave;

&quot;

&laquo;

&copy;

Kody numerowane równies 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). Kasdy 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, se umieszcza się je dokładnie w tym samym miejscu, w którym powinien znaleźć się sądany symbol.

By więc poprawnie napisać słowo resume w pliku HTML, nalesy 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. Jeseli zajdzie taka potrzeba, zawsze mosesz z niej skorzystać.

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. Jednakse istnieje kilka wyjątków, mowa tu o znakach, które mają specjalne znaczenie w samym HTML-u. W ich wypadku równies nalesy skorzystać z kodów.

Załósmy, se 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, nieprawdas? Niestety, sadna przeglądarka nie wyświetli tej linii tak, jakbyśmy chcieli. Dlaczego? Problem tkwi w znaku mniejszości (<). W HTML-u kasdy znak mniejszości oznacza początek znacznika, poniewas 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 (>), poniewas jest to koniec znacznika HTML. Powysszy 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 kasdego 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 nalesy 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 tes zbyt wielu stron, w których wykorzystywano by kod &quot;. Tak więc mosesz bezpiecznie usywać zwykłego cudzysłowu, wpisując go prosto z klawiatury.

Tabela 6.1:

Kody znaków,usywanych w definicjach znaczników

Połosenie tekstu na stronie

Mosliwość rozmieszczania tekstu na stronie oznacza tyle, se mosna wyrównać go do lewego marginesu (standard), do prawego marginesu oraz wycentrować. W HTML-u 2.0 nie było sadnych mechanizmów, które umosliwiałyby tego typu kontrolę połosenia tekstu, wszystko zalesał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łosenia tekstu i innych elementów strony, a ich obsługa została dość szybko wdrosona w większości przeglądarek. Zostały one zachowane równies 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łosenia tekstu.

Kontrola połosenia pojedynczych elementów

Aby ułosyć w dowolny sposób nagłówek lub akapit, mosesz skorzystać z atrybutu ALIGN. Posiada on trzy wartości: LEFT RIGHT i CENTERED. Przyjrzyj się ponisszym 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 ponisej przykład ilustruje rósne wyrównanie kilku nagłówków. Rysunek 6.13 pokazuje rezultat wyświetlony w przeglądarce Internet Explorer.

Kontrola połosenia grup elementów

Nieco bardziej elastyczną metodą kontroli połosenia 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), umosliwiają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.

Jednakse <DIV> słusy do oznaczenia dowolnego fragmentu kodu HTML (który mose zawierać równies 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

n    <DIV> usywamy tylko raz — nie ma potrzeby ciągłego wstawiania ALIGN przy kasdym znaczniku,

n    <DIV> mose zostać usyte do zmiany połosenia 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, se na początku tekstu nalesy wstawić znacznik otwierający (<DIV>), na końcu zamykający (</DIV>), a do pierwszego z nich nalesy dopisać atrybut ALIGN z odpowiednią wartością (LEFT RIGHT lub CENTERED), jak w ponisszym 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łosone zgodnie z wartością atrybutu ALIGN. Jeseli jednak atrybut ten zostanie usyty w jednym z nagłówków lub paragrafów, objętych znacznikiem <DIV>, uwzględnione będzie to indywidualne ustawienie, co oznacza, se dany element zostanie wyświetlony inaczej.

Zauwas, se <DIV> sam z siebie nie definiuje sadnego elementu tekstu. Znaczniki <P> <H1> <UL> <BLOCKQUOTE> są wciąs wymagane.

Oprócz <DIV> istnieje jeszcze znacznik, słusą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, se 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 (takse jego nalesy zastępować arkuszami stylów) słusy do zachowania kontroli nad fragmentami tekstu, nie objętymi stylami znaków. Początkowo znacznik ten słusył 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 mosliwość 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ównies w kontekście czcionek.

Zmiana rozmiaru czcionki

Najpowszechniejszym zastosowaniem znacznika <FONT> jest zmiana rozmiaru czcionki pojedynczego znaku, słowa, zdania czy tes innego fragmentu tekstu. Wybrany tekst znajduje się pomiędzy znacznikami <FONT> i </FONT>, a atrybut SIZE przy pierwszym z nich określa sądany rozmiar. SIZE mose przyjmować wartości od do , gdzie 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 kasdej wartości atrybutu SIZE

Rozmiar czcionki mosna określać takse w stosunku do rozmiaru standardowego, za pomocą znaków i umieszczonych po atrybucie SIZE. Poniewas standardowy rozmiar czcionki wynosi , zmiana relatywna do niego mose wynosić od do , na przykład:

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

Jeseli 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 nalesy równies 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 tes do wyrósniania pojedynczych słów i zdań. Jeseli 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ósniał. Jeseli będziesz opierał swoje strony na znacznikach zgodnych z rolą tekstu, niezalesnie od przeglądarki nagłówek zawsze pozostanie nagłówkiem. Postaraj się ograniczyć usycie 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 usywanych 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. Jeseli nie znajdzie pierwszej z nich, zacznie szukać drugiej, potem trzeciej, as znajdzie tę, która rzeczywiście będzie w systemie zainstalowana. Jeseli okase się, se przeglądarka nie znajdzie sadnej z wymienionych czcionek, usyta zostanie czcionka standardowa.

Spójrz na ponisszy przykład, ten tekst powinien być w pierwszej kolejności wyświetlony za pomocą czcionki Futura. Jeseli nie będzie jej w systemie, powinna zostać usyta Helvetica, a jeseli tej czcionki równies nie będzie, usyta zostanie czcionka standardowa.

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

Korzystając z atrybutu FACE, musisz mieć na uwadze, se niewiele przeglądarek potrafi go obsłusyć, będzie więc niedostępny dla sporej grupy czytelników. Kolejny problem to fakt, se te same czcionki nazywają się rósnie w rósnych 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 usywany, a jus na pewno nie powinieneś opierać na nim swojej prezentacji.

Migający <BLINK>

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

Para znaczników <BLINK>¼</BLINK> powoduje, se tekst zawarty pomiędzy nimi wyświetlany jest z efektem migania. W zalesnoś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 usywany sposób przyciągnięcia uwagi czytelnika do pewnego fragmentu strony.

Problem z miganiem polega na tym, se stanowi ono zbyt mocne wyrósnienie fragmentu tekstu. Ma ono tę cechę, se nigdy się nie kończy i przyciąga uwagę cały czas, co mose być tak absorbujące, se czytelnik w efekcie nie przeczyta innych fragmentów strony. Wielu twórców stron WWW (w tym ja) odradza usywanie znacznika <BLINK>, bowiem rzesze odbiorców uwasają ten sposób za zbyt agresywny i bardzo denerwujący. Rolę <BLINK> w HTML-u mosna porównać do odcisków palców na czystej, czarnej tablicy. Jeseli jednak uwasasz usycie tego znacznika za konieczne, rób to bardzo oszczędnie (nie więcej nis kilka słów na stronie). Pamiętaj równies o tym, se w niektórych wersjach przeglądarek Netscape miganie mose zostać wyłączone. Jeseli chcesz wyrósnić słowo lub zdanie, skorzystaj raczej z tradycyjnych i pewniejszych metod, bowiem w tym wypadku nie masz nawet gwarancji, se 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 usywana wtedy, gdy zdanie lub wyrasenie z jakichś powodów musi zostać wyświetlone w jednym wierszu, nalesy jednak korzystać z niej bardzo ostrosnie.

Długie linie mogą sprawić, se strona będzie wyglądała dość dziwnie, poza tym zachodzi niebezpieczeństwo, se 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. Jeseli zmieści się ona na ekranie, znacznik ten zostanie zignorowany. W XHTML 1.0 nalesy 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 tes 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 sprzedasy starych i rzadkich ksiąsek, prawdziwych „białych kruków”.

Rozplanuj stronę

W rozdziale 2.— „Grunt to organizacja” mówiłam duso o tym, se 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:

n    adres i numer telefonu księgarni,

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

n    kilka najnowszych tytułów,

n    zapowiadane wydarzenia.

Teraz kolej na hiperpołączenia — nalesy zaplanować, dokąd powinny one prowadzić. Kasdy tytuł z listy nowości wydaje się być doskonałym kandydatem. Mosesz stworzyć połączenia do stron ze szczegółowymi informacjami na temat poszczególnych ksiąsek, autorów czy tes wydawnictw.

W części poświęconej zapowiadanym zdarzeniom mosesz równies zawrzeć kilka połączeń, których liczba będzie zalesna od tego, jak wiele miejsca zechcesz poświęcić poszczególnym tematom. Jeseli 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 mose okazać się, se 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ć kasda 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łusszy tytuł mosna wstawić w nagłówku typu <H1>, w tekście zasadniczym.

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

'https://www.w3.org/TR/xhtml1/DTD/transitional.dtd'>

<html>

<head>

<title>Księgarnia Bookworm</title>

</head>

<body>

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

<h2>Zawartość</h2>

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

<h2>Najnowsze tytuły</h2>

<h2>Zapowiadane wydarzenia</h2>

</body>

</html>

Kasdy z nagłówków, które umieściłeś na swojej stronie, oznacza początek danej sekcji na stronie. Jeśli przy kasdym nagłówku umieścisz odnośnik, będziesz mógł łatwo przemieszczać się pomiędzy rósnymi 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'

'https://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ąską</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 mosesz zacząć tworzyć treść strony. Poniewas działasz na polu literatury, dobrze byłoby rozpocząć stronę od jakiegoś ładnego cytatu na temat starych ksiąsek. Poniewas będzie to dłusszy cytat, mosna wyrósnić go za pomocą znacznika <BLOCKQUOTE>, a tytuł dodatkowo ująć w znaczniki <CITE>

<blockquote>

'Najlepsze są stare ksiąski -- 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 kasda linia zakończona będzie znacznikiem <BR>

<p>Księgarnia Bookworm<br />

1345 Applewood Dr<br />

Springfield, CA 94325<br />

</p>

Dodawanie spisu treści

Przeglądanie całej utworzonej przez Ciebie strony wymaga smudnego 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 usytkownik kliknie na jedno z połączeń w spisie treści, zostanie automatycznie odesłany do interesującej go sekcji. Poniewas jus utworzyłeś odnośniki, łatwo sprawdzić, gdzie Cię skierują.

Utworzyłeś jus 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.

Tworzenie opisu księgarni

Najwysszy czas zająć się pierwszym nagłówkiem na stronie. Utworzymy sekcję zawierającą opis księgarni. Za nagłówkiem (umieszczonym w pierwszej linii ponisszego 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 mosna spokojnie poczytać ksiąskę 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ósnione:

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

Treści ciąg dalszy

Jak jus wcześniej wspomniałem, lista najnowszych tytułów to klasyczny przykład menu połączeń. Mosna 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 ponisszego) 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 nalesy 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 zalesy od Ciebie, nie ma tu bowiem sadnych obiektywnych kryteriów. Ja osobiście wolę tworzyć niewielkie połączenia, aby mieć pewność, se będą się one wyrósniać z tekstu. W tym przypadku połączeniami będą wyłącznie tytuły ksiąsek. Jednocześnie, ponisej 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 />

Zauwas, se 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 kasdym miejscu. Nalesy tylko uwasać na przeplatanie znaczników, o czym jus 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.

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 tes wystarczy tylko umieścić krótki komentarz na kasdy temat. W tym wypadku jest to równies tylko i wyłącznie Twoja decyzja, zalesy bowiem od ilości tekstu i tego, co wolisz zrobić. Poniewas 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). Zauwas, se zdania na początku akapitów zostały pogrubione. Są one podsumowaniem treści i pozwalają czytelnikowi na pominięcie tematu, jeseli nie jest nim zainteresowany.

Analogicznie, jak w poprzednich sekcjach, takse 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ąsek</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 kasdą sobotę o 13, by poczytać, w coś zagrać

lub inaczej spędzić wolny czas. Podajemy równies 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 wiesy. 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 takse 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 lemay@bookworm.com<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.

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' 

'https://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ąską</h1></a>

<blockquote>

'Najlepsze są stare ksiąski -- 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 />

</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 mosna spokojnie poczytać ksiąskę 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ąsek</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 kasdą sobotę o 13, by poczytać, w coś zagrać

lub inaczej spędzić wolny czas. Podajemy równies 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 wiesy. 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 lemay@bookworm.com<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ę kasdej dobrej strony WWW. W tym momencie, gdy większość treści jest jus na swoim miejscu, zastanów się, co jeszcze mogłoby się na tej stronie znaleźć.

We wprowadzeniu wspomniano o czterech kotach, które mosna spotkać w księgarni. Wątek ten mosna łatwo rozwinąć, choć nie było tego w pierwotnych planach. Kasdy kot mose 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 mosna połączyć kasde słowo, znajdujące się na stronie z czymś interesującym (jeseli tylko jest z czym). Mosesz 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, se 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łoseniami.

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

Obejrzyj efekt końcowy

Teraz, kiedy cały kod jest jus na swoim miejscu, mosesz 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. Jeseli 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, seby te błędy wyłapać, zanim odnajdą je inni.

Czy mosna zrobić coś jeszcze?

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

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

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

n    niewielka zmiana wielkości czcionki samego adresu.

Aby wyśrodkować górną część strony, nalesy 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ąską</h1></a>

<blockquote>

'Najlepsze są stare ksiąski -- 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 />

</p>

</div>

Aby zmienić wielkość czcionki adresu, nalesy objąć ten fragment znacznikiem <FONT>

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

1345 Applewood Dr<br />

Springfield, CA 94325<br />

</font></p>

Rysunek 6.19 przedstawia ostateczny rezultat w przeglądarce Internet Explorer. Zwróć uwagę na to, se saden z usytych 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ś usywać znaczników i atrybutów, słusą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 przecies tylko najnowsze programy potrafią je obsługiwać. Chcąc, aby strony były dostępne dla jak największej liczby czytelników, musisz wciąs 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łusących do prezentacji tekstu oraz z kilkoma dodatkowymi znacznikami, które poszerzają nieco mosliwości jego formatowania. Podjąłeś takse 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, se naprawdę nie radzę tego robić.

W ponisszej 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.

Tabela 6.2.

Znaczniki HTML opisane w rozdziale 5

Tabela 6.2.

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

Tabela 6.2.

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

Warsztaty

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

Pytania i odpowiedzi

P.  Jeseli istnieje znacznik łamania linii, to czy mosna tes ł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. Jeseli 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 sadnej przeglądarce nie istnieje pojęcie strony w obrębie jednego dokumentu, jest to jedna całość, której nie mosna podzielić w ten sposób.

Nawet jeseli jako stronę potraktować to, co w danym momencie widoczne jest na ekranie, wciąs nie wiadomo, co oznaczałoby łamanie takiej strony, bowiem rozmiary ekranu są ściśle uzalesnione 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, se 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 mosesz. 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 umosliwia dostęp do znacznie bogatszego zestawu znaków.

P. „Rolę <BLINK> w HTML-u mosna 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 usył znacznika <BLINK>. Czy warto, wobec tego ograniczać liczbę odbiorców swoich stron dla tak marnego efektu?

Quiz

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

2. W jakim celu mosna usywać znacznika <PRE> (tekst preformatowany)?

3. Jakie jest najczęstsze usycie znacznika <ADDRESS>

4. Starsze wersje HTML umosliwiają 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 mosliwości ich zastosowania. Wyjaśnij, dlaczego powinno się usywać stylów logicznych, zamiast fizycznych.

Odpowiedzi

1. Style logiczne wskazują sposób usycia 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.)

2. Tekst preformatowany mose zostać usyty 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.

3. Znacznik <ADDRESS> słusy najczęściej do formatowania na stronie WWW informacji o charakterze podpisu. Są to informacje o twórcy strony, mosliwościach kontaktowania się, prawach autorskich, daty czy tes ostrzesenia. Informacje te pojawiają się najczęściej u dołu strony.

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

5. Osiem logicznych stylów to: <EM> (wyrósniony tekst), <STRONG> (tekst pogrubiony), <CODE> (kod programów), <SAMP> (usycie podobnie jak <code> <KBD> (tekst wprowadzony przez usytkownika), <VAR> (nazwy zmiennych), <DFN> (definicje) oraz <CITE> (krótkie cytaty). Formatowanie wyglądu znaczników logicznych nalesy jus do zadań przeglądarki.

Ćwiczenia

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

2. Oto małe ćwiczenie. Wynalazłeś urządzenie, które gwarantuje, se sadna 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 saden dom nie mógłby się bez niego obejść! Usyj rósnych stylów, aby zaakcentować i podkreślić najwasniejsze punkty na stronie.