Rozdział 10.
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 Style 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 arkuszach stylów,
· krótką historię kaskadowych arkuszy stylów,
· sposoby tworzenia i implementacji zewnętrznych, osadzonych oraz lokalnych arkuszy stylów,
· najczęściej wykorzystywane właściwości stylów oraz ich wartości,
· sposoby kontroli wyglądu strony, czcionek i kolorów przy wykorzystaniu właściwości kaskadowych arkuszy stylów.
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. Niewątpliwie chciałbyś mieć pewność, że Twoje strony WWW będzie można oglądać w tych nowych programach. Właśnie w tym celu został opracowany XHTML. Jest to możliwe dzięki wprowadzaniu wymogu, aby dokumenty spełniały pewne ściśle określone rygory.
Pamiętasz zapewne, że wszystkie dokumenty HTML muszą zawierać pewne elementy: <HTML>, <HEAD>, <BODY> oraz odpowiednie znaczniki zamykające; elementy te przedstawiłam w poniższym przykładzie:
<html>
<head>
<title>Prosta strona HTML</title></head>
<body>
Najprostsza strona WWW zawierająca 3 znaczniki
</body>
</html>
XHTML dodaje jeszcze jeden wymagany element — identyfikator <DOCTYPE>. Znacznik ten określa typ tworzonego dokumenty HTML, który może być: Transitional (pośredni), ścisły Strict (ścisły) lub Frameset (układ ramek).
· Użyj znacznika <DOCTYPE> definiującego typ dokumentu jako pośredni (transitional), jeśli dokument jest w większości przypadków formatowany przy użyciu arkuszy stylów, jednak zawiera także formatujące znaczniki HTML (określające, na przykład, kolory i czcionki), dzięki którym dokument może być oglądany w starszych przeglądarkach.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>...</html>
· Użyj znacznika <DOCTYPE> definiującego typ dokumentu jako ścisły (strict), jeśli dokument jest formatowany 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 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
· 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"
"http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">
Notatka
Przykłady przedstawione w tej książce są zgodne ze standardem XHTML Transitional.
HTML to język znacznikowy, w którym można sobie pozwolić na popełnianie pewnych błędów bez żadnych konsekwencji, na przykład, HTML wie, że rozpoczynając kolejny znacznik <LI> (element listy) wewnątrz znacznika <OL> (listy numerowanej), chcesz jednocześnie zamknąć poprzedni znacznik <LI>, choć nie podałeś odpowiedniego znacznika zamykającego. Z punktu widzenia języka HTML poniższy przykład (wykorzystujący poprawną składnię):
<ol>
<li START="3">Hej ho, hej ho</li>
<li>do pracy by się...</li>
</ol>
nie różni się niczym od poniższego fragmentu kodu:
<OL>
<LI start="3">Hej ho, hej ho
<LI>do pracy by się...</LI>
</OL>
ani do kodu o następującej postaci:
<Li start="3">Hej ho, hej ho</Li>
Z punktu widzenia języka XHTML wszystkie te przykłady są odmienne. W dalszej części tego podrozdziału 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 przetwarzanie kodu dokumentów, wszystkie znaczniki i atrybuty HTML będziemy zapisywali małymi literami,
· 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ób 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łam wcześniej, w języku HTML można pominąć znacznik zamykający, a przeglądarka, pomimo to będzie w stanie poprawnie wyświetlić dokument; XHTML wymaga, aby wszystkie znaczniki były poprawnie zamykane, ale jak należy zakańczać znaczniki, takie jak <BR> — przejście do nowego wiersza lub <HR> — poziomą linię, które nie mają żadnych znaczników zamykających? Wystarczy umieścić na końcu znacznika zmykający znak ukośnika (/), jak pokazałam w poniższym przykładzie:
<title>Nowe wiersze i poziome linie</title></head>
<hr /> <!-- otwiera i zamyka znacznik hr -->
Pierwszy wiersz<br /> <!-- otwiera i zamyka znacznik br -->
Drugi wiersz
· poprawnie zagnieżdżaj znaczniki i nie dopuszczaj, aby „zachodziły” na siebie, w języku HTML oba przedstawione 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.
<b>Ten tekst jest pogrubiony.<i>Pogrubiona kursywa.</i></b><i>Tekst wyświetlony kursywą.</i>
<b>Ten tekst jest pogrubiony.<i>Pogrubiona kursywa.</b>Tekst wyświetlony kursywą.</i>
Teraz, kiedy już wiesz, jak należy pisać dokumenty HTML, używając poprawnej składni języka XHTML oraz, jak określać typ dokumentów przy użyciu znacznika <DOCTYPE>, zrozumienie idei arkuszy stylów nie powinno przysporzyć Ci żadnych problemów. W pierwszej kolejności autor tworzy standardową stronę WWW, wykorzystując przy tym standardowe znaczniki HTML (te same, które były używane do tej pory). Tak utworzona, standardowa strona WWW jest całkowicie niezależna, to znaczy, została zaprojektowana w taki sposób, aby można ją było poprawnie wyświetlić w przeglądarkach, które nie obsługują arkuszy stylów. Poniżej podałam prosty przykład takiej strony:
<title>Zastosowanie arkuszy stylów</title></head>
<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>
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.
Reguły stylów mogą formatować wszystkie znaczniki HTML, łącząc wybrane znaczniki (na przykład, h1) z właściwościami (takimi jak: color: blue). W arkuszach stylów znaczniki HTML używane są jako selektory. Reguły stylów mogą określać układ znacznika oraz wszelkie inne właściwości związane z typografią oraz jego wyglądem. Poniżej podałam kilka przykładów reguł stylów.
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 czarno, 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: wykorzystując zewnętrzny arkusz stylów, osadzając arkusz stylów (jak pokazałam w kolejnym przykładzie) lub wpisując styl wewnątrz znacznika. W dalszej części rozdziału pt.: „Sposoby tworzenia arkuszy stylów”, dowiesz się więcej na temat sposobów tworzenia arkuszy stylów.
Poniższy przykład pokazuje, jak nasza prosta strona WWW może zostać sformatowana za pomocą osadzonego arkusza stylów:
<title>Zastosowanie arkuszy stylów</title>
<style type="text/css">
<!--
H1 { color: blue }
P { font-family: Arial, Helvetica, sans-serif; color: black }
-->
</style>
</head>
W powyższym przykładzie, demonstrującym wykorzystanie osadzonego arkusza stylów, autor strony oddzielił style od standardowego dokumentu HTML. Kod określający wygląd strony został umieszczony pomiędzy otwierającym znacznikiem <STYLE> oraz odpowiednim znacznikiem zamykającym </STYLE>. Przeglądarki, które nie są w stanie obsługiwać arkuszy stylów, wciąż będą w stanie wyświetlić dokument, tak jakby był on standardowym dokumentem HTML, natomiast nowsze przeglądarki, obsługujące arkusze stylów, wyświetlą go zgodnie z podanymi regułami.
Pierwsza implementacja kaskadowych arkuszy stylów, znana jako CSS1, umożliwia określanie wielu aspektów wyglądu strony i znaczników, takich jak czcionki używane do prezentacji różnych elementów HTML, kolory czcionek, kolory oraz obrazy tła, marginesy, odstępy pomiędzy literami i wyrazami i wiele, wiele innych. Przeglądarki obsługujące arkusze stylów tego typu — Netscape Navigator 4 oraz Internet Explorer 4 oraz wersje późniejsze obu tych przeglądarek — określają ostateczną postać dokumentu na podstawie definicji stylów.
Kolejna generacja arkuszy stylów CSS2 stała się oficjalnym zaleceniem w maju 1998 roku. Wiele znaczników CSS2 jest obsługiwanych przez najnowsze wersje przeglądarek Internet Explorer oraz Netscape Navigator. W bardzo niedalekiej przyszłości arkusze stylów umożliwią wykonywanie jeszcze bardziej niesamowitych zadań. Dzięki wykorzystaniu CSS2, XHTML oraz odpowiednich przeglądarek będzie można tworzyć strony WWW wykorzystujące różne typy mediów. Na przykład, będzie można zaprojektować głosowy arkusz stylów, dźwiękowo odtwarzający elementy strony WWW, wykorzystując przy tym właściwości przestrzenne oraz stereo. Będzie także można podzielić stronę WWW na wiele stron, podobnie jak to się robi w edytorach tekstów oraz programach poligraficznych, kontrolować miejsca podziału stron, okna, itp. Możliwości są naprawdę fascynujące!
To zapowiada jeszcze jedną ogromną zaletę technologii arkuszy stylów. Otóż będą one umożliwiały przeglądanie dokumentów HTML w niestandardowy sposób, na przykład, przy wykorzystaniu odtwarzaczy audio, z czego będą mogły korzystać osoby mające problemy ze wzrokiem lub na jeszcze inne sposoby, gdzie wykorzystanie standardowej technologii przeglądarek nie będzie możliwe. Standardowy dokument HTML wciąż może być wyświetlany w normalny sposób, przy czym nie trzeba w nim stosować żadnych dodatkowych, rozszerzających znaczników HTML, przeznaczonych do udostępnienia niestandardowych możliwości i bardzo często wprowadzających niepotrzebne zamieszanie w kodzie strony.
Różne przeglądarki odmiennie obsługują język HTML, dotyczy to także kaskadowych arkuszy stylów. Firma Netscape stworzyła własną, alternatywną wersję arkuszy stylów. Netscape Navigator dysponuje także ramkami, alternatywnym rozwiązaniem służącym do umiejscawiania elementów stron WWW, przy czym obsługuje także pojawiające się standardowe rozwiązania. Przeglądarka ta obsługuje także arkusze stylów JavaScript, a jednocześnie można w niej stosować także kaskadowe arkusze stylów.
Ta sytuacja może się wydawać (i jest) nieco trudna, zwłaszcza wziąwszy pod uwagę, iż jest to nowa technologia. Jak to jednak bywa ze wszystkimi nowymi technologiami, sytuacja się w końcu wyjaśni i pojawi „standard VHS” dla arkuszy stylów, natomiast „standard Betamax” odejdzie w zapomnienie. Jak na razie należy jednak pamiętać, że przeglądarki obsługujące technologię CSS robią to w odmienny sposób.
W pozostałej części tego rozdziału poznasz podstawowe możliwości arkuszy stylów. Pamiętaj, że właściwości przedstawione w tym rozdziale to tylko niewielka, wybrana cząstka wszystkich możliwości dostępnych w CSS1 oraz CSS2. Szczegółowe i precyzyjne omówienie tych zagadnień znacznie wykracza poza ramy niniejszej książki i bez wątpienia mogłoby podwoić jej objętość. Niemniej jednak, przedstawione pojęcia i informacje pomogą Ci zrozumieć i ocenić ogromne możliwości arkuszy stylów, ich właściwości i wartości. Dodatkowe źródła informacji dotyczące omawianych tu zagadnień, można znaleźć na końcu tego rozdziału.
Zamiast przytłaczać Cię samą teorią, przedstawię teraz kilka właściwości CSS i pokażę Ci, jak je wykorzystać na stronach WWW. W rozdziale 6. poznałeś różne polecenia służące do formatowania tekstu i określania czcionek, które przedstawiłam w opisie strony Księgarni Bookworm. Teraz, na przykładzie nowej wersji tej strony, dowiesz się, w jaki sposób można zastąpić te polecenia kaskadowymi arkuszami stylów.
Poniżej przedstawiłam nową wersję tej strony (bez żadnych wymyślnych dodatków umieszczonych na niej pod koniec rozdziału 6). Otwórz tę stronę lub stwórz ją od początku, gdyż w ćwiczeniach przedstawionych w dalszej części rozdziału będziemy konwertowali ją w taki sposób, aby korzystała z kaskadowych arkuszy stylów. Stronę zapisz w pliku o nazwie bookwrm.html. Początkowa jej część została przedstawiona na rysunku 10.1, można na nim zobaczyć wszystkie typy elementów występujących na całości strony.
<title>Księgarnia Bookworm</title>
<a name="top"><h1>Bookworm: Księgarnia z lepszą książką</h1></a>
<blockquote>
"Najlepsze są stare książki -- ten język, te historie<br />
Towarzyszą nam latami!"<br />
- Clarence Urmy, <cite>Stare piosenki są najlepsze</cite>
</blockquote>
<p>Księgarnia Bookworm<br />
1345 Applewood Dr<br />
Springfield, CA 94325<br />
(415) 555-0034
</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>
<li>Przyjazną, kompetentną i uprzejmą obsługę</li>
<li>Kawę i soki dla klientów</li>
<li>Jasną czytelnię, gdzie można spokojnie poczytać książkę przed zakupem</li>
<li>Cztery przyjazne kotki: Esmeraldę, Katarzynę, Dulcyneę oraz Beatrycze</li>
<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>
<a name="#recent"><h2>Najnowsze tytuły</h2></a>
<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>
<a name="upcoming"><h2>Zapowiadane wydarzenia</h2></a>
...
paradoks24h