R 06 07, HTML
[ Pobierz całość w formacie PDF ]
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 te
j 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.
120
Część 2.
Tworzenie prostej strony WWW
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>
Rozdział 6.
Więcej o formatowaniu tekstu w HTML-u
121
<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>
:
<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.
122
Część 2.
Tworzenie prostej strony WWW
<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 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.
<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>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
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:
<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 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.
[ Pobierz całość w formacie PDF ]