Charles Wyke-Smith - CSS. Witryny internetowe szyte na miarę. Autorytety informatyki..pdf

I Podziękowania Książka taka jak ta nigdy nie jest owocem pracy tylko jednej osoby Dlatego też podziękowania należą się wydawcy Nancy Ruenzel z Peachpit za nakłonienie mnie do napisania drugiego wydania, redaktor naczelnej Nancy Davis za wnikliwe uwagi i dobry humor oraz Michaelowi Nolanowi, redaktorowi do spraw1zakupów w New Riders, za wprawienie całej maszyny w ruch jeszcze raz. Z zespołu produkcyjnego pragnę podziękować redaktor rozwojowej Marcie Justak za wkład i zaangażowanie przy tworzeniu tej książki, redaktor produkcyjnej Hilal Sala za jej wdzięk i ciągłe wspomaganie mnie, operatorowi D I P Davidowi Van Nessowi za to, że bardzo starannie opracował tę książkę, oraz Dougowi Adriansonowi za bardzo dokład­ ną korektę. Specjalne podziękowania należą się redaktor meryto­ rycznej Virginii DcBolt za wnikliwą analizę mojego kodu i związa­ nego z nim tekstu. Dalsze podziękowania kieruję do wszystkich czytelników poprzed­ niego wydania, którzy podzielili się ze mną swoimi spostrzeżeniami. Mam nadzieję, że dobrze zrozumiałem przekazane mi wskazówki i prawidłowo uwzględniłem je w obecnym wydaniu. Mam nadzieję, że nie przestaniecie do mnie pisać i przysyłać mi adresów URL swo­ ich stron. W firmie Benefitfocus.com, w której pracuję, chcę podziękować mo­ jemu szefowi, wiceprezes działu do spraw strategii produktów Nancy Sansom za elastyczne godziny pracy, dzięki czemu mogłem napisać tę książkę, za niewyczerpane pokłady energii i wskazówki dotyczące mojej pracy oraz za danie mi okazji pracowania w7naprawdę wyjątko­ wej firmie. Chciałbym także podziękować CEO Shawnowi Jenkinsowi i COO Jeny’emu Leporeówi za wsparcie i przywództwo oraz stwo­ rzenie i prowadzenie najlepszej organizacji, w jakiej przyszło mi pracować. Wielkie podziękowania kieruję w stronę utalentowanych i kreatyw­ nych członków zespołu zajmującego się badaniem komunikacji między użytkownikiem a aplikacją, którym przew-odzę i od których wiele się uczę — są to: Brad Bonham, Darin Cavenaugh, Daniel Nadeau. Michael Rosier. Mike Attisano, Leah Giorlando, Tiinv Malatanos i Matt Megrue. Ponadto prawdziwą przyjemność spra wia mi praca w zespole strategii produktu, do którego należą takie osoby o nowatorskich pomysłach, jak Raymond Minnis, Nathan Reel, John „Coach” Wilson, Kinsey Rawe i Mike Fullan. Inne osoby, dzięki którym praca w1Benefitfocus jest przyjemna i pasjonująca, to: Nina Sossamon Pogue, Andrew Albcrico, Elena Tudor, Will Deupree, Manon Husman, Koili Hicks, Tracey Snyder, Annmaric PODZIĘKOWANIA Fini, Michelle Pagel, Nate DaPore. Randy Chitwood, Glenn Miller, Heather Norton, Rebecca Lancy, Paul Sparrow, Robert Moss, Don Taylor i Jonathan Chandler - doceniam wasze wsparcie, inspiracje i przyjaźń, których doświadczam każdego dnia. Na końcu największe podziękowania chciałbym złożyć na ręce mojej żony, Beth. Jej pomoc przy pisaniu niniejszej książki była nie­ oceniona, a jej rękę da się rozpoznać na każdej stronie tego dzieła. Sprawdziła gramatykę, sklarowała moje wyjaśnienia i poprawiła interpunkcję w zdaniach zajmujących całe akapity, które tak bardzo lubię. Ponadto wykonała projekty wykresów; zaprojektowała stronę internetową Stylinwith CSS, o której mowa w rozdziale 7 (ja nie dał­ bym takiego dużego mojego zdjęcia, ale poza tym, kochanie, wszyst ko jest w porządku), i zadbała o to. aby redaktor juz za pierwszym razem otrzymał kompletny i spójny tekst. Książka ta jest tym, czym jest. w dużej mierze dzięki nieustannej uwadze i konstruktywnej krytyce mojej żony. Dziękuję Ci bardzo. Do moich dwóch ukochanych córek Jemmy i Lucy: okazałyście nie­ prawdopodobną cierpliwość i zrozumienie dla swojego taty kiedy pi- sał książkę. Teraz znowu możemy w sobotnie poranki chodzić na lody. —Charles Wyke-Smith Charleston. Południowa Karolina, 14 listopada 2007

O autorze Fot, Lowell Downey, Art and Clarity, Napa Charles W yke -Sm ith zajmuje się tworzeniem stron internetowych „1 1994 roku, W centrum jego zainteresowani lezą wrażona użyt­ kownika, architektura informacji oraz proj.ektowame ■i n ^ s o w Obecnie jest dyrektorem działu do spraw wrazen użytkownika w firm , Benefitfocus, która udostępnia za tu usługi największych krajowych firm ubezpieczeniowych ponad 40 milionom ludzi oraz zajmuje się tworzeniem stron posw tęcony zdrowiu, jak kyou.com czy U-kahhFoaiuom. W 1986 roku założvł pierwszy w Sau Francisco w pełm skompnte- l o w a n ą firmę projektową o nazwie PRINTZ Electronic Design. W yke-Smith pracował jako konsultant do spraw pio,ektowama stron w takich firmach, jak Wells Fargo, ESPN Vidcogam cs, Uniwersytet Kalifornijski w San Francisco, jest znakomitym m ów cą, nauczy- cielem - prowadzi wykłady na temat multimediów . P” lekt^ “ la interfejsów, a także często występuje na różnego rodzą,u konferen cjach poświęconych interesującym go zagadnieniom. Charles Wyke-Smith mieszka z żoną Beth i dwiema córkami w Charleston, w Południowej Karolinie. W wolnym czasie komponu­ je r nagrywa muzykę w swoim domowym studiu.

Spis treści Wstęp • 12 ROZDZIAŁ 1. XH TM L: STRUKTURALIZACJA TREŚCI . 16 Standardy sieciowe • 18 To me działa w przeglądarce Microsoft Internet Explorer 6 * 1 8 Treść, struktura i prezentacja • 19 Czas na zmiany * 2 1 Oto przykład starej szkoły projektowania stron * 21 U progu nowej ery » 2 3 XHTM L • 24 Zasady X H TM L • 25 Szablon XHTM L • 30 Znakowanie treści • 32 Układ elementów — elementy blokowe i liniowe • 32 Hierarchia dokumentu, czyli zapoznanie z rodziną X H TM L • 38 ROZDZIAŁ 2. PODSTAW Y CSS . 40 Trzy sposoby dołączania arkuszy stylów • 42 Style lokalne • 42 Style osadzone • 43 Style zewnętrzne * 44 Anatomia reguły CSS • 46 Pisanie reguł CSS • 47 Selekcja znaczników w obrębie hierarchii dokumentu • 48 Selektor potomka • 48 Selektor dziecka • 52 Klasy i identyfikatory » 5 3 Wprowadzenie do identyfikatorów * 57 Identyfikatory a klasy • 58 Selektory do zadań specjalnych • 59 Podsumowanie wiadomości o selektorach • 62 Pseudoklasy * 6 3 Pseudoklasy odnośników • 63 Inne przydatne pseudoklasy • 65 Pseudoelementy • 66 Dziedziczenie • 68 Kaskadowość • 69 Źródła stylów * 69 Zasady kaskadowości • 70 Deklaracje • 74 Wartości liczbowe * 74 Wartości kolorów • 77 ROZDZIAŁ 3. FORMATOW ANIE TEKSTU . 80 Definiowanie czcionki • 82 Kolekcje czcionek • 83 Rodziny fontów * 85 Tymczasowe użycie stylów osadzonych * 87 Ustawianie czcionki dla całej strony • 88 Ustawianie rozmiaru pisma • 90 Style dziedziczone w elementach zagnieżdżonych Własności pisma • 95 Własność font-style • 95 Własność font-weight • 96 Własność font-variant * 9 7 Skrócony zapis własności czcionek • 98 Własności tekstu • 99 Własność text indent • 100 Własność letter-spacing • 102 Własność word-spacing • 103 Własność text decoration • 104 Własność text-align • 105 Własność linc-height * 106 Własność text-transform • 107 Własność vertical-align * 108 Używanie stylów czcionek i tekstu • 110

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYK! ROZDZIAŁ 4. POZYCJONOW ANIE ELEM ENTÓW • 114 Model blokowy * 116 Obramowanie • 117 Dopełnienie • 120 Marginesy * 120 Scalanie marginesów • 122 Rozmiary bloku • 123 Tworzenie pojedynczej kolumny • 125 Elementy pływające i ich czyszczenie * 128 Własność float • 128 Własność elear • 130 Własność position * 1 3 4 Pozycjonowanie statyczne • 134 Pozycjonowanie względne * 135 Pozycjonowanie bezwzględne • 136 Pozycjonowanie stałe • 137 Kontekst pozycjonowania » 1 3 8 Własność display • 141 Praktyczne użycie własności position i display • 142 ROZDZIAŁ 5. TW ORZENIE U KŁAD U STRONY * 148 Przykłady układów wielokolumnowych • 150 Poznajemy bibliotekę Stylib • 153 Szerokość ma znaczenie • 153 Elementy pływające a pozycjonowane bezwzględnie • 154 Prostv układ dwukolumnowy ze stałą szerokością kolumn * 1 Poznaj swoje wewnętrzne elementy div • 160 Zapobieganie przepełnieniu • 160 Formatuj do woli wewnętrzne elementy div • 161 Formatowanie tekstu • 161 Prosty płynny układ dwukolumnowy • 161 Nakładamy ograniczenia • 163 Pływać czy nie pływać • 164 Trzykolumnowy układ o stałej szerokości • 16 5 Płynny układ trzykolumnowy • 169 SPIS TREŚCI Ustawianie takiej samej długości wszystkich kolumn • 173 Fałszywe kolumny • 174 Wydłużanie kolumn za pomocą JavaScript (oraz zaokrąglanie rogów!) • 178 Układ pozycjonowany bezwzględnie * 182 ROZDZIAŁ 6. PROJEKTOWANIE KOM PONENTÓW INTERFEJSU • 188 Tabele • 190 Formularze ■ 203 Zasada działania formularzy • 203 Znaczniki tworzące formularz • 204 Formatowanie formularza * 212 Listy i menu * 219 Listy • 219 Menu rozwijalne • 231 ROZDZIAŁ 7. TW ORZENIE KOM PLETN YCH W ITRYN INTERNETOW YCH • 244 Strona Stylin with CSS • 246 Struktura katalogów • 248 Architektura witryny • 250 Kopiowanie potrzebnych plików CSS z biblioteki * 2 3 3 Reguła @import » 2 5 3 Style kolorów i tekstu • 257 Kod źródłowy strony * 262 Obrazy w tle » 2 6 5 Menu rozwijalne • 268 Przezroczysty pasek boczny « 2 7 1 Dodawanie formularza rejestracji * 276 Formatowanie tekstu • 279 Podsumowanie • 285 DODATEK A ZNACZNIKI XH TM L • 286 DODATEK B W ŁASNOŚCI CSS • 290 SKOROWIDZ • 304

Aż trudno uwierzyć, że od ukazania się pierwszego wydania tej książki minęły już trzy lata. W tym czasie miałem okazję pracować nad wieloma witrynami internetowymi, co pozwoliło mi doszlifować własny warsztat CSS. Początkowo planowałem dokonać tylko kilku niewielkich poprawek, aby uwzględnić przeglądarkę IE 7 i ogól­ nie zaktualizować podawane informacje. Skończyło się na tym, że w trzech pierwszych rozdziałach wprowadziłem dużo poprawek, a pozostałe przepisałem od nowa, To, co powinno trwać kilka tygo­ dni, zajęło mi prawie rok. Wprowadzone zmiany odzwierciedlają nieuniknioną poprawę umie­ jętności każdego, kto na co dzień zajmuje się CSS. Zmiany te mają głęboki związek z dwiema umiejętnościami, które każdy programi­ sta powinien opanować do perfekcji: wykorzystywanie raz napisane­ go kodu i jak najoszczędniejsze pisanie kodu. Sposoby wyrabiania w sobie tych dwóch cennych zdolności zostały' opisane na kartach niniejszego wydania książki, Wykorzystuj kod wielokrotnie i się nie powtarzaj Pierwszą z wymienionych w nagłówku zasad opisuję w kilku roz­ działach. Prezentuję techniki, za pomocą których tworzę funkcjo­ nalne bloki kodu, od szkieletów strony po gustownie wystylizowane listy odnośników Następnie bloki te zapisuję w klasach CSS, które można szybko dołączać do własnego kodu i modyfikować w celu dostosowania ich do konkretnych wymagań projektowych. Moja biblioteka kodu nosi nazwę Stylib, Zawiera ona wszystkie rodzaje elementów interfejsu w postaci kodu CSS z powiązanym z nim kodem XHTML. Bibliotekę tę można pobrać razem z przykładami kodu ze strony internetowej www.styltnwithcss.com. Mimo wczesnej fazy rozwoju biblioteka ta zawiera już wiele przydatnych kompo­ nentów, dzięki którym zaoszczędziłem sporo godzin pracy Mam nadzieję, żc Tobie też będzie w ten sposób służyć. Co jakiś czas będę udostępniał do pobrania nowe wersje niniejszej biblioteki. Druga zasada dotyczy oszczędności kodu. Odbija się ona echem w całej książce. Na przykład styl zastosowany do elementu znajdują­ cego się najwyżej w hierarchii dokumentu wywiera wpływ na wiele różnych elementów. Często spotykam arkusze stylów, w których dla każdego nagłówka i akapitu zdeklarowano osobno ten sam krój czcionki, a przecież wystarczyłoby określić go tylko dla elementu WSTĘP body. Dzięki temu wszelkie zmiany byłyby dokonywane tylko w jed­ nym miejscu. Koncepcja ta nosi angielskie miano DRY (Don 't Repeat Yourself, czyli „nie powtarzaj się ”). W kolejnych rozdziałach przeana­ lizujemy wiele przykładów tego typu. Opanuj kluczowe techniki W swojej pracy odkryłem, żc solidne opanowanie zaledwie kilku najważniejszych technik związanych z CSS wystarczy, aby z żół­ todzioba przekształcić się w kompetentnego badacza CSS. Do technik tych należą poprawne użycie własności pozycjonowania i wyświetlania oraz zasada działania własności float i elear. Tym zagadnieniom został poświęcony rozdział 4. Można w nim ponadto znaleźć przykłady ich praktycznego zastosowania. Każdy, kto do tej pory tylko bawił się w CSS, po lekturze tego rozdziału może doznać prawdziwego olśnienia — mam taką nadzieję. Używaj odpowiednich narzędzi Zanim przejdziemy do właściwej części książki, chciałbym jeszcze przekazać kilka wskazówek na temat organizacji pracy. Zastosowanie się do nich pozwala na tworzenie stron, które działają w wielu róż­ nych przeglądarkach. Potrzebny jest dobry edytor kodu i klient FTP do wysyłania pli­ ków na serwer. Obie te funkcje posiada Adobe Dreamweaver (koszt około 2000 złotych), i jest to moje narzędzie pracy Program ten posiada wiele bardzo przydatnych funkcji. Widok kodu ma funkcje kolorowania składni, zaznaczania błędów składniowych czy auto- uzupełniania aktywującego się po wpisaniu kilku pierwszych liter żądanego elementu. Widok projektu (Design) oferuje podgląd strony jak powinna wyglądać w przeglądarce. Jego przydatność polega na tym, że klikając dowolny element na stronie, zostaje się od razu przeniesionym do odpowiadającego mu kodu. Osoby które nie chcą płacić za program Dreamweaver, mogą wybierać spośród wielu bezpłatnych edytorów i klientów' FTP o podobnej funkcjonalności. Największe znaczenie ma jednak nie narzędzie użyte do tworzenia stron i wysłania ich na serwer, ale ich prezentacja w przeglądarce użytkownika.

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI Liczą się tylko cztery przeglądarki Możesz się zdziwić, ale przy testowaniu tworzonych stron wystar­ czy wziąć pod uwagę tylko cztery przeglądarki: * Firefox, • Safari, * Internet Explorer 7, • Internet Explorer 6. łych czterech przeglądarek używa ponad 95 procent użytkowników internetu, a żadna z pozostałych nie ma większego udziału w rynku niż 2 procent (źródło: średnia wyciągnięta z danych statystycznych dotyczących popularności różnych przeglądarek dostępnych na stro nie http://en.mUpedia.org/wiiiWUsage_sharej3f_wcb_bT0wsers). Wśród tych przeglądarek znajduje się Internet Explorer ó, który mimo licznych błędów wyświetlania stron i słabej obsługi CSS jest obecnie najczęściej używaną przeglądarką na świecie. Niemniej jednak popularność ta stale powoli spada (niestety, zbvt wolno). Pozostałe trzy aplikacje należą do przeglądarek zgodnych ze standardami wyznaczanymi przez World Widc Web Consortium (W 3C). Każda z nich bardzo dobrze obsługuje wszystkie własności CSS 2 i wiele własności CSS 3 (CSS 2 i CSS 3 można traktować jako kolejne wersje CSS; więcej na ich temat będziesz dowiadywać się w trakcie lektury kolejnych rozdziałów). Generalnie różnice pomiędzy nimi w zakresie prezentacji poprawnych dokumentów X H TM L ze stylami CSS są niewielkie. Do powyższej listy można by jeszcze dodać przeglądarkę Netscape, ale ponieważ działa ona na tym samym silniku, co Firefox (Mozilla), jeśli strona działa w Firefoksie, to prawie na pewno będzie też dzia­ łać w Netscapie. W związku z powyższym, jeśli skonstruujesz stronę tak, aby byta poprawrnie wyświetlana przez wymienione wcześniej cztery przeglądarki, możesz mieć pewność, że każdv użytkownik internetu zobaczy stronę w takim stanie, w jakim sobie życzysz. Testowanie w przeglądarce Internet Explorer 5.5 zarzuciłem całko­ wicie. Jej udział w rynku przeglądarek spadł już poniżej pół procent, a osoba, która używa ponadośmioletniego programu, ma pewnie poważniejsze problemy techniczne niż wygląd naszej strony. Zdecydowanie me polecam używania przeglądarki Internet Explorer 6 do celów testowych w trakcie pracy. Lepiej jest wykorzystać tu jedną z przeglądarek zgodnych ze standardami, a dopiero na za­ awansowanym etapie prac dostosować swój produkt do przeglądarki IE ó. Idąc dalej, powiem nawet, że do celów testowych podczas pracy polecam przeglądarkę Firefox, ponieważ obsługuje standardy WSTĘP najlepiej ze wszystkich wymienionych. Ponadto dostępny jest dla niej dodatek o nazwie Developer Toolbar, którego niektóre pozwalają­ ce oszczędzić czas funkcje to: łatwe sprawdzanie poprawności kodu bez potrzeby wysyłania strony na serwer, możliwość włączania i wy­ łączania arkuszy stylów oraz podglądu układu elementów XHTM L na stronie, dzięki czemu można sprawdzić, czy znajdują się na swo­ ich miejscach. Mówiąc krótko, każdy, kto nie ma zainstalowanego dodatku Developer Toolbar, traci dużo cennego czasu. Dodatkowo można jeszcze zainstalować dodatek o nazwie Firebug, udostępniają­ cy zestaw funkcji wspomagających usuwanie błędów, i dysponujemy profesjonalnym środowiskiem programistycznym. Przeglądarkę Fireiox i dwa wymienione dodatki można pobrać bezpłatnie ze stro­ ny wmv.getjirefpx.com. Zamiast przepisywać mój kod, pobierz go z internetu W książce tego typu zawsze znajdzie się jakiś błąd. mimo połączonego wysiłku wielu osób podczas jej drobiazgowej korekty Chociaż pre zentowane fragmenty kodu napisałem samodzielnie i przetestowałem każdy wiersz, chciałbym Cię prosić o dwie rzeczy Po pierwsze, jeśli chcesz wykorzystać mój kod, nie przepisuj go z książki. Poza tym, ze byłoby to stratą czasu, ponieważ wszystkie przykłady można pobrać w kilka sekund ze stronyfy ://ftp.helion.pl/pnykhdy/csswit.zrp. istotne jest to. ze będę poprawiać wszystkie znalezione błędy i co jakiś czas umieszczać na stronie www.stylmmthcss.com zaktualizowane pliki. KLUCZ DO IKON WYKORZYSTANYCH W NINIEJSZEJ KSIĄŻCE: : Uw3g3 =Wskazówka =Ostrzeżenie ... i nie zapomnij do mnie napisać Po drugie, jeśli znajdziesz w książce jakiekolwiek błędy, poinformuj mnie o nich za pośrednictwem formularza ze strony Stvlin'with CSS abym mógł napisać o nich w erracie. Ponadto bardzo mile widziane są wszelkie komentarze i sugestie, a więc po przeczytaniu niniejszej książki poświęć kilka minut i napisz mi, co o niej myślisz. Postaram się odpowiedzieć każdemu, kto do mnie napisze, i dać odpowiedź na każde zadane mi pytanie. Nie mam zbyt wiele czasu, aby pomagać innym osobom w rozwiązywaniu konkretnych problemów z CSS, ale jeśli chcesz, abym spojrzał na Twój kod CSS, umieść go w nagłów­ ku strony XH TML. Wszystkie obrazy umieść na własnym serwerze i mc zapomnij zastosować bezwzględnych adresów URL do nich Tak przygotowany dokument X H TM L mozesz wysłać do mnie wtedy będę mógł szybko otworzyć taka stronę i rzucić na mą okiem. Na koniec dziękuję za zakup tej książki. Mam nadzieję, że okaże się bardzo pomocna.

ROZDZIAŁ 1. XHTML: STRUKTURALIZACJATREŚCI Książka CSS. Witryny internetowe szyte na miarę. Autorytety jest w całości poświęcona szybkiemu tworzeniu zgodnych ze standardami sieciowymi stron internetowych, które można łatwo modyfikować i które są dostępne jak najszerszemu gronu odbiorców. Standardy sieciowe to zalecenia opracowywa­ ne przez organizację World Wide Web Consortium (W3C). Gdyby wszyscy programiści sieciowi i producenci przeglądarek stosowa­ li się do nich, a takie jest teoretyczne założenie, wszystkie strony wyglądałyby i zachowywałyby się tak samo w każdej przeglądar­ ce. Dobry pomysł, ale trudny w realizacji. Kiedy pod koniec 2004 roku pisałem pierwsze wydanie niniej­ szej książki, ruch związany ze standardami sieciowymi nabierał zawrotnego tempa. Obecnie większość nowych stron interneto­ wych stosuje wytyczone standardy sieciowe. Za sprawą zwolenników standardów sieciowych, którzy stanowili siłę napędzającą ten ruch, sieć jest obecnie znacznie lepszym i bardziej przewidywalnym miejscem. Współpracowali z produ­ centami przeglądarek w celu dostosowania najnowszych wersji swoich programów do obsługi trzech najważniejszych języków programowania interfejsów (XHTML, CSS i JavaScript) w sposób zalecany przez W3C, a nie według własnych upodobań. Do tej pory firmy prześcigały się w dodawaniu różnych niestandardo­ wych rozwiązań, aby zyskać przewagę nad konkurencją.

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI Standardy sieciowe m Często posługuję się określeniami C5S 2 i CSS 3. Są to różne wers/e standardu CSS. Jak każda techno­ logia, CSS /est cały czas ulepszana. Obecnie wszystkie przeglądarki niemal w pełni obsługuję CSS 2. Specyfikacja CSS 3 jest dostępna już od jakiegoś czasu, ale przeglą­ darki Firefox i Opera obsługuję ją tylko częściowo, a IE 7 prawie w ogóle nie obsługuje. Więcej informacji na temat każdej z tych wersji znajduje się dalej. )© Zawsze podaję informację, czy uwaga dotyczy tylko IE 6, czy też IE 7. Programiści stosujący najlepsze praktyki dotyczące standardów sieciowych mają duże szanse uzyskać taki sam efekt we wszystkich przeglądarkach. Na przykład niektórym może się wydawać, że naj­ lepszą i najsprawniej obsługującą standardy przeglądarką interne­ tową jest Microsoft Internet Explorer, jednak mimo jego aktualnej dominacji wśród przeglądarek, nie jest to prawda. Istnieje kilka innych przeglądarek, które bardzo dobrze sobie ra­ dzą ze standardami W3C. Najnowsze wersje przeglądarek Firefox i Opera dla komputerów PC oraz Safari i Firefox dla komputerów Macintosh interpretują strony XHTM L ze stylami CSS 2 bardzo podobnie. Natomiast przeglądarka Microsoft Internet Explorer 6 (IE 6) ma duże braki wrzakresie obsługi własności CSS, a wiele z nich obsługuje nieprawidłowo. Sytuacja uległa radykalnej zmianie w chwili pojawienia się w paź­ dzierniku 2006 roku przeglądarki Microsoft Internet Explorer 7 (IF. 7). Ponieważ znacznie lepiej obsługuje standardy niż jej poprzed­ niczka, IE 6. miałem nadzieję, że stara wersja szybko wyjdzie z użyt­ ku. Jednak według strony thecoimter.com w lipcu 2007 roku przeglą­ darki tej nadal używało około 50 procent użytkowników internetu. To nie działa w przeglądarce Microsoft Internet Explorer 6 Przez wzgląd na fakt, że przeglądarka IE 6 nie chciała szybko znik­ nąć ze sceny; przy opisie niektórych własności CSS musiałem napi­ sać: Nic działa w IE. Niektóre wady IE (i innych starszych przeglądarek) można ominąć, stosując tak zwane backi, czyli niestandardowe sposoby użycia CSS, mające ukryć przed przeglądarką określone własności. Fest to żmud­ na i czasochłonna praca, ale dopóki IE 6 pozostaje w użyciu, nie można jej uniknąć. Dla nas. twórców stron internetowych i ich użytkowników; standar­ dy sieciowe są szansą na uzyskanie jednakowego wyglądu i działa­ nia stron we wszystkich przeglądarkach, na każdej platformie. Nie udało się jeszcze tego osiągnąć, ale wydaje się, ze czasy kiedy każda przeglądarka obsługiwała inne własności — co powodowało, że two­ rzenie stron jednakowo interpretowanych przez różne przeglądarki na różnych platformach było zajęciem czasochłonnym i frustrują­ cym mamy już prawie za sobą. Standardy sieciowe z pewnością nie wyjdą z użytku ROZDZIALI. XHTML: STRUKTURALIZACJATREŚCI Mówiąc ściś/ej,XHTML i CSS nie są językami programowania, tylko technikami wakowania : stylizowania treści. Określenia język używam w tej książce dla uproszczenia. Treść, struktura i prezentacja Dzięki mniejszej książce nauczysz się stosować standardy wyty­ czone przez W 3C do określania struktury treści za pomocą języka XHTM L oraz sposobu jej prezentacji przy użyciu CSS. 1. Treść — termin zbiorowy oznaczający wszystkie teksty obrazy filmy dźwięki, animacje i pliki (na przykład dokumenty PDF), które są dostarczane odbiorcy. 2. XHTML (extensible HyperText Markup Language) — służy do określania, czym jest każdy z elementów na stronie; czy jest to nagłówek, akapit, lista elementów; odnośnik, obraz itd. Służą do tego specjalne znaczniki X H TM U w których umieszcza się treść. Nazwa znacznika znajduje się w nawiasach kątowych (< >). Element XHTML (od tej pory będę pisać po prostu ele­ ment) tworzy się poprzez umieszczenie pewnej treści pomiędzy znacznikiem otwierającym a zamykającym:

Niniejszy znacznik nadaje fragmentowi tekstu status akapi tu.

CSS. WITRYNY INTERNETOWE S7v u « Y T E NA MIARĘ. AUTORYTETY INFORMATYKI Co to są atrybuty__ Atrybuty dodaje się do znaczników w celu zdefiniowania ich dodatkowych cech. Każdy atrybut składa się z dwóch części — nazwy i wartości, w forma­ cie nazwa="wartość". Poniższy znacznik obrazu ma dwa atrybuty. Pierwszy ma wartość "im ages/fido.gi f " i określa lokalizację obrazu na serwerze za pomocą ścieżki względnej. Drugi to tekst zastępczy, który zostanie wy­ świetlony, jeśli obraz się nie załaduje, lub może być odczytany przez program czytający. Oba te atrybuty wchodzą w skład struktury dokumentu.Przed rozpowszechnieniem się standardów sieciowych do znaczników zwyczajowo dołączano całą masę atrybutów prezentacyjnych, określają­ cych na przykład rozmiar czy kolor tekstu. Obecnie wszystkie dane dotyczą­ ce prezentacji można umieścić w arkuszu stylów, a atrybutów używać tylko w celach strukturalnych. Dzięki temu kod XHTML jest znacznie prostszy. Umożliwienie oddzielenia struktury dokumentu od sposobu jego Prezentacji było jednym z głównych celów opracowania standardów sieciowych. Ma to kluczowe znaczenie dla tworzenia stron, które Diożna oglądać na różnych platformach i które będą działały także w przyszłości. lO najważniejszych k o r,*, ■ .------------------------------------------------------------------------------------- *ysci ze stosowania standardów. _ Niektórzy starsi twórcy stron inte sposób używania znaczników?1' rnetowych moS3 zsdawai sob!e pytanie „Po co zmieniać sprawdzony od lat „ . ,, „ * 10 powodów, dla których warto pisać kod zgodny ze standardami: 1. Dostępność dla wrelu klientów t z których mogą korzystać • Sam oznakowany dokument jest dostępny dla wielu różnych klientów, glądarki internetowe, u r z ą d ^ 0^ ' ^ CZyl' wszelkich urz3dzeń' aPlika<=ji, które obsługują XHTML, jak prze- jące z ekranu, których u ży w ^ 1"113 kieszonkowe’ telefony komórkowe z przeglądarkami czy programy czyta- arkusz stylów lub pozwala ^ ° Soby n'ewidome. Dla każdego z wymienionych klientów tworzy się osobny _ , m,J SN wyświetlić stronę w czystym XHTML. 2. Zwiększenie wydajności. Dzjpu- z kolei powoduje, że szybcig u^ ciu niezbędnych znaczników pliki stron są znacznie lżejsze, a to można zamienić na jeden I ^ pob!erai T ^ od prezentacyjny używany w znacznikach na każdej stronie warstwy prezentacji można ^ Stylów'Jak s'^ niebawem przekonasz, wszystkie informacje dotyczące 3 Obsługa wszystkich ° UrT1ie^ci<“w ¡ednym srkuszu stylów, pobieranym przez przeglądarkę tylko raz. starszych przeglądarek dz ^ 3^ ' Przy odrobinie wysiłku można dostosować swoje strony do potrzeb _ ., . , . , ’ 2'^ki C2e™ wszyscy użytkownicy mogą maksymalnie skorzystać z naszei pracy. ą. Oddzielenie treści od warstw 7 taj: projekt) całej witryny n; * prezentacJ'b Można całkowicie zmienić treść lub sposób prezentacji (czy- ’ n,e Wywierając przy tym wpływu n3 to drugie. 5* Tworzenie płynnych stror, t at na przykład zmieniającą sie |- j ]eSt twon^ strony uwierające dynamicznie zmieniającą się treść, S " S t ę n r o r i l llff-n W i W o n , i i n t n m o t n w M n■9produktów sklepu internetowego. Oqg dalszy nanastępnej stron/e ROZDZIAŁ 1. XHTML: STRUKTURAUZACJA TREŚCI 10 najważniejszych korzyści ze stosowania standardów (ciągdalszy) 6. potwierdzenie poprawności kodu. W trakcie pracy można skorzystać z dostępnych narzędzi do sprawdzania poprawności kodu XHTML i CSS w celu wychwycenia wszystkich błędów. Przyspiesza to proces usuwania błędów, jak również daje pewność, że praca nad stroną rzeczywiście została zakończona, jeśli dobrze wyglą­ da w przeglądarce i przechodzi walidację. y. Uproszczenie procesu produkcyjnego. Proces produkcyjny przebiega sprawniej. Często projektant zo staje odciągnięty od swojego głównego zajęcia i bierze się za zarządzanie treścią, ponieważ jest jedyną osobą, która wie, gdzie to wszystko powinno się znajdować. Kończy się na tym, że projektant zajmuje się wstawianiem treści, a to przecież żmudna praca, za którą najczęściej mu nie płacą. Stosując standardy sieciowe, można opracować proste reguły znakowania dla zespołu zajmującego się treścią i pracować równolegle z nim nad aspektami prezentacyjnymi, wiedząc, że dostarczona treść będzie się doskonale zgadzać z naszym projektem. 8. Łatwiejsza dystrybucja treści. Dzięki temu, że treść jest oddzielona od reguł prezentacyjnych, łatwiej można ją przekazać do użytku innym osobom. W przeciwnym przypadku mogłoby to być w ogóle niemożliwe. 9. Dostępność. Łatwiej jest tworzyć strony dostępne dla wszystkich, a także spełnić wymogi prawne — na przykład w USA wynikające z sekcji 508 Ustawy o niepełnosprawnych (tzw. ADA 508). 10. Zminimalizowanie nakładu pracy. Pisze się mniej kodu, rezultaty widoczne są znacznie szybciej oraz łatwiej jest modyfikować strony po pewnym czasie. Czas na zmiany Obecnie standardy sieciowe są już szeroko rozpowszechnione. Projektanci rezygnują z tabel i opracowują układy stron przy użyciu czystego strukturalnego kodu, pozbawionego zagnieżdżonych tabel, elementów' wymuszających pustą przestrzeń i występujących kiedyś w' wielkich ilościach znaczników
(złamanie wiersza) oraz encji   (twarda spacja). Techniki te były stosówaiie wyłącznie po to, aby umieścić elementy w odpowiednim miejscu, nie miały' zaś żad­ nego znaczenia dla treści. Oto przykład starej szkoły projektowania stron Tak było kiedyś< tr>

11 C5S. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI RYSUN EK 1,1. Do utworzenia trzech odnośników nad rysunkiem potrzeba było prawie 1000 znakówi'Subscribe|Manage Your Profi!e< /ta b le >Cały ten kod tworzy tylko jedną linię przycisków na stronie (rysunek 1.1). C Microsoft Corporation - Microsoft Internet Explorer - i i [http://wvm,iTricroseft.com Wjlj *t" X Pik Eitycja Widok Ulubione Narzędzia Pomoc MSN Home Subscribe Manage Your Profii^) Product Fam ilies window See the future of Microsoft office developer tools Mobile Devices The Dewfcper Tools Roadmap Business Solutions reveals what s coming next Servers i for Vrsual Studicr afici the .NET E Developer Tools Framework. ^ '(t f M & j i Games and Xbox R0 ZD2IAŁ1. XHTML: STRUKTURALIZACJA TREŚCI Podstawowe fragmenty kodu mają kolor zielony — zawierają 247 znaków z 956, czyli poniżej 26 procent. Pozostałe 74 procent to nie­ wiele warta papka. Wszystko, co znajduje się wewnątrz znaczników, poza atrybutami href, ma charakter prezentacyjny a więc może zo­ stać usunięte i przeniesione do arkusza stylów w postaci kilku zwię­ złych reguł CSS. Przeznaczeniem tabeli w tym przypadku nie jest prezentacja danych, a utrzymanie elementów na swoich miejscach. Większość pozostałego kodu odpowiada za efekt roi lover. Każdy odnośnik wymaga następujących informacji: klasy, za pomocą której jest identyfikowany przez JavaScript, atrybutu nowrap, wymuszają­ cego utrzymanie słów' odnośnika w jednym wierszu, oraz wywoła­ nia dwóch funkcji JavaScript (swoją drogą, efekt roi 1over można z łatwością uzyskać w CSS, ale o tym później). Warto także zwrócić uwagę, ze do wyśw ietlenia każdej z pionowych kresek oddzielających poszczególne odnośniki potrzebna jest osobna komórka tabeli z za­ gnieżdżonym elementem span przypisanym do określonej klasy. Firma Microsoft ostatnio włożyła sporo wysiłku w doprowadzenie sw'ojej witryny do stanu bliższego standardom. Jeśli kod tw'ojej stro­ ny przypomina ten powyżej, czytaj dalej. W rozdziale dotyczącym komponentów interfejsu użytkownika dowiesz się jak tworzyć po­ dobne do zaprezentowanych wyżej elementów przy użyciu samej listy nienumerowancj. Dzięki zastosowaniu kilku reguł CSS można uzyskać lekki, mało skomplikowany i co najważniejsze poprawmy składniowo dokument. Będzie on działał w każdym urządzeniu roz­ poznającym XHTML, bez wrzględu na rozmiar ekranu, a nawet na to, czy urządzenie to obsługuje CSS. U progu nowej ery Dzięki przyjęciu standardów XHTM L i CSS przez, tak wiele przeglą­ darek i urządzeń witrynom niezgodnym z tymi standardami coraz trud­ niej przebić się z oferowanymi przez nie informacjami. Zainteresowałeś się ostatnio, jak wygląda twoja strona w komputerze kieszonkowym? Mimo iż przystosowanie istniejącej strony do standardów' siecio­ wych może zająć mnostwo czasu, warto pocieszyć się tym, że wy­ starczy zrobić to raz. Tworząc nową stronę, można zrobić ją od razu, jak należy Czytając tę książkę, nauczysz się tworzyć strony odporne na upływ czasu dzięki oddzieleniu warstwy merytorycznej od prezentacyjnej. W tym celu treść należy oznakować kodem X H TM I. i przy użyciu jednego wiersza kodu dołączyć do takiej strony plik arkusza stylów, zawierającego informacje dotyczące sposobu prezentacji poszczegól­ nych elementów XHTML.

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ, AUTORYTETY INFORMATYK! Rodzaj urządzenia, dla którego jest przeznaczony arkusz stylów, można określić za pomocą atrybutu media znacznika l ink. XHTML Zaletą tego podziału zadań jest możliwość utworzenia osobnego arkusza stylów dla przeglądarek, urządzeń kieszonkowych, drukarek programów czytających z ekranu używanych przez niewidomych itd. Wiele z tworzonych obecnie klientów szuka arkuszy stylów przeznaczonych specjalnie dla nich. Na przykład telefony smartpho­ ne takich firm, jak Blackberry i Palm, szukają arkusza stylów prze­ znaczonego dla urządzeń kieszonkowych, pozwalając w ten sposób projektantowi na utworzenie zmodyfikowanej lub całkowicie innej prezentacji tego samego kodu XHTM L dla ich małych ekranów. Każdy dostarczony arkusz stylów służy do jak najlepszego zapre­ zentowania treści w określonym kontekście. Natomiast kod XHTML występuje tylko w jednej wersji. O czym się przekonasz, strona XHTM L może automatycznie dobrać arkusz stylów' odpowiedni dla urządzenia lub środow iska, w którym jest wyświetlana. W ten spo­ sób raz napisana treść staje się rzeczywiście przenośna, elastyczna i gotowe na wszystkie wyzwania prezentacyjne, które mogą przed nią stanąć. Należy jednak pamiętać, ze mimo wspaniałej wizji przy­ szłości pozostaje kilka bieżących problemów, które trzeba rozwiązać. Ponieważ technika CSS służy do stylizowania elementów' XHTMT, nie można się jej nauczyć, nie mając solidnych podstaw' XHTML. Co to jest XH TML? Jest to HT ML dostosowany do wymogów XM L Innymi słowy XHTM L jest oparty na strukturze XM L który pozwala na nadawanie znacznikom nazw odzwierciedlających przechowywane w nich informacje, np. Madonna. W przypadku XH TML oznacza to, że obok zestawu zdefiniowanych znaczników ist­ nieje dokument o nazwie DTD (Document Type Definition), który zawie­ ra informacje dotyczące sposobu obsługi tych znaczników w danym urządzeniu interpretującym XI ITML. Dzięki zgodności z XML, język XHTML zdołał pokonać ograniczenia HTML i może bvć w przy­ szłości rozszerzany oraz wymieniany jako usługa sieciowa pomiędzy innymi systemami danych. Za powiązanie dokumentu DTD ze stroną XHTM L odpowiada umieszczony na jej początku znacznik DOCTYPE. Język XM L jest już niemal wszechobecny w biznesie, a wystąpienie tej samej litery X wrnazwie XHTM L jest dowodem na ta że jęzvk ten nieubłaganie zmierza w stronę oddzielenia warstwy prezentacyj­ nej od treści. Pozostała część niniejszego rozdziału jest poświęcona najnowszej, całkowicie prze formułowanej. nowoczesnej i niezwykle elastycznej wersji języka HTML. ROZDZIAŁ 1. XHTML: STRUKTURALIZACJATREŚCI Instalując znakomity dodatek do Firefoksa o nazwie Developer’s Toolbar (http://chrispederick.com/ ^work/web-developer/), można z łatwością przeprowadzać walidację stron na swoim komputerze, bez potrzeby wysyłania ich na serwer. RYSUNEK 1.2.Taki komunikat na stronie walidatora W3C niemal sta­ nowi gwarancję, że strona będzie dobrze wyglądać we wszystkich klientach obsługujących XHTML Zasady XHTML Dobrze napisany kod XHTM L daje największe szanse na to, że nasze strony będą poprawnie wyświetlane w wielu różnych klientach przez wiele lat Dzięki czystości, łatwości w pisaniu i elastyczności kod X IITM L szybko się ładuje, jest łatwy do zrozumienia podczas edycji oraz przygotowuje treść do użytku w wielu różnych środowiskach. M ożna z łatwością sprawdzić, czy strona jest zgodna ze standarda­ mi sieciow ymi, czyli czy kod X H TM L jest dobrze sformułowany i poprawny oraz czy style CSS są prawidłowe. Dobrze sformułowany to znaczy taki, którego struktura spełnia wy­ magania dotyczące kodu X H TM L opisane w niniejszym rozdziale. Poprawny oznacza, że na stronie używane są wyłącznie znaczniki zde­ finiowane w' dokumencie DTD, kroiw musi być dołączony do każdej strony internetowej za pomocą znacznika DOCTYPE (więcej na ten temat dalej). Niektóre znaczniki, które były wykorzystywane wrprzeszłości, są obecnie przywracane do życia (ang. deprecated). Oznacza to, ze moż­ na ich nadal używać, ale istnieje inny lepszy z punktu wadzenia składni znacznik służący do tego samego celu. Aby zachęcić projektantów' do stosowania nowych znaczników; które w przeciwieństwie do odradza­ nych będą działać także w przyszłości, znaczniki starego typu są przez walidator W3C oznaczane jako błąd. Aby sprawdzić, czy strona spełnia wymienione kryteria, można ją wysłać na serwer, a następnie wpisać jej adres URL w' odpowiednim polu na stronie http://validator.w3.org. W kilka sekund po naciśnięciu przycisku Submit pojawi się bardzo przyjemny komunikat informujący, żc strona to poprawny dokument typu X H TM L 1.0 Strict (The Page Is Valid XHTM L ł .0 Strict!), lub szczegółowa lista znalezionych błędów (rysunek 1.2). W podob-<0 Vacation Resutłs W3C Markup validator Mo7Üa Firefox Pic Edycja Widok Hfctorte Zakładki Narzędzia Pomoç G C b @ 3 ' ë ü & http://va*datCK-.Yv3.org/chede?verbose=i&urf=f v ,j) © O W 3 C Markup Validation Service Ctwck ‘rie mąrituB {HTML, XHTML, .J o« Wab tk»c Jump To: Congratulations ’ Icons This Page Is Vafid XHTML 1.0 Strict) Result: Passed validation Address : http://ww, stylinwithoçs. con/chopter_l/code/i Encoding : iñO-8859-T *ucom«iea%) ~T| DO Ctype : XHTM L t.O SfrfCt fdetïtt automatically) Root Element: html Root Namespace: http7/www.w3.org/l989/xhtmr Zakończono

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI Czy moja strona musi pomyślnie przejść walidację Walldator W3C (jtgsaw.w3c.com) powstał po to, aby umożliwić twórcom stron internetowych sprawdzanie popraw­ ności (czyli czy używają tylko tych elementów i atrybutów, które są zdefiniowane w określonym DTD) i struktury ich stron. Z pewnością pisanie stron przechodzących z powodzeniem walidację należy do dobrych obyczajów. Niektórzy twierdzą nawet, że każd3 strona musi przejść walidację. Pewne jest jedno — walidator potrafi w mgnie­ niu oka znaleźć wszystkie pospolite błędy, których wyłapanie w Inny sposób mogłoby zająć klika godzin. Jednak te, że strona nie przechodzi pomyślnie walidacji, nie oznacza, że nie będzie poprawnie interpretowana przez aktualnie dostępne przeglądarki internetowe. Moja sugestia jest taka, aby każdą stronę sprawdzać w walidatorze i każdy zgłoszony błąd gruntownie przeanalizo­ wać. Na przykład należy zamknąć wszystkie znaczniki, które walidator zgłasza jako niezamknięte, oraz poprawić te, które zostały nieprawidłowo zagnieżdżone (na przykład elementy blokowe znajdujące się wewnątrz elementów śród- liniowych). Krótko mówiąc, należy się upewnić, że strona ma poprawną strukturę. Walidacja to jednak nie to samo. Na przykład, aby użyć znakomitego skryptu JavaScript (autorstwa Petera-Paula Kocha), odkrywającego kolejne części formularza w reakcji na zaznaczanie w nim elementów (zobacz http://www.ąutrksmode.org/dom/usable forms.html), konieczne jest dodanie atrybutu re i do każdego znacznika di v, który przechowuje elementy przeznaczone do odkrycia. Problem w tym, że znacznik di v nie posiada atrybutu r e i, przez co strona nie przej­ dzie pomyślnie walidacji. Jednak dokument jest dobrze sformułowany i można pozostawić ten jeden błąd w za­ mian za uzyskanie dodatkowej funkcjonalności. Niektórzy puryści utrzymują, że każda strona musi przechodzić walidację bez błędów, ale moim zdaniem takie mało ważne błędy, jak opisany powyżej, można zignorować. Jak będę miał chwilę czasu, to popracuję nad tym... Cir Listę odradzanych znaczników, któ­ rych nie należy stosować, ponieważ mają nowe odpowiedniki, można znaleźć na stronie About.com (hUp://webdcsign.about.com/od/htm! tags/a/bltags_deprctag.htm). istnieją także inne typy dokumentu, o których można przeczytać na stro- nie http://www.ordllynet.com/pub/a / '-+javasaipt/synd/2001/ 08/ 28/doctypc. html?page=l. ny sposób można sprawdzić kod CSS na stronie http://jigsaw.w3.org/ css-mlidatór: Oto pełna (i na szczęście krótka) lista wymagań dotyczących pisania kodu XHTML: 1. Deklaracja typu doku mentu (DOCTYPE). Znacznik DOCTYPE musi znajdować się na samym początku strony, jeszcze przed otwie­ rającym znacznikiem html. Informuje on przeglądarkę o rodzaju zawartości strony — H T M L XHTM L lub mieszanka obu, która może poprawnie zinterpretować kod. Istnieją trzy główne rodza­ je deklaracji typu dokumentu: Strict: Cały kod jest zgodny z XHTML.< !DOCTYPE html PUBLIC "-//W 3C//DTD XHTML 1.0 5t ric t //E N " "http://www.w3.o rg /T R /x h tm ll/D T D /x h tm ll-s tric t.d td ">Transitional: Strona jest mieszanką kodu HTM L i XHTM L Na wielu popularnych stronach używa się obecnie tego typu dokumen­ tu, ponieważ pozwala to na pozostawienie na stronie starego kodu HTM L i jednoczesne dodawanie do niej nowego kodu XHTML.< !DOCTYPE html PUBLIC " -//W 3C//DTD XHTML 1.0 T r a n s it io n a l//EN " "http://www.w3 .o rg/TR /xh tm ll/D TD /xhtm l1-s t r ic t .d t d ">ROZDZIAŁ 1. XHTML: STRUKTURALIZACJATREŚCI Kopiując DOCTYPE z innej strony, nafeży upewnić się, że podany w nim adres URL jest bezwzględny (czyli zaczyna się od łańcucha http://, po którym następuje pełna ścieżka do dokumentu). Niektóre strony (wliczając W3C) ma/ą włas­ ne pliki DTD oraz przestrzeni nazw i mogą stosować względne adresy URL do nich. Jeśli użyjemy ich na innym serwerze, strony mogą dziwnie się zachowywać, ponieważ adresy te nie będą u nas wskazy- wać żadnych pfików. Więcej na temat trybu zgodności wstecznej można dowiedzieć się na stronie Dive into Mark (http://dive ^ intomark.org/archives/2002/ 05/ 29/quirks_mode). Ponieważ wpisywanie deklaracji typu dokumentu (a także prze­ strzeni nazw XML i typu treści opisanych wpunktach 2 i 3) jest żmudną czynnością, zostały one umieszczone w szablonach stron na FTP. Można ich użyćjako matryc do tworzenia własnych dokumentów XHTML Należy tylko wybrać odpo­ wiedni typ dokumentu (S tri ct, Transi t i onal, Frameset). Frameset: To samo co wersja tra n s itio n a l, ale w tym przypad­ ku dopuszcza się użycie ramek, które są odradzane w XHTML:< !DOCTYPE html PUBLIC "-//W 3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtm ll/DTD/xhtm l1-fram eset.dtd">Określenie typu dokumentu jest bardzo ważne. Jeśli przeglądarka nie znajdzie tej deklaracji, uzna, że strona została utworzona na długo przed powstaniem standardów sieciowwch. Jeśli tworzysz stronę od początku, dzięki czemu możesz uniknąć takich znacz­ ników; jak na przykład FONT z atrybutami COLOR, używaj DOCTYPE XHTML S tric t, który' opisałem wcześniej. Wiele przeglądarek, napotykając stronę bez deklaracji typu do­ kumentu, przełącza się w tak zwany tryb zgodności wstecznej (ang. quirks mode). W trybie tym mogą pracować przeglądarki Mozilla, Internet Explorer 6 dla Windows i Internet Explorer 5 dla komputerów Macintosh. W trybie zgodności wstecznej przeglądarka zachowuje się tak, jakby nic nie wiedziała o modelu DOM (Document Object Model), i udaje, że nigdy nie słyszała o standardach sieciowych. Możliwość zmiany trybu pracy w' zależności od deklaracji typu dokumentu lub jej bra­ ku pozwala przeglądarkom jak najlepiej zinterpretować zawartość stron zarówno zgodnych, jak i niezgodnych ze standardami. Należy zauważyć, że z jakichś niejasnych przyczyn znacznik DOCTYPE nie musi być zamknięty za pomocą ukośnika i że jego nazwa jest zawsze pisana wielkimi literami. Jest to całkowicie sprzeczne z zasadami numer 4 i 7 opisanymi poniżej. 2. Zdeklaruj przestrzeń nazw XML. Zwróć uwagę na poniższy kod znacznika html.Gdy przeglądarka pobierze stronę X H TM L i chce sprawdzić zawartość dokumentu DTD, który zaw iera listę definicji wszyst­ kich znaczników dostępnych w X H TM L może go znaleźć na serwerach W3C. Mówiąc krótko, deklaracje DOCTYPE i przestrzeni nazw zapewnia- ją. że przeglądarka poprawnie zinterpretuje nasz kod XHTML. 3. Zadeklaruj typ treści. Deklaracja typu treści powinna znajdować się w nagłówku dokumentu razem z innymi ewentualnymi znacz­ nikami meta. Najczęściej spotyka się następującą deklarację:

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI Deklaracja ta określa zastosowany w dokumencie sposób ko­ dowania znaków. ISO-8859-2 to zestaw znaków dla języków Europy Środkowej. Jeśli planujesz pisać cyrylicą lub w języku hebrajskim, odpowiednie deklaracje typu treści znajdziesz na stronie firmy Microsoft (http://msdn.microsoft.com/workshop/aut ^hor/dhtml/reference/charms/charsei4.asp), 4 . Zamykaj wszystkie znaczniki. Są dwa rodzaje znaczników' Znaczniki niepuste, czyli takie, które zawierają jakąś treść, wy­ stępują w parach znacznik otwierający - znacznik zamykający:

To je s t akapit zawarty pomiędzy znacznikami akapitu. Aby pozostać w zgodzie ze standardami XHTML, znacznik ten musi być, i w tym przypadku je s t , zam knięty.

Znaczniki muszą być poprawnie zagnieżdżone.

Te znaczn iki są źle zagnieżdżone.

• Elem ent l< / l i >
• Elem ent 2< /1i>
• Elem ent 3< / li>ROZDZIAĆ 1. XHTML: STRUKTURALIZACJA TREŚCI Nazwaznacznika a tworzącego odnośnik do innego miejsca w tym samym dokumencie pochodzi od an­ gielskiego stówa anchor(„kotwica”). Tego samego znacznika używa się do tworzenia odnośników przeno­ szących do innych stron. W XHTML istniejetakże znacznik link, który służy dołączaniu arkuszy stylów do dokumentu. Zapamiętaj: odnośnik, który użytkownik klika w celu przej­ ścia do nowejlokalizacji, nazywany jest kotwicą i zawszejest tworzony za pomocą znacznika a, mimo że potocznie nazywa się go linkiem. Zagnieżdżanie jest tak ważne, ponieważ CSS bierze je pod uwagę przy stosowaniu stylów do poszczególnych elementów. Zawsze spraw dzaj, czy dokument ma poprawną strukturę, a więc także czy znaczniki w nim są poprawnie zagnieżdżone, za pomocą walidatora. 6. Nie używaj elementów blokowych w elementach liniowych. Elementy blokowe, jak p (paragraph — akapit) czy di v (division — sekcja), automatycznie ustawiają się na stronie jeden pod drugim. Jeśli w dokumencie występują dwa akapity; to akapit wpisany jako drugi zostanie automatycznie ustawiony pod pierwszym — nie trzeba stosować żadnych znaczników łamania wiersza. Natomiast znaczniki liniowe, jak a (anchor— kolwica) czy em (emphasis— em­ faza: zazwyczaj zamienia tekst na kursywę), wtapiają sic w nor­ malny bieg tekstu, czyli nie wymuszają złamania wiersza. Elementy blokowe i śródliniowe zostaną omówione w rozdzia­ le 4. W tej chwili wystarczy zapamiętać, że jeśli w elemencie śródliniowym zostanie zagnieżdżony element blokowy, kod nic przejdzie pomyślnie walidacji. Dodatkowo niektóre elementy blokowe także nic mogą zawierać p ew n y # elementów' blokowych. Na przykład nagłówek (hl—h6) nie może zawierać akapitu. Aby uniknąć tych problemów, poza walidatorem należy kierować się zdrowym rozsądkiem. Pisząc na kartce papieru lub w programie Word, nic wstawilibyśmy całe­ go akapitu w nagłówku. Podobnie należy wystrzegać się takich błędów logicznych w XHTML, a na pewno będzie łatwiej. 7. Nazwy znaczników pisz małymi literami. Ten punkt nie wy maga dalszych wyjaśnień. Nie należy w ogóle w takich przy­ padkach używrać wielkich liter, Ja zawsze tak robiłem, ale osoby które są przyzwyczajone do starego stylu, muszą zapomnieć o czasach znacznika P. 8. Zawsze nadawaj atrybutom wartości w cudzysłowach. W HTM L niektóre atrybuty nic wymagają wartości. W X H TM L przeciwnie, każdy atrybut musi mieć wartość. Na przykład, jeśli w starym stylu tworzono menu rozwijalne za po­ mocą znacznika sel ect j chciano, aby jedna z opcji była wybrana domyślnie, pisano kod podobny do poniższego:OPTION VALUE=Koty>KotyOPTION VALUEOsy 5ELECTEE»PsyKod ten tworzy menu rozwijalne, wrktórym domyślnie wybrana jest opcja Psy.

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYK! Wartości atrybutów w cudzysłowach nie muszą być zapisywane małymi literami, ale należy to do dobrych zwyczajów pisania kodu. Jedyny przypadek, w którym łamię tę zasa­ dę, to atrybut a 1t, którego wartość może pojawiać się na ekranie. istnieje kilka programów służących do konwersji starego kodu HTML na XHTML Za najlepszy jest uważany H TM L Tidy. Na stronie Infohound (http://infohound.net/tidy) można znaleźć jego wersję internetową i odnośniki do wersji instalacyjnych oraz dokumentacji. Po przeprowa­ dzeniu konwersji zawsze potrzebne są jeszcze ręczne poprawki, ale i tak narzędzia te pozwalają zaoszczędzić wiele godzin pracy. Odpowiednik XH FYIL tego kodu wygląda tak:< se le ct name="zwierzeta">KotyPsy< /se le c t>Należy zauważyć, że w tej wersji nazwy wszystkich znaczników i atrybutów' są zapisane małymi literami oraz wszystkie wartości atrybutów znajdują się w cudzysłowach. 9. Otwierający nawias kątowy i znak ampersand zapisuj za po­ mocą encji XML. Kiedy interpreter XHTM L napotvka otwie­ rający nawias kątowy (pełniący też funkcję znaku mniejszości), traktuje go jako początek jakiegoś znacznika. Co w takim razie zrobić, jeśli chcemy, aby znak ten został wyświetlony na ekranie? W takim przypadku trzeba użyć cncji. Encja to krótki łańcuch znaków' reprezentujący określony znak. Interpreter X H TM L interpretuje ją i wyświetla na ekranie jako zwykły znak, a nie znak specjalny. Encja reprezentująca otwierający nawias kątowy (znak mniejszości) to &11; — litery 11 pochodzą od angielskich słów less than, czyli mniejszy niż. Encje nie tylko służą do unikania błędów' interpretacyjnych, ale również pozwalają na użycie niektórych symboli w ogóle. Na przykład encja © reprezentuje symbol ©. Każda encja zaczyna się od znaku ampersand (&) i ma na końcu średnik (;). Ponieważ znak ampersand jest wr XIITM L interpretowany jako początek encji, aby był wyświetlany na stronic, również musi zostać zastąpiony encją (&). Dobrą zasadą jest używanie encji w zastępstwie wszystkich zna­ ków; których nie ma na standardowej klaw iaturze (e, ©, ®, fc). Wszystkich encji jest około 50 000. Obejmują one znaki alfabe­ tów większości języków świata. Skróconą listę najczęściej uży­ wanych encji można znaleźć na stronie www.htmlhelp.com/refe rence/html40/entities. Na tym kończą się zasady dotyczące XHTML. Są dosyć proste, ale trzeba się ich ściśle trzymać, aby pomyślnie przejść walidację. Szablon XHTML Aby kod XHTM L był poprawny, w dokumencie muszą się znaleźć pewne znaczniki. Jak wiemy z punktów 1, 2 i 3 przedstawionych powyżej, konieczne jest poinformowanie przeglądarki, czy strona ROZDZIAŁ 1. XHTML: STRUKTURALIZACJA TREŚCI Używając określenia szablon, mam na myśli blok kodu podobny do tego, który widać po prawej stronie, stanowiący szkielet dokumentu XHTML Nie należy go mylić z szab­ lonami (ang. templates) programu Dreamweaver isystemów zarządza­ nia treścią, które zawierają niezmie- nialne fragmenty kodu odpowie­ dzialne za układ dokumentu. /S Szablon ten znajduje się w pli­ kach do pobrania na FTP. Więcej tego typu szablonów można znaleźć na stronie poświęconej standardom sieciowym pod adresem www.webstandards.org/ '-+leam/templates/index.html. jest napisana w czystym XHTML, czy zawiera także znaczniki od­ radzane oraz jakiego kodowania użyto. Bez względu na zawartość strony te znaczniki muszą być obecne. Ponadto zawsze potrzebne są znaczniki head i body. Aby w programie Dreamweaver wygenerować szablon strony należy w menu File kliknąć opcję New, a następnie HTML Template. Typ dokumentu można wybrać, klikając kolejno Edit/Preferences/New Document i wybierając właściwą opcję z listy Default Document rKpc (DTD). Poniżej znajduje się zawartość gotowego szablonu do utworzenia poprawnej i posiadającej w łaściwą strukturę strony z DOCTYPE XHTML 1.0 S t ric t :< !DOCTYPE html PUBLIC "-//W 3C//DTD XHTML 1.0 S t r ic t //E N ” "http://www.w3.o rg /T R /xh tn ill/D TD /xh tm l1- s t r i ct.d td ">< !—D0CTYPE-->< title > S za b lo n XHTML 1.0 S t r ic t < /t it le >< !--T re ś Ć stro n y -->Szablon ten wymaga tylko dodania treści strony i zmiany zawartości znacznika t i t l e na tekst zwięźle opisujący tematykę strony; który jest czytany przez programy czytające oraz wyszukiwarki. Zobacz ramkę „Znacznik title'. Znacznik title Znacznik t i t l e można łatwo pominąć, ponieważ jego zawartość jest wyświetlana na górnej belce przeglądar­ ki. Ma on jednak niebagatelne znaczenie dla wyszukiwarek. Na przykład strony pojawiające się na pierwszej stronie wyników w wyszukiwarce Google prawie zawsze w znaczniku t it l e zawierają niektóre lub wszystkie słowa kluczowe, które są wyświetlane jako tytuły rezultatów wyszukiwania. W tytule zawsze staraj się wpi­ sywać słowa kluczowe, których użytkownik mógłby użyć w wyszukiwarce. Ponadto należy tytuł napisać tak, żeby zachęcał do wejścia na stronę. Nie marnuj znacznika t i t l e na bezsensowny i często spotykany napis typu Witamy na naszej stronie.

32 CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI Znakowanie treści Adaptacja standardów sieciowych oznacza początek nowego stylu pracy Należy zacząć od przemyślenia struktury treści (jej znacze­ nia), a nie prezentacji (jak będzie 'wyglądać}. Oczywiście niedo­ rzeczne byłoby podejmować się programowania, nie mając pojęcia, jak ma wyglądać efekt końcowy Zazwyczaj Opracowuję nieodpłatnie w programie Adobe Fireworks wstępny projekt, który musi zostać zaakceptowany przez klienta zanim podejmę pracę. Na podstawie tego projektu podejmuję decyzję, co powinno zostać uwzględnione w kodzie X H TM L Podczas znakowania elementów na stronie (jako nagłówki, akapity obrazy itd ), aby mieć później do czego zastoso­ wać style, koncentruję się na tym, jaki znacznik jest najlepszy do umieszczenia w nim danego fragmentu treści. Kiedy opanujemy zasady działania CSS w kolejnym rozdziale, będziemy mogli spojrzeć na kod XHTM L z perspektywy zastoso­ wania odpowiedniego znacznika dla każdego fragmentu treści oraz takiej organizacji kodu, aby było łatwo zastosować do niego style. Teraz zajmiemy się poszczególnymi znacznikami XH TM L i pozna­ my ich rolę w składni dokumentu. Dzięki temu będziemy w stanie dobrać odpowiedni element dla każdego rodzaju treści w dokumen­ cie. Następnie przejdziemy do układu elementów' na stronie (ang. documentflow). Układ elementów — elementy blokowe i liniowe Jak wspominałem wcześniej, większość elementów' XHTM L można podzielić na dwie duże grupy ze względu na sposób zachowania na stronie. Wyróżniamy elementy blokowe i liniowe. Te pierwsze, do których zaliczają się na przykład nagłówki hl-h6 i akapity p, ustawiają się jeden pod drugim bez stosowania złamań wiersza. Mają nawet własne marginesy które odsuwają je nieco od siebie. Elementy liniowe nie posiadają marginesów i układają się jeden obok drugiego w jednej linii, a do nowego wiersza przechodzą do­ piero wówczas, gdy zabraknie dla nich miejsca w danym wierszu, PROSTY PRZYKŁAD KODU XHTML Na zrzucie ekranu przedstawiającym efekt prezentowanego poniżej kodu XH EMI. widać, w jaki sposób elementy blokowe ustawiają się jeden pod drugim oraz że elementy liniowce, w tym przypadku a i strong (zazwyczaj powodujący pogrubienie tekstu), mogą znajdo­ wać się w elementach blokowych, nic powodując dodatkowego zła­ mania wiersza (rysunek 1.3). ROZDZIAŁ 1. XHTML: STRUKTURALIZACJA TREŚCI RYSUNEK 1.3. Przykładowy układ na stronie elementów blokowych i liniowych*hl>Nagłówek hl

Nagłówek h2

Ten akap it je s t bardzo k ró tk i i zaw iera bardzo mało te k stu .< /p >

Natomiast ten akap it je s t ju ż dłuższy i zaw iera zarówno pogrubionv te k st< /stro n g > , ja k i odnośnik, który donikąd n ie prow adzi.

3 4 css' W IT R W m o w ™ « m * w o m m K l Informacje na temat znaczników XHTML i ich atrybutów można znaleźć na stronie Cookwood (pro­ wadzonej przez autorkę z wydaw­ nictwa Peachpit, Elizabeth Castro, której książki wysoko cenię) pod ' adresem http:J/www.c0okwood,Com/ tml/extras/xhtmUefhtml. Wyróżnione fragmenty kodu to prezentowany wcześniej szablon. Można na przykład utworzyć układ A n t i n i, ™ ów i atrybutów pCrcU2k“ * mn^ ~ WEWNęTRZNY ARKUSZ STYLÓW RRZESM d a r k i główek M je« U l l T t i Zi “ T ™ ZrZUde C ta ™ ' - obu ,ych ,e s ,« tpoJ Z J Z T p Ż m T pisma (zwykły tekst jest na nraykL ” “ " ym' " ’Zmi" 1ko,or rotejelementu (blokowy lub liniowy) i w ^ t a y e ^ ny styl ^ e f in io w ir X n i^ w aT t a z ^ X eStoiT y * “ **' ' ’aklesos P°wod“ niu wczyta naszego arkusza stylów PrZe8',darka r .ów jeslii * * « * mai pewność, że tak będzie. amy nic' DŁUZSZV p r z y k ł a d d o k u m e n t u x h t m l M u Z Z x m i^ L u Z ^ s u n c k 1.4) w dhtg pełnionej funk w , * ™ :™ “ “kl -sta ły zorganieo«* Ot». Dalej będziemy dokładnie „piSy„,ał wSz,vStkKh znaczników- XO TM n T t Pontewai jes, to temat na oddzielna książkę Mi1 ■ f f " “ W' ■htt /'/ P"ELrC ' ' //,' 3C//0Tn XH™L 1‘° ^"S itional/Z E N - ó; / / www.w3.org/7R/xhtm7l/0TD/xhtmJl-striet dtd">xiJiTns=nf)ttp ://www.w3.org/ 1999/)tf1*m1» , 1ang=”p l"> *-*rg/Ł999/jthW » 7ang="p| . xml:łloPrzyliładow y dokument XHTML2Tk ttp "eqi,fv' ' Con tm t-ty p e > co n te n t-",e x t/h tm ,. ch arset=iso -88 59-2" /> « w n tn n *<»nte M tp-eoulv-'Content-U nguane" c o n te n t-" ,,- />y ROZDZIAŁ 1. XHTML: STRUKTURA LIZAĆJA TREŚCI 3 J

< /a>Książka wydawnictwa New Riders napisana przez Charlesa Wykę a-Sm itha

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI< !--k o n ie c głównej t r e ś c i-- >< !--n a w ig a c ja -->

0to k ilk a przydatnych odnośników z w itryny W³C(World Wide Web Consortium ), o rg a n iza cji zajm ującej s ię standaryzowaniem tech n o lo g ii internetow ych.

<11>W alidator XHTML W3C < /a > < /li><1i>W alidator CSS W3C < /a > < /li>< li> < a h re f="http://www.w3 .org/M arkUp/">Źródła in fo rm acji na temat XHTM L<1i>Źródła in fo rm a cji na temat C S S < /a > < /li>< /u l>

Więcej odnośników do stron związanych z CSS można znaleźć pod adresem Sty1in ' with CSS.

< !— koniec n a w ig a cji—>< !— sto p ka-->

© 2007 Charles W yke-Smith

< /d iv >< 7— koniec stopki< !--k o n ie c dokumentu—>ROZDZIAŁ 1. XHTML: STRUKTURALIZACJA TREŚCI RYSUNEK 1-4- Interpretacja po­ wyższego kodu w przeglądarce Internet Explorer; przy zastoso­ waniu stylów domyślnych — nie jest to arcydzieło, ale 2 pewnością nadaje się do użytku Niebieska obwódka wokół obrazu w nagłówku oznacza, że jest to odnośnik (znacznik i mg znajduje się wewnątrz znacznika a). Tę niezbyt atrakcyjną dekorację można łatwo usunąć za pomocą CSS, o czym później. Atrybut cl ass jest podobny do i d, jeśli chodzi o identyfika­ cję grup znaczników. Różnica pomiędzy nimi pofega na tym, że klas (c 1 a5s) w jednym doku­ mencie może być dowolnie wiele, a identyfikator (i d) tylko jeden. W kolejnym rozdziale nauczymy się używać zarówno jednych, jak i drugich. Ponadto zobacz ramkę „Nadawanie nazw klasom i identyfikatorom”, £ Przykładowy dokument XHTML - Windows Internet Explorer - D :V^SSVczdział_ l\sa mpteJ

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI Nadawanie nazw klasom i identyfikatorom Identyfikatory i klasy to atrybuty, które można stosować we wszystkich znacznikach. Jednak najczęściej stosuje się je w elementach blokowych. Pozwalają one na precyzyjne zastosowanie stylów CSS do określonego elemen­ tu lub elementów. Zastosowanie tych atrybutów (oraz różnice między nimi) szczegółowo omówię dalej. Na razie wystarczy zapamiętać, że wartość atrybutu musi być jednym słowem. Można jednak sobie z tym problemem poradzić, łącząc kilka słów za pomocą jakiegoś znaku, np. podkreślenia — cl ass="navigatio n 1 in ks". Ponieważ przeglądarka może źle zinterpretować nazwy atrybutów złożone z nietypowych znaków, radzę zaczynać je od litery, a nie liczby ani symbolu. Ze względu na fakt, że jedynym przeznaczeniem atrybutów cl ass i i d jest nadanie elementowi nazwy, za której pomocą można się do niego odwoływać w kodzie CSS (lub JavaScript), słowo to można dobrać dowolnie. Trzeba jednak zaznaczyć, że dobrym zwyczajem jest nadawanie nazw, które coś ozna­ czają. W związku z tym lepsza jest nazwa typu class=" navi gatfonbar" niż cl ass= "zdechłyszczur". Mimo że nazwa typu zdechłyszczur może wywołać uśmiech na twarzy w trakcie ciężkiej pracy, może nam nie być do śmiechu, kiedy za jakiś czas będziemy musieli edytować nasz kod. Nie ma też sensu ułatwiać sobie życia za pomocą skrótów w nazwach. Lepiej użyć nazwy f ooter niż f r, ponieważ istnieje duża szansa, że w ten sposób zaoszczę­ dzimy swój lub czyjś czas w przyszłości, kiedy będzie trzeba edytować kod. Zrób sobie przysługę i nie żałuj czasu na wymyślenie znaczących i niedwuznacznych nazw dla klas i identyfikatorów. Hierarchia dokumentu, czyli zapoznanie z rodziną XHTNL Hierarchia dokumentu jest ostatnim zagadnieniem związanym z XHTML, które poruszymy przed przejściem do CSS. Hierarchia dokumentu przypomina drzewo genealogiczne lub wykres organiza­ cyjny sporządzony na podstawie sposobu zagnieżdżenia znaczników w dokumencie. Dobrym sposobem na zrozumienie tego pojęcia jest usunięcie z sekcji body dokumentu XHTM L treści i pozostawie­ nie samych znacznikom Dzięki temu wyraźniej widać organizację strukturalną strony. Poniżej znajduje się odarty z treści nagłówek:

wyemane automatycznie, dzięki cze- w>Taźnie widać powiązania między znacznikami. Widać na mu łatwiej zobaczyć ich strukturę. przykład, że znacznik body zawiera wszystkie pozostałe znaczniki. Do tego ceiu służy opcja Commands/ w 'dać także, żc znacznik di v z identyfikatorem header zawiera dwa Apply Source Formatting. znaczniki — obraz i nagłówek trzeciego stopnia. VVwidoku kodu w programie Dreamweaver można sprawić, aby zagnieżdżone znaczniki zostały po- ROZDZIAŁU XHTML: STRUKTURALIZACJA TREŚCI 39 RYSUNEK 1.5. Reprezentacja w postaci diagramu hierarchii struktury dokumentu img Z hierarchii przedstawionej na rysunku 1.5 wynika, że znaczniki img i h3 są potomkami znacznika di v, ponieważ obydwa są w nim za­ gnieżdżone. Rozumując w drugą stronę, znacznik di v jest rodzicem tych dwóch znaczników, natomiast znaczniki img i h3 to elementy siostrzane, ponieważ mają tego samego rodzica. W końcu element body jest przodkiem znaczników" img i h3, ponieważ te są jego po­ średnimi potomkami. W CSS związki te wykorzystuje się do pisania pewnego rodzaju skrótowych odwołań, na przykład: div#header img {kod CSS} Powyższa reguła CSS dotyczy wyłącznie znaczników img znajdu­ jących się wewnątrz (będących potomkami) elementu div z identy­ fikatorem header (znak # w CSS oznacza identyfikator). Pozostałe znaczniki img znajdujące się na tej stronie pozostają nietknięte, ponieważ nie są zagnieżdżone wr tym znaczniku. Dzięki temu można ustawić obramowanie tylko dla tego obrazu lub ustawić mu margi­ nes, aby odsunąć go od otaczających elementów. Bardziej szczegółowe zasady tworzenia reguł CSS poznasz w na­ stępnym rozdziale. Ważne jest, aby nie zapominać, że każdy ele­ ment znajdujący się wrciele dokumentu jest potomkiem elementu body. Ponadto w zależności od tego, w którym miejscu w kodzie się znajduje, dowolny element może być równocześnie przodkiem, rodzicem, dzieckiem lub elementem siostrzanym innego znacznika w hierarchii dokumentu. Stosując reguły CSS z wykorzystaniem odwołań do identyfikatorów klas i struktury dokumentu, można precyzyjnie określić, które regu­ ły CSS mają zastosowanie do poszczególnych elementów XHTML. Tego wiaśnie nauczysz się w kolejnym rozdziale.

ROZDZIAŁ 2 Podstawy CSS ROZDZIAŁ 2. PODSTAWY CSS Z poprzedniego rozdziału dowiedzieliśmy się, że kod XHTML sta­ nowi podstawową strukturę hierarchiczną dokumentu. Wiemy już, że każdy element ma w przeglądarce własny zestaw domyśl­ nych stylów oraz że elementy dzielimy na blokowe (układające się jeden pod drugim) i liniowe (układające się jeden obok drugie­ go). Jeśli dokument posiada poprawną strukturę, jego elementy automatycznie ułożą się na stronie w sensowny sposób. Jednak sensowny nie oznacza przyjemny dla oka. Dlatego technologia CSS umożliwia takim kreatywnym osobom jak my zmieniać domyślne i dodawać nowe style. Dzięki temu efekt może być znacznie bardziej funkcjonalny i milszy w odbiorze. Niniejszy roz­ dział opisuje podstawy CSS. Po jego lekturze będziesz w stanie utworzyć własne style dla przykładowego kodu XHTML, który zaprezentowałem w rozdziale 1,

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI Trzy sposoby dołączania arkuszy stylów Istnieją trzy sposoby na dołączenie arkusza stylów do stronv inter­ netowej - zastosowanie stylów lokalnych (ang. inline), osadzonych (ang. embedded) oraz zewnętrznych, czyli dołączonych z osobnego pliku arkuszy stylów Z punktu widzenia twórcy stron internetowych sens ma tylko trzeci z nich. Pozostałe dwa jednak warto znać. ponie­ waż bywają przydatne w czasie pracy nad stroną. Style lokalne Style lokalne dodaje się do znaczników- za pomocą atrybutu XH T M L sty 1e. Na przykład:

Niniejszy akapit je st wyświetlany w stylu domyślnym prze­ glądarki -

Dodani e stylów lokalnych pozwala przesło­ nić style domyślne.

CSS. WITRYNY INTERNETOWE SZYTE NA MIARĘ. AUTORYTETY INFORMATYKI