R 10 07, HTML
[ Pobierz całość w formacie PDF ]
Rozdział 10.
XHTML i arkusze stylów
W trzech ostatnich rozdziałach mogłeś zauważyć odwołania do znaczników HTML,
które często określałam jako „przestarzałe w HTML-u 4.0 i zastępowane
arkuszami
stylów
”. Nadszedł czas, aby rozwiać tę tajemnicę i pokazać, jakie są tendencje rozwoju
HTML-a. W tym rozdziale poznasz sposób na formatowanie i projektowanie stron
opracowany przez World Wide Web Consortium. W rozdziale 3. — „Wprowadzenie do
HTML” dowiedziałeś się, że HTML jest językiem znacznikowym, którego zadaniem
jest opis struktury strony, a nie jej wyglądu. HTML nigdy nie został zaprojektowany
w celu określania wyglądu strony (wyboru czcionek, kolorów czy też odległości
pomiędzy wyrazami bądź literami), został on stworzony w celu opisu elementów
tworzących stronę (nagłówków, teksu, obrazów, itp.). Rozszerzenia standardowych
znaczników HTML (<
font
>, <
color
>, <
margin
>, itd.) udostępniły autorom stron
WWW możliwości wykraczające poza początkowe zamierzenia twórców języka
HTML.
W celu przywrócenia początkowej struktury języka HTML i zapewnienia autorom stron
WWW tak poszukiwanej możliwości kontroli ich układu i wyglądu World Wide Web
Consortium wprowadziło
kaskadowe arkusze stylów
(ang:
Cascading S
tyle Sheets,
w skrócie: CSS) oraz XHTML (
Extensible HyperText Markup Language
).
W
tym rozdziale poznasz:
różnice pomiędzy językami HTML i XHTML,
podstawowe informacje o kaskadowych arkus
krótką historię kaskadowych arkuszy stylów,
sposoby tworzen
arkuszy stylów,
najczęściej wykorzystywane właściwości stylów oraz ich wartości,
sposoby kontroli wyglądu strony, czcionek i
zach stylów,
ia i implementacji zewnętrznych, osadzonych oraz lokalnych
kolorów przy wykorzystaniu
właściwości kaskadowych arkuszy stylów.
246
Część 4.
Arkusze stylów, tabele i ramki
Czym
jest XHTML i dlaczego należy go używać?
World Wide Web Consortium (W3C) określa XHTML jako sposób wyrażenia HTML 4.0
w postaci aplikacji XML. Uważam, że to dobra wiadomość dla wszystkich autorów
stron WWW. Wraz z rozwojem Internetu coraz więcej firm będzie wchodziło na rynek,
prezentując nowe przeglądarki dokumentów (na przykład, przeglądarki internetowe
oraz inne programy). Jest całkiem prawdopodobne, że w niedalekiej przyszłości
dzisiejsze przeglądarki zostaną zastąpione jakimiś zupełnie nowymi programami.
eć pewność, że Twoje strony WWW będzie można oglądać
ch. Właśnie w tym celu został opracowany XHTML. Jest to
Identyfikator <DOCTYPE>
P
amiętasz zapewne, że wszystkie dokumenty HTM
HTML>
,
<HEAD>
,
<BODY>
oraz odpowiednie znacznik
rzedstawiłam
L muszą zawierać pewne elementy:
<
i zamykające; elementy te
p
w poniższym przykładzie:
<html>
<head>
<title>Prosta strona HTML</title></head>
<body>
Najprostsza strona WWW zawierająca 3 znaczniki
</body>
</html>
XH
TML dodaje jeszcze jeden wymagany element — identyfikator
<DOCTYP
acznik ten określa typ tworzonego dokumenty HTML, który może b
ansitional
(pośredni), ścisły
Strict
żyj znacznika
<DOCTYPE>
definiującego typ dokumentu jako po
ument jest w większości przypadków format
E>
.
Zn
yć:
Tr
(ścisły) lub
Frameset
(układ ramek).
U
(t
średni
ransitional), jeśli dok
życiu arkuszy stylów,
(określające, na przykład, kolory i czcionki), dzięki którym dokument może być
oglądany w starszych przeglądarkach.
owany przy
u
jednak zawiera także formatujące znaczniki HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional
//EN"
transitional.dtd
">
U
<html>...</html>
żyj znacznika
<DOCT
okument jest formato
YPE>
definiującego typ dokumentu jako
ścisły (strict), jeśli
d
wany wyłącznie za pomocą arkuszy stylów. Dokumenty
tego typu będzie można oglądać tylko w przeglądarkach obsługujących kaskadowe
arkusze stylów (CSS), takich jak Internet Explorer 4 lub Netscape Navigator 4.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Stri
rg/TR/xhtml1/DTD/
strict.dtd
">
ct
//EN"
<html>...</html>
Użyj znacznika
<DOCTYPE>
definiującego typ dokumentu jako układ ramek, jeś
li
dokument zawiera układ ramek. Układy ramek nauczysz się tworzyć w rozdziale 12.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset
//EN"
frameset.dtd
">
Niewątpliwie chciałbyś mi
w tych nowych programa
możliwe dzięki wprowadzaniu wymogu, aby dokumenty spełniały pewne ściśle określone
rygory.
Rozdział 10.
XHTML i arkusze stylów
247
<html>...</html>
Przykłady przedstawione w tej książce są zgodne ze standardem XHTML Transitional.
Składn
ia XHTML
TML t
łędów bez żadnych konsekwencji, na przy
nacznik
<LI>
(element listy) wew
dnocześ
znacznika zamykającego. Z punktu widzenia języka
rzystujący poprawną składnię):
<ol>
o język znacznikowy, w którym można sobie pozwolić na popełnianie pewnych
b
kład, HTML wie, że rozpoczynając kolejny
z
nątrz znacznika
<OL>
(listy numerowanej), chcesz
je
nie zamknąć poprzedni znacznik
<LI>
, choć nie podałeś odpowiedniego
HTML poniższy przykład (wyko-
<li START="3">Hej ho, hej ho
pracy by się...</li>
</
li>
<li>do
</ol>
nie różni się niczym od poniższego f
ragmentu kodu:
<OL>
<LI start="3">Hej ho, hej ho
pracy by się...</LI>
ani do kodu o następującej postaci:
ol>
<Li start="3">Hej ho, hej ho</Li>
LI>do pracy by się...</LI>
/OL>
<
<
Z p
unktu widzenia języka XHTML wszystkie te przykłady są odmienne. W dalszej
tego podrozdziału
czę-
ści
dowiesz się dlaczego:
nazwy znaczników i atrybutów zapisuj małymi literami
, z punktu widzenia języka
XHTML
<LI>
,
<li>
oraz
<Li>
to różne znaczniki, które należy traktować
w całkowicie odmienny sposób, aby ułatwić przeglądarkom analizę i przetwarzan
kodu dokumentów, wszystkie znaczniki i atrybuty HTML będziemy zapisywali
małymi literami,
ie
wartości atrybutów zapisuj wewnątrz cudzysłowów
, upewnij się, że wartości
wszystkich atrybutów są zapisywane wewnątrz znaków cudzysłowu, w ten sposó
ułatwisz przeglądarce określenie, że dany tekst jest wartością, a nie poleceniem,
zakańczaj wszystkie znaczniki posiadające jakąś zawartość
, jak już wspominała
wcześniej, w
omimo to będzie w stanie poprawnie wyświetlić dokument; XHTML
k należy zak
b
m
języku HTML można pominąć znacznik zamykający, a przeglądarka,
p wymaga,
a ańczać
znaczniki, takie jak
<BR>
— przejście do nowego wiersza lub
<HR>
— poziomą
li
by wszystkie znaczniki były poprawnie zamykane, ale ja
nię, które nie mają żadnych znaczników zamykających? Wyst
nacznika zmykający znak ukośnika (
/
), jak pokazałam
arczy umieścić
n
a końcu z
w poniższym
H
<LI>do
</OL>
<
248
Część 4.
Arkusze stylów, tabele i ramki
p
rzykładzie:
<!DOCTYPE html
<html>
<head>
<title>Nowe wiersze i poziome linie</title></head>
<body>
<hr /> <!-- otwiera i zamyka znacznik hr -->
Pierwszy wiersz<br /> <!-- otwiera i zamyka znacznik br -->
Drugi wiersz
<hr /> <!-
</body>
</html>
oprawnie zagnieżdżaj znaczniki i nie dopuszczaj, aby „zachodziły” na sie
języku HTML oba przedstawi
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- otwiera i zamyka znacznik hr -->
p bie
,
w one poniżej fragmenty kodu były identyczne;
jednak w XHTML-u fragmenty te różnią się od siebie; pierwszy przedstawiony
przykład jest poprawny, a drugi nie.
grubiony.<i>Pogrubiona kursywa.</i></b><i>Tekst
wyświetlony kursywą.</i>
<b>Ten tekst jest po
<b>Ten tekst jest pogrubiony.<i>Pogrubiona kursywa.</b>Tekst
wyświetlony kursywą.</i>
Idea
arkuszy stylów
Teraz, kiedy już wiesz, jak należy pisać dokumenty HTML, używając poprawnej skład-
ni języka XHTML oraz, jak określać typ dokumentów przy użyciu znacznika
<DOCTY-
E>
, zrozumienie idei arkuszy stylów nie powinno przysporzyć Ci żad
pierwszej kolejności autor tworzy standardową stronę
m standa
tworzona, standardowa strona WWW jest całkowicie nieza
wana w taki sposób, aby można ją było poprawnie
nych problemów.
W
WWW, wykorzystując przy
ty
rdowe znaczniki HTML (te same, które były używane do tej pory). Tak
u
leżna, to znaczy, została
z
aprojekto
ach, które nie obsługują arkuszy stylów. Poni
wyświetlić w przeglądar-
k
żej podałam prosty przykład takiej strony:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html>
www.w3.org/TR/xhtml1/DTD/strict.dtd">
<head>
<title>Zastosowanie arkuszy stylów</title></head>
<body>
<h1>Zastosowanie arkuszy stylów</h1>
<p> W tym prostym przykładzie, nagłówek zostanie wyświetlony
na niebiesko, a tekst akapitu będzie miał inną czcionkę.</p>
</body>
</html>
Powyższa strona WWW nie zawiera żadnych atrybutów określających jej wygląd.
Zgodnie z jej treścią autor chce, aby nagłówek był niebieski, a do wyświetlenia tekstu
akapitu użyje innej czcionki. Aby zrealizować te zamierzenia, tworzy arkusz stylów,
który umożliwia sformatowanie zawartości strony
w sposób określony przez jej autora.
R ne znaczni-
ki (na przykład,
h1
) z właściwościami (takimi jak:
color
:
blue
). W
arkuszach stylów
eguły stylów mogą formatować wszystkie znaczniki HTML, łącząc wybra
P
Rozdział 10.
XHTML i arkusze stylów
249
zna
czniki HTML używane są jako
selektory
. Reguły stylów mogą określać u
cznika oraz wszelkie inne właściwości związane z typografią oraz jego wyg
iżej podałam kilka przykładów reguł stylów.
kład
zna
lądem.
P
on
h1 { color: blue }
p { font-family: Arial, Helvetica, sans-serif; color: black }
Reguły stylów
, używane w kaskadowych arkuszach stylów, składają się z dwóch części:
selektora
, którym może być znacznik HTML, na przykład,
p
lub
h1
oraz z
deklaracji
definiującej właściwości i wartości selektora, na przykład,
color: blue
(gdzie
color
jest
właściwością,
blue
, wartością).
Reguła zapisana w pierwszym wierszu powyższego przykładu określa, że nagłówek
h1
na stronie będzie wyświetlany w kolorze niebieskim. Natomiast druga reguła określa, że
tekst wszystkich akapitów (znaczników
<P>
) na stronie zostanie wyświetlony na czar-
no, czcionkami Arial, Helvetica lub dowolną inną czcionką bezszeryfową.
Teraz, gdy autor stworzył już zawartość strony (standardową stronę WWW) oraz okre-
ślił reguły rządzące jej wyglądem, czas na kolejny etap, którym będzie dołączenie reguł
stylów do standardowego dokumentu HTML. Można to zrobić na trzy sposoby: wyko-
rzystując zewnętrzny arkusz stylów, osadzając arkusz stylów (jak pokazałam w kolej-
nym przykładzie) lub wpisując styl wew
Sposoby tworzenia arkuszy stylów”, dowiesz się więcej na temat spo
rkuszy stylów.
nątrz znacznika. W dalszej części rozdziału pt.:
„
sobów tworzenia
a
P
oniższy przykład pokazuje, jak nasza prosta strona W
stylów:
WW może zostać sformatowana
z
a pomocą osadzonego arkusza
<!DOCTYPE html PUBLI
l>
C "-//W3C//DTD XHTML 1.0 Strict//EN"
<htm
<head>
<title>Z
ty
as
tosowanie arkuszy stylów</title>
pe="text/css">
<style
<!--
H1 { color: blue }
P { font-family: Arial, Helvetica, sans-serif; color: black }
-->
</style>
</head>
<body>
<h1>Zastosowanie arkuszy stylów</h1>
<p> W tym prostym przykładzie, nagłówek zostanie wyświetlony
na niebiesko, a tekst akapitu będzie miał inną czcionkę.</p>
</body>
</html>
entu HTML. Kod określający
wygląd strony został umieszczony pomiędzy otwierającym znacznikiem
<STYLE>
oraz
nie są w stanie
k jakby był on
standardowym dokumentem HTML, natomiast nowsze przeglądarki, obsługujące arku-
odpowiednim znacznikiem zamykającym
</STYLE>
. Przeglądarki, które
obsługiwać arkuszy stylów, wciąż będą w stanie wyświetlić dokument, ta
sze stylów, wyświetlą go zgodnie z podanymi regułami.
W powyższym przykładzie, demonstrującym wykorzystanie osadzonego arkusza sty-
lów, autor strony oddzielił style od standardowego dokum
[ Pobierz całość w formacie PDF ]