Mrówkojad jest najdziwniej wyglądającym
zwierzęciem,nieprawdaż?
Skręć w lewo przy stacji
benzynowej
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):
#include "trans.h"
Ten znacznik oznacza tekst przykładowy, który jest wyświetlany bardzo podobnie
do :
URL tej strony, to SAMP>http://www.cern.ch/
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):
Wprowadz następującą komendę:
find . name "prune" -print
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:
chown twoje_imie nazwa_pliku
Znacznik definicji. Jest on wykorzystywany do oznaczania słowa, które będzie lub
właśnie zostało zdefiniowane:
Style używane jak wyżej nazywamy
stylami znaków.
Za pomocą tego znacznika oznacza się krótkie cytaty, na przykład:
Oberżyna jest znana ze swych właściwości do wywoływania ostrych
mdłości
(Lemay, 1994)
Wszystkie wymienione znaczniki, z wyjątkiem , są zdefiniowane w standardzie HTML
2.0. 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 dzwiękowych (czyli takich, które prezentują
strony WWW w formie dzwię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 dzwię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.
122 Część 2. Tworzenie prostej strony WWW
Ten znacznik oznacza skrót słowa; oto przykład jego zastosowania:
Zastosuj standardowe skróty oznaczające nazwy stanów
(takie jak CA oznaczający Kalifornię).
Podobny do znacznika , oznacza słowo utworzone z pierwszych liter kilku
innych słów, na przykład:
Największym polskim ubezpieczycielem jest
PZU (Powszechny Zakład Ubezpieczeń).
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 prak-
tycznie wykorzystać znaczniki stylów logicznych na stronie WWW. Rysunek 6.1 poka-
zuje, jak wygląda rezultat wyświetlony w przeglądarce Internet Explorer.
Mrówkojad jest najdziwniej wyglądającym zwierzęciem,
nieprawdaż?
Skręć w prawo przy Wesołym Sklepie Dee
Dee
#include "trans.h"
URL tej strony to: http://www.cern.ch/
Wpisz następujące polecenie: find . -name "prune" -
print
chown nazwa_użytkownika
Style których nazwy odpowiadają sposobowi ich użycia są określane
jako style logiczne.
Oberżyny mogą u niektórych osób powodować mdłości
(Lemay, 1994).
Zastosuj standardowe skróty oznaczające nazwy stanów (takie jak
CA oznaczający Kalifornię).
Największym polskim ubezpieczycielem jest PZU
(Powszechny Zakład Ubezpieczeń).
Rysunek 6.1.
Wyniki wyświetlone
w przeglądarce
Internet Explorer
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 123
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 frag-
mentu tekstu (pogrubienie, kursywa, jednakowa szerokość liter). Znaczniki te noszą na-
zwę 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:
Pogrubienie,
Kursywa,
Czcionka maszynowa (znaki o jednakowej szerokości).
W HTML-u 3.2 pojawiły się kolejne:
Podkreślenie (zarzucony w wersji 4.0),
Przekreślenie (zarzucony w wersji 4.0),
Czcionka większa od reszty tekstu,
Czcionka mniejsza od reszty tekstu,
indeks dolny,
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 sytu-
acjach 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świe-
tlenie 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 za-
znaczony tekst, ale może to prowadzić do nieoczekiwanych rezultatów.
124 Część 2. Tworzenie prostej strony WWW
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.
Ten tekst jest pogrubiony i pochylony
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 ry-
sunek 6.2 przedstawia rezultat w przeglądarce Internet Explorer.
W Piekle Dantego, Złe Doły były ósmym kręgiem, a przebywali
tam złośliwcy i oszuści.
Wszystkie zgłoszenia należy przesłać do 26 sierpnia
1996.
Wpisz lpr -Pbirch myfile.txt, by wydrukować ten plik.
Wpisz nazwisko w zaznaczonym miejscu Podpisz tutaj:
Ludzie noszący pomarańczowe podkoszulki i zwykłe
kalesony nie mają gustu są wyzywający.
Maty podłogowe dają WIELKIE oszczędności!
Wtedy, z rogu pokoju dobiegł do niego cichy
głos.
Na dzisiejszej giełdzie wartość akcji Consolidated Orange Trucking
wzrosła o 1/4 punktu.
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 rozdziale 3. Wprowadzenie do HTML , wszelkie dodatkowe znaki spacji, tabu-
lacji czy nowej linii są ignorowane.
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 125
Jedynym wyjątkiem od tej reguły jest znacznik tekstu preformatowanego . Każda
spacja, znajdująca się pomiędzy znacznikami i
, 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 znaczni-
kami
i 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).
Ś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.
Rysunek 6.3.
Tabela, utworzona
za pomocą
znacznika
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 aka-
pitu. Linie nie powinny być dłuższe niż 60 znaków, bowiem okna pewnych przegląda-
rek mogą okazać się zbyt wąskie , żeby wyświetlić całość tekstu. Tekst preformato-
wany 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 fru-
strującą czynnością.
126 Część 2. Tworzenie prostej strony WWW
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 zna-
ków tabulacji, spróbuj zastąpić je spacjami, tak będzie bezpieczniej.
Znacznik 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 oraz
na początku i na końcu tekstu, a taki plik stanie się ele-
mentem strony HTML bez potrzeby żmudnej konwersji i wstawiania odpowiednich
znaczników formatujących, jak w poniższym przykładzie:
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, ż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.
Kreatywny sposób wykorzystania znacznika pozwala na tworzenie rysunków
ASCII na stronach WWW. Kolejny przykład pokazuje rysunek krowy, wykonany za po-
mocą kodów ASCII i wyświetlony w przeglądarce Internet Explorer (patrz rysunek 6.4).
( )
Muu (oo)
\/-------\
|| | \
||---W|| *
|| ||
Rysunek 6.4.
Wyniki wyświetlone
w przeglądarce
Internet Explorer
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 127
Linie poziome
Znacznik
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 do-
skonała metoda wizualnego oddzielania od siebie fragmentów strony WWW, na przy-
kład, zasadniczego tekstu od elementów listy itp.
W HTML nie jest konieczne zamykanie znacznika
. 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:
Jeśli linia pozioma ma przypisane jakieś atrybuty, ukośnik nadal występuje na końcu
znacznika, tak jak w poniższym przykładzie:
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świe-
tlone w przeglądarce Internet Explorer.
Do zrobienia w piątek
- Iść do pralni
- Wysłać Fedexowi obrazy
- Obiad z Moli
- Przeczytać Email
- Zainstalować Ethernet
Rysunek 6.5.
Wyniki wyświetlone
w przeglądarce
Internet Explorer
128 Część 2. Tworzenie prostej strony WWW
Atrybuty znacznika
Znacznik
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 zale-
cane 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.
2 piksele
4 piksele
8 pikseli
16 pikseli
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.
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 129
100%
75%
50%
25%
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 (ALI-
GN= "left"), do prawej (ALIGN="right") lub też ją wyśrodkować (ALI-
GN="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 utwo-
rzony z linii poziomych, jego wygląd pokazany został na rysunku 6.8.
Wypożyczalnia kaset wideo
Prezentuje
130 Część 2. Tworzenie prostej strony WWW
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.
Wypożyczalnia kaset wideo
Prezentuje
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:
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
według proponowanej specyfikacji XHTML 1.0.
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 131
Aamanie linii
Znacznik
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ł
. 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
, nie jest konieczne zamykanie znacznika
.
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
Najeżone łozami, wierzbami czubate;
Oba stawy ubrane w zieloności szatę.
Poniższy przykład to akapit, w którym każda linia zakończona jest znacznikiem
.
Rysunek 6.10 przedstawia rezultat w przeglądarce Internet Explorer.
Zaiste, okolica była malownicza!
Dwa stawy pochyliły ku sobie oblicza
Jako para kochanków; prawy staw miał wody
Gładkie i czyste jako dziewicze jagody;
Lewy, ciemniejszy nieco, jako twarz młodziana
Smagława i już męskim puchem osypana.
Prawy złocistym piaskiem połyskał się wkoło
Jak gdyby włosem jasnym; a lewego czoło
Najeżone łozami, wierzbami czubate;
Oba stawy ubrane w zieloności szatę.
Rysunek 6.10.
Kod wyświetlony
w przeglądarce
Internet Explorer
Ze znacznikiem
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. Wykorzy-
stywanie obrazów, kolorów i tła .
132 Część 2. Tworzenie prostej strony WWW
Adresy
Para znaczników & służy do wstawiania do stron WWW cze-
goś w rodzaju podpisu. Wstawia się go zwykle na dole strony, a obejmuje, takie infor-
macje jak: nazwisko twórcy, sposób kontaktu z nim, datę powstania strony, informacje
o prawach autorskich itp. Adresy są zwykle poprzedzane linią poziomą (
), a po-
szczególne linie oddzielane są od siebie za pomocą znacznika
.
Laura Lemay lemay@lne.com
Serwis Laury Lemay, Sp. z o.o.
ostatnia korekta - 30 kwiecień 1997
Copyright Laura Lemay 1994 wszelkie prawa zastrzeżone
Niestosowanie się do przepisów będzie karane. Nie drażnić konduktora.
Gdyby nie adres czy też jakikolwiek inny sposób podpisywania stron WWW, odnale-
zienie ich autorów byłoby prawie niemożliwe. Jeżeli będziesz umieszczał swoje dane za
pomocą znacznika 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).
Laura Lemay lemay@lne.com
Serwis Laury Lemay, Sp. z o.o.
ostatnia korekta - 30 kwiecień 1997
Copyright Laura Lemay 1994 wszelkie prawa zastrzeżone
Niestosowanie się do przepisów będzie karane. Nie drażnić konduktora.
Rysunek 6.11.
Internet Explorer
Cytaty
Znacznik służy do oznaczania cytatów (w przeciwieństwie do ,
który oznaczał cytaty krótsze, 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
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 133
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 niż jako zwykły akapit. Oto inny przykład:
"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
Podobnie jak w akapitach, także linie w obrębie znaczników mogą być
łamane za pomocą
. Poniższy przykład pokazuje, jak taki tekst może wyglądać
w przeglądarce Internet Explorer (rysunek 6.12).
A co wiedzieć, gdzie chodzisz, moja dziewko śliczna,
A mnie tymczasem trapi teskność ustawiczna;
Jakoby słońce zaszło, kiedy nie masz ciebie,
A z tobą i w pół nocy zda się dzień na niebie.
--Jan Kochanowski
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 po-
winny znajdować się w pliku HTML, są te bezpośrednio wypisane na klawiaturze. Jeże-
li do uzyskania jakiegoś znaku potrzebna jest kombinacja klawiszy inna niż zwykłe na-
ciś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 do-
skonale 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 prze-
134 Część 2. Tworzenie prostej strony WWW
glą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 standar-
dzie języka zdefiniowano zestaw kodów, zwanych kodami znaków, które zastępują naj-
częś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:
à
"
«
©
Kody numerowane również rozpoczynają się od znaku & i kończą się średnikiem, ale za-
miast nazwy zawierają znak # (hash) i liczbę. Liczba odpowiada numerowi znaku w zbio-
rze 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:
‚
õ
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 znalezć się żądany symbol.
By więc poprawnie napisać słowo resume w pliku HTML, należy wstawić:
résumé
lub
résmé
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 135
W dodatku B Krótki opis języka HTML 4.0 znajduje się pełna lista kodów nazwa-
nych. 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 znalezć kod znaku, który nie jest częścią
standardu ASCII. Jednakże istnieje kilka wyjątków, mowa tu o znakach, które mają spe-
cjalne 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:
if x < 0 do print i
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ć. Po-
dobny 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:
if x < 0 do print i
W HTML-u zdefiniowano kody dla każdego znaku, będącego jego częścią oraz dla po-
dwójnego cudzysłowu.
Podwójny cudzysłów wydaje się być nieco tajemniczy. Z technicznego punktu widze-
nia, aby stworzyć poprawny kod HTML, nie należy bezpośrednio posługiwać się cu-
dzysłowem z klawiatury, ale skorzystać z odpowiadającego mu kodu. W praktyce jed-
nak 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
136 Część 2. Tworzenie prostej strony WWW
". Tak więc możesz bezpiecznie używać zwykłego cudzysłowu, wpisując go pro-
sto z klawiatury.
Tabela 6.1:
Kody znaków,używanych w definicjach znaczników
Kod Rezultat
< <
> >
& &
"
Położenie tekstu na stronie
Możliwość rozmieszczania tekstu na stronie oznacza tyle, że można wyrównać go do le-
wego 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 tek-
stu, 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ę najpo-
pularniejszą 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ła-
dom:
MalPol, Sp. z o.o
To nie my pomalowaliśmy miasto na czerwono.
Fuksiarze Sp. z o.o.
Kim jesteśmy
Co robimy
Jak się z nami
skontaktować
Przedstawiony poniżej przykład ilustruje różne wyrównanie kilku nagłówków. Rysu-
nek 6.13 pokazuje rezultat wyświetlony w przeglądarce Internet Explorer.
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 137
Kontrola położenia grup elementów
Nieco bardziej elastyczną metodą kontroli położenia elementów tekstu jest znacznik
. 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.
Fuksiarze Sp. z o.o.
Kim jesteśmy
Co robimy
Jak się z nami
skontaktować
Rysunek 6.13.
Przykładowy kod
wyświetlony
w przeglądarce
Internet Explorer
Jednakże 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 (). Oto dwa zasadnicze pun-
kty, które ukazują prze-wagę nad korzystaniem tylko z atrybutu ALIGN.
używamy tylko raz nie ma potrzeby ciągłego wstawiania ALIGN przy
każdym znaczniku,
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 (), na końcu zamykający (), a do
pierwszego z nich należy dopisać atrybut ALIGN z odpowiednią wartością (LEFT, RI-
GHT lub CENTERED), jak w poniższym przykładzie:
Fuksiarze Sp. z o.o.
Wszystko, co znajdzie się pomiędzy dwoma znacznikami , zostanie ułożone
zgodnie z wartością atrybutu ALIGN. Jeżeli jednak atrybut ten zostanie użyty w jednym
138 Część 2. Tworzenie prostej strony WWW
z nagłówków lub paragrafów, objętych znacznikiem , uwzględnione będzie to in-
dywidualne ustawienie, co oznacza, że dany element zostanie wyświetlony inaczej.
Zauważ, że sam z siebie nie definiuje żadnego elementu tekstu. Znaczniki ,
, , są wciąż wymagane.
Oprócz istnieje jeszcze znacznik, służący tylko i wyłącznie do środkowania tek-
stu i innych elementów . W specyfikacji HTML jest on zdefiniowany jako
skrót i działa dokładnie tak samo, powodując, że wszystko
co znajdzie się pomiędzy i zostanie wyśrodkowane na ekranie.
MalPol, Sp. z o.o
To nie my pomalowaliśmy miasto na czerwono.
Dla zachowania spójności kodu, radzę jednak środkować elementy stron za pomocą
i ALIGN.
Czcionki i ich rozmiar
Znacznik , 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ł ob-
jęty nim tekst, ale z czasem jego zastosowanie poszerzyło się o możliwość wyboru ro-
dzaju 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 kon-
tekście czcionek.
Zmiana rozmiaru czcionki
Najpowszechniejszym zastosowaniem znacznika jest zmiana rozmiaru czcionki
pojedynczego znaku, słowa, zdania czy też innego fragmentu tekstu. Wybrany tekst
znajduje się pomiędzy znacznikami i , 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:
Znudził Cię stary wygląd czcionki?
Zmień go.
Rysunek 6.14 przedstawia typowe rozmiary czcionki dla każdej wartości atrybutu SIZE.
Rozdział 6. Więcej o formatowaniu tekstu w HTML-u 139
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 roz-
miar czcionki wynosi 3, zmiana relatywna do niego może wynosić od 3 do +4, na
przykład:
Zmień ponownierozmiar czcionki.
Jeżeli obejrzysz ten przykład w przeglądarce, obsługującej taki typ zapisu, słowo roz-
miar (znajdujące się pomiędzy znacznikami ) 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
rzał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
Staraj się unikać stosowania znacznika do powiększania czcionek w nagłów-
kach (, itd.), czy też do wyróżniania pojedynczych słów i zdań. Jeżeli doku-
menty 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 po-
zostanie nagłówkiem. Postaraj się ograniczyć użycie znacznika tylko do paru
efektów specjalnych.
Zmiana rodzaju czcionki
Rozwój znacznika 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 roz-
szerzył go o atrybut FACE. Atrybut ten stał się elementem standardu HTML 3.2, nato-
miast w wersji 4.0 do określania używanych czcionek zalecane są raczej arkusze stylów.
140 Część 2. Tworzenie prostej strony WWW
Wartością atrybutu FACE jest zbiór nazw czcionek, zapisanych w cudzysłowach i od-
dzielonych przecinkami. Przeglądarka, po napotkaniu takiego znacznika, będzie prze-
glą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świetlo-
ny 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.
Sans Serif, to czcionka bez małych
dodatków na zakończeniach każdego znaku.
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 in-
dziej Times New Roman. Z tych dwóch przyczyn, czyli małego rozpowszechnienia oraz
niejednolitego nazewnictwa czcionek, atrybut FACE nie powinien być zbyt szeroko uży-
wany, a już na pewno nie powinieneś opierać na nim swojej prezentacji.
Migający