HTML5 i CSS3. Praktyczne projekty 9788324677696, 9788324630509, 8324630503, 8324677690

Mężny bądź, chroń pułk twój i sześć flag.

Voyez le brick géant que j'examine près du wharf.

Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Эх, чужак! Общий съём цен шляп (юфть) — вдрызг!

Mężny bądź, chroń pułk twój i sześć flag.

Voyez le brick géant que j'examine près du wharf.

Mężny bądź, chroń pułk twój i sześć flag.

Voyez le brick géant que j'examine près du wharf.

Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Эх, чужак! ...

Mężny bądź, chroń pułk twój i sześć flag.

Voyez le brick géant que j'examine près du wharf.

Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Эх, чужак! Общий съём цен шляп (юфть) — вдрызг!

Ktura gura jest durza?

Faalsches Übeen von Xylophonmusik quält jeden größeren Zwerg.

• Raz
• Dwa
• Trzy

• Raz
• Dwa
• Trzy

• Raz
• Dwa
• Trzy

Moja pierwsza strona WWW.

Moja pierwsza strona WWW.

Moja pierwsza strona WWW.

Stoi na stacji lokomotywa,
Ciężka, ogromna i pot z niej spływa:
Tłusta oliwa.
...

Spis treści zapisany w pliku index.html będzie natomiast zawierał trzy hiperłącza widoczne na listingu 18.2. Wszystkie cztery pliki należy umieścić w tym samym folderze. Listing 18.2. Odsyłacze do trzech wierszy Juliana Tuwima

Lokomotywa
Pan Hilary
Słoń Trąbalski

...
...
...
...

• ...
• ...
• ...
...

• ...
• ...
• ...
...

• Czułość
• Modlitwa
• Mój psalm

powrót do spisu treści

Biega, krzyczy... ...

• Bajka iskierki
• Był sobie paź
• Miała baba koguta

Na Wojtusia z popielnika... ...

Był sobie paź... ...

Miała baba koguta... ...

powrót na górę strony

• ...
• ...
...

...

...

...

• 
  
  kompozycja trzecia"> warzyw, kompozycja trzecia" />
  
  Całe ćwiczenie 18.7 składa się z siedmiu plików: jednego pliku HTML (w nim występują style wewnętrzne), trzech dużych fotografii oraz trzech miniaturek. Zauważ, że domyślnie obrazy, które są hiperłączami, są ozdobione niebieskim obramowaniem. Możesz je usunąć stylami:
  
  Rozdział 18. ♦ Odsyłacze i menu nawigacyjne
  
  213
  
  img { border: none; }
  
  Ćwiczenie 18.8 Wykonaj tabelę prezentującą zestawienie kursów kilku wybranych walut. Wykorzystaj dane dostępne na stronie NBP: http://www.nbp.pl/kursy/kursya.html. Tabelę umieść wewnątrz odsyłacza wskazującego adres NBP. Zarys rozwiązania jest przedstawiony na listingu 18.8. Listing 18.8. Zarys rozwiązania ćwiczenia 18.8
  
  Kursy walut
  
  
  
  ...
  
  

  nazwa	symbol	kurs
  dolar amerykański	USD	3,1744

  
  
  Style CSS odsyłaczy Język CSS zawiera cztery specjalne selektory, które pozwalają na modyfikację wyglądu hiperłączy. Łącząc pseudoklasy: :link :visited :hover :active
  
  z selektorem a: a:link { } a:visited { }
  
  Część III ♦ Elementy i znaczniki HTML5
  
  214 a:hover { } a:active { }
  
  możesz zdefiniować wygląd hiperłączy nieodwiedzonych (a:link), odwiedzonych (a:visited), odsyłacza aktywnego (a:active) oraz zmianę wyglądu odsyłacza po wskazaniu go kursorem myszy (a:hover). Selektorów tych należy używać, przestrzegając podanej powyżej kolejności, tj.: PRZYKŁAD ZALECANY a:link { } a:visited { } a:hover { } a:active { }
  
  Jeśli kolejność selektorów zmienisz, np.: PRZYKŁAD BŁĘDNY a:visited { } a:hover { } a:active { } a:link { }
  
  wówczas działanie selektorów a:visited oraz a:hover zostanie przysłonięte działaniem selektora a:link. Innymi słowy reguły a:hover oraz a:active nie będą zastosowane. W regułach opisujących format hiperłączy często spotykanymi rozwiązaniami są:  modyfikacja koloru czcionki i koloru tła,  usunięcie lub dodanie podkreślenia,  zmiana koloru obramowania,  zmiana wielkości dopełnienia.
  
  Selektory a:link, a:visited, a:hover oraz a:active nie muszą występować zawsze wszystkie razem. Jeśli uznasz za stosowne, możesz korzystać wyłącznie z jednego z nich, np. a:hover.
  
  Ćwiczenie 18.9 Przygotuj witrynę z tekstami czterech piosenek wojskowych: Deszcz, jesienny deszcz, Rozszumiały się wierzby płaczące, Maszerują chłopcy oraz O mój rozmarynie. Menu witryny powinno zawierać hiperłącza do stron z tekstami poszczególnych piosenek. Odsyłacze w menu sformatuj, wykorzystując selektory: a:visited { } a:hover { } a:active { } a:link { }
  
  Rozdział 18. ♦ Odsyłacze i menu nawigacyjne
  
  215
  
  Sprawdź działanie każdego z powyższych selektorów. W ćwiczeniu tym należy przygotować cztery pliki HTML:  deszcz.html,  wierzby.html,  maszeruja-chlopcy.html,  o-moj-rozmarynie.html
  
  oraz jeden plik style.css. Listing 18.9 przedstawia zarys pliku deszcz.html. Pozostałe trzy strony WWW zawierają identyczne menu, różniące się jedynie w sekcji div o identyfikatorze #tresc. Listing 18.9. Plik HTML z tekstem piosenki pt. „Deszcz, jesienny deszcz”
  
  PIEŚNI WOJSKOWE
  
  
  • O mój rozmarynie
  
  
  Deszcz, jesienny deszcz

  Deszcz ,jesienny deszcz
  Smutne pieśni gra,
  Mokną na nim karabiny,
  Hełmy kryje rdza.
  ...

  
  
  Style ustalające układ witryny zapisz w pliku style.css. Format hiperłączy zdefiniuj, umieszczając w CSS reguły: a:visited { background: brown; color: red; } a:link { background: yellow; color: blue; } a:hover { background: black; color: white; }
  
  Część III ♦ Elementy i znaczniki HTML5
  
  216 a:active { background: red; color: yellow; }
  
  Każda z powyższych reguł ma bardzo charakterystyczne kolory, co ułatwi Ci sprawdzenie, kiedy która z reguł jest stosowana. Uruchom przeglądarkę i odwiedź wykonaną stronę. Na początku wszystkie hiperłącza będą żółto-niebieskie. Odwiedzone hiperłącza będą miały kolor brązowo-czerwony. Jeśli zechcesz przywrócić hiperłączom kolory nieodwiedzone, użyj przedstawionej na rysunku 18.1 operacji Zaznacz wszystkie odnośniki jako nieodwiedzone. Opcja ta jest dostępna w pasku narzędzi Web Developer Toolbar.
  
  Rysunek 18.1. Operacja Zaznacz wszystkie odnośniki jako nieodwiedzone
  
  Odnośnik, który wskażesz myszką, otrzyma czarne tło. Odnośnikiem aktywnym jest natomiast odnośnik, który klikasz. Kliknij dowolne hiperłącze i nie puszczaj przycisku myszki (tak jakbyś chciał wykonać operację ciągnij-upuść). Możesz także spróbować przeciągnąć odsyłacz w inne miejsce. Kliknięty w taki sposób odsyłacz otrzyma czerwone tło.
  
  Otwieranie nowych okien Element a posiada atrybut target, który pozwala na ustalenie sposobu otwierania odwiedzanego hiperłącza. Atrybut ten może przyjmować wartości:
  
  Rozdział 18. ♦ Odsyłacze i menu nawigacyjne
  
  217
  
  _blank _self _parent _top
  
  Jeśli dokument nie zawiera ramek, istotnymi wartościami są wówczas wyłącznie: _blank — otwiera dokument w nowym oknie _self
  
  — otwiera dokument w bieżącym oknie
  
  Hiperłącze: PRZYKŁAD NIEZALECANY ...
  
  będzie powodowało otworzenie nowego okna przeglądarki. Zachowanie takie jest przez wielu internautów źle widziane. Decyzja o tym, czy hiperłącze powinno zostać otworzone w nowym, czy w bieżącym oknie, należy bowiem nie do osoby tworzącej witrynę, a do osoby korzystającej z niej. Każda ze współczesnych przeglądarek pozwala na otwieranie odnośników w nowych oknach lub w nowych zakładkach. Wystarczy, że klikając hiperłącze, przytrzymasz przycisk Shift lub Ctrl, a odsyłacz zostanie otworzony w nowym oknie lub na nowej karcie. Jeśli nie korzystasz z ramek, nie stosuj atrybutu target.
  
  Ćwiczenie 18.10 Wykonaj witrynę sprawdzającą działanie wszystkich wartości atrybutu target dla elementu a. Użyj kodu: Septem
  
  Mapa odsyłaczy Odsyłacze tworzone elementem a mają zawsze kształt prostokąta. Mogą zawierać teksty, obrazy, tabele czy nagłówki, jednak obszar, którego kliknięcie będzie powodowało zmianę oglądanego dokumentu, jest zawsze prostokątny. Hiperłącza nieprostokątne możemy tworzyć, wykorzystując elementy map oraz area. Przykładowe hiperłącza tego typu są przedstawione na listingu 18.10.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  218
  
  Listing 18.10. Hiperłącza wykonane elementami map, area oraz img
  
  
  
  
  
  W dokumencie należy umieścić obraz, którego fragmenty będą odsyłaczami. Wykorzystujemy element img, którego atrybut usemap wskazuje element map definiujący hiperłącza:
  
  Poszczególne odsyłacze są definiowane elementami area zawartymi wewnątrz elementu map. Każdy element area definiuje osobne hiperłącze. Pierwszy z odsyłaczy na listingu 18.10 jest następujący:
  
  Rolę atrybutów href oraz alt już poznaliśmy. Pierwszy z nich wskazuje adres, który ma być odwiedzony po aktywacji hiperłącza, a drugi zawiera tekst z opisem przeznaczony dla przeglądarek tekstowych. Dwa pozostałe atrybuty definiują obszar hiperłącza. Atrybut shape ustala kształt obszaru, a atrybut coords — współrzędne. Parametry: shape="rect" coords="529,195,715,315"
  
  definiują hiperłącze o kształcie prostokąta (rect), który jest wyznaczony przez punkty A(529, 195) oraz B(715, 315). Drugie z hiperłączy ma kształt koła (circle) o środku w punkcie C(140,248) i promieniu 30: shape="circle" coords="140,248,30"
  
  Ostatnie z hiperłączy jest wielokątem (poly), który zawiera trzy wierzchołki D(170,58), E(528,58) oraz F(321,195): shape="poly" coords="170,58,528,58,321,195"
  
  Kształt hiperłączy tworzonych przez elementy area z listingu 18.10 wyjaśnia rysunek 18.2. Rysunek 18.2. Kształt hiperłączy z listingu 18.10
  
  Rozdział 18. ♦ Odsyłacze i menu nawigacyjne
  
  219
  
  Ćwiczenie 18.11 Wykonaj ćwiczenie przedstawione na listingu 18.10 oraz na rysunku 18.2. Składa się ono z pięciu plików: kaczki.jpg, index.html, mama.html, dziecko.html i woda.html. W pliku index.html umieść mapę odsyłaczy z listingu 18.10, a w pozostałych plikach HTML wpisz tylko tytuł strony oraz hiperłącze powrotne:

  powrót

  
  
  Po wykonaniu ćwiczenia sprawdź kształt każdego hiperłącza. Obszarem aktywnym będzie tylko rozjaśniony fragment zdjęcia z rysunku 18.2.
  
  220
  
  Część III ♦ Elementy i znaczniki HTML5
  
  Rozdział 19.
  
  Elementy semantyczne ustalające strukturę witryny Język HTML5 zawiera następujące elementy ustalające strukturę witryny:  nagłówki h1, h2, h3, h4, h5, h6,  grupy nagłówków hgroup,  artykuły article,  sekcje section,  noty boczne aside,  nagłówek i stopkę header, footer,  element address
  
  oraz omówiony w rozdziale 18. element nav.
  
  Nagłówki Nagłówki h1, …, h6 wyznaczają podział dokumentu odpowiadający rozdziałom, podrozdziałom itd. Na stronie zawierającej pojedynczy wiersz elementów tych używamy, oznaczając tytuł witryny, autora i tytuł utworu, np.:
  
  Wiersze Adam Mickiewicz Oda do młodości

  ...

  
  
  Część III ♦ Elementy i znaczniki HTML5
  
  222
  
  Jeśli witryna będzie zawierała kilka utworów, nagłówki pojawią się wielokrotnie. Stopień nagłówka (np. h2) będzie odnosił się do danych tej samej kategorii (np. imię i nazwisko autora). Zarys dokumentu zawierającego kilka utworów jest przedstawiony na listingu 19.1. Listing 19.1. Nagłówki h1, h2, h3
  
  Wiersze Adam Mickiewicz Oda do młodości

  ...

  Julian Tuwim Lokomotywa

  ...

  Jan Brzechwa Orzech

  ...

  
  
  Nagłówki są wykorzystywane m.in. do automatycznego generowania spisu treści dokumentu. Automatyczny spis treści dokumentu listingu 19.1 będzie następujący: 1. Wiersze 1. Adam Mickiewicz 1.Oda do młodości 2. Julian Tuwim 1. Lokomotywa 3. Jan Brzechwa 1. Orzech
  
  Ćwiczenie 19.1 Korzystając z przeglądarki Google Chrome oraz z wtyczki HTML5 Outliner1, wygeneruj automatyczny spis treści dla dokumentu z listingu 19.1. Dokument taki jest przedstawiony na rysunku 19.1.
  
  Grupowanie nagłówków Element hgroup służy do grupowania nagłówków h1, …, h6. Możemy go użyć do złączenia dowolnej liczby nagłówków, np.:
  
  Lorem Ipsum 1
  
  Wtyczka jest dostępna na stronie: https://chrome.google.com/webstore/detail/html5-outliner/ afoibpobokebhgfnknfndkgemglggomo.
  
  Rozdział 19. ♦ Elementy semantyczne ustalające strukturę witryny
  
  223
  
  Rysunek 19.1. Automatyczne generowanie spisu treści wtyczką HTML5 Outliner
  
  Dolor Sit amet
  
  Zgrupowanie nagłówków ma wpływ na spis treści witryny. W spisie pojawi się wyłącznie pierwszy nagłówek z każdej grupy. Dla powyższej grupy spis treści będzie zawierał jedną pozycję: 1. Lorem
  
  Jeśli na listingu 19.1 zgrupujemy nagłówki dotyczące konkretnego wiersza, otrzymamy kod przedstawiony na listingu 19.2. Listing 19.2. Kod z listingu 19.1 po zgrupowaniu nagłówków dotyczących każdego z wierszy
  
  Wiersze
  
  Adam Mickiewicz Oda do młodości
  
  

  ...

  
  
  Julian Tuwim Lokomotywa
  
  

  ...

  
  
  Jan Brzechwa Orzech
  
  

  ...

  
  
  Część III ♦ Elementy i znaczniki HTML5
  
  224
  
  Ćwiczenie 19.2 Wygeneruj automatyczny spis treści dla dokumentu z listingu 19.2. Spis taki jest przedstawiony na rysunku 19.2. Rysunek 19.2. Spis treści dokumentu z listingu 19.2
  
  W językach HTML4 oraz XHTML grupowanie nagłówków mogliśmy wykonać, stosując element div:
  
  
  
  lub:
  
  
  
  Oczywiście klasę elementu div możemy oznaczyć dowolnie, np. .
  
  Artykuły Element article służy do oznaczania niezależnych treści, które stanowią w pewnym sensie odrębną całość i mogą być dystrybuowane niezależnie. Jako kryterium decydujące o tym, czy dany fragment należy oznaczyć elementem article, możemy przyjąć kanały RSS oraz Atom. Treści, które będą udostępniane jako pojedyncze wpisy w kanałach syndykacji, oznaczamy elementami article. Przykładami treści, które mogą być oznaczane elementami article, są:
  
  Rozdział 19. ♦ Elementy semantyczne ustalające strukturę witryny
  
  225
  
   kompletny wpis na blogu,  fragment wpisu na blogu,  komentarz do wpisu na blogu,  treść pojedynczego wiersza, piosenki czy tekstu literackiego,  pojedynczy towar dostępny w sklepie.
  
  Użycie elementów article w stosunku do wierszy z listingu 19.1 jest przedstawione na listingu 19.3. Listing 19.3. Użycie elementów article do oznaczenia wierszy
  
  Wiersze
  
  Adam Mickiewicz Oda do młodości

  ...

  
  
  Julian Tuwim Lokomotywa

  ...

  
  
  Jan Brzechwa Orzech

  ...

  
  
  Zwróć uwagę na nagłówki zawarte w elementach article. Numeracja wewnątrz elementów article jest prowadzona od poziomu h1.
  
  Ćwiczenie 19.3 Wykonaj stronę przedstawioną na listingu 19.3. Elementy article można zagnieżdżać. W takim wypadku przyjmujemy, że zagnieżdżone elementy article wiążą się w jakimś sensie z elementem nadrzędnym. Jeśli witryna zawiera artykuły i pozwala na umieszczanie komentarzy, wówczas przykładem zagnieżdżania elementów article może być użycie elementu nadrzędnego do oznaczenia treści artykułu, zaś elementów zagnieżdżonych do oznaczenia komentarzy. Jeśli na witrynie z listingu 19.3 dodamy komentarze do wierszy, otrzymamy kod z listingu 19.4.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  226 Listing 19.4. Przykład zagnieżdżonych elementów article
  
  Adam Mickiewicz Oda do młodości

  ...

  
  
  Komentarz pierwszy...
  
  Komentarz drugi...
  
  Komentarz trzeci...
  
  Ćwiczenie 19.4 Wykonaj stronę, której zarys przedstawiono na listingu 19.4. W językach HTML4 oraz XHTML artykuły oznaczano elementem div:
  
  ...
  
  lub:
  
  ...
  
  Sekcje Większe fragmenty witryny, które nie podlegają rozpowszechnianiu kanałami RSS oraz Atom, możemy oznaczać elementami section. Przykładami fragmentów, które możemy oznaczyć przy użyciu sekcji, są:  na stronie czasopisma: kolumna zawierająca fragmenty kilku artykułów (tj. section zawiera serię elementów article);  na stronie wydawnictwa: panel prezentujący kilka ostatnich pozycji lub kilka pozycji z listy bestsellerów (ponownie: section zawiera kilka elementów article);  na stronie sklepu: grupa produktów z wybranej kategorii (ponownie: section zawiera kilka elementów article);  panel reklamowy zawierający jedną lub więcej reklam.
  
  Rozdział 19. ♦ Elementy semantyczne ustalające strukturę witryny
  
  227
  
  W stosunku do witryny zawierającej wiersze element section może być użyty do zgrupowania wierszy wybranego autora. Przykład taki jest przedstawiony na listingu 19.5. Listing 19.5. Przykład użycia elementu section do grupowania wierszy jednego autora
  
  Jan Brzechwa
  
  Orzech

  ...

  
  
  Sowa

  ...

  
  
  Sroka

  ...

  
  
  Podobnie jak w przypadku elementu article, numeracja nagłówków zawartych w elemencie section rozpoczyna się od h1.
  
  Ćwiczenie 19.5 Wykonaj stronę, której zarys przedstawiono na listingu 19.5. W językach HTML4 oraz XHTML sekcje oznaczano elementami div:
  
  ...
  
  lub:
  
  ...
  
  Element aside Element aside służy do oznaczania uwag, których treść w dość luźny sposób jest związana z tekstem zawartym dookoła elementu aside. Istotną rolę odgrywa tutaj relacja rodzic – dziecko. Jeśli elementu aside użyjemy wewnątrz artykułu article:
  
  

  Lorem

  Ipsum

  Dolor

  
  
  Część III ♦ Elementy i znaczniki HTML5
  
  228
  
  wówczas treść elementu aside (tj. tekst Ipsum) powinna w pewnym stopniu odnosić się do treści elementu article (tj. do akapitów Lorem oraz Dolor). W przypadku tekstów literackich element aside możemy wykorzystać do umieszczenia wewnątrz tekstu utworu fragmentu życiorysu autora. Przykład taki jest przedstawiony na listingu 19.6. Listing 19.6. Nota boczna zawierająca informacje o autorze
  
  Cyprian Kamil Norwid Mój psalm
  
  Cyprian Kamil Norwid, właściwie Cyprian Ksawery Gerard Walenty Norwid herbu Topór, ur. 24 września 1821...
  
  

  Maryj rozlicznych (a tych nigdy dosyć!),
  Jasnych Magdalen z bujnymi włosami,
  ...

  
  
  Ćwiczenie 19.6 Wykonaj stronę, której zarys przedstawiono na listingu 19.6. W językach HTML4 oraz XHTML noty boczne oznaczano elementami div:
  
  ...
  
  lub:
  
  ...
  
  Nagłówek i stopka Elementy header oraz footer służą do oznaczenia nagłówka oraz stopki dokumentu. Strona prezentująca wybrany wiersz może mieć strukturę przedstawioną na listingu 19.7. Listing 19.7. Przykład użycia elementów header oraz footer
  
  Cyprian Kamil Norwid Mój psalm
  
  Rozdział 19. ♦ Elementy semantyczne ustalające strukturę witryny

  Maryj rozlicznych (a tych nigdy dosyć!),
  Jasnych Magdalen z bujnymi włosami,
  ...

  
  
  © 2012
  
  Ćwiczenie 19.7 Wykonaj stronę, której zarys przedstawiono na listingu 19.7. W językach HTML4 oraz XHTML nagłówek i stopkę oznaczano elementami div:
  
  ...
  
  lub:
  
  ...
  
  ...
  
  Element address Element address zawiera informacje kontaktowe dotyczące całej witryny:
  
  ... ...
  
  lub najbliższego elementu article:
  
  ... ...
  
  Element address osadzony wewnątrz innego elementu, np. footer:
  
  ... ...
  
  dotyczy najbliższego przodka, który jest elementem article lub body.
  
  229
  
  Część III ♦ Elementy i znaczniki HTML5
  
  230
  
  W elemencie address umieszczamy informacje wskazujące metody kontaktu z autorem lub osobą odpowiedzialną za podane informacje. Specyfikacja HTML5 podaje następujące przykłady użycia elementu address:
  
  Dave Raggett, Arnaud Le Hors, contact persons for the W3C HTML Activity
  
  For more details, contact John Smith.
  
  W elemencie address umieszczamy wyłącznie informacje dotyczące kontaktu z autorem lub osobą odpowiedzialną. Umieszczenie wewnątrz address jakichkolwiek innych informacji jest błędem: PRZYKŁAD BŁĘDNY Last Modified: 1999/12/24 23:37:50
  
  Elementy wyznaczające sekcje Elementy: article aside nav section
  
  należą do specjalnej grupy podziału treści na sekcje (ang. sectioning content). Każdy z tych elementów dotyczy swojego najbliższego przodka i wyznacza jego podział na mniejsze fragmenty. Numeracja nagłówków w tych elementach jest resetowana i prowadzona na kolejnym poziomie zagnieżdżenia. Dlatego wewnątrz elementów wyznaczających podział na sekcje możemy zawsze nagłówki rozpoczynać od h1. Element h1 zawarty w elemencie body ustala tytuł całej strony:
  
  
  
  Jeśli jednak ten sam element h1 zagnieździmy wewnątrz elementu article, tytuł będzie wówczas dotyczył wyłącznie artykułu:
  
  
  
  Jeśli element h1 umieścimy wewnątrz elementu nav:
  
  Rozdział 19. ♦ Elementy semantyczne ustalające strukturę witryny
  
  231
  
  
  
  to podany nagłówek będzie dotyczył menu nawigacyjnego. Kontekstowość taka jest zdefiniowana przez relację rodzic – dziecko. Elementy article, section, aside oraz nav określają strukturę swojego elementu nadrzędnego.
  
  Ćwiczenie 19.8 Wykonaj stronę, która będzie zawierała elementy h1, …, h6, article, section, aside, header, footer, nav. Każdy element ma wystąpić dokładnie jeden raz. Nie stosuj zagnieżdżeń. W każdym elemencie umieść jego nazwę. Wykorzystując wtyczkę HTML5 Outliner, sprawdź, jak wygląda automatycznie wygenerowane menu. Kod HTML dokumentu, który należy przygotować, jest przedstawiony na listingu 19.8. Listing 19.8. Dokument sprawdzający wpływ wszystkich elementów na automatycznie generowany spis treści
  
  h1 h2 h3 h4 h5 h6 article section aside header footer nav
  
  Spis treści wygenerowany dla dokumentu z listingu 19.8 jest przedstawiony na rysunku 19.3. Rysunek 19.3. Spis treści dokumentu zawierającego wszystkie elementy strukturalne z wyjątkiem hgroup
  
  Część III ♦ Elementy i znaczniki HTML5
  
  232
  
  Jeśli wygenerowany spis treści ma nie zawierać elementów UNTITLED, wówczas w każdym z elementów article, section, aside oraz nav należy użyć nagłówków h1, …, h6.
  
  Element body Elementy strukturalne zawarte w elemencie body ustalają strukturę całej strony WWW:
  
  ...
  
  
  
  
  
  
  
  Każdy z elementów strukturalnych może być użyty dowolnie wiele razy. Język nie nakłada formalnych ograniczeń na liczbę powtórzonych elementów. W praktyce nagłówek h1 na poziomie elementu body zawiera zwykle logo firmy lub produktu, którego dotyczy witryna.
  
  Nagłówki Wewnątrz elementów h1, …, h6 możemy zagnieżdżać elementy frazowe oraz obrazy: Lorem ipsum Lorem ipsum
  
  Nagłówki nie mogą być zagnieżdżane: PRZYKŁADY BŁĘDNE
  
  Lorem
  
  Ipsum
  
  Dolor
  
  Nie mogą też zawierać żadnych większych elementów. Wszystkie poniższe przykłady są niepoprawne:
  
  Rozdział 19. ♦ Elementy semantyczne ustalające strukturę witryny
  
  233
  
  PRZYKŁADY BŁĘDNE:
  
  

  Lorem

  
  
  ...
  
  Ipsum
  
  Dolor
  
  
  ...
  
  
  Element hgroup może zawierać natomiast wyłącznie elementy h1, …, h6. Jeśli automatycznie generowany spis treści jest dla Ciebie istotny, musisz wówczas pamiętać o umieszczaniu nagłówków wewnątrz wszystkich elementów tworzących sekcje, tj.: article section aside nav
  
  Jeśli którykolwiek z powyższych elementów będzie pozbawiony nagłówków, w wygenerowanym spisie treści otrzymasz wówczas nieopisane pozycje.
  
  Element article Wewnątrz elementów article możemy umieszczać wszystkie elementy dotyczące struktury witryny, tj.:  nagłówki h1, …, h6 oraz hgroup;  artykuły, sekcje i noty boczne: article, section, aside;  nagłówek i stopkę: header, footer;  menu nawigacyjne nav.
  
  Zagnieżdżone elementy odnoszą się do konkretnego elementu article, a nie do całej witryny:
  
  ...
  
  Część III ♦ Elementy i znaczniki HTML5
  
  234
  
  
  
  
  
  
  
  Element nav może zawierać spis treści artykułu, a nagłówek i stopka — zestawy przycisków modyfikujących sposób prezentacji artykułu, przewijanie stron artykułu lub powrót do strony głównej witryny. Element section może zawierać zgrupowane komentarze, zaś aside — notę boczną dotyczącą głównego tekstu (np. informacje o publikacji tekstu w konkretnym czasopiśmie czy książce). Jeśli w elemencie section umieścimy zgrupowane komentarze, a każdy komentarz wykonamy jako element article, otrzymamy wówczas strukturę:
  
  Tekst artykułu
  
  komentarz pierwszy komentarz drugi
  
  Powtarzając to samo rozumowanie kilkukrotnie (tj. zezwalając, by każdy komentarz mógł zawierać kolejne podkomentarze), otrzymamy wielopoziomowe zagnieżdżenie elementów article oraz section.
  
  Element section Podobnie jak wewnątrz elementu article, tak i wewnątrz elementów section możemy umieszczać wszystkie elementy dotyczące struktury witryny, tj.:  nagłówki h1, …, h6 oraz hgroup;  artykuły, sekcje i noty boczne: article, section, aside;  nagłówek i stopkę: header, footer;  menu nawigacyjne nav.
  
  Element section możemy traktować jako element pozwalający na grupowanie elementów article lub jako element dotyczący układu witryny.
  
  Element aside Specyfikacja nie nakłada formalnych ograniczeń na element aside. Dlatego formalnie wewnątrz elementu aside możemy stosować:  nagłówki h1, …, h6 oraz hgroup;  artykuły, sekcje i noty boczne: article, section, aside;
  
  Rozdział 19. ♦ Elementy semantyczne ustalające strukturę witryny
  
  235
  
   nagłówek i stopkę: header, footer;  menu nawigacyjne nav.
  
  Podane w specyfikacji przykłady sugerują jednak, że noty boczne aside są przeznaczone na stosunkowo niewielkie wstawki. Jeśli w notatce bocznej mają pojawić się komentarze, to odpowiedniejszym elementem będzie prawdopodobnie section. Wszystkie poniższe zagnieżdżenia wydają mi się wątpliwe: PRZYKŁADY NIEZALECANE
  
  
  
  
  
  
  
  
  
  Nagłówek i stopka Wewnątrz elementów header oraz footer możemy stosować elementy:  nagłówki h1, …, h6 oraz hgroup;  artykuły, sekcje i noty boczne: article, section, aside;  nagłówek i stopkę: header, footer;  menu nawigacyjne nav.
  
  Oto typowy przykład użycia elementu header:
  
  Logo Slogan
  
  
  
  
  
  
  
  Menu nawigacyjne nav Element nav służy do wykonania menu nawigacyjnego. Może on zawierać wszystkie elementy strukturalne, tj.:  nagłówki h1, …, h6 oraz hgroup;  artykuły, sekcje i noty boczne: article, section, aside;  nagłówek i stopkę: header, footer;  menu nawigacyjne nav.
  
  W przypadku bocznych elementów menu typowe zastosowanie elementu nav przyjmie postać:
  
  Kategorie
  
  
  Rozdział 20.
  
  Multimedia W języku HTML5 pojawiła się obsługa formatów multimedialnych, tj. dźwięku oraz wideo. Niestety z powodu braku standaryzacji stosowanych formatów użycie nowych rozwiązań stwarza liczne trudności.
  
  Element audio Pliki muzyczne możemy umieszczać na stronach WWW, stosując element audio. W najprostszym przypadku w atrybucie src należy podać adres URL pliku muzycznego:
  
  Dodatkowy atrybut controls włącza dostępność przycisków do odtwarzania i przewijania. Niestety najpopularniejszy z formatów muzycznych, czyli mp3, nie jest jednolicie obsługiwany przez przeglądarki. Jeśli chcemy otrzymać rozwiązanie, które będzie poprawne we wszystkich przeglądarkach, należy wówczas użyć formatów alternatywnych. Każda przeglądarka wybierze preferowany format. Jeśli ścieżka dźwiękowa jest zapisana w plikach:  blues.mp3,  blues.ogg
  
  wówczas do umieszczenia jej na stronie WWW należy użyć kodu przedstawionego na listingu 20.1. Listing 20.1. Element audio umieszczający na stronie WWW ścieżkę muzyczną
  
  
  
  Przeglądarki obsługujące format mp3 użyją pliku blues.mp3, zaś przeglądarki preferujące format OGG — pliku blues.ogg.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  238
  
  Plik mp3 możemy przekonwertować do formatu ogg, korzystając z darmowej aplikacji Audacity, która jest dostępna na stronie: http://audacity.sourceforge.net.
  
  Sumaryczne zestawienie dotyczące obsługi formatów mp3 oraz ogg w najważniejszych przeglądarkach jest zawarte w tabeli 20.1. Ostatnia kolumna tabeli dotyczy rozwiązania, które stosuje oba formaty. Rozwiązanie takie jest przedstawione na listingu 20.6. Tabela 20.1. Obsługa formatów audio mp3 i ogg w najważniejszych przeglądarkach mp3
  
  ogg
  
  mp3/ogg
  
  Firefox
  
  –
  
  +
  
  +
  
  Opera
  
  –
  
  +
  
  +
  
  Chrome
  
  +
  
  +
  
  +
  
  Safari
  
  +
  
  –
  
  +
  
  Internet Explorer
  
  +
  
  –
  
  +
  
  Z tabeli 20.1 wynika wniosek, że rozwiązanie podane na listingu 20.6 działa poprawnie we wszystkich przeglądarkach.
  
  Ćwiczenie 20.1 Wykonaj stronę WWW sprawdzającą poprawność tabeli 20.1. Użyj plików blues.mp3 oraz blues.ogg. Na stronie umieść każdy plik w oddzielnej kontrolce oraz użyj kodu z listingu 20.1, który wykorzystuje oba formaty na raz. Wygląd kontrolki audio w przeglądarce Firefox jest przedstawiony na rysunku 20.1. Rysunek 20.1. Kontrolka audio przeglądarki Firefox
  
  Publikowanie materiałów wideo W językach HTML4 oraz XHTML materiały audiowizualne były publikowane z wykorzystaniem wtyczki Adobe Flash Player oraz elementów embed i object. W języku HTML5 wprowadzono nowy element: audio. Nie rozwiązuje on jednak bardzo istotnych problemów:  kontroli praw autorskich,  buforowania,
  
  Rozdział 20. ♦ Multimedia
  
  239
  
   dystrybucji reklam  oraz dostosowywania zasobów audiowizualnych do możliwości odbiorcy.
  
  Dlatego duża część witryn oferujących materiały audiowizualne stosuje stare rozwiązania (tj. elementy embed oraz object) zamiast nowych, czego dowodzą dane1 zawarte w tabeli 20.2. Tabela 20.2. Metody umieszczania elementów audiowizualnych w kilku popularnych serwisach Witryna
  
  Adres
  
  Elementy HTML
  
  YouTube
  
  http://www.youtube.com
  
  embed
  
  Dailymotion
  
  http://www.dailymotion.com
  
  object
  
  USA Today
  
  http://www.usatoday.com/
  
  object
  
  AFP
  
  http://www.afp.com/
  
  embed
  
  Element video Do umieszczania filmów na stronie WWW służy element video. W najprostszym przypadku jego użycie ma postać przedstawioną na listingu 20.2. Listing 20.2. Podstawowe użycie elementu video
  
  Wspomniane wcześniej problemy dotyczące praw autorskich polegają na tym, że film udostępniony znacznikiem z listingu 20.2 możemy zapisać na dysku przy użyciu menu kontekstowego wyświetlanego po kliknięciu filmu prawym przyciskiem myszki. Menu takie jest widoczne na rysunku 20.2. Menu kontekstowe pozwalające na zapisanie zasobu na dysku jest dostępne także dla kontrolki audio z rysunku 20.1.
  
  Ćwiczenie 20.2 Wykonaj stronę WWW zawierającą teledysk zapisany w pliku blues.webm. Wykorzystaj kod z listingu 20.7. Sprawdź w przeglądarce Chrome, że tak udostępniony plik wideo można pobrać identycznie jak obrazy umieszczane na stronach znacznikiem img. Wygląd strony WWW z listingu 20.7 wraz z menu kontekstowym jest przedstawiony na rysunku 20.2.
  
  1
  
  Wszystkie witryny z tabeli 20.2 stosują język HTML5.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  240 Rysunek 20.2. Element video zawiera menu kontekstowe pozwalające na zapisywanie plików wideo
  
  Problemy z buforowaniem zasobów plików wideo polegają na tym, że film umieszczony na stronie WWW przy użyciu elementu video może być odtworzony wyłącznie wtedy, gdy zostanie pobrany w całości. Takie rozwiązanie będzie powodowało, że po odwiedzeniu strony zawierającej film będziemy czekali dłuższą chwilę na pobranie całego filmu. Nie będzie możliwe przejrzenie początkowych kilku sekund i rezygnacja z pobierania.
  
  Ćwiczenie 20.3 Wykorzystując wymienione w ćwiczeniu 16.3 skrypty spowalniające transfer danych, sprawdź, że odtwarzanie filmu rozpoczyna się dopiero po pobraniu całego pliku. Rozwiązanie ćwiczenia znajdziesz na stronie: http://html5.gajdaw.pl/cwiczenia/20-06/ index.html. Po odwiedzeniu powyższego adresu będziesz musiał poczekać dłuższą chwilę. Dopiero po pobraniu całego pliku wideo teledysk zostanie odtworzony.
  
  Formaty wideo Najpopularniejszymi formatami wideo przeznaczonymi do publikowania filmów w Internecie są: mp4, ogg, i webm2. Tabela 20.3 zawiera informacje na temat obsługi podanych trzech formatów w najważniejszych przeglądarkach.
  
  2
  
  Por. Wikipedia: http://pl.wikipedia.org/wiki/HTML5_video.
  
  Rozdział 20. ♦ Multimedia
  
  241
  
  Tabela 20.3. Najpopularniejsze formaty wideo i ich obsługa w przeglądarkach Przeglądarka
  
  ogg
  
  webm
  
  mp4
  
  ogg/webm/mp4
  
  ogg/mp4
  
  Firefox
  
  +
  
  +/–
  
  –
  
  +
  
  +
  
  Opera
  
  +
  
  +
  
  –
  
  +
  
  +
  
  Chrome
  
  +
  
  +
  
  +
  
  +
  
  +
  
  Safari
  
  –
  
  –
  
  +
  
  +
  
  +
  
  Internet Explorer
  
  –
  
  –
  
  +
  
  +
  
  +
  
  Dane w tabeli 20.3 możesz zweryfikować, wykonując ćwiczenia od 20.4 do 20.8. Do konwersji formatów wideo służy darmowa aplikacja Miro Video Converter, która jest dostępna na stronie: http://www.mirovideoconverter.com.
  
  Ćwiczenie 20.4 Wykonaj stronę prezentującą film w formacie ogg. Wykorzystaj element video. Sprawdź, w których przeglądarkach strona wygląda poprawnie. Kod ćwiczenia 20.4 jest przedstawiony na listingu 20.3. Atrybut controls włącza widoczność kontrolek do przewijania, a atrybut autoplay uruchamia odtwarzanie filmu po załadowaniu strony. Listing 20.3. Kod ćwiczenia 20.4
  
  
  
  Ćwiczenie 20.5 Wykonaj stronę prezentującą film w formacie webm. Wykorzystaj element video. Sprawdź, w których przeglądarkach strona wygląda poprawnie. Kod ćwiczenia 20.5 jest przedstawiony na listingu 20.4. Listing 20.4. Kod ćwiczenia 20.5
  
  
  
  Ćwiczenie 20.6 Wykonaj stronę prezentującą film w formacie mp4. Wykorzystaj element video. Sprawdź, w których przeglądarkach strona wygląda poprawnie. Kod ćwiczenia 20.6 jest przedstawiony na listingu 20.5.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  242 Listing 20.5. Kod ćwiczenia 20.6
  
  
  
  Ćwiczenie 20.7 Wykonaj stronę prezentującą film w trzech formatach: ogg/webm/mp4. Sprawdź, w których przeglądarkach strona wygląda poprawnie. Kod ćwiczenia 20.7 jest przedstawiony na listingu 20.6. Listing 20.6. Kod ćwiczenia 20.7
  
  
  
  Ćwiczenie 20.8 Wykonaj stronę prezentującą film w dwóch formatach: ogg/mp4. Sprawdź, w których przeglądarkach strona wygląda poprawnie. Kod ćwiczenia 20.8 jest przedstawiony na listingu 20.7. Listing 20.7. Kod ćwiczenia 20.8
  
  
  
  Element track Element track pozwala na dodawanie napisów do filmów. Napisy przygotowujemy w pliku tekstowym w formacie VTT, którego specyfikacja jest dostępna na stronie http://dev.w3.org/html5/webvtt/. Pod adresem http://quuz.org/webvtt/ dostępny jest walidator, który ułatwia weryfikację poprawności plików VTT. Przykładowy plik subtitles.vtt jest przedstawiony na listingu 20.8. Listing 20.8. Przykładowy plik subtitles.vtt WEBVTT 00:00:02.000 --> 00:00:05.000
  
  Rozdział 20. ♦ Multimedia
  
  243
  
  Lorem ipsum... 00:00:08.000 --> 00:00:12.000 Dolor sit amet...
  
  Plik VTT rozpoczyna się od wiersza zawierającego tekst WEBVTT. Następnie umieszczamy w pliku oddzielone pustymi wierszami przedziały czasowe i teksty. Zapis: 00:00:02.000 --> 00:00:05.000 Lorem ipsum...
  
  oznacza, że w przedziale czasowym od drugiej do piątej sekundy należy wyświetlić tekst Lorem ipsum. Plik VTT przypisujemy do konkretnego elementu wideo przy użyciu przedstawionego na listingu 20.9 elementu track. Listing 20.9. Element track dodający do filmu blues.mp4 napisy z pliku subtitles.vtt
  
  
  
  Ćwiczenie 20.9 Wykonaj stronę prezentującą film wraz z napisami. Wykorzystaj kod z listingu 20.9. Sprawdź, w których przeglądarkach strona wygląda poprawnie. Rozwiązanie podane na listingu 20.9 jest obecnie obsługiwane wyłącznie przez przeglądarki Chrome oraz Opera. Dodatkowo w przeglądarce Chrome plik HTML musi być pobierany protokołem HTTP. Oznacza to, że nie możesz go otworzyć lokalnie z dysku. Jeśli masz problemy z umieszczeniem kodu ćwiczenia 20.9 na serwerze, działanie kodu możesz sprawdzić, wykorzystując adres: http://html5.gajdaw.pl/ cwiczenia/20-09/.
  
  Osadzanie na stronie WWW filmów z serwisu YouTube Odwiedź serwis internetowy YouTube i wyszukaj w nim frazę w polskę idziemy kabaret dudek. Jednym z wyszukanych filmów będzie niezapomniane wystąpienie Wiesława Gołasa. Film ten możesz obejrzeć pod adresem http://www.youtube.com/ watch?v=AA0kjqAuUwg. W celu umieszczenia tego filmu we własnej witrynie WWW odszukaj przycisk Umieść, który został wskazany strzałką na rysunku 20.3.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  244 Rysunek 20.3. Przycisk Umieść
  
  W oknie dialogowym widocznym poniżej przycisku znajdziesz kod, który należy umieścić w dokumencie HTML. Jest on przedstawiony na listingu 20.10. Listing 20.10. Kod HTML wstawiający na stronę WWW film „W Polskę idziemy”
  
  Kod z listingu 20.10 nie jest poprawny w języku HTML5, gdyż zawiera dwa wycofane atrybuty: frameborder oraz allowfullscreen. Po usunięciu tych atrybutów otrzymasz poprawny kod HTML5, który podlega walidacji. Kod taki jest przedstawiony na listingu 20.11. Listing 20.11. Poprawny kod HTML5 wstawiający na stronę WWW film „W Polskę idziemy”
  
  Ćwiczenie 20.10 Wykonaj stronę WWW, na której będzie umieszczony film W Polskę idziemy. Użyj kodu z listingu 20.11. Sprawdź poprawność kodu HTML oraz wygląd strony we wszystkich przeglądarkach.
  
  Rozdział 20. ♦ Multimedia
  
  245
  
  Rozwiązanie przedstawione na listingu 20.10 działa poprawnie we wszystkich przeglądarkach wymienionych w tabeli 20.3.
  
  Osadzanie na stronie WWW filmów z serwisu Dailymotion Odwiedź serwis internetowy Dailymotion i wyszukaj w nim frazę janis joplin ball and chain. Jednym z wyszukanych filmów będzie teledysk koncertowy Janis Joplin. W celu umieszczenia tego filmu we własnej witrynie WWW odszukaj przycisk, który został wskazany strzałką na rysunku 20.4. Rysunek 20.4. Publikowanie filmów z Dailymotion na własnej stronie WWW
  
  Kod proponowany przez serwis Dailymotion zawiera znaczniki iframe, a, br, oraz i:
  
  
  Janis joplin-Ball and chain live przez superboulette
  
  Część III ♦ Elementy i znaczniki HTML5
  
  246
  
  W powyższym kodzie występuje wycofany atrybut frameborder.
  
  Ćwiczenie 20.11 Wykonaj stronę WWW, na której będzie umieszczony teledysk z rysunku 20.4. Użyj kodu z listingu 20.12. Sprawdź poprawność kodu HTML oraz wygląd strony we wszystkich przeglądarkach. Listing 20.12. Poprawny kod HTML5 wstawiający na stronę teledysk z serwisu Dailymotion
  
  < /iframe>
  
  Rozdział 21.
  
  Pozostałe elementy HTML5 W rozdziale tym poznamy nieomówione do tej pory elementy:  div, span;  ins, del;  object, param;  embed;  iframe;  script, noscript;  canvas;  base;  hr. Elementy link oraz meta są szczegółowo omówione w rozdziałach 45. oraz 46., a wszystkie zagadnienia dotyczące formularzy są zawarte w rozdziale 48. Element style omówiliśmy szczegółowo w rozdziale 9., a ćwiczenie 44.3 demonstruje użycie elementów menu i menuitem.
  
  Elementy ogólne div i span Elementy div i span są elementami ogólnymi, pozbawionymi jakiejkolwiek semantyki. Specyfikacja odradza ich użycie, zalecając stosowanie elementów article, section, aside, nav, header oraz footer. Elementy div oraz span będziemy stosowali wtedy, gdy style CSS będą wymagały wprowadzania dodatkowych elementów w celu uzyskania konkretnych efektów wizualnych.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  248
  
  Element div może zawierać dowolne elementy:
  
  Witaj
  
  Wyliczamy

  Raz
  Dwa
  Trzy

  
  
  Element span może natomiast zawierać dowolne elementy tekstowe, ale nie może zawierać elementów blokowych. Oto przykład użycia:

  Lorem ipsum dolor sit amet. Curabitur non turpis quis felis placerat

  
  
  W powyższym przykładzie pierwszy element span zawiera wyłącznie tekst. Drugi span zawiera elementy em oraz span.
  
  Oznaczanie zmian w dokumencie Elementy ins oraz del służą do oznaczania zmian w dokumencie. Pierwszym z nich oznaczamy treść wstawioną, a drugim — usuniętą. Dzięki temu korektę możemy wykonać w taki sposób, by w dokumencie była zawarta treść zarówno przed, jak i po wprowadzeniu poprawek. Możliwość oznaczania zmian jest istotna wszędzie tam, gdzie wprowadzane modyfikacje muszą być zatwierdzane. Taki tryb pracy obowiązuje m.in. w wydawnictwie Helion. Rękopis przygotowany przez autora jest poddawany korekcie językowej. Zmiany zaproponowane przez korektora są później zatwierdzane przez autora1. Przykładowy tekst przed korektą jest przedstawiony na listingu 21.1. Listing 21.1. Tekst przed korektą Na listingu 1.2 pzedstawiony jest dokument jaki nalerzy wykonać...
  
  W treści dokumentu występują następujące błędy:  W słowie przedstawiony zgubiona została litera r.  Słowo jaki należy zastąpić słowem który. 1
  
  Wydawnictwo Helion wykorzystuje do składu aplikację Microsoft Word. W programie tym oznaczanie zmian w dokumencie wykonujemy przy włączonej opcji Recenzja/Śledź zmiany.
  
  Rozdział 21. ♦ Pozostałe elementy HTML5
  
  249
  
   Przed słowem jaki/który brakuje przecinka.  W słowie należy występuje błąd ortograficzny.
  
  Dokument po korekcie jest przedstawiony na listingu 21.2. Listing 21.2. Tekst po korekcie Na listingu 1.2 przedstawiony jest dokument, który jaki nalerzży wykonać...
  
  Jeśli zaproponowane zmiany zostaną zatwierdzone, otrzymamy dokument widoczny na listingu 21.3. Listing 21.3. Tekst po zatwierdzeniu korekty Na listingu 1.2 przedstawiony jest dokument, który należy wykonać...
  
  Składnia elementów ins oraz del pozwala na umieszczanie w nich zarówno elementów blokowych:
  
  ...
  
  

  ...

  
  
  jak i liniowych: ... ...
  
  Elementy ins oraz del możemy wstawiać w taki sposób, by kod otrzymany po ich usunięciu był poprawny. Nie można więc w elemencie ins, który jest zawarty w elemencie liniowym, umieścić elementu blokowego: PRZYKŁAD BŁĘDNY
  
  ...
  
  
  
  To samo ograniczenie dotyczy elementu del.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  250
  
  Ćwiczenie 21.1 Wykonaj stronę WWW sprawdzającą działanie elementów ins oraz del. Użyj kodu z listingu 21.2.
  
  Elementy object i param Element object służy do osadzania w dokumencie HTML zewnętrznych zasobów. Możesz go użyć do wstawienia:  obrazu,  innego dokumentu HTML,  filmu,  aplikacji napisanej w języku Java.
  
  W celu umieszczenia na stronie WWW obrazu możesz użyć znaczników: PRZYKŁAD NIEZALECANY
  
  Powyższy kod jest poprawnie interpretowany przez wszystkie współczesne przeglądarki. W przypadku plików graficznych JPG, GIF oraz PNG jest to jednak tylko ciekawostka. W celu umieszczenia na stronie WWW obrazu w formatach JPG, GIF i PNG skorzystaj z omówionego wcześniej znacznika lub użyj omówionej w dalszej części właściwości background. Użycie elementu object nie daje żadnych korzyści. We wcześniejszych wersjach przeglądarek element object mógł być wykorzystany do umieszczania na stronie WWW obrazów w formacie SVG. Obecnie rozwiązanie takie straciło zastosowania, gdyż obrazy SVG możemy osadzać na stronie WWW, korzystając ze znacznika img oraz z właściwości background. Druga z wymienionych wyżej metod wykorzystania elementu object, czyli osadzanie zewnętrznych plików HTML, również nie ma praktycznego znaczenia. Osadzanie zewnętrznych plików wewnątrz strony WWW jest realizowane z wykorzystaniem technologii Ajax oraz bibliotek JavaScript. W celu sprawdzenia osadzania dokumentów HTML przygotuj dwa pliki: lorem.html oraz index.html. W pliku lorem.html umieść kod:

  Lorem ipsum
  Dolor sit amet

  
  
  Jeśli w dokumencie index.html umieścisz element:
  
  Rozdział 21. ♦ Pozostałe elementy HTML5
  
  251
  
  to w miejscu jego wystąpienia zostanie umieszczona zawartość odczytana z pliku lorem.html. Element object odgrywa istotną rolę w przypadku osadzania na stronie WWW filmów lub aplikacji Java.
  
  Ćwiczenie 21.2 Wykonaj stronę WWW, na której będzie umieszczony rysunek orzel.svg. Sprawdź możliwości stosowania do tego celu elementu object, elementu img oraz właściwości background. Kod umieszczający obraz orzel.svg na stronie WWW jest przedstawiony na listingu 21.4. Listing 21.4. Umieszczanie pliku SVG przy użyciu elementów object, img oraz właściwości background
  
  
  
  Ćwiczenie 21.3 Wykonaj stronę WWW składającą się z dwóch plików: index.html oraz lorem.html. Zawartość pliku lorem.html osadź w dokumencie index.html. Wykorzystaj do tego element object.
  
  Osadzanie na stronie WWW apletów pisanych w języku Java Elementy object oraz param umożliwiają umieszczanie na stronie WWW apletów pisanych w języku Java. Typowe użycie tych elementów przyjmuje postać:
  
  
  
  
  
  Na stronie http://zirkel.sourceforge.net/doc_en/index.html dostępny jest program C.a.R, który służy do tworzenia dynamicznych konstrukcji geometrycznych. Konstrukcje takie umożliwiają przesuwanie poszczególnych punktów, dzięki czemu możemy wizualnie badać różne właściwości matematycznych obiektów. Program ten jest napisany w języku Java, a wykonane w nim konstrukcje możemy umieszczać na stronie WWW jako interaktywne prezentacje. Po zainstalowaniu programu C.a.R należy narysować konstrukcję, którą chcemy umieścić na stronie WWW. W omawianym przykładzie wykorzystam konstrukcję zapisaną w pliku orthocenter.zir. Jest ona dołączona do programu C.a.R.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  252
  
  Skompilowana wersja programu C.a.R jest zawarta w pliku zirkel.jar. W celu umieszczenia na stronie WWW konstrukcji orthocenter.zir użyj kodu widocznego na listingu 21.5. Listing 21.5. Umieszczanie na stronie WWW konstrukcji orthocenter.zir
  
  C.a.R
  
  
  
  
  
  
  
  Rozwiązanie podane na listingu 21.5 jest poprawnie interpretowane przez wszystkie przeglądarki, pod warunkiem zainstalowania najnowszego oprogramowania Java, które znajdziemy na stronie: http://www.java.com/pl/. Kod z listingu 21.5 przechodzi procedurę walidacji.
  
  Ćwiczenie 21.4 Wykonaj stronę WWW, na której będzie umieszczona konstrukcja geometryczna z pliku orthocenter.zir. Użyj kodu z listingu 21.5. Przekonaj się, że podane rozwiązanie działa poprawnie we wszystkich przeglądarkach. Po uruchomieniu przeglądarki ujrzysz konstrukcję przedstawioną na rysunku 21.1. Przeciągnij wierzchołki trójkąta w inne miejsca.
  
  Element embed Element embed ma identyczne zastosowanie jak element object. Używamy go do osadzania na stronie WWW obiektów, np. animacji Flash:
  
  Powyższy kod możemy równoważnie zapisać, wykorzystując element object:
  
  Rozdział 21. ♦ Pozostałe elementy HTML5
  
  253
  
  Rysunek 21.1. C.a.R — aplet pozwalający na tworzenie dynamicznych konstrukcji geometrycznych
  
  Element object jest elementem pustym i nie umożliwia przekazywania dodatkowych parametrów do osadzonego obiektu w sposób zgodny ze specyfikacją HTML5. Dlatego do osadzania obiektów zalecane są elementy object i param.
  
  Element iframe Element iframe służy do osadzania zewnętrznych dokumentów oraz obiektów w postaci ramek. Użyliśmy go już dwukrotnie, wykonując ćwiczenia 20.10 oraz 20.11. Wykorzystując element iframe, możemy na bieżącej stronie WWW umieścić w postaci okna dowolną witrynę, np. stronę domową wydawnictwa Helion:
  
  Ćwiczenie 21.5 Wykonaj stronę WWW zawierającą element iframe osadzający treść witryny http://helion.pl. W przypadku dokumentów HTML użycie elementu iframe możemy łączyć z atrybutem target, który poznaliśmy w ćwiczeniu 18.10. Atrybut target ma wpływ na to, w jaki sposób będą działały hiperłącza. Poprawne wartości atrybutu target w odniesieniu do pojedynczej strony WWW to _blank oraz _self:
  
  Część III ♦ Elementy i znaczniki HTML5
  
  254 _blank
  
  —
  
  otwiera dokument w nowym oknie
  
  _self
  
  —
  
  otwiera dokument w bieżącym oknie
  
  Jeśli korzystamy z ramek, wartości _parent oraz _top dotyczą wówczas: _parent
  
  —
  
  ramka nadrzędna
  
  _top
  
  —
  
  pierwsza ramka
  
  Ćwiczenie 21.6 Wykonaj stronę sprawdzającą wszystkie wartości atrybutu target w odniesieniu do ramek. W tym celu przygotuj trzy dokumenty HTML: index.html, next-level.html oraz inside.html. Dokumenty te są przedstawione na listingach 21.6, 21.7 oraz 21.8. Działanie hiperłączy zawartych w dokumencie 21.8 wyjaśnia rysunek 21.2. Listing 21.6. Dokument index.html z ćwiczenia 21.6
  
  Ćwiczenie 20.6
  
  
  
  
  
  Listing 21.7. Dokument next-level.html z ćwiczenia 21.6
  
  Next level
  
  Listing 21.8. Dokument inside.html z ćwiczenia 21.6
  • Septem (_top)
  
  
  Rozdział 21. ♦ Pozostałe elementy HTML5
  
  255
  
  Rysunek 21.2. Działanie poszczególnych wartości atrybutu target
  
  Skrypty JavaScript Element script Element script służy do dołączania skryptów pisanych w języku JavaScript. Możemy go użyć na dwa sposoby. Pierwsza metoda polega na umieszczeniu kodu JavaScript pomiędzy znacznikami . Rozwiązanie takie jest przedstawione na listingu 21.9. Listing 21.9. Użycie elementu script do osadzenia kodu JavaScript w dokumencie HTML
  
  
  
  
  
  
  
  Druga metoda polega na zapisaniu kodu JavaScript w zewnętrznym pliku i użyciu atrybutu src. Takie rozwiązanie jest przedstawione na listingach 21.10 oraz 21.11.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  256
  
  Listing 21.10. Dołączanie skryptu JavaScript zapisanego w zewnętrznym pliku
  
  
  
  
  
  
  
  Listing 21.11. Zawartość pliku skrypt.js alert('Witaj');
  
  Kod JavaScript osadzony metodą z listingów 21.10 i 21.11 może zawierać znaki specjalne HTML (np. , &), lecz nie może zawierać tekstu:
  
  Kod z listingu 21.12 jest — pomimo wystąpienia znaku < — poprawny. Kod widoczny na listingu 21.13 jest natomiast błędny. Listing 21.12. Osadzony kod JavaScript może zawierać znaki , &
  
  PRZYKŁAD POPRAWNY
  
  
  
  Listing 21.13. Osadzony kod JavaScript nie może zawierać napisu
  
  PRZYKŁAD BŁĘDNY
  
  ");
  
  Zapisywanie skryptów JavaScript w zewnętrznych plikach jest bardziej praktyczne, gdyż ułatwia wykorzystanie tego samego kodu w wielu witrynach oraz nie jest wrażliwe na błąd przedstawiony na listingu 21.13.
  
  Rozdział 21. ♦ Pozostałe elementy HTML5
  
  257
  
  Ćwiczenie 21.7 Wykonaj witrynę zawierającą kod JavaScript osadzony w dokumencie HTML. Wykorzystaj kod z listingu 21.9. Poprawność kodu sprawdź walidatorem W3C.
  
  Ćwiczenie 21.8 Wykonaj witrynę dołączającą do dokumentu HTML kod JavaScript zapisany w zewnętrznym pliku. Wykorzystaj kod z listingów 21.10 i 21.11. Poprawność kodu sprawdź walidatorem W3C.
  
  Ćwiczenie 21.9 Wykonaj witrynę z listingu 21.12. Poprawność kodu sprawdź walidatorem W3C.
  
  Ćwiczenie 21.10 Wykonaj witrynę z listingu 21.13. Wykorzystując walidator W3C, upewnij się, że wewnątrz elementu script nie wolno użyć tekstu .
  
  Element noscript Element noscript służy do dostarczenia tekstu informującego o braku obsługi języka JavaScript. Komunikat Obsługa JavaScript została wyłączona z listingu 21.14 będzie widoczny w przeglądarkach, które nie obsługują JavaScript. Listing 21.14. Komunikat informujący o wyłączonej obsłudze JavaScript
  
  Obsługa JavaScript została wyłączona.
  
  Ćwiczenie 21.11 Wykonaj witrynę z listingu 21.14. Przed sprawdzeniem wyglądu witryny wyłącz obsługę JavaScript. Jeśli korzystasz z wtyczki Web Developer, do wyłączenia obsługi JavaScript możesz użyć widocznej na rysunku 21.3 opcji Wyłącz JavaScript/Cały JavaScript. Język JavaScript możesz także wyłączyć w opcjach przeglądarki. W programie Firefox opcja ta jest dostępna w oknie dialogowym Narzędzia/Opcje w zakładce Treść jako Wyłącz obsługę języka JavaScript.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  258 Rysunek 21.3. Wyłączanie obsługi JavaScript przy użyciu wtyczki Web Developer
  
  Element canvas Element canvas udostępnia programistyczny interfejs API, który pozwala na generowanie obrazów przez skrypty JavaScript. Zamiast przekazywać z serwera do przeglądarki obraz w formacie graficznym, np. PNG, możemy przekazać kod JavaScript, który taki obraz narysuje. W ten sposób generowanie obrazu (np. wykresu) może odbywać się całkowicie po stronie przeglądarki np. na podstawie danych wprowadzonych w formularzu. Użycie elementu canvas wymaga znajomości języka JavaScript. Przykładowy skrypt rysujący niebieski prostokąt jest przedstawiony na listingu 21.15. Listing 21.15. Użycie elementu canvas do narysowania niebieskiego prostokąta
  
  
  
  Instrukcja: document.getElementsByTagName('canvas')
  
  Rozdział 21. ♦ Pozostałe elementy HTML5
  
  259
  
  zwraca tablicę, która zawiera wszystkie elementy canvas występujące w bieżącym dokumencie. Pierwszy element tej tablicy pobieramy do zmiennej canvas: var canvas = ...[0];
  
  Następnie ustalamy wymiary elementu canvas: canvas.height = 200; canvas.width = 400;
  
  Instrukcja: var context = canvas.getContext("2d");
  
  tworzy obiekt context, który zawiera metody pozwalające na rysowanie. Przykładem takiej metody jest fillRect(): context.fillRect(20, 20, 360, 160);
  
  Metoda fillRect() rysuje wypełniony prostokąt, którego lewy górny narożnik znajduje się w punkcie (20,20). Wymiary prostokątu to 360×160. Będzie on wypełniony kolorem niebieskim. Kolor wypełnienia jest ustalony wywołaniem: context.fillStyle = 'blue';
  
  Dokumentacja wszystkich metod rysujących elementu canvas jest zawarta w specyfikacji: http://www.whatwg.org/specs/web-apps/current-work/ multipage/the-canvas-element.html zaś pod adresem: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html znajdziesz ściągawkę zawierającą zestawienie najważniejszych metod i właściwości elementu canvas.
  
  Ćwiczenie 21.12 Wykonaj witrynę z listingu 21.15.
  
  Bazowy adres URL Element base ustala bazowy adres URL dla wszystkich zasobów zawartych na stronie WWW. Po umieszczeniu w nagłówku strony WWW znacznika:
  
  ...
  
  wszystkie zawarte w dokumencie względne adresy URL będą odnosiły się do podanego folderu. Znaczniki:
  
  Część III ♦ Elementy i znaczniki HTML5
  
  260
  
  
  
  będą wskazywały pliki: /moja/strona/css/style.css /moja/strona/fotka/kot.jpg /moja/strona/spis.html
  
  Element base możemy wykorzystać do skrócenia adresów URL w dokumencie oraz do wskazania zasobów, które fizycznie znajdują się na innym serwerze.
  
  Ćwiczenie 21.13 Wykonaj stronę prezentującą zdjęcia tulipanów dostępne pod następującymi adresami URL: http://html5.gajdaw.pl/cwiczenia/21-13/tulipany-1.jpg http://html5.gajdaw.pl/cwiczenia/21-13/tulipany-2.jpg W treści strony WWW użyj względnych adresów URL:
  
  Rozwiązanie ćwiczenia jest przedstawione na listingu 21.16. Listing 21.16. Rozwiązanie ćwiczenia 21.13
  
  Ćwiczenie 21.13
  
  
  
  
  
  
  
  Rozdział 21. ♦ Pozostałe elementy HTML5
  
  261
  
  Element hr Pusty element hr umieszcza na stronie WWW poziomą linię. Użycie tego elementu jest odradzane na rzecz stylów CSS.
  
  Ćwiczenie 21.14 Wykonaj stronę prezentującą kilka aforyzmów Alberta Camusa. Poszczególne aforyzmy oddziel poziomymi kreskami hr. Zarys rozwiązania ćwiczenia jest przedstawiony na listingu 21.17. Listing 21.17. Rozwiązanie ćwiczenia 21.14 Albert Camus 1913 - 1960 Cytaty

  Buntuję się, więc jestem.

  
  
  

  Być wolnym to móc nie kłamać.

  
  
  

  Być świętym bez Boga - oto jedynie prawdziwy problem, jaki znam.

  
  
  262
  
  Część III ♦ Elementy i znaczniki HTML5
  
  Rozdział 22.
  
  Podsumowanie części trzeciej W tej części poznałeś wszystkie najważniejsze elementy języka HTML5. Zanim przejdziesz do zagadnień dotyczących tworzenia witryn, które są atrakcyjne wizualnie, powinieneś praktycznie zapoznać się z rolą wszystkich opisanych elementów. Oczywiście najlepszą metodą nauki używania poszczególnych znaczników jest samodzielne wykonanie pewnej liczby stron WWW. Pamiętaj, że na tym etapie nauki należy zwracać baczną uwagę na poprawność zagnieżdżania elementów. Do sprawdzania poprawności zagnieżdżeń wykorzystaj serwis http://validator.w3.org.
  
  Projekt 22.1. Obrazy tworzone przy użyciu elementu pre Wykorzystując program XHTML/CSS Image, przygotuj stronę WWW prezentującą wybrane zdjęcie przy użyciu elementu pre oraz znaku @ w odpowiednim kolorze. Obraz wykonany przy użyciu elementu pre wykorzystuje następujące przekształcenie: każdy piksel oryginalnego pliku graficznego zostaje zastąpiony znakiem @ o odpowiednim kolorze. Do oznaczenia kolorów znaków @ stosowany jest element span odpowiedniej klasy. Fragment kodu HTML/CSS tak wykonanej witryny jest widoczny na listingu 22.1. Listing 22.1. Obraz wykonany przy użyciu elementów pre oraz span ... .k535 { color: rgb(255, 255, 255); } .k536 { color: rgb(33, 34, 34); }
  
  Część III ♦ Elementy i znaczniki HTML5
  
  264
  
  .k537 { color: rgb(33, 34, 35); } ...
  
  @@... @@... @@... @@@@@@@@@@... ...
  
  Oczywiście jest to tylko ciekawostka. Rozwiązania tego nie należy stosować.
  
  Projekt 22.2. ASCII Art Wyszukaj w internecie dowolny program do tworzenia obrazów ASCII Art i przy jego użyciu wykonaj stronę WWW. Strona ma prezentować dowolny obraz przekształcony na czarno-biały ASCII Art. Projekt ten prezentuje drugi rodzaj obrazów, jakie można uzyskać elementem pre. Tym razem obraz jest czarno-biały. Wewnątrz elementu pre nie pojawiają się żadne dodatkowe elementy, co ilustruje listing 22.2. Rysunek powstaje poprzez złożenie odpowiednich znaków ASCII. Listing 22.2. Czarno-biały ASCII Art
  
  %#X X#### #####/ ###### .#### #### /##### ##########/ ############ ######### / #####/###X ########## #X #####%##### ### ######## ### ########### ####, ##### #### ####
  
  Projekt 22.2 jest również tylko ciekawostką, która nie ma praktycznych zastosowań.
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  265
  
  Projekt 22.3. Emotikony Przygotuj stronę WWW, która w formie tabeli zaprezentuje zestawienie najbardziej popularnych emotikon. Emotikony są szczególnym rodzajem ASCII Artów. Są to krótkie napisy, konstruowane w taki sposób, by swoim wyglądem przypominały jakiś rysunek. Najbardziej znaną emotikoną jest uśmiech :-). Emotikony stwarzają pod względem dostępności podobne problemy jak ASCII Arty. Jednym z rozwiązań jest użycie elementu abbr: :-)
  
  Analizując kod projektu przedstawiony w zarysie na listingu 22.3, zwróć uwagę na organizację tabeli. Tabela ma dwie kolumny i pięć wierszy. W pierwszym wierszu znajdują się komórki nagłówkowe odnoszące się do kolumn. W pozostałych wierszach znajdują się dane. Dzięki wyodrębnieniu kolumn tabeli elementami col możliwa jest modyfikacja obramowania pierwszej kolumny (selektor CSS #k1). Listing 22.3. Tabela emotikon
  
  
  
  
  
  
  
  

  Emotikona	Opis
  Emotikona	Opis
  :-)	Uśmiech

  
  
  Część III ♦ Elementy i znaczniki HTML5
  
  266
  
  Projekt 22.4. Cytaty ze specyfikacji HTML i XHTML Przygotuj witrynę WWW prezentującą cytaty ze specyfikacji HTML oraz XHTML wymienione w początkowych rozdziałach książki. Witrynę wykonaj w taki sposób, by pod każdym cytatem znajdowało się hiperłącze przenoszące do odpowiedniego miejsca w specyfikacji. Wykorzystaj specyfikacje w formacie HTML zawarte w spakowanych archiwach1 html4.zip oraz xhtml1.zip. Wypakuj obie spakowane specyfikacje i utwórz puste pliki index.html oraz style.css. Jeśli pracujesz w folderze C:\html-xhtml-css-pp\projekt-30-04, powinieneś otrzymać drzewko takie jak na rysunku 22.1. Rysunek 22.1. Struktura folderów projektu 22.4
  
  Pierwsze z odwołań występujących w książce ma postać: Specyfikacja HTML 4.01, punkt 3.2.1. Otwórz za pomocą przeglądarki internetowej plik cover.html specyfikacji języka HTML (plik z folderu html4/ na rysunku 22.1) oraz odszukaj punkt 3.2.1, a w nim akapit rozpoczynający się od słów Elements are not tags. W tworzonym dokumencie index.html umieść element h2 o zawartości Element to nie znacznik. Następnie w kodzie strony wprowadź element blockquote, a w nim wklej cytowane zdanie ze specyfikacji:
  
  

  Elements are not tags...

  
  
  1
  
  Niestety plik html4.zip dostępny na stronie W3C jest przygotowany w taki sposób, że po wypakowaniu na komputerze niepodłączonym do internetu specyfikacja jest brzydko sformatowana (nie są zastosowane style CSS i brakuje dwóch obrazów). Poprawioną specyfikację znajdziesz na serwerze ftp pod adresem: ftp://ftp.helion.pl/przyklady/htcspp.zip. Błędu tego nie zawiera dokumentacja xhtml1.zip.
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  267
  
  Poniżej elementu blockquote podaj źródło cytatu w postaci hiperłącza. Otwórz plik html4/cover.html i ponownie odszukaj punkt 3.2.1. Następnie skopiuj adres bieżącej strony WWW, wykorzystując do tego pole Adres dostępne na pasku narzędzi przeglądarki. Pole to jest zaznaczone na rysunku 22.2.
  
  Rysunek 22.2. Kopiowanie adresu URL bieżącej strony WWW
  
  Pełny adres będzie miał postać: file:///C:/html-xhtml-css-pp/projekt-30-04/html4/intro/sgmltut.html#h-3.2.1
  
  Z adresu tego pozostaw wyłącznie: html4/intro/sgmltut.html#h-3.2.1
  
  Powyższy adres podaj jako wartość atrybutu href elementu a. Dodatkowo ten sam adres URL podaj jako wartość atrybutu cite elementu blockquote:
  
  

  Elements are not tags...

  
  
  Zwróć uwagę na atrybut lang elementu blockquote. Cytat jest w języku angielskim, co zaznaczamy atrybutem lang="en". Fragmenty kodu oznacz — tak jak to uczyniono w specyfikacji XHTML — elementami code: tt
  
  Część III ♦ Elementy i znaczniki HTML5
  
  268
  
  Listing 22.4 przedstawia w zarysie pierwszy z cytatów. W podobny sposób wykonaj pozostałe cytaty. Listing 22.4. Cytaty ze specyfikacji HTML i XHTML 1. Element to nie znacznik

  Pojęcia element HTML oraz znacznik HTML nie są identyczne.

  
  
  

  Elements are not tags...

  
  
  

  Źródło: Specyfikacja HTML 4.01, punkt 3.2.1.

  
  
  Projekt 22.5. Książka pt. The Wonderful Wizard of Oz Przygotuj witrynę WWW z treścią książki pt. The Wonderful Wizard of Oz. Spis treści wykonaj w taki sposób, by każdy tytuł rozdziału był odnośnikiem do odpowiedniego miejsca w tekście utworu. Strukturę dokumentu ustalamy elementami article, header, footer, aside, nav oraz nagłówkami. Zarys kodu HTML jest przedstawiony na listingu 22.5. Listing 22.5. Spis treści książki pt. „The Wonderful Wizard of Oz”
  
  The Wonderful Wizard of Oz by L. Frank Baum
  
  Introduction

  ...

  ...

  
  
  L. Frank Baum
  Chicago, April, 1900
  
  Contents
  
  
  • The Cyclone
  ...
  
  1. The Cyclone
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  269
  
  

  ...

  ...

  ... 2. The Council with the Munchkins

  ...

  ...

  ...
  
  Witryna jest w całości wykonana w języku angielskim. Informuje o tym element html:
  
  Jeśli uznasz, że poszczególne rozdziały mogą być dystrybuowane niezależnie (np. na osobnych podstronach), kod rozdziałów umieść wówczas w zagnieżdżonych elementach article:
  
  1. The Cyclone

  ...

  ...

  ...
  
  2. The Council with the Munchkins

  ...

  ...

  
  
  ...
  
  Projekt 22.6. Instrukcja przygotowywania zrzutów ekranu Przygotuj witrynę WWW, która będzie zawierała instrukcję informującą o tym, w jaki sposób można przygotowywać zrzuty ekranu. W treści witryny umieść kilka ilustracji. Instrukcja rozpoczyna się od elementu h1, po którym następuje seria akapitów. Każdy akapit jest zakończony elementem figure zawierającym img. Zwróć uwagę, że kod pozbawiony elementów figure: PRZYKŁAD NIEPOPRAWNY

  Do wykonywania zrzutów ekranu...

  
  
  Część III ♦ Elementy i znaczniki HTML5
  
  270
  
  jest błędny. Element img, jako liniowy, musi być zawarty wewnątrz elementu blokowego; nie może być zawarty bezpośrednio w elemencie body. W stylach CSS ustalamy tło, obramowanie i marginesy elementu figure. W treści akapitów nazwy przycisków na klawiaturze oraz skróty klawiszowe oznaczone są elementem kbd. Użycie elementów kbd ilustruje listing 22.6. Listing 22.6. Instrukcja wykonywania zrzutów ekranu
  
  Zrzuty ekranu

  Do wykonywania zrzutów ekranu służy przycisk PrintScreen, oznaczany również jako PrintScrn. ...

  
  
  ...
  
  Ilustracje pojawiające się w projekcie 22.6 są związane z treścią strony. Dlatego umieszczamy je w dokumencie przy użyciu elementu img.
  
  Projekt 22.7. Jak pisać na klawiaturze w języku rosyjskim? Przygotuj stronę WWW informującą o tym, w jaki sposób w systemie Windows XP można pisać na klawiaturze w języku rosyjskim2. Przy użyciu elementów h1 oraz h2 oznacz tytuł dokumentu oraz podział elementu article na punkty. Następnie wprowadź akapity tekstu oraz ilustracje. Jak widać na listingu 22.7, tym razem ilustracje, oprócz tego, że są wyeksponowane, mają także podpisy. Atrybut alt przyjmuje identyczną wartość jak podpis ilustracji, lecz jest pozbawiony znaczników HTML. Listing 22.7. Eksponowana ilustracja z podpisem
  
  2
  
  Przeczytaj uważnie ten projekt. Dowiesz się z niego, w jaki sposób na stronach o kodowaniu utf-8 możesz wprowadzać teksty ze znakami diakrytycznymi z dowolnego języka.
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  271
  
  Rysunek 1. Okno dialogowe...
  
  Dzięki zastosowaniu kodowania utf-8 dokument może zawierać przykładowe teksty pisane cyrylicą. Zwróć uwagę na elementy pre:
  
  qwertyuiop asdfghjkl zxcvbnm
  
  Pierwszy znak złamania wiersza występujący po znaczniku otwierającym jest ignorowany przez przeglądarki i nie ma wpływu na sposób prezentacji elementu. Powyższy kod będzie prezentowany identycznie jak kod: qwertyuiop asdfghjkl zxcvbnm
  
  Projekt 22.8. Metody definiowania miejsc geometrycznych punktów Sformatuj artykuł pt. Metody definiowania miejsc geometrycznych punktów3 w postaci strony WWW. Ilustracje występujące w artykule wykonaj w taki sposób, by w treści pojawiały się małe obrazy o szerokości 400 pikseli. Każdy taki obraz ma być hiperłączem do dużego obrazu o szerokości 800 pikseli. O wymiarach rysunków wykorzystanych w projekcie informują nazwy plików. Plik 1_400.jpg przedstawia pierwszą ilustrację. Ma ona szerokość 400 pikseli. Plik 1_800.jpg przedstawia natomiast ten sam rysunek, lecz o szerokości 800 pikseli. Autora i tytuł oznaczamy elementami h1 oraz h2. Podział na punkty i zadania realizujemy elementami h3 oraz h4. Treść artykułu dzielimy na nagłówek (tytuł i autor), stopkę (bibliografia) oraz tekst (akapity zawarte pomiędzy elementami header oraz footer):
  
  tytuł... autor...

  wprowadzenie...

  
  
  punkt

  ...

  
  
  3
  
  Artykuł ten został wygłoszony przeze mnie w formie referatu podczas XVI konferencji Informatyka w szkole w 1998 roku.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  272

  ...

  ...

  punkt

  ...

  ...

  ...

  
  
  Bibliografia
  
  
  • ...
  • ...
  
  
  
  
  Tekst jest zawarty w elementach p. Zmienne matematyczne oznaczamy elementami var: Niech dane będą dwa dowolne punkty A i C oraz dowolna prosta p, na której leży punkt B.
  
  Pierwsza z ilustracji jest przedstawiona na listingu 22.8. Jak widać, jest to eksponowany za pomocą figure element img, który jest zawarty pomiędzy znacznikami oraz . Atrybut href wskazuje plik graficzny o większych wymiarach, np. 1_800.jpg. Listing 22.8. Obraz będący odnośnikiem
  
  
  
  Bibliografię wykonujemy przy użyciu listy ol oraz elementu cite:
  
  
  • Bachwałow S.W., Modenow P.S., Parchomienko A.S.: Zbiór zadań z geometrii analitycznej, PWN, Warszawa, 1961, s. 54.
  • Pabich, B.: Odkrywanie geometrii przy użyciu CABRI, Vulcan, Wrocław, 1994.
  ...
  
  Warto zatrzymać się na chwilę przy stylach dokumentu. Wykorzystano w nim bowiem selektory body oraz html w sposób dość nietypowy:
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  273
  
  html { background: rgb(240, 240, 240); } body { margin: 80px; padding: 80px; border: 1px solid black; background: white; }
  
  Element html ma szare tło. Tło elementu body jest białe. Ponieważ body jest zawarte w html i ma margines, dopełnienie oraz obramowanie, otrzymamy efekt ramki, wewnątrz której jest umieszczony tekst artykułu.
  
  Projekt 22.9. Artykuł pt. HTML czy XHTML? Wykonaj witrynę WWW z tekstem artykułu4 pt. HTML czy XHTML? Przygotuj spis treści składający się z odsyłaczy wewnętrznych. Ilustracje, wstawki kodu i tabele wykonaj tak, by były wyeksponowane i podpisane. Fragmenty kodu, nazwy plików, nazwy programów oraz opcji oznacz elementami span odpowiedniej klasy. W projekcie tym stosujemy spis treści opisany w projekcie 22.5 oraz ilustracje eksponowane w postaci hiperłączy. Pracę rozpoczynamy od ustalenia struktury dokumentu. Wykorzystujemy do tego elementy h1 i h2 (autor i tytuł) oraz h3 i h4 (punkty i podpunkty artykułu). Na potrzeby spisu treści elementy h3 oraz h4 należy wzbogacić o identyfikatory: ... 3.2 Elementy puste i niepuste
  
  Nagłówki h3 oraz h4 zawierają numerację. Spis treści artykułu, przedstawiony w zarysie na listingu 22.9, wykonujemy, stosując elementy section, h1, ol, li oraz a. Jest to dwupoziomowa lista ol — zwróć uwagę na poprawność zagnieżdżania. Pozycje spisu treści, podobnie jak elementy h3 i h4, zawierają ręcznie wpisaną numerację: 3.1, 3.2 itd.
  
  4
  
  Artykuł pt. HTML czy XHTML został opublikowany w formie trzyodcinkowego cyklu w „Magazynie INTERNET” w numerach 6/2006, 7/2006 oraz 8/2006.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  274 Listing 22.9. Spis treści artykułu pt. HTML czy XHTML?
  
  Spis treści
  
  
  • 1. Język HTML
  • 2. Język XHTML
  • 3. XHTML zgodny z HTML
    
    
  • 3.1. Wielkość liter
  • 3.2. Elementy puste i niepuste
  • 3.3. Znaczniki opcjonalne
  ...
  
  ...
  
  Kody eksponowane są zwykłymi elementami pre:
  
  HTML 4.01 strict — poprawny XHTML 1.0 strict — niepoprawny white black
  
  Całe eksponowanie kodu jest zrealizowane w CSS. Eksponowane ilustracje i listingi wykonujemy natomiast podobnie jak ilustracje w projekcie 22.7. Cały komponent (tj. ilustrację, tabelę lub listing) oznaczamy elementem figure, wewnątrz którego znajduje się miniaturowy obraz img będący hiperłączem do obrazu powiększonego. Poniżej elementu a jest umieszczony podpis zawarty w elemencie figcaption. Kod HTML eksponowanego obrazu jest widoczny na listingu 22.10. Wartością atrybutu alt jest podpis ilustracji pozbawiony ewentualnego kodu HTML. Listing 22.10. Eksponowany obraz z podpisem
  
  
  
  Rysunek 1. Szczegóły zapytania HTTP wyświetlane w Firefoksie opcją Narzędzia → Informacje o stronie (zakładka Headers)
  
  W treści artykułu pojawiają się fragmenty kodu oraz nazwy plików, opcji i programów komputerowych. Fragmenty te oznaczono elementami span odpowiedniej klasy: Narzędzia → Informacje o stronie
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  275
  
  Ostatnim etapem pracy nad artykułem jest przygotowanie tabel. Pamiętaj o atrybutach scope komórek nagłówkowych th5. Zwiększy to dostępność treści artykułu. Tabele są podpisane przy użyciu elementu caption:
  
  Tabela 5. Dokumenty w internecie
  
  ...
  
  W pierwszej kolumnie i w pierwszym wierszu każdej tabeli znajdują się komórki nagłówkowe. Komórki z pierwszego wiersza mają jednak inny format niż komórki z pierwszej kolumny. Rozróżnienie takie najłatwiej wprowadzić na bazie atrybutu scope. Selektor: th[scope=col] { ... }
  
  dotyczy tylko tych komórek th, które mają zdefiniowany atrybut scope o wartości col (czyli wyłącznie komórek pierwszego wiersza, nie obejmując komórek pierwszej kolumny). Podobnie selektor: th[scope=row] { ... }
  
  dotyczy komórek o wartości atrybutu scope równej row (czyli komórek pierwszej kolumny, nie obejmując komórek pierwszego wiersza). W ten sposób bez żadnych zmian w kodzie HTML możesz nadać różny format komórkom nagłówkowym th pierwszego wiersza i pierwszej kolumny. Wprawdzie projekt ten jest wykonany w postaci pojedynczej strony WWW, jednak style CSS warto zapisać w zewnętrznym pliku. Dlaczego? Dzięki takiemu rozwiązaniu gotowe style CSS można wykorzystać w kolejnym artykule. Jeśli zajrzysz do pliku .html, to znajdziesz w nim dwa elementy link dołączające style:
  
  Style spisu treści są zawarte w dokumencie toc.css (ang. toc — table of contents, spis treści). Style pozostałych elementów są zawarte w pliku style.css. W przypadku dokumentu o takim stopniu skomplikowania selektory potomków są niezastąpione. Dzięki nim odsyłacze zawarte w spisie treści nie muszą mieć klas, by otrzymać unikalny format: aside.toc a { color: rgb(0,0,0); background: rgb(255,255,255); border: 1px solid white; text-decoration: none; padding: 3px; 5
  
  Wszystkie tabele w artykule są regularne: zawierają tyle samo komórek w każdym wierszu. Dzięki temu komórki danych możesz powiązać z komórkami nagłówkowymi atrybutem scope. Nie musisz stosować atrybutu headers.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  276 } aside.toc a:hover { color: rgb(0,0,0); background: rgb(210,239,242); border: 1px dashed black; }
  
  Reguła o selektorze aside.toc a:hover powoduje, że wskazanie opcji spisu treści kursorem myszki zmieni obramowanie wybranej pozycji. Uważaj na stosowanie obramowania w selektorach typu hover. Obramowanie zmienia wymiar pudełka. Możesz otrzymać efekt migania: po wskazaniu kursorem myszy opcje przesuwają się. Unikniesz tego, jeśli będziesz modyfikować tylko kolor obramowania. W stanie nieaktywnym obramowanie jest białe, zaś w stanie aktywnym — czarne. W tabelach 4., 5., 6. oraz 7. zawartych w artykule pojawiają się hiperłącza. Część z nich to odwołania do plików lokalnych (przykłady, specyfikacje), a część — odsyłacze w świat. Jeśli komórka tabeli zawiera tytuł w języku angielskim, należy wówczas użyć atrybutu lang o wartości en. Ponadto w treści artykułu pojawiają się skróty: WWW, HTTP, HTML, XHTML, XML, PHP, SGML, MSIE, IE, FF, RFC, CDATA, CSS, które oznaczamy elementami abbr, np.: XHTML CDATA
  
  Projekt 22.10. Literackie Nagrody Nobla Przygotuj w formie strony WWW tabelę prezentującą laureatów Literackiej Nagrody Nobla w latach 1951 – 1973. Co piąty wiersz tabeli wyróżnij innym kolorem. Przygotuj tabelę o dwóch kolumnach. W pierwszym wierszu umieść komórki nagłówkowe odnoszące się do kolumn (scope="col"). Komórki pierwszej kolumny będą się natomiast odnosiły do wierszy (scope="row"). Zarys tabeli jest przedstawiony na listingu 22.11. Listing 22.11. Dwukolumnowa tabela laureatów Nagrody Nobla
  
  
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  277
  
  ...
  
  

  Laureat
  1951	P. Lagerkvist (Sz)
  1952	F. Mauriac (F)

  
  
  W co piątym wierszu dodaj oznaczenie klasy zaznacz, np.: 1955 H. Laxness (Isl)
  
  Na zakończenie stylami: .zaznacz { background: rgb(230, 230, 230); }
  
  zmień kolor tła wyróżnionych wierszy.
  
  Projekt 22.11. Tabela ekstraklasy w sezonie 2006/2007 Przygotuj witrynę WWW prezentującą tabelę ekstraklasy na zakończenie sezonu 2006/2007. Zadanie wykonaj w taki sposób, by tabelę można było sortować rosnąco oraz malejąco według liczby zdobytych punktów. Projekt ten składa się z dwóch stron WWW: ekstraklasa-m.html oraz ekstraklasa-r.html. Pierwsza z nich, ekstraklasa-m.html, zawiera tabelę ekstraklasy posortowaną malejąco. Druga natomiast, ekstraklasa-r.html, prezentuje tabelę posortowaną rosnąco. Najpierw przygotuj plik ekstraklasa-m.html. Wykonaj tabelę przedstawioną w zarysie na listingu 22.12. Listing 22.12. Tabela ekstraklasy
  
  
  
  
  
  Część III ♦ Elementy i znaczniki HTML5
  
  278
  
  
  
  
  
  ...
  
  

  lp.	Klub	Punkty
  lp.	Klub	Punkty
  1.	Zagłębie Lubin	62
  2.	GKS Bełchatów	61

  
  
  Zwróć uwagę na elementy col z identyfikatorami #k1 i #k2 oraz na pierwszy wiersz6 z identyfikatorem #w1. Dzięki identyfikatorom #k1, #k2 oraz #w1 możesz w prosty sposób zmienić obramowanie tabeli: #k1 { border-right: solid 1px black; } #k2 { border-right: solid 1px black; } #w1 { border-bottom: double 4px black; }
  
  Gotowy plik ekstraklasa-m.html skopiuj, a duplikat nazwij ekstraklasa-r.html. W pliku ekstraklasa-r.html zmień porządek wierszy tak, by były one posortowane rosnąco względem ostatniej kolumny (tj. liczby zdobytych punktów). Na zakończenie zmień komórkę Punkty (ostatnia komórka w pierwszym wierszu). W pliku ekstraklasa-m.html komórka ta jest hiperłączem do pliku ekstraklasa-r.html: Punkty
  
  W pliku ekstraklasa-r.html komórka ta jest natomiast hiperłączem do pliku ekstraklasa-m.html: Punkty
  
  6
  
  Do tej pory we wszystkich projektach zawartość elementów thead oraz tfoot była identyczna. Tym razem tak nie jest: identyfikator #w1 może wystąpić w kodzie HTML jeden raz. Element tfoot różni się tym, że nie zawiera identyfikatora w elemencie tr.
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  279
  
  Projekt 22.12. Kod paskowy rezystorów Przygotuj stronę WWW z kodem paskowym rezystorów. Na stronie, oprócz tabel wyjaśniających rolę poszczególnych pasków, umieść cztery przykładowe rysunki przedstawiające oporniki oznaczone kodem barwnym. Ponadto umieść na stronie hiperłącze umożliwiające pobranie programu Kod Paskowy Rezystorów. Pierwsza z tabel na stronie ma prezentować znaczenie kolorowych pasków. W komórkach nagłówkowych wprowadź nazwę koloru, jak to ilustruje listing 22.13. Listing 22.13. Trzy pierwsze wiersze tabeli z kodem paskowym czarny - 0 100 brązowy 1 1 101 czerwony 2 2 102
  
  Następnie w stylach komórki te sformatuj, podając identyczny kod tła i koloru czcionki: .czarny { background: rgb(0,0,0); color: rgb(0,0,0); } .brazowy { background: rgb(131,8,8); color: rgb(131,8,8); } .czerwony { background: rgb(212,16,18); color: rgb(212,16,18); }
  
  Dzięki temu przeglądarka graficzna wyświetli tylko barwne prostokąty (bez napisów). Jeśli natomiast wyłączysz style, to ujrzysz w tabeli nazwy kolorów. Symbol omega wykonany jest encją Ω.
  
  Część III ♦ Elementy i znaczniki HTML5
  
  280
  
  Projekt 22.13. LaTeX — przykłady Przygotuj stronę WWW zawierającą zestawienie przykładów do nauki systemu LaTeX. Każdy z przykładów umieść w osobnym wierszu tabeli HTML. Pliki w poszczególnych formatach (tj. .pdf, .tex, .zip) oznacz odpowiednimi ikonami. Projekt ma udostępniać do pobrania dziewięć plików:  artykuł7 pt. PDF-y w internecie, czyli HTML kontra LaTeX w formatach .pdf,
  
  .tex oraz .zip (kompletne archiwum zawierające wszystkie pliki potrzebne do przekompilowania dokumentu .tex);  artykuł8 pt. Elementy div i style CSS w praktyce w formatach .pdf, .tex oraz .zip;  artykuł9 pt. Formatowanie kodu PHP w formatach .pdf, .tex oraz .zip.
  
  Każdy z formatów: .pdf, .tex oraz .zip mamy oznaczyć jedną z ikon: pdf.png tex.png zip.png
  
  Łącznie projekt składa się więc z trzynastu plików:  pliku index.html (style wewnętrzne),  trzech ikon .png,  dziewięciu przykładów: trzech .pdf, trzech .tex oraz trzech .zip.
  
  Pierwszy wiersz tabeli jest przedstawiony na listingu 22.14. Ikony są obrazami ozdobnymi, dlatego atrybut alt pozostawiamy pusty. Informację o treści pliku wskazanego atrybutem href podajemy w atrybucie title. Listing 22.14. Pierwszy wiersz tabeli z przykładami LaTeX-a 1. Artykuł pt. „PDF-y...”
  
  
  
  
  
  7
  
  Artykuł ten został opublikowany na CD czasopisma „Internet Maker” nr 2/2006.
  
  8
  
  Artykuł ten został opublikowany w „Magazynie INTERNET” nr 11/2005.
  
  9
  
  Artykuł ten został opublikowany na łamach „Internet Makera” nr 1/2006.
  
  Rozdział 22. ♦ Podsumowanie części trzeciej
  
  281
  
  
  
  
  
  Projekt 22.14. Janko Muzykant Przygotuj elektroniczne wydanie noweli Henryka Sienkiewicza pt. Janko Muzykant. Opracowując tekst, przygotuj przypisy wyjaśniające znaczenie zwrotów francuskich oraz wyrazów, które wyszły z użycia. Zacznij od opracowania treści w postaci akapitów. Oznacz autora i tytuł utworu (elementy h1 i h2), podziel tekst na akapity (element p), po czym zamień cudzysłowy i myślniki na encje „ i ” oraz —. Odszukaj w tekście frazy, które należy umieścić w przypisach. Jest to na przykład wyraz strzygą w zdaniu:

  — Ba — powiada druga — a chłopaka to zara trza ochrzcić; on i dobrodzieja nie doczeka, a — powiada — błogo będzie, co choć i strzygą się nie ostanie. Tak mówiąc zapaliła gromnicę, a potem wziąwszy dziecko pokropiła je wodą, aż poczęło oczki mrużyć, i rzekła jeszcze:

  
  
  Wyraz strzygą zastąp hiperłączem wewnętrznym: strzygą
  
  Na końcu utworu umieść listę definicji dl. Każda pozycja listy ma wyjaśniać znaczenie jednego zwrotu. Zwróć uwagę na identyfikatory elementów dt na listingu 22.15. Wartości atrybutu id są wykorzystane w hiperłączach wewnętrznych postaci: ...
  
  Listing 22.15. Przypisy dolne wykonane w postaci listy dl
  
  strzyga według dawnych zabobonów strzygą nazywano rodzaj upiora. kania gwarowe określenie ronda kapelusza. ...
  
  On est heureux de chercher, la — bas des talents et de les proteger (fr.)
  
  Szczęściem jest wyszukiwać tam talenty i popierać je.
  
  282
  
  Część III ♦ Elementy i znaczniki HTML5
  
  Część IV
  
  Czcionki na stronach WWW
  
  284
  
  HTML5 i CSS3. Praktyczne projekty
  
  Rozdział 23.
  
  Rodzaje czcionek Dwie główne charakterystyki czcionek w kontekście webmasteringu dotyczą:  obecności lub braku szeryfów,  przestrzeni przeznaczonej na każdy znak.
  
  Czcionki szeryfowe i bezszeryfowe Szeryfy są ornamentami, które zdobią końce linii tworzących litery. Rysunek 23.1 przedstawia szeryfy litery H w kroju Times New Roman. Rysunek 23.1. Szeryfy litery H w kroju Times New Roman
  
  Kroje pisma, w których litery mają szeryfy, nazywamy szeryfowymi. Do krojów tych należą między innymi: Garamond, Georgia, Palatino oraz Times New Roman. Jeśli litery nie mają szeryfów, to krój nazywamy bezszeryfowym. Popularnymi krojami bezszeryfowymi są: Arial, Helvetica, Tahoma, Trebuchet MS oraz Verdana. Rysunek 23.2 przedstawia literę H w kroju Arial.
  
  Część IV ♦ Czcionki na stronach WWW
  
  286 Rysunek 23.2. Brak szeryfów w kroju Arial
  
  Czcionki szeryfowe są zazwyczaj stosowane w publikacjach drukowanych, zaś bezszeryfowe — w publikacjach elektronicznych. Jednym z powodów jest fakt, że rozdzielczość monitorów jest znacznie niższa od rozdzielczości, jaką operują drukarki. Szeryfy narysowane na urządzeniach o rozdzielczości 96 dpi (rozdzielczość współczesnych monitorów) są — przynajmniej w przypadku niewielkich liter — postrzępione i nieładne. Wyjątek stanowią kroje takie jak Georgia, które zostały przygotowane specjalnie z myślą o stosowaniu w publikacjach elektronicznych. Kształt liter i szeryfów zoptymalizowano tak, by otrzymać ładne i czytelne szeryfy w niskich rozdzielczościach. Od każdej reguły są wyjątki. Verdana, jeden z najczęściej używanych krojów bezszeryfowych, ma szeryfy w dużej literze I. W ten sposób rozwiązano problem nękający krój Arial: identyczność liter duże „i” (tj. I jak Ilona) oraz małe „l” (tj. l jak lis)1. Ilustruje to rysunek 23.3. Rysunek 23.3. Litery duże „i” oraz małe „l” w krojach Arial i Verdana
  
  Czcionki proporcjonalne i nieproporcjonalne Druga cecha, ilość miejsca przeznaczonego na jeden znak, wyznacza podział na czcionki proporcjonalne i nieproporcjonalne. Czcionki nieproporcjonalne, nazywane również czcionkami o stałej szerokości (ang. monospaced fonts), charakteryzują się tym, że każdy znak zajmuje dokładnie tyle samo miejsca. Przykładem takiego kroju jest Courier New. 1
  
  Źródło: Wikipedia.
  
  Rozdział 23. ♦ Rodzaje czcionek
  
  287
  
  W czcionkach proporcjonalnych ilość miejsca przeznaczonego na każdą literę zależy od jej szerokości. Zazwyczaj litera m zajmuje znacznie więcej miejsca niż litera i, gdyż jest od niej szersza. Przeważająca część czcionek jest proporcjonalna. Czcionkami proporcjonalnymi są między innymi czcionki szeryfowe: Garamond, Georgia i Times New Roman oraz bezszeryfowe: Arial, Helvetica, Tahoma, Trebuchet MS czy Verdana. Rysunek 23.4 przedstawia napisy wykonane w kroju nieproporcjonalnym Courier New oraz w krojach proporcjonalnych (Arial, Times New Roman). Jedynie w pierwszym przykładzie każda z liter zajmuje dokładnie jeden prostokąt. W pozostałych jedne litery nie mieszczą się (np. M), zaś inne zajmują mniej niż pół prostokąta (np. I). Rysunek 23.4. Różnica pomiędzy czcionkami nieproporcjonalnymi i proporcjonalnymi
  
  Czcionki stałej szerokości stosuje się głównie do przedstawiania kodów programów komputerowych.
  
  Inne podziały czcionek Podziały czcionek na szeryfowe i bezszeryfowe oraz proporcjonalne i nieproporcjonalne są jasno zdefiniowane i powszechnie stosowane. Oprócz nich pojawiają się kategorie:  krój odręczny (ang. cursive),  krój fantazyjny (ang. fantasy),  ornamenty i czcionki specjalne (ang. dingbat).
  
  Czcionki rodziny cursive imitują odręczne pismo. Często są to kroje pochylone, w których poszczególne litery są łączone na wzór pisma odręcznego. Przykładami tego rodzaju kroju są Comic Sans MS oraz Zapf-Chancery. Kroje fantazyjne stosują rozmaite metody dekorowania liter. Przykładami takich krojów są Alpha Geometrique, Critter oraz Western. Ornamenty (ang. dingbat) oraz czcionki specjalne nie są zwykłymi literami. Są to zestawy specjalnych znaków i symboli. Przykładami czcionek z tej rodziny są Webdings, Seville, Petrucci oraz Chess Kingdom. Rysunek 23.5 prezentuje alfabet napisany w kroju Webdings, rysunek 23.6 ilustruje litery kroju Seville, symbole muzyczne z rysunku 23.7 są napisane krojem Petrucci, zaś figury szachowe z rysunku 23.8 — krojem Chess Kingdom.
  
  288 Rysunek 23.5. Czcionka Webdings
  
  Rysunek 23.6. Czcionka Seville
  
  Część IV ♦ Czcionki na stronach WWW
  
  Rozdział 23. ♦ Rodzaje czcionek
  
  289
  
  Rysunek 23.7. Czcionka Petrucci
  
  Rysunek 23.8. Czcionka Chess Kingdom
  
  W kontekście webmasteringu istotny jest podział czcionek na szeryfowe i bezszeryfowe, nieproporcjonalne i proporcjonalne oraz odręczne i fantazyjne. Odwiedzając hasła serif, sans-serif oraz list of typefaces w Wikipedii, poznasz wiele innych podziałów krojów czcionek.
  
  Testowanie czcionek Do badania wyglądu czcionek stosowane są pangramy. Najpopularniejszymi polskimi pangramami są: Zażółć żółcią gęślą jaźń. Zażółć gęślą jaźń. Mężny bądź, chroń pułk twój i sześć flag.
  
  Część IV ♦ Czcionki na stronach WWW
  
  290
  
  Jeśli chodzi o testowanie większej ilości tekstu, to do tego celu wykorzystywany jest tekst Lorem ipsum. Pod adresem http://typetester.maratz.com znajdziesz serwis Typetester. Umożliwia on testowanie wyglądu tekstu pisanego różnymi czcionkami i w różnych kolorach.
  
  Litery jako obrazy Litery krojów przedstawionych na rysunkach 23.5, 23.6, 23.7 oraz 23.8 są symbolami graficznymi. Możemy więc je wykorzystać do umieszczania na stronie WWW obrazów. Obrazy tego typu są zawsze jednobarwne. Mają one jednak obecnie przewagę nad wszystkimi innymi metodami umieszczania obrazów na stronach WWW: są skalowane jako obrazy wektorowe. Przeskalowana ikona wykonana jako litera w kroju Webdings będzie zawsze dokładna, bez pikselizacji, która jest widoczna w przypadku ikon wykonanych jako obrazy PNG, GIF czy JPEG. Ponadto wyłączenie pobierania obrazów nie wpływa na widoczność tak wykonanych obrazów. Kod przedstawiony na listingu 23.1 umieszcza na stronie WWW dużą niebieską ikonę przedstawiającą telefon. Listing 23.1. Obrazy na stronach WWW wykonane jako litery kroju Wingdings .ikonka { font-size: 128px; color: #abe8fa; } ☎ ⌛
  
  Kody znaków kroju Wingdings znajdziesz na stronie http://www.alanwood.net/ demos/wingdings.html.
  
  Rozwiązanie widoczne na listingu 23.1 możemy udoskonalić, stosując poznane w rozdziale 14. pseudoklasy :before oraz :after pozwalające na wstawianie treści w drzewie DOM dokumentu. Kod widoczny na listingu 23.2 prezentuje technikę umieszczania jednobarwnych ikon, która nie wymaga wstawiania w kodzie HTML zbędnych znaków. Zwróć uwagę, że podany kod CSS należy zapisać, stosując kodowanie UTF-8. W podobny sposób możesz użyć innych symboli występujących w tabelach unikodu. Listing 23.2. Ikony wykonane jako litery kroju Wingdings z wykorzystaniem pseudoklasy :before .ikonka { font-size: 128px; color: #abe8fa; } .telefon:before { content: " "; }
  
  Rozdział 23. ♦ Rodzaje czcionek
  
  291
  
  Kod z listingu 23.2 demonstruje użycie kilku różnych klas CSS w odniesieniu do jednego elementu.
  
  Ćwiczenie 23.1 Wykonaj stronę WWW prezentującą jasnoniebieskie ikony klepsydry oraz telefonu. Wykorzystaj kod z listingu 23.1. Otrzymaną stronę przetestuj, skalując tekst oraz wyłączając widoczność obrazów.
  
  Ćwiczenie 23.2 Wykonaj stronę WWW prezentującą jasnoniebieskie ikony klepsydry oraz telefonu. Wykorzystaj kod z listingu 23.2. Otrzymaną stronę przetestuj, skalując tekst oraz wyłączając widoczność obrazów. Rozwiązanie przedstawione na listingu 23.2 jest stosowane m.in. w popularnym serwisie Github.com. Odwiedź stronę https://github.com/jquery/jquery i wyłącz pobieranie obrazów. Ikony pozostaną widoczne, gdyż są wykonane metodą przedstawioną na listingu 23.2.
  
  292
  
  Część IV ♦ Czcionki na stronach WWW
  
  Rozdział 24.
  
  Czcionki dla webmastera Tworząc strony WWW, pamiętaj, że witryna, którą udostępniasz w sieci, jest wyświetlana na komputerze użytkownika. Z serwera pobierany jest kod HTML, style CSS oraz być może ilustracje. Pobrane pliki są prezentowane na komputerze użytkownika w oknie przeglądarki w postaci jednego czytelnego dokumentu. Do wyświetlenia tekstów zawartych na stronie WWW używane są czcionki zainstalowane na komputerze osoby, która odwiedziła Twoją witrynę. Jeśli więc przygotowując stronę WWW, użyjesz czcionki, która nie jest zainstalowana na komputerze osoby odwiedzającej Twoją witrynę, przeglądarka wyświetli wówczas teksty z użyciem innej czcionki.
  
  Ćwiczenie 24.1 Zainstaluj w systemie trzy darmowe czcionki, np.:  Scriptina Pro (http://www.fontspace.com/cheapprofonts/scriptina-pro),  Carefree (http://eknp.com/php/fd.php?f=carefree),  Diavlo (http://www.josbuivenga.demon.nl/diavlo.html).
  
  Po zainstalowaniu czcionek zajrzyj do folderu C:\Windows\Fonts i sprawdź, pod jakimi nazwami czcionki są dostępne w systemie. Po podwójnym kliknięciu pozycji C:\Windows\Fonts\DiavloLight-Regular ujrzysz okno dialogowe przedstawione na rysunku 24.1. W górnej jego części zawarta jest nazwa zainstalowanej czcionki: Diavlo Light. Rysunek 24.1. Okno dialogowe właściwości czcionki pozwala sprawdzić, pod jaką nazwą czcionka jest dostępna w systemie
  
  Część IV ♦ Czcionki na stronach WWW
  
  294
  
  Następnie wykonaj stronę WWW prezentującą wiersz Juliana Tuwima pt. Biologia. Do oznaczenia autora utworu użyj elementu h1, tytuł wiersza oznacz elementem h2, a tekst umieść w akapicie. Zarys pliku HTML jest przedstawiony na listingu 24.1. Listing 24.1. Kod HTML ćwiczenia 24.1 Julian Tuwim Biologia

  Baby latem biodrzeją.
  Soki w babach się grzeją,
  ...

  
  
  Przygotuj style CSS, które sformatują utwór tak, by:  element h1 był napisany czcionką Scriptina Pro;  element h2 był napisany czcionką Carefree;  element p był napisany czcionką Diavlo Light.
  
  Style CSS modyfikujące wygląd witryny z listingu 24.1 są przedstawione na listingu 24.2. Listing 24.2. Style CSS ćwiczenia 24.1 h1 { font-family: "Scriptina Pro"; } h2 { font-family: "Carefree"; } p { font-family: "Diavlo Light"; }
  
  Wartościami właściwości font-family są nazwy czcionek wyświetlane w oknie właściwości czcionki (rysunek 24.1.). Jeśli na komputerze są zainstalowane czcionki Scriptina Pro, Carefree oraz Diavlo, przeglądarka WWW wyświetli wówczas stronę z ćwiczenia 24.1 tak jak na rysunku 24.2. Jeśli nie, to witryna z ćwiczenia 24.1 będzie wyglądała tak jak na rysunku 24.3. W celu zainstalowania czcionki Scriptina Pro w systemie:  Odwiedź adres http://www.fontspace.com/cheapprofonts/scriptina-pro.  Pobierz plik cheapprofonts_scriptina-pro.zip.  Rozpakuj archiwum cheapprofonts_scriptina-pro.zip.  Kliknij prawym przyciskiem myszy plik o nazwie Scriptina Pro.otf.  Z menu kontekstowego wybierz opcję Zainstaluj.
  
  Rozdział 24. ♦ Czcionki dla webmastera
  
  295
  
  Rysunek 24.2. Wygląd strony z ćwiczenia 24.1 na komputerze, na którym zainstalowano czcionki Scriptina Pro, Carefree oraz Diavlo
  
  Rysunek 24.3. Wygląd strony z ćwiczenia 24.1 na komputerze, na którym nie zainstalowano czcionek Scriptina Pro, Carefree oraz Diavlo
  
  Ćwiczenie 24.2 Witrynę wykonaną w ćwiczeniu 24.1 otwórz na komputerze, na którym nie zainstalowano czcionek Scriptina Pro, Carefree oraz Diavlo. Jako wniosek wynikający z ćwiczeń 24.1 oraz 24.2 zapamiętaj, że tworząc strony WWW, nie możesz w stylach CSS używać jako wartości właściwości font-family dowolnych czcionek występujących na Twoim komputerze (np. zainstalowanych z pakietami gra-
  
  Część IV ♦ Czcionki na stronach WWW
  
  296
  
  ficznymi Corel Draw lub Adobe Photoshop). Jeśli czcionka wymieniona w stylach CSS nie jest zainstalowana na komputerze osoby odwiedzającej Twoją stronę WWW, to zamiast niej użyta zostanie czcionka domyślna, np. Times New Roman.
  
  Core fonts for the Web W roku 1996 firma Microsoft uruchomiła projekt o nazwie Core fonts for the Web1. Celem projektu było opracowanie zestawu czcionek przeznaczonych specjalnie dla środowiska WWW. Wprawdzie projekt ten został zamknięty w roku 2002, lecz opracowane czcionki po dziś dzień stanowią żelazny repertuar znacznej większości stron WWW. Pełne zestawienie czcionek Core fonts for the Web jest zawarte w tabeli 24.1. Tabela 24.1. Czcionki Core fonts for the Web Rodzina
  
  Czcionki
  
  bezszeryfowe
  
  Arial, Verdana, Trebuchet MS
  
  szeryfowe
  
  Georgia, Times New Roman
  
  nieproporcjonalne
  
  Courier New, Andale Mono
  
  specjalne
  
  Comic Sans MS, Impact, Webdings
  
  Podobną inicjatywę podjęła firma Adobe, udostępniając zestaw Adobe WebType (http://www.adobe.com/type). Czcionki te nie są darmowe i prawdopodobnie dlatego ich popularność jest niewielka.
  
  Czcionki dostępne na różnych platformach Główny problem związany ze stosowaniem czcionek na stronach WWW polega na tym, że zestaw czcionek dostępnych na komputerze zależy od zainstalowanego oprogramowania. Użytkownik pracujący na Linuksie ma dostępne inne czcionki niż użytkownik systemu Windows. Każda platforma systemowa ma własny zestaw czcionek, które są w danym systemie dostępne. W systemie Windows możemy przyjąć, że zestawem tym jest zestaw Core fonts for the Web wzbogacony o kroje Tahoma lub Segoe UI — bezszeryfowe czcionki wykorzystane w interfejsie Windows. Zestawienie czcionek dostępnych w systemach Windows, Linux oraz Macintosh zawiera tabela 24.2. 1
  
  Por. http://en.wikipedia.org/wiki/Core_fonts_for_the_Web.
  
  Rozdział 24. ♦ Czcionki dla webmastera
  
  297
  
  Tabela 24.2. Czcionki dostępne na różnych platformach Rodzina
  
  Windows
  
  Macintosh
  
  Unix/Linux
  
  szeryfowe
  
  Times New Roman, Georgia
  
  New York, Palatino, Times
  
  Bitstream Vera Serif, New Century Schoolbook, Times, Utopia
  
  bezszeryfowe
  
  Arial, Verdana, Trebuchet MS, Tahoma
  
  Charcoal, Chicago, Geneva, Helvetica, Lucida Grande
  
  Bitstream Vera Sans, Helvetica, Lucida
  
  nieproporcjonalne
  
  Courier New, Andale Mono
  
  Courier, Monaco
  
  Bitstream Vera Mono, Courier
  
  Definiowanie kroju czcionki Czcionki stosowane na stronie WWW wymieniamy w arkuszach stylów. Służy do tego właściwość font-family: p { font-family: Verdana, Helvetica, sans-serif; }
  
  Wartość font-family może zawierać dowolną liczbę czcionek, np.: font-family: "Times New Roman", Georgia, Palatino, serif; font-family: Verdana, Tahoma, Helvetica, 'Trebuchet MS', sans-serif;
  
  W przypadku kilku wartości przeglądarka zastosuje pierwszą, jaką znajdzie w systemie. Zauważ, że nazwy, które zawierają białe znaki, np. Times New Roman lub Trebuchet MS, są ujęte w cudzysłów lub apostrofy. Nie jest to konieczne, choć specyfikacja CSS 2.1 wyraźnie to zaleca2. Zwróć również uwagę, że nazwy czcionek oddzielamy przecinkami, a nie — jak w większości atrybutów — spacjami, np.: border: 1px solid black;
  
  Ostatnią podawaną wartością atrybutu font-family powinna być ogólna rodzina czcionek. Będzie ona stosowana przez przeglądarkę w przypadku, gdy żadna z wymienionych czcionek nie zostanie odnaleziona w systemie. Dostępnymi ogólnymi rodzinami czcionek są:  sans-serif — czcionki bezszeryfowe;  serif — czcionki szeryfowe;  monospace — czcionki nieproporcjonalne;  cursive — czcionki odręczne;  fantasy — czcionki fantazyjne.
  
  2
  
  Specyfikacja CSS 2.1, punkt 15.3.
  
  Część IV ♦ Czcionki na stronach WWW
  
  298
  
  Praktyczne znaczenie mają wyłącznie pierwsze trzy rodziny, tj. sans-serif, serif oraz monospace. Pozostałe rodziny z powodu rozbieżności między systemami są stosowane rzadko. W jaki sposób wybierać krój czcionki na stronach WWW, by efekty były jak najbardziej przewidywalne? Pierwszym rozwiązaniem jest stosowanie wpisów zawierających po jednej czcionce z każdej platformy. Przykładami takich wpisów są: p { }
  
  font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
  
  p { }
  
  font-family: "Trebuchet MS", Geneva, Lucida, sans-serif;
  
  p { }
  
  font-family: Tahoma, "Lucida Grande", Helvetica, sans-serif;
  
  Każdy z powyższych wpisów zawiera:  jedną czcionkę platformy Windows (czcionka z zestawu Core fonts for the Web),  jedną czcionkę platformy Macintosh,  jedną czcionkę platformy Linux  oraz ogólną rodzinę czcionek.
  
  Drugim powszechnym rozwiązaniem jest skrócenie listy czcionek do pary: czcionka z zestawu Core fonts for the Web oraz ogólna rodzina. Na przykład: p { font-family: Georgia, serif; } p { font-family: Verdana, sans-serif; } p {
  
  font-family: "Trebuchet MS", sans-serif;
  
  } p { font-family: "Courier New", monospace; }
  
  W większości ćwiczeń, przykładów i projektów zawartych na płycie zastosowany został jeden z czterech zapisów: font-family: font-family: font-family: font-family:
  
  Georgia, serif; Verdana, sans-serif; "Trebuchet MS", sans-serif; "Courier New", monospace;
  
  Rozdział 24. ♦ Czcionki dla webmastera
  
  299
  
  Ćwiczenie 24.3 Wykonaj witrynę, na której czterokrotnie pojawia się pangram Mężny bądź, chroń pułk twój i sześć flag. Kolejne wystąpienia pangramu sformatuj, stosując wpisy: font-family: font-family: font-family: font-family:
  
  Georgia, serif; Verdana, sans-serif; "Trebuchet MS", sans-serif; "Courier New", monospace;
  
  W kodzie strony umieść cztery akapity wzbogacone o identyfikatory p1, p2, p3 oraz p4, jak to ilustruje listing 24.3. Następnie dodaj style wewnętrzne, które zmienią czcionkę poszczególnych akapitów. Style takie są przedstawione na listingu 24.4. Listing 24.3. Kod HTML przykładu 24.3 Test krojów czcionek Szeryfowe: Georgia

  Mężny bądź, chroń pułk twój i sześć flag.

  Bezszeryfowe: Verdana

  Mężny bądź, chroń pułk twój i sześć flag.

  Bezszeryfowe: Trebuchet MS

  Mężny bądź, chroń pułk twój i sześć flag.

  Nieproporcjonalne: Courier New

  Mężny bądź, chroń pułk twój i sześć flag.

  
  
  Listing 24.4. Style CSS przykładu 24.3 #p1 { font-family: } #p2 { font-family: } #p3 { font-family: } #p4 { font-family: }
  
  Georgia, serif; Verdana, sans-serif; "Trebuchet MS", sans-serif; "Courier New", monospace;
  
  Część IV ♦ Czcionki na stronach WWW
  
  300
  
  Osadzanie czcionek na stronach WWW Jeśli dysponujesz czcionką, która jest darmowa lub do rozpowszechniania której masz prawo, możesz ją dołączyć do strony WWW, stosując w stylach CSS regułę @font-face. Składnia reguły jest następująca: @font-face { font-family: NazwaCzcionki; src: url('nazwa-pliku'); }
  
  Pełna dokumentacja reguły font-face jest zawarta w specyfikacji CSS Fonts Module Level 3 w punkcie 4.1: http://www.w3.org/TR/css3-fonts/#font-face-rule.
  
  Jako wartość właściwości font-family podajemy nazwę, pod jaką czcionka będzie dostępna w dalszej części stylów. Nazwę pliku czcionki ustalamy parametrem nazwa-pliku. Właściwość src może przyjmować drugi opcjonalny parametr ustalający format czcionki: src: url('nazwa-pliku') format('format-czcionki');
  
  Poprawnymi wartościami parametru format są: woff, truetype, opentype, embeddedopentype, svg.
  
  Jeśli czcionka jest zapisana w pliku o nazwie Parisian.ttf, wówczas reguła: @font-face { font-family: Parisian; src: url('Parisian.ttf'); }
  
  dołącza ją do stylów CSS. Do czcionki tej możesz się odwoływać w dalszej części stylów, korzystając z nazwy Parisian, np.: p { font-family: Parisian, sans-serif; }
  
  Ćwiczenie 24.4 Wykonaj stronę WWW prezentującą jeden akapit tekstu Lorem ipsum sformatowany czcionką Parisian. Wykonanie ćwiczenia rozpocznij od pobrania pliku czcionki Parisian. Znajdziesz go pod adresem: http://www.fontspace.com/george-williams/parisian. Po pobraniu pliku george-williams_parisian.zip rozpakuj go. Wewnątrz rozpakowanego folderu znajdziesz m.in. dwa pliki: Parisian.ttf oraz License.txt. Czcionka Parisian jest darmowa. Jedynym ograniczeniem jej użycia jest konieczność dołączenia do wykonywanych stron WWW niezmienionej informacji o autorze czcionki. Informację taką dołączymy w pliku style.css.
  
  Rozdział 24. ♦ Czcionki dla webmastera
  
  301
  
  Przygotuj przedstawiony na listingu 24.3 kod HTML. Kod ten wykorzystuje zewnętrzne style CSS zawarte w pliku style.css. Listing 24.5. Kod HTML ćwiczenia 24.4
  
  Osadzanie czcionki Parisian na stronie WWW
  
  
  
  Osadzanie czcionki Parisian na stronie WWW

  Lorem ipsum dolor sit amet...

  
  
  Na zakończenie przygotuj przedstawiony na listingu 24.6 plik style.css. Poniżej reguły @font-face umieść komentarz CSS zawierający kompletną treść z pliku License.txt dołączonego do czcionki Parisian. Listing 24.6. Plik style.css z ćwiczenia 24.4 p { font-family: Parisian, sans-serif; } @font-face { font-family: Parisian; src: url('Parisian.ttf'); } /* Font: Parisian WWW: http://www.fontspace.com/george-williams/parisian ======================================================== Copyright Š 1990-2001 by George Williams Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. The name of the author may not be used to endorse or promote products derived from this software without specific prior written permission.
  
  Część IV ♦ Czcionki na stronach WWW
  
  302
  
  THIS SOFTWARE IS PROVIDED BY THE AUTHOR "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */
  
  Tak wykonana strona WWW składa się z trzech plików, które należy umieścić w jednym folderze:  index.html (kod HTML),  style.css (kod CSS),  Parisian.ttf (czcionka).
  
  Bez względu na to, czy w systemie jest zainstalowana czcionka Parisian, czy nie, przeglądarka WWW przedstawi treść akapitu Lorem ipsum krojem Parisian. Miejsce dołączenia pliku czcionki w stylach CSS nie jest istotne. Możesz najpierw napisać reguły wykorzystujące czcionkę, a dopiero później regułę @font-face. Poniższy kod jest poprawny: p { font-family: Parisian, sans-serif; } @font-face { font-family: Parisian; src: url('Parisian.ttf'); }
  
  Niestety rozwiązanie podane w ćwiczeniu 24.1 nie działa w przeglądarce Internet Explorer 9. Po pierwsze, przeglądarka IE9 wymaga pliku czcionki w formacie EOT. Dodatkowo występuje w niej błąd interpretacji wartości atrybutów src, co uniemożliwia użycie reguł @font-face bez specjalnych sztuczek. W celu przygotowania reguły @font-face, która będzie obsługiwana przez wszystkie przeglądarki, najpierw przekonwertuj plik Parisian.ttf do formatu EOT. Możesz do tego celu wykorzystać serwis http://ttf2eot.sebastiankippe.com. Reguła @font-face, która działa we wszystkich przeglądarkach wymienionych w rozdziale 1., jest przedstawiona na listingu 24.7. Reguła ta wykorzystuje dwa pliki: Parisian.ttf oraz Parisian.eot.
  
  Rozdział 24. ♦ Czcionki dla webmastera
  
  303
  
  Listing 24.7. Reguła @font-face, która działa poprawnie we wszystkich przeglądarkach wymienionych w rozdziale 1. @font-face { font-family: 'Parisian'; src: url('Parisian.eot'); src: url('Parisian.eot?#iefix') format('embedded-opentype'), url('Parisian.ttf') format('truetype'); }
  
  Obszerny opis problemów związanych z regułą @font-face znajdziesz na stronach: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax Regułę z listingu 24.5 przygotowałem, wykorzystując rozwiązanie zawarte w plikach generowanych przez serwis Font Squirrel: http://www.fontsquirrel.com/fontface/ generator.
  
  Ćwiczenie 24.5 Zmodyfikuj kod CSS ćwiczenia 24.4 tak, by działał poprawnie we wszystkich przeglądarkach. Wykorzystaj regułę zawartą na listingu 24.7. Pamiętaj o konieczności konwersji pliku TTF do formatu EOT.
  
  Prawa autorskie do czcionek Głównym problemem związanym z osadzaniem czcionek na stronach WWW jest kwestia praw autorskich. Czcionki, podobnie jak zdjęcia czy filmy cyfrowe, podlegają ochronie prawnej. Udostępnianie ich bez zezwolenia jest piractwem i podlega karze. Nawet jeśli posiadasz legalnie kupiony pakiet oprogramowania (np. Corel Draw), który zainstalował w Twoim systemie czcionki, to i tak nie możesz ich udostępniać publicznie. Jedyną zgodną z prawem metodą wykorzystania takich czcionek jest wykonanie ilustracji zawierających odpowiednie napisy. Takie rozwiązanie zostanie omówione w rozdziale 37. pt. „FIR — wymiana obrazów na teksty”.
  
  Serwis Font Squirrel Serwis Font Squirrel, który jest dostępny pod adresem http://www.fontsquirrel.com, zawiera wiele darmowych czcionek, które możemy dołączać do stron WWW regułą @font-face. Jedną z usług dostępnych w serwisie jest tworzenie spakowanego archiwum, które oprócz pliku czcionki zawiera kompletny przykładowy kod HTML/CSS.
  
  Część IV ♦ Czcionki na stronach WWW
  
  304
  
  Ćwiczenie 24.6 Wykonaj stronę WWW zawierającą tekst Lorem ipsum sformatowany czcionką Belligerent Madness dostępną w serwisie Font Squirrel: http://www.fontsquirrel.com/fonts/Belligerent-Madness. Użyj reguły @font-face oraz plików:  belligerent-webfont.eot,  belligerent-webfont.woff,  belligerent-webfont.ttf,  belligerent-webfont.svg
  
  zawartych w pakiecie ZIP dostępnym na stronie Font Squirrel. W celu rozwiązania ćwiczenia odwiedź adres http://www.fontsquirrel.com/fonts/ Belligerent-Madness, po czym korzystając z odsyłaczy wskazanych na rysunku 24.4, pobierz plik ZIP zawierający pliki z czcionkami, style CSS oraz przykład użycia. Rysunek 24.4. Pobieranie pakietu ZIP zawierającego pliki z czcionkami, style CSS oraz przykład użycia
  
  Na podstawie pliku demo.html przygotuj plik index.html zawierający kod, którego zarys jest przedstawiony na listingu 24.8. Listing 24.8. Przykład użycia czcionek i stylów CSS wygenerowanych przez serwis Font Squirrel
  
  Ćwiczenie 24.6
  
  
  
  

  Lorem ipsum dolor sit amet...

  
  
  Kod CSS wygenerowany przez serwis Font Squirrel działa poprawnie nie tylko w przeglądarkach wymienionych w rozdziale 1., ale także w urządzeniach mobilnych.
  
  Serwisy udostępniające czcionki online Google Fonts Korporacja Google uruchomiła serwis Google Fonts, który zawiera kolekcję darmowych czcionek przeznaczonych do osadzania na stronach WWW. Lista czcionek dostępnych w ramach tej usługi jest umieszczona na stronie http://code.google.com/webfonts. Style CSS zawierające regułę @font-face są generowane przez usługę Google Fonts. W celu dołączenia do strony WWW czcionki o nazwie Tangerine należy do dokumentu HTML dołączyć plik CSS o adresie http://fonts.googleapis.com/css?family=Tangerine. Realizuje to następujący element link:
  
  W dokumencie, w którym umieścisz powyższy znacznik, możesz korzystać z kroju o nazwie Tangerine: p { font-family: 'Tangerine', serif; }
  
  Oczywiście powyższe rozwiązanie będzie działało wyłącznie online. Jeśli tak wykonany dokument otworzysz z dysku na komputerze, który nie jest podłączony do internetu, czcionka Tangerine nie będzie wówczas dostępna. Jeśli dokument CSS chcesz dołączyć wewnątrz innego dokumentu CSS, użyj reguły @import. Na przykład w celu dołączenia do pliku style.css stylów generowanych przez usługę Google Fonts użyj reguły: @import 'http://fonts.googleapis.com/css?family=Tangerine';
  
  Część IV ♦ Czcionki na stronach WWW
  
  306
  
  Ćwiczenie 24.7 Wykonaj stronę WWW prezentującą jeden akapit tekstu Lorem ipsum sformatowany czcionką Tangerine udostępnianą w serwisie Google Fonts. Rozwiązanie ćwiczenia jest przedstawione na listingu 24.9. Listing 24.9. Rozwiązanie ćwiczenia 24.7
  
  Ćwiczenie 24.7
  
  
  
  

  Lorem ipsum dolor sit amet...

  
  
  Typekit.com Bardzo obszerny zestaw komercyjnych czcionek, które możemy osadzać na stronach WWW, jest dostępny w serwisie Typekit: https://typekit.com. Jest to serwis komercyjny prowadzony przez firmę Adobe. Działanie serwisu możemy sprawdzić, zakładając darmowe konto.
  
  Ćwiczenie 24.8 Wykonaj stronę WWW prezentującą jeden akapit tekstu Lorem ipsum sformatowany czcionką Penna, która jest dostępna w serwisie Typekit. Rozwiązanie ćwiczenia jest przedstawione na listingu 24.5. Serwis Typekit dodaje do witryny reklamę informującą o pochodzeniu czcionek. Kod strony z rysunku 24.5 jest przedstawiony na listingu 24.10. Serwis Typekit zabezpiecza udostępniane czcionki, wykorzystując do tego skrypty JavaScript. Kod przedstawiony na listingu 24.10 działa poprawnie wyłącznie w domenie gajdaw.pl. Opłaty za korzystanie z serwisu Typekit zależą od:  liczby wykorzystywanych czcionek,  liczby obsługiwanych domen,  liczby żądań HTTP.
  
  Rozdział 24. ♦ Czcionki dla webmastera
  
  307
  
  Rysunek 24.5. Strona wykorzystująca czcionki z serwisu Typekit
  
  Listing 24.10. Czcionki z serwisu Typekit są osadzane na stronie WWW skryptami JavaScript
  
  Ćwiczenie 24.8
  
  
  
  

  Lorem ipsum dolor sit amet...

  
  
  Ćwiczenie 24.9 Wykonaj stronę WWW prezentującą trzy ikony, które są literami a, b oraz c kroju Modern Pictograms. Krój ten znajdziesz na stronie http://www.fontsquirrel.com/fonts/ modern-pictograms. Stronę wykonaj, stosując osadzanie pliku czcionki przy użyciu reguły @font-face. Niezbędne pliki CSS oraz pliki czcionek wygeneruj w serwisie Font Squirrel.
  
  308
  
  Część IV ♦ Czcionki na stronach WWW
  
  Rozdział 25.
  
  Właściwości CSS dotyczące czcionek i tekstu Szczegółowy wykaz i opis właściwości CSS dotyczących formatowania tekstu jest zawarty w dwóch dokumentach:  CSS Fonts Module Level 3
  
  http://www.w3.org/TR/css3-fonts/  CSS Text Module Level 3
  
  http://www.w3.org/TR/css3-text/ Niestety dokumenty te nie mają jeszcze statusu obowiązujących standardów i w związku z tym podlegają ciągłym zmianom. Trudności stwarza nie tylko stan ostatniej wersji powyższych specyfikacji, ale i jej rozbieżność z różnymi poprzednimi wersjami. Na przykład ostatnia1 wersja dokumentu CSS Text Module Level 3 dostępna na stronie http://www.w3.org/TR/css3-text/ jest pozbawiona bardzo popularnej już właściwości text-shadow, którą znajdziemy w nieco starszej specyfikacji (datowanej na 2010-10-05): http://www.w3.org/TR/2010/WD-css3-text-20101005/. Problemy stwarza także obsługa właściwości podanych w specyfikacjach przez przeglądarki. Omówione przeze mnie zagadnienia ograniczyłem do właściwości, które są już w dniu dzisiejszym mniej więcej zgodnie implementowane w przeglądarkach wymienionych w rozdziale 1. Ewentualne rozbieżności i różnice są jawnie wymienione.
  
  1
  
  W chwili pisania tego tekstu, tj. w grudniu 2012 roku.
  
  Część IV ♦ Czcionki na stronach WWW
  
  310
  
  Właściwości dotyczące czcionek Zestawienie najważniejszych atrybutów CSS dotyczących czcionek prezentuje tabela 25.1. Wymienione w niej właściwości CSS możemy przypisywać do dowolnych elementów HTML zawartych pomiędzy znacznikami oraz . Tabela 25.1. Najważniejsze właściwości CSS ze specyfikacji CSS Fonts Module Level 3 lp.
  
  Atrybut
  
  Opis
  
  1.
  
  font-family
  
  Krój czcionki
  
  2.
  
  font-size
  
  Rozmiar czcionki
  
  3.
  
  font-style
  
  Krój pochylony lub normalny
  
  4.
  
  font-variant
  
  Kapitaliki
  
  5.
  
  font-weight
  
  Krój wytłuszczony lub normalny
  
  6.
  
  font
  
  Właściwość zbiorcza pozwalająca na ustalenie jednym wpisem kilku cech tekstu
  
  font-family Właściwość font-family ustala krój czcionki. Najprostszą metodą jest ograniczenie stosowanych czcionek do zestawu podanego w tabeli 24.2. Wymieniając czcionki, podajemy po jednej czcionce dla każdej platformy i dodajemy na końcu ogólną rodzinę czcionek: font-family: Georgia, Palatino, Times, serif;
  
  W powyższym przykładzie:  Georgia pochodzi z pakietu Core fonts for the Web i na pewno jest dostępna
  
  w systemach Windows.  Palatino jest dostępna na komputerach Macintosh.  Times jest dostępna na Linuksie.  serif to rodzina czcionek szeryfowych.
  
  Skróconą metodą jest podawanie jednej czcionki z zestawu Core fonts for the Web i ogólnej rodziny czcionek. Oto przykłady takich zapisów: font-family: font-family: font-family: font-family: font-family:
  
  Georgia, serif; Verdana, sans-serif; "Trebuchet MS", sans-serif; Verdana, sans-serif; "Courier New", monospace;
  
  Nazwę kroju czcionki możemy także ustalić, wykorzystując opisaną w poprzednim rozdziale regułę @font-face.
  
  Rozdział 25. ♦ Właściwości CSS dotyczące czcionek i tekstu
  
  311
  
  font-size Rozmiar tekstu. Dostępne wartości możemy podzielić na pięć grup:  jednostki bezwzględne:  słowa kluczowe:  xx-small, 
  
  x-small,
  
  
  
  small,
  
  
  
  medium,
  
  
  
  large,
  
  
  
  x-large,
  
  
  
  xx-large,
  
   jednostki długości: 
  
  in (cale),
  
  
  
  cm (centymetry),
  
  
  
  mm (milimetry),
  
  
  
  pt (punkty, 1/72 cala),
  
  
  
  pc (pica),
  
   jednostki względne:  słowa kluczowe: 
  
  smaller,
  
  
  
  larger,
  
   jednostki długości: 
  
  em (wielkość bieżącego kroju czcionki2),
  
  
  
  ex (wysokość3 litery x),
  
  
  
  px (piksel urządzenia),
  
   wartości procentowe.
  
  Dawniej właściwość font-size przysparzała wiele problemów. Winę ponosiły za to przeglądarki nieskalujące tekstu, którego rozmiar był ustalony w jednostkach px.
  
  2
  
  Por. http://en.wikipedia.org/wiki/Em_(typography).
  
  3
  
  Por. http://en.wikipedia.org/wiki/X-height.
  
  Część IV ♦ Czcionki na stronach WWW
  
  312
  
  Obecnie wszystkie przeglądarki skalują witryny4 bez względu na jednostki, w jakich wyrażony jest rozmiar tekstu. W związku z tym możesz bez ograniczeń stosować wszystkie wyżej wymienione rodzaje jednostek. Oto przykłady użycia właściwości font-size: font-size: medium; font-size: 120%; font-size: 1.5em;
  
  Wielkość bieżącego kroju jest dostępna dzięki jednostkom em oraz ex. Jednostka em oznacza wielkość bieżącego kroju. Dla tekstu pisanego czcionką 16px wartość 1em oznacza 16 pikseli. Dla tekstu pisanego czcionką 22px wartość 1em oznacza 22 piksele. Zapis: font-size: 1.5em;
  
  jest równoważny zapisowi: font-size: 150%;
  
  Jednostki em możemy użyć, by ustalić inne cechy tekstu na podstawie bieżącej wielkości czcionki. Przykładem jest wcięcie akapitu: font-indent: 2em;
  
  Dzięki powyższej regule wielkość wcięcia akapitu będzie równa szerokości dwóch znaków w wybranym kroju.
  
  font-stretch Styl kroju. Dostępne wartości:  condensed — wąski;  expanded — szeroki.
  
  Przykłady użycia: font-stretch: condensed;
  
  Właściwość font-stretch nie jest obecnie obsługiwana przez żadną przeglądarkę.
  
  font-style Styl kroju. Dostępne wartości:  italic — kursywa;  normal — antykwa. 4
  
  Skalowanie wielkości widoku witryny wykonują opcje zawarte w menu przeglądarki: Widok/Powiększenie. Możesz się do nich odwoływać za pośrednictwem skrótów klawiszowych Ctrl++ (w Operze: Shift++), Ctrl+–, Ctrl+0, lub wykorzystując przycisk Ctrl oraz kółko myszy. Obecnie skalowaniu podlegają wszystkie teksty oraz obrazy, bez względu na to, w jaki sposób zostały umieszczone na stronie WWW. Niektóre przeglądarki mają opcję Widok/Powiększenie/Skaluj tylko tekst, która powoduje, że skalowaniu poddawany jest wyłącznie tekst, a obrazy nie.
  
  Rozdział 25. ♦ Właściwości CSS dotyczące czcionek i tekstu
  
  313
  
  Przykłady użycia: font-style: italic; font-style: normal;
  
  font-variant Modyfikacja kroju. Przykładowe wartości:  small-caps — kapitaliki;  normal — krój zwyczajny.
  
  Przykłady użycia: font-variant: small-caps; font-variant: normal;
  
  font-weight Grubość czcionki. Dostępne wartości:  bold — wytłuszczenie;  normal — tekst normalnej grubości.
  
  Przykłady użycia: font-weight: bold; font-weight: normal;
  
  font Właściwość ta może zawierać wartości: font-style, font-variant, font-weight, rozmiar font-size, wysokość interlinii line-height oraz font-family. Oto przykłady użycia: font: font: font: font: font: font:
  
  80% sans-serif; small Verdana, sans-serif; italic 140% Georgia, serif; bold 140%/200% Verdana, sans-serif; bold italic large "Trebuchet MS", sans-serif; bold small-caps medium serif;
  
  Zapis 140%/200% oznacza tyle samo co: font-size: 140%; line-height: 200%;
  
  Jeśli korzystając z właściwości font, chcesz wymienić kilka rodzajów czcionek lub dołączyć ogólną rodzinę czcionek, to pamiętaj, że nazwa kroju musi występować jako ostatnia. Poniższy przykład jest niepoprawny: PRZYKŁAD NIEPOPRAWNY font: "Trebuchet MS", sans-serif, 110%;
  
  Część IV ♦ Czcionki na stronach WWW
  
  314
  
  Poprawna forma użycia właściwości font jest następująca: font: 110%, "Trebuchet MS", sans-serif;
  
  Właściwości dotyczące tekstu Zestawienie atrybutów CSS dotyczących tekstu prezentuje tabela 25.2. Tabela 25.2. Zestawienie najważniejszych atrybutów CSS ze specyfikacji CSS Fonts Module Level 3 lp.
  
  Atrybut
  
  Opis
  
  1.
  
  letter-spacing
  
  Odstępy między literami
  
  2.
  
  line-height
  
  Wysokość wiersza tekstu
  
  3.
  
  text-align
  
  Wyrównanie poziome
  
  4.
  
  text-decoration
  
  Dekoracja tekstu
  
  5.
  
  text-indent
  
  Wielkość wcięcia akapitu
  
  6.
  
  text-shadow
  
  Cień tekstu
  
  7.
  
  text-transform
  
  Przekształcenie tekstu
  
  8.
  
  white-space
  
  Właściwości białych znaków
  
  9.
  
  word-spacing
  
  Odstępy międzywyrazowe
  
  letter-spacing Odstępy między literami. Wartością właściwości jest jednostka długości. Przykłady: letter-spacing: 1em; letter-spacing: 140%;
  
  line-height Wysokość wiersza tekstu. Wartością właściwości jest jednostka długości. Przykłady: line-height: 150%; line-height: 1.8;
  
  text-align Wyrównanie poziome tekstu. Dostępne wartości:  left — do lewej;  center — wyśrodkuj;  right — do prawej;  justify — wyjustuj.
  
  Rozdział 25. ♦ Właściwości CSS dotyczące czcionek i tekstu
  
  315
  
  Przykłady użycia: text-align: center; text-align: justify;
  
  Właściwość text-align nie służy do środkowania fragmentów strony, np. całych tabelek lub menu. W tym celu należy użyć właściwości margin o wartości auto opisanej w rozdziale 29. w punkcie „Wyśrodkowanie elementu blokowego”.
  
  text-decoration Ozdabianie tekstu. Dostępne wartości:  none — brak ozdabiania;  underline — podkreślanie;  overline — nadkreślanie;  line-through — przekreślanie.
  
  Przykłady użycia: text-decoration: none; text-decoration: underline;
  
  text-indent Wcięcie akapitu. Wartością właściwości jest jednostka długości. Zazwyczaj stosowane są jednostki em, na przykład: text-indent: 2em;
  
  Wcięcie akapitu będzie wówczas równe szerokości dwóch liter w bieżącej wielkości.
  
  text-shadow Cień tekstu. Cztery parametry definiują:  przesunięcie poziome cienia,  przesunięcie pionowe cienia,  promień rozmycia,  kolor.
  
  Reguła: text-shadow: 10px 2px 5px red;
  
  definiuje cień:  przesunięty o 10 pikseli w prawo,  przesunięty o 2 piksele do dołu,
  
  Część IV ♦ Czcionki na stronach WWW
  
  316  o promieniu rozmycia 5 pikseli,  koloru czerwonego.
  
  Właściwość text-shadow nie jest obsługiwana przez przeglądarkę Internet Explorer 9. Obsługa text-shadow pojawi się w IE 10.
  
  text-transform Przekształcenie tekstu. Dostępne wartości:  capitalize — pierwsze litery wyrazów są zamieniane na duże.  uppercase — wszystkie litery są zamieniane na duże.  lowercase — wszystkie litery są zamieniane na małe.  none — brak przekształcania.
  
  Przykłady użycia: text-transform: capitalize; text-transform: uppercase;
  
  white-space Właściwość ta zmienia sposób interpretacji białych znaków przez przeglądarkę. Zmieniając właściwość white-space, możemy modyfikować trzy cechy:  Zwijanie/zachowywanie białych znaków: czy wielokrotne białe znaki są
  
  zastępowane przez pojedynczy separator wyrazów.  Zawijanie tekstu: czy tekst jest zawijany i wypełnia okno przeglądarki, czy
  
  wystaje poza widoczny obszar okna, a w przeglądarce pojawia się poziomy pasek przewijania.  Łamanie wiersza: czy znak nowej linii5 powoduje złamanie wiersza.
  
  Dostępnymi wartościami są:  normal — białe znaki są zwijane, tekst jest zawijany, znak nowej linii nie
  
  łamie wiersza.  pre — białe znaki są zachowane, tekst nie jest zawijany, znak nowej linii
  
  łamie wiersz.  nowrap — białe znaki są zwijane, tekst nie jest zawijany, znak nowej linii
  
  nie łamie wiersza.  pre-wrap — białe znaki są zachowane, tekst jest zawijany, znak nowej linii
  
  łamie wiersz.
  
  5
  
  Znak o dziesiętnym kodzie ASCII równym 10 (szesnastkowo x0A) zapisywany w wielu językach jako \n.
  
  Rozdział 25. ♦ Właściwości CSS dotyczące czcionek i tekstu
  
  317
  
   pre-line — białe znaki są zwijane, tekst jest zawijany, znak nowej linii łamie
  
  wiersz. Wszystkie powyższe wartości są implementowane we wszystkich nowych przeglądarkach w identyczny sposób. Wartość nowrap zastosowana np. do elementu lorem ipsum dolor da ten sam efekt co użycie twardych spacji lorem ipsum dolor.
  
  word-spacing Odstępy między wyrazami. Wartością właściwości jest jednostka długości. Przykłady użycia: word-spacing: 2em; word-spacing: 200%;
  
  318
  
  Część IV ♦ Czcionki na stronach WWW
  
  Rozdział 26.
  
  Teksty wielokolumnowe Arkusze stylów CSS3 zawierają właściwości umożliwiające tworzenie wielokolumnowych układów tekstu. Zagadnienia te są opisane w specyfikacji CSS Multi-column Layout Module: http://www.w3.org/TR/css3-multicol/. Obecnie obsługa właściwości dotyczących kolumn w postaci opisanej w specyfikacji występuje wyłącznie w przeglądarce Opera. Przeglądarki Chrome, Firefox oraz Safari umożliwiają korzystanie z układów wielokolumnowych przy użyciu właściwości poprzedzonych prefiksami: -moz-webkit-
  
  W przeglądarce Internet Explorer obsługa układów wielokolumnowych pojawi się natomiast w wersji 10.
  
  Ustalenie liczby kolumn Do ustalenia liczby kolumn służy właściwość column-count, której wartością jest liczba całkowita: column-count: 2;
  
  Powyższy wpis będzie poprawnie interpretowany wyłącznie w Operze. Reguła dla Firefoksa ma postać: -moz-column-count: 2;
  
  Dla Safari oraz Chrome stosujemy natomiast zapis: -webkit-column-count: 2;
  
  Jeśli użyjemy wszystkich powyższych wpisów, otrzymamy regułę, która działa poprawnie w Operze, Firefoksie, Chromie i Safari. Reguła taka jest przedstawiona na listingu 26.1.
  
  Część IV ♦ Czcionki na stronach WWW
  
  320
  
  Listing 26.1. Reguła ustalająca liczbę kolumn, która działa w Operze, Firefoksie, Chromie i Safari column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;
  
  Ćwiczenie 26.1 Zmodyfikuj projekt 13.2 prezentujący Opowieść wigilijną, dodając do niego — wewnątrz selektora body — reguły ustalające układ trójkolumnowy z listingu 26.1: body { ... column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; }
  
  Otrzymasz witrynę przedstawioną na rysunku 26.1. Rysunek 26.1. Układ trójkolumnowy w projekcie 13.2
  
  Witryna z ćwiczenia 26.1 będzie wyglądała w przeglądarce Internet Explorer identycznie jak na rysunku 13.1. W przypadku wyjustowanej prozy brak obsługi układu kolumnowego w Internet Explorerze jest do zaakceptowania. Otrzymujemy czytelną witrynę przedstawioną w postaci jednej kolumny z rysunku 13.1.
  
  Ćwiczenie 26.2 Zmodyfikuj projekt 8.4, dodając do niego element article, którego układ będzie podzielony na trzy kolumny. Użyj kodu przedstawionego na listingach 26.2 oraz 26.3.
  
  Rozdział 26. ♦ Teksty wielokolumnowe
  
  321
  
  Listing 26.2. Kod HTML ćwiczenia 26.2
  
  Adam Mickiewicz Oda do młodości

  ...

  ...

  ...
  
  Listing 26.3. Style CSS ćwiczenia 26.2 body { margin: 100px; background: gray; } article { background: white; font-family: Georgia, serif; line-height: 160%; column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; }
  
  Wygląd otrzymanej witryny w przeglądarkach Firefox oraz Internet Explorer jest przedstawiony na rysunkach 26.2 oraz 26.3. Rysunek 26.2. Strona z ćwiczenia 26.2 w przeglądarce Firefox
  
  Część IV ♦ Czcionki na stronach WWW
  
  322 Rysunek 26.3. Strona z ćwiczenia 26.2 w przeglądarce Internet Explorer
  
  Wniosek z rysunków 26.2 oraz 26.3 jest jeden: do czasu pojawienia się obsługi wielu kolumn w Internet Explorerze użycie właściwości column-count najlepiej ograniczyć do prozy.
  
  Szerokości kolumn Drugą metodą definiowania układu wielokolumnowego jest ustalenie szerokości pojedynczej kolumny: column-width: 200px; -moz-column-width: 200px; -webkit-column-width: 200px;
  
  W takim przypadku tekst zostanie podzielony na kolumny, których szerokość będzie zależała od ilości dostępnego miejsca. Ilość dostępnego miejsca zostanie podzielona całkowicie przez szerokość przeznaczoną na jedną kolumnę. W ten sposób otrzymamy liczbę kolumn układu. Szerokość przeznaczona na cały układ zostanie podzielona równo na liczbę otrzymanych kolumn. Przyjmując, że dostępne miejsce wynosi 350 pikseli, podział na kolumny o szerokości 200 pikseli da jedną kolumnę tekstu. Wynikiem dzielenia całkowitego 350/200 jest bowiem 1. Taka sytuacja jest przedstawiona na rysunku 26.4. Jeśli dostępne miejsce ma szerokość 550 pikseli, otrzymamy wówczas dwie kolumny, gdyż: 550 / 200 = 2
  
  (dzielenie całkowite)
  
  Rozdział 26. ♦ Teksty wielokolumnowe
  
  323
  
  Rysunek 26.4. Kolumna o szerokości 200px może zajmować od 0 do 399 pikseli
  
  Kolumny będą miały szerokość 275 pikseli, gdyż: 550 /2 = 275
  
  Taka sytuacja jest przedstawiona na rysunku 26.5. Rysunek 26.5. Dwie kolumny o właściwości column-width: 200px — każda z nich zajmuje od 200 do 300 pikseli
  
  Ćwiczenie 26.3 W ćwiczeniu 26.2 ustal podział na kolumny, podając właściwość: column-width: 200px;
  
  Sprawdź, jaki wpływ na liczbę kolumn ma szerokość okna przeglądarki oraz wielkość czcionki.
  
  Odstępy i separatory kolumn Wielkość odstępu między kolumnami oraz ewentualne obramowanie możemy ustalić właściwościami: column-gap: 25px; column-rule: 1px solid gray;
  
  Część IV ♦ Czcionki na stronach WWW
  
  324
  
  Wartość column-gap możemy interpretować jako wypełnienie (ang. padding) dotyczące obszaru pomiędzy kolumnami. column-rule definiuje natomiast obramowanie umieszczane pomiędzy kolumnami.
  
  Ćwiczenie 26.4 Zmodyfikuj ćwiczenie 26.1, dodając właściwości: column-gap: 25px; -moz-column-gap: 25px; -webkit-column-gap: 25px; column-rule: 1px solid gray; -moz-column-rule: 1px solid gray; -webkit-column-rule: 1px solid gray;
  
  Rozciąganie elementów na wszystkie kolumny Właściwość: column-span: all;
  
  pozwala na rozciągnięcie podanych elementów na wszystkie kolumny. W ten sposób unikniemy zawężania nagłówków do kolumn. Tekst łamany na kolumny będzie kontynuowany przed kolejnymi nagłówkami, zgodnie z rysunkiem 26.6. Rysunek 26.6. Kontynuacja tekstu w przypadku użycia nagłówków rozciągających się na wszystkie kolumny
  
  Właściwość column-span nie jest obsługiwana przez przeglądarkę Firefox.
  
  Rozdział 26. ♦ Teksty wielokolumnowe
  
  325
  
  Ćwiczenie 26.5 Zmodyfikuj ćwiczenie 26.4. W kodzie HTML dodaj element header, który obejmie elementy h1, h2 oraz dedykację. Stylami: column-span: all; -moz-column-span: all; -webkit-column-span: all;
  
  ustal, by nagłówek header oraz element h3 rozciągały się na wszystkie kolumny.
  
  326
  
  Część IV ♦ Czcionki na stronach WWW
  
  Rozdział 27.
  
  Podsumowanie części czwartej Po lekturze czwartej części powinieneś:  rozumieć problemy dotyczące wyboru czcionki;  umieć posługiwać się właściwością font-family w taki sposób, by otrzymywać
  
  przewidywalne wyniki bez względu na platformę i przeglądarkę;  znać wszystkie właściwości CSS dotyczące czcionek i tekstu, które zostały
  
  wymienione w rozdziale 25.,  umieć posługiwać się układem wielokolumnowym oraz znać ograniczenia
  
  wynikające z jego braku obsługi w przeglądarce Internet Explorer.
  
  Projekt 27.1. CSS: właściwości dotyczące czcionek i tekstu Przygotuj czternaście stron WWW testujących wszystkie właściwości CSS dotyczące czcionek i tekstu wymienione w tabelach 25.1. oraz 25.2. Strony nazwij: font-family.html, font-size.html, font-style.html, …, white-space.html, line-height.html. W treści każdego przykładu umieść odpowiednią liczbę akapitów z tekstem Lorem ipsum. Każdy akapit sformatuj, stosując inną wartość wybranej właściwości. Na przykład właściwość text-align przyjmuje cztery możliwe wartości: left, center, right, justify. W pliku text-align.html wprowadź zatem cztery akapity Lorem ipsum. Powinieneś otrzymać kod zbliżony do przykładu przedstawionego na listingu 27.1.
  
  Część IV ♦ Czcionki na stronach WWW
  
  328 Listing 27.1. Kod HTML strony text-align.html CSS: właściwość text-align text-align: left;

  Lorem ipsum dolor sit amet...

  text-align: center;

  Lorem ipsum dolor sit amet...

  text-align: right;

  Lorem ipsum dolor sit amet...

  text-align: justify;

  Lorem ipsum dolor sit amet...

  
  
  Następnie dodaj do dokumentu style wewnętrzne widoczne na listingu 27.2. Pierwszy akapit zostanie wyrównany do lewej (text-align: left), drugi — wyśrodkowany (text-align: center) itd. Listing 27.2. Style testujące cztery wartości właściwości text-align #p1 { text-align: } #p2 { text-align: } #p3 { text-align: } #p4 { text-align: }
  
  left; center; right; justify;
  
  W podobny sposób przygotuj pozostałe trzynaście stron. W każdej z nich umieść odwołanie do zewnętrznego pliku stylów style.css. W pliku tym zdefiniuj format nagłówka h2 tak, by miał on górne i dolne jednopikselowe czerwone obramowanie oraz by był napisany czcionką nieproporcjonalną. Style takie są widoczne na listingu 27.3. Listing 27.3. Style zewnętrzne modyfikujące nagłówek h2 h2 { margin-bottom: 16px; margin-top: 150px; border-bottom: 1px solid red; border-top: 1px solid red; font-family: "Courier New", monospace; line-height: 200%; }
  
  Jest to pierwszy projekt składający się z wielu plików. Pliki te wprawdzie nie są w żaden sposób powiązane (tj. nie stosują odnośników), jednak wszystkie wykorzystują wspólny zewnętrzny arkusz stylów. Dodatkowo każdy z nich zawiera własne style wewnętrzne. Do stron wykonanych w tym projekcie możesz wrócić za każdym razem, gdy będziesz mieć wątpliwości co do wpływu jednej z właściwości CSS na czcionkę lub tekst.
  
  Rozdział 27. ♦ Podsumowanie części czwartej
  
  329
  
  Projekt 27.2. Jan Kochanowski: Treny Przygotuj stronę WWW prezentującą Treny Jana Kochanowskiego. Zarys kodu HTML jest przedstawiony na listingu 27.4. Listing 27.4. Kod HTML strony prezentującej Treny
  
  Jan Kochanowski
  
  Treny

  Tales sunt...

  ORSZULI KOCHANOWSKIEJ, WDZIĘCZNEJ...

  
  
  Tren I

  Wszytki płacze, wszytki łzy Heraklitowe I lamenty, i skargi Symonidowe, ...

  
  
  Tren II

  Jeslim kiedy nad dziećmi piórko miał zabawić, A kwoli temu wieku lekkie rymy stawić, ...

  
  
  ...
  
  Teksty trenów pochodzą ze strony...
  
  
  
  Struktura dokumentu z listingu 27.4 jest następująca:  Cała kolekcja trenów jest potraktowana jako pojedynczy tekst, który może
  
  być dystrybuowany kanałami RSS.  Każdy z trenów jest również potraktowany jako pojedynczy tekst, który możemy
  
  dystrybuować za pomocą RSS. Całą kolekcję możemy również oznaczyć elementem section:
  
  Jan Kochanowski
  
  Część IV ♦ Czcionki na stronach WWW
  
  330 ... ...pierwszy tren... ...drugi tren... ... ...
  
  Decyzja jest uzależniona od subiektywnej oceny, czy cała kolekcja trenów będzie udostępniana jako osobny wpis RSS. Podobnie możemy postąpić w stosunku do każdego trenu z osobna. Jeśli uznamy, że treny nie będą dystrybuowane jako osobne wpisy RSS, witrynę z listingu 27.4 możemy wówczas oznaczyć:
  
  Jan Kochanowski
  
  ... ...pierwszy tren... ...drugi tren... ... ...
  
  Oczywiście możemy także użyć elementów section zarówno do całej kolekcji trenów, jak i do każdego pojedynczego trenu:
  
  Jan Kochanowski
  
  ... ...pierwszy tren... ...drugi tren... ... ...
  
  W ten sposób otrzymamy cztery kombinacje:  article/article,  section/article,  article/section,  section/section.
  
  Wszystkie powyższe kombinacje są równie poprawne składniowo. Wybór jednej z nich zależeć będzie od oceny, które fragmenty witryny będą dystrybuowane jako niezależne wpisy w kanałach RSS. Możemy oczywiście zrezygnować z wewnętrznych oraz z zewnętrznych elementów article i section. Otrzymamy wówczas kod:
  
  Jan Kochanowski Treny
  
  Rozdział 27. ♦ Podsumowanie części czwartej
  
  331
  
  Tren I

  ...tekst trenu I...

  Tren II

  ...tekst trenu II...

  ... ...
  
  Nie powinniśmy jednak elementów section oraz article z listingu 27.4 zastępować żadnymi innymi elementami, np. aside ani div. Zwróć uwagę, że w projekcie tym nie występują elementy br. Do złamania znaków wykorzystałem właściwość white-space. Upraszcza to znacznie kod HTML. Jest to jednak metoda gorsza od użycia elementów br (patrz: projekt 8.4). W przypadku wyświetlenia witryny przy wyłączonych stylach tekst trenów będzie nieczytelny. Po wyłączeniu interpretacji stylów CSS witryna będzie wyglądała tak jak na rysunku 27.1. Rysunek 27.1. Wygląd witryny z projektu 27.2 przy wyłączonych stylach CSS
  
  Style formatujące tekst trenów są przedstawione na listingu 27.5.
  
  Część IV ♦ Czcionki na stronach WWW
  
  332
  
  Listing 27.5. Style CSS wykorzystane do formatowania trenów p {
  
  }
  
  white-space: font-family: line-height: margin-left:
  
  pre; Georgia, serif; 200%; 20%;
  
  Kolor witryny z trenami został ustalony w stylach elementu body: body { color: white; background: black; }
  
  Zwróć jeszcze uwagę na użycie nagłówków h1, h2 i h3 na listingu 27.4. Nagłówek h1 występuje wewnątrz elementu body. Nagłówek h2 występuje wewnątrz elementu header. Nagłówek h3 występuje wewnątrz elementu article dotyczącego pojedynczego trenu. Dzięki temu każdy z elementów tworzących podział na sekcje, czyli body oraz article, zawiera nagłówek. Jeśli nagłówek h1 przesuniesz do wnętrza elementu header, element body nie będzie wówczas zawierał żadnego nagłówka. W takim przypadku automatycznie generowany spis treści będzie zawierał pozycje UNTITLED. Oczywiście wewnątrz każdego elementu article możemy prowadzić numerację nagłówków, rozpoczynając od h1. Wszystkie nagłówki h2 oraz h3 na listingu 27.4 możemy zatem zastąpić nagłówkami h1. Wtedy jednak wygląd witryny będzie inny: wszystkie nagłówki będą bardzo duże, bez stopniowania, jakie powoduje użycie elementów h1, h2 i h3. Jeśli użyjesz wyłącznie nagłówków h1, style formatujące najwygodniej wówczas wykonać, stosując selektory potomne: body > h1 { ... } body > article > header > h1 { ... } body > article > article > h1 { ... }
  
  /* Jan Kochanowski */ /* Treny */ /* Tren */
  
  Projekt 27.3. Adam Mickiewicz: Pan Tadeusz Wykonaj stronę WWW prezentującą epopeję Adama Mickiewicza pt. Pan Tadeusz. Wykonanie zadania rozpocznij od struktury dokumentu HTML5. Wykorzystaj elementy: h1, h2, h3, h4 article section header footer p br
  
  Rozdział 27. ♦ Podsumowanie części czwartej
  
  333
  
  Rozwiązanie przygotowane przeze mnie składa się z elementu article zawierającego poszczególne księgi umieszczone w elementach section:
  
  Adam Mickiewicz PAN TADEUSZ

  czyli
  OSTATNI ZAJAZD NA LITWIE
  HISTORIA SZLACHECKA Z ROKU 1811 i 1812
  WE DWUNASTU KSIĘGACH WIERSZEM

  
  
  ...księga pierwsza... ...księga druga... ...księga trzecia... ...
  
  Każda księga jest sformatowana zgodnie ze schematem:
  
  Ksiega X Tytuł księgi

  Zarys
  Akcji
  W księdze

  
  
  

  ...

  ...

  ...
  
  W tekście utworu występują myślniki (encja —) oraz polski cudzysłów (encje „ i ”). Sporadycznie pojawia się także cudzysłów francuski (encje « oraz ») oraz tekst pisany rozstrzelonym drukiem. Efekt ten osiągniemy, stosując element strong: lisice
  
  w połączeniu ze stylami: strong { font-weight: normal; letter-spacing: 0.4em; }
  
  Projekt zakończ, definiując style CSS, które nadadzą utworowi elegancki wygląd.
  
  334
  
  Część IV ♦ Czcionki na stronach WWW
  
  Część V
  
  Układ strony
  
  336
  
  HTML5 i CSS3. Praktyczne projekty
  
  Rozdział 28.
  
  Elementy blokowe i liniowe Elementy języka HTML są podzielone na dwie grupy: elementy blokowe (ang. block elements) oraz elementy liniowe (ang. inline elements). Podział ten obejmuje większą część elementów języka, choć nie wszystkie. Elementy takie jak akapit p czy nagłówki od h1 do h6 możemy jasno sklasyfikować jako blokowe. Jednoznacznymi przykładami elementów liniowych są em oraz strong. Niektóre elementy, np. map, ins, del, link czy meta, wymykają się jednak tej klasyfikacji. Podział elementów na blokowe i liniowe przeprowadzimy na podstawie ich właściwości prezentacyjnych. Za elementy blokowe uznamy te spośród elementów HTML, które są domyślnie wyświetlane w trybie block, a za elementy liniowe — elementy, dla których domyślnym trybem prezentacji jest tryb inline. Powszechnie przyjętym tłumaczeniem angielskiego terminu block element na język polski jest element blokowy. Tłumaczenie nazwy drugiego rodzaju elementów nie doczekało się jeszcze ujednolicenia. W polskiej literaturze informatycznej można spotkać następujące przekłady terminu inline element:  element liniowy,  element wewnętrzny,  element tekstowy,  element typu inline,  element śródliniowy,  element pływający.
  
  W książce będę konsekwentnie stosował pierwsze z powyższych tłumaczeń: element liniowy.
  
  Część V ♦ Układ strony
  
  338
  
  Każdy z elementów języka HTML ma jednoznacznie przypisany domyślny tryb wyświetlania w oknie przeglądarki. Na przykład element p jest wyświetlany w trybie oznaczanym jako block, element strong w trybie o nazwie inline, a element meta w trybie none. Tabela 28.1 zawiera pełne zestawienie wszystkich dostępnych trybów wyświetlania. Wartości te znajdziesz w specyfikacji języka CSS w punkcie 9.2.4. W kontekście podziału elementów na blokowe i liniowe liczą się oczywiście wyłącznie dwa pierwsze tryby, czyli block oraz inline. Tabela 28.1. Wszystkie dostępne tryby wyświetlania elementów inline block inline-block run-in none list-item table inline-table table-caption table-column-group table-column table-header-group table-footer-group table-row-group table-row table-cell
  
  Tryb wyświetlania każdego elementu strony WWW możemy ustalić, wykorzystując rozszerzenia przeglądarek WWW. Badanie trybu wyświetlania elementu h1 w przeglądarce Firefox przy użyciu rozszerzenia Firebug jest przedstawione na rysunku 28.1. W celu sprawdzenia, czy element h1 jest wyświetlany w trybie block: 1. Otwórz w przeglądarce stronę, która zawiera element h1. 2. Uruchom rozszerzenie Firebug. 3. Rozwiń zakładkę HTML (strzałka A). 4. Rozwiń drzewo dokumentu i wybierz element h1 (strzałka B). 5. Rozwiń zakładkę Wyliczone (strzałka C). 6. Przewiń w dół zawartość okna i odczytaj właściwość display (strzałka D).
  
  Rozdział 28. ♦ Elementy blokowe i liniowe
  
  339
  
  Rysunek 28.1. Sprawdzanie domyślnego trybu wyświetlania elementu h1
  
  Znając metodę sprawdzania trybu wyświetlania elementu, możemy przejść do definiowania elementów blokowych i liniowych. Definicje prezentacyjne są następujące:  Elementem blokowym nazywamy każdy z elementów, który jest domyślnie wyświetlany w oknie przeglądarki w trybie block.  Elementem liniowym nazywamy każdy z elementów, który jest domyślnie wyświetlany w oknie przeglądarki w trybie inline.
  
  Zestawienie wszystkich elementów blokowych języka HTML5 jest zawarte w tabeli 28.2. Tabela 28.3 prezentuje listę elementów, które w myśl definicji prezentacyjnej uznajemy za liniowe. Tabela 28.2. Elementy blokowe języka HTML (klasyfikacja na podstawie właściwości display: block) Funkcja
  
  Elementy
  
  Definicja struktury dokumentu
  
  html, body article, section, aside, nav header, footer address
  
  Elementy ogólne
  
  div
  
  Nagłówki
  
  h1, h2, h3, h4, h5, h6, hgroup
  
  Część V ♦ Układ strony
  
  340
  
  Tabela 28.2. Elementy blokowe języka HTML (klasyfikacja na podstawie właściwości display: block) — ciąg dalszy Funkcja
  
  Elementy
  
  Tekst dokumentu
  
  p, pre, blockquote
  
  Listy
  
  ul, ol, dl, dt, dd
  
  Obrazy i obiekty
  
  map figure, figcaption
  
  Formularze
  
  form, option, optgroup, fieldset, legend
  
  Inne
  
  hr
  
  Tabela 28.3. Elementy liniowe języka HTML5 (klasyfikacja na podstawie właściwości display: inline) Funkcja
  
  Elementy
  
  Elementy ogólne
  
  span
  
  Tekst dokumentu
  
  br, wbr q, sub, sup, em, strong, mark, small, dfn, code, samp, kbd, var, cite, abbr, time
  
  Zmiany w dokumencie
  
  ins, del
  
  Hiperłącza
  
  a, link
  
  Obrazy i obiekty
  
  img, object, iframe, audio, video, source, track, canvas
  
  Formularze
  
  input, button, select, textarea, label
  
  Inne
  
  bdo
  
  Trzecią grupą, która się pojawia w przypadku stosowania definicji prezentacyjnej, są elementy, dla których domyślnym trybem wyświetlania jest none. Ich lista jest zawarta w tabeli 28.4. Tabela 28.4. Elementy, dla których domyślnym trybem wyświetlania jest none Funkcja
  
  Elementy
  
  Definicja struktury dokumentu
  
  head, title
  
  Dodatkowe dane o dokumencie
  
  meta
  
  Hiperłącza
  
  base
  
  Obrazy i obiekty
  
  param, area
  
  Style
  
  style
  
  Skrypty
  
  script
  
  Pozostałe elementy są wyświetlane niemal każdy w innym trybie. Zestawienie zamykające listę wszystkich elementów HTML5 z tabeli 2.1 podzielonych pod względem trybu wyświetlania jest zawarte w tabeli 28.5.
  
  Rozdział 28. ♦ Elementy blokowe i liniowe
  
  341
  
  Tabela 28.5. Tryby wyświetlania pozostałych elementów HTML Elementy
  
  Tryb wyświetlania
  
  li
  
  list-item
  
  table
  
  table
  
  caption
  
  table-caption
  
  colgroup
  
  table-column-group
  
  col
  
  table-column
  
  thead
  
  table-header-group
  
  tfoot
  
  table-footer-group
  
  tbody
  
  table-row-group
  
  tr
  
  table-row
  
  th, td
  
  table-cell
  
  Ćwiczenie 28.1 Sprawdź tryb wyświetlania każdego elementu z tabeli 2.1. Użyj gotowego dokumentu index.html, który zawiera każdy z elementów HTML5 występujących w tabeli 2.1. Definicja prezentacyjna jest o tyle kłopotliwa, że odwołuje się do konkretnej przeglądarki. Zestawienie zawarte w tabelach od 28.2 do 28.5 przygotowałem w przeglądarce Firefox. Jeśli podział ten wykonasz, wykorzystując inne oprogramowanie, to wyniki mogą się nieco różnić. Na przykład w przeglądarce Safari elementy map, option oraz optgroup wyświetlane są domyślnie w trybie inline.
  
  Elementy ogólne div i span Elementy div i span odgrywają szczególną rolę. Są to tak zwane elementy ogólne (ang. generic elements): div jest elementem blokowym, a span — elementem liniowym. Element div może zawierać dowolne elementy blokowe i liniowe. Poprawnym przykładem użycia jest:
  
  Witaj
  
  Wyliczamy

  Raz
  Dwa
  Trzy

  
  
  Część V ♦ Układ strony
  
  342
  
  Element span może natomiast zawierać dowolne elementy tekstowe, ale nie może zawierać elementów blokowych. Oto przykład użycia:

  Lorem ipsum dolor sit amet. Curabitur non turpis quis felis placerat

  
  
  W powyższym przykładzie pierwszy element span zawiera wyłącznie tekst. Drugi span zawiera elementy em oraz span.
  
  Domyślny format wizualny elementów blokowych i liniowych Poznając domyślny format prezentacji elementów, należy zwrócić uwagę na:  elementy blokowe oraz liniowe,  wysokość i szerokość,  zagnieżdżanie elementów.
  
  Domyślnie elementy blokowe zajmują całą dostępną dla nich szerokość, a ich wysokość jest tak ustalona, by cała zawartość mieściła się w elemencie. Wysokość przyjmuje najmniejszą możliwą wartość gwarantującą, że zawartość elementu nie będzie wystawała poza jego obszar. Po każdym elemencie blokowym przeglądarka przechodzi do nowego wiersza. W odniesieniu do elementów liniowych zasada minimalizacji wymiaru jest stosowana zarówno do szerokości, jak i wysokości. Szerokość i wysokość elementu liniowego są zatem tak dobrane, by element pomieścił całą swoją zawartość. Są to najmniejsze możliwe wartości gwarantujące, że zawartość elementu nie będzie wystawała poza jego obszar. W przypadku zagnieżdżania obszar zajmowany przez element wewnętrzny jest całkowicie zawarty w obszarze elementu zewnętrznego. Taka sytuacja ma miejsce w przypadku zarówno elementów blokowych, jak i liniowych. Wymiar elementu zewnętrznego będzie tak dobrany, by pomieścił on całkowicie zawartą w nim treść. Możemy więc powiedzieć, że elementy wewnętrzne wymuszają swoim wymiarem powiększanie elementów zewnętrznych.
  
  Ćwiczenie 28.2 Wykonaj stronę WWW, która pozwoli Ci stwierdzić, jaki jest domyślny format prezentacji kilku wybranych elementów blokowych oraz kilku wybranych elementów liniowych. Wykonanie ćwiczenia rozpocznij od przygotowania kodu HTML widocznego na listingu 28.1. Zawiera on elementy blokowe h1, h2 i p oraz elementy liniowe em i strong.
  
  Rozdział 28. ♦ Elementy blokowe i liniowe
  
  343
  
  Listing 28.1. Przykładowy kod zawierający kilka elementów blokowych i kilka elementów liniowych
  
  Lorem ipsum Dolor sit amet

  Lorem ipsum dolor sit amet...

  
  
  Następnie wzbogać kod z listingu 28.1 o style przedstawione na listingu 28.2. Zmiana kolorystyki pozwoli Ci dokładnie ustalić położenie i rozmiar każdego elementu. Listing 28.2. Style CSS1, dzięki którym ujrzymy położenie elementów blokowych i liniowych h1, h2, p { background: #e4e4e4; } em, strong { background: black; color: white; }
  
  Strona przedstawiona na listingach 28.3 oraz 28.4 będzie wyglądała tak jak na rysunku 28.2. Elementy blokowe mają szare tło, a liniowe — czarne. Rysunek 28.2. Ćwiczenie umożliwiające zbadanie domyślnych wymiarów i położenia elementów blokowych i liniowych
  
  Analizując listingi 28.1 i 28.2, zwróć uwagę, że elementy h1, h2 oraz p nie są zagnieżdżone. W kodzie HTML występują one jeden obok drugiego: ... ...

  ...

  
  
  1
  
  Podane style CSS wykorzystują omówiony w rozdziale 47. selektor grupowy.
  
  Część V ♦ Układ strony
  
  344
  
  Na rysunku 28.2 są one wyświetlane jeden pod drugim. Szerokość ich jest tak dobrana, że każdy z nich zajmuje całą dostępną szerokość okna przeglądarki. Wysokość jest natomiast dostosowana do zawartej w nich treści. Każdy z elementów blokowych ma taką wysokość, by pomieścić zawartą w nim treść. Czarne prostokąty elementów liniowych mają wymiary tak dobrane, by mieściły się w nich wyrazy objęte znacznikami. Zarówno szerokość, jak i wysokość elementów liniowych jest dostosowana do ich zawartości. Zwróć uwagę, że żaden z elementów liniowych nie powoduje złamania wiersza. Nawet wtedy, gdy dwa elementy występują obok siebie. Taka sytuacja ma miejsce w akapicie p, gdzie po elemencie em występuje element strong:

  ipsum dolor sit amet

  
  
  Ćwiczenie 28.3 Wykonaj stronę WWW, która pozwoli Ci stwierdzić, jaki jest domyślny format elementów zagnieżdżonych. Najpierw przygotuj przedstawiony na listingu 28.3 kod, który zawiera akapity p zagnieżdżone w elementach div oraz elementy em zawarte wewnątrz strong. Listing 28.3. Przykładowy kod zawierający zagnieżdżone elementy blokowe i liniowe
  
  

  Lorem ipsum dolor sit amet...

  Pellentesque viverra ipsum ac quam...

  Nullam placerat, felis in...

  
  
  Pellentesque viverra
  
  Elementy z listingu 28.3 sformatuj wizualnie stylami z listingu 28.4. Dzięki nim ujrzysz położenie wszystkich elementów w oknie przeglądarki. Listing 28.4. Style CSS formatujące kod z listingu 28.3 tak, by otrzymany został rezultat z rysunku 28.3 h1, h2, p { background: #e4e4e4; } strong { background: black; color: white; } em { background: white; color: black;
  
  Rozdział 28. ♦ Elementy blokowe i liniowe
  
  345
  
  } div { border: 1px solid black; } h1, h2, p { background: #e4e4e4; } em, strong { background: black; color: white; }
  
  Strona z listingów 28.3 oraz 28.4 będzie wyglądała tak jak na rysunku 28.3. Akapity p mają szare tło. Elementy div mają cienkie czarne obramowanie. Elementy strong są wyróżnione czarnym tłem, a elementy em — białym. Rysunek 28.3. Badanie położenia i rozmiaru elementów zagnieżdżonych
  
  Obramowanie elementów div udowadnia, że każdy element div zajmuje pełną szerokość okna przeglądarki. Dzieje się tak bez względu na to, czy w elemencie div umieścimy element blokowy, czy liniowy. Wysokość elementu div jest dobrana tak, by pomieścić zawartość. Pierwszy div zawiera kilka akapitów, więc jego wysokość będzie większa. Drugi zawiera tylko element strong, więc będzie miał mniejszą wysokość. Ponieważ dwa elementy div umieściliśmy w kodzie źródłowym jeden pod drugim, bez żadnego separatora, wizualnie elementy te połączyły się. Dlatego obramowanie znajdujące się pomiędzy dwoma elementami div wydaje się nieco grubsze. Są to w istocie dwie jednopikselowe ramki: dolne obramowanie górnego elementu div oraz górne obramowanie dolnego elementu div. W ten sposób powstaje pozioma ramka podwójnej grubości oddzielająca górny element od dolnego.
  
  346
  
  Część V ♦ Układ strony
  
  Element p jest elementem blokowym, a więc w poziomie wypełnia całą dostępną przestrzeń. Dlatego szare tło akapitów rozciąga się od lewej do prawej krawędzi nadrzędnego elementu div. Ilość tekstu zawartego w elemencie p nie ma wpływu na jego szerokość. Element blokowy wypełnia w poziomie całą dostępną przestrzeń. W stosunku do elementów liniowych nie zaszła żadna zmiana. Wymiar poziomy i pionowy każdego elementu liniowego jest zawsze zminimalizowany. Po elementach tych nie występuje znak złamania wiersza. Wyrazy Lorem ipsum dolor zawarte wewnątrz elementu strong mają czarne tło. Element ipsum jest dodatkowo zawarty w zagnieżdżonym elemencie em o białym tle. Dlatego w czarnym prostokącie zawierającym słowa Lorem ipsum dolor występuje biała przerwa, wewnątrz której widać słowo ipsum.
  
  Rozdział 29.
  
  Obszar zajmowany przez element Każdy z elementów wyświetlanych przez przeglądarkę w obrębie treści strony jest zawarty w prostokątnym obszarze. Przekonaliśmy się o tym w ćwiczeniach 28.2 oraz 28.3. Rysunki 28.2 oraz 28.3 jednoznacznie dowodzą, że bez względu na to, czy dany element jest blokowy, czy liniowy, obszar przez niego zajmowany jest prostokątem. To stwierdzenie rozszerza się na wszystkie inne elementy. Zagadnienia dotyczące obszaru zajmowanego przez element są opisane w specyfikacji pt. CSS basic box model dostępnej pod adresem http://www.w3.org/TR/css3-box/. W specyfikacji języka CSS na określenie obszaru zajmowanego przez element użyty jest termin box. Termin box model opisuje natomiast sposób wyznaczania rozmiarów oraz położenia elementu. W polskiej literaturze informatycznej pojawiają się terminy:  pudełko oraz model pudełkowy,  pole oraz model polowy,  blok oraz model blokowy,  pojemnik oraz rozmieszczanie pojemnika,  ramka oraz model ramkowy.
  
  Prostokąt zajmowany przez element jest podzielony na cztery obszary przedstawione na rysunku 29.1. Od zewnątrz ku środkowi pojawiają się kolejno:  margines, który zawsze jest przezroczysty (ang. margin);  obramowanie (ang. border);  dopełnienie, które może być wypełnione jednolitym tłem lub obrazem
  
  (ang. padding);  zawartość (ang. content).
  
  Część V ♦ Układ strony
  
  348 Rysunek 29.1. Cztery obszary prostokąta zajmowanego przez element
  
  Margines, obramowanie i dopełnienie modyfikujemy poznanymi już właściwościami CSS:  margin (oraz margin-top, margin-right, margin-bottom, margin-left);  border (oraz border-top, border-right, border-bottom, border-left);  padding (oraz padding-top, padding-right, padding-bottom, padding-left).
  
  Do ustalenia wymiarów zawartości służą właściwości width oraz height. Pamiętaj jednak, że mogą one być stosowane tylko do elementów blokowych1. Jeśli w elemencie body umieścisz element div o zawartości takiej jak na listingu 29.1 i sformatujesz go stylami z listingu 29.2, otrzymasz efekt widoczny na rysunku 29.2. Listing 29.1. Element div, który służy do zbadania wpływu właściwości margin, border, padding, width i height
  
  

  Lorem ipsum

  
  
  Listing 29.2. Style formatujące kod z listingu 29.1 do postaci z rysunku 29.2 body { margin: 0; } div { margin: 100px; border: 5px solid black; padding: 40px; width: 250px; height: 150px; 1
  
  Dokładniej: do elementów, dla których bieżącą wartością właściwości display jest block.
  
  Rozdział 29. ♦ Obszar zajmowany przez element
  
  349
  
  Rysunek 29.2. Strona, która tworzą listingi 29.1 oraz 29.2
  
  } p { background: #dadada; margin: 0; }
  
  Na rysunku 29.2 pojawiają się cztery obszary oznaczone literami M. Są to marginesy elementu div. Każdy z nich ma dokładnie 100 pikseli. Gruba linia wskazana strzałką B to obramowanie (border), którego grubość wynosi 5 pikseli. Obszary podpisane strzałkami P reprezentują dopełnienie (padding), które ma 40 pikseli. Strzałki H oraz W wyznaczają obszar przeznaczony na treść elementu div. Wysokość (height) ma 150 pikseli, a szerokość (width) 250 pikseli. Otrzymany element div zajmuje obszar pokryty skośnymi biało-szarymi paskami. Wnętrze elementu div ma wymiary 250×150 i zawiera akapit p. Tło akapitu jest szare. Akapit jest elementem blokowym, zatem jego szerokość jest dobrana tak, by wypełnił on całą dostępną przestrzeń. Dlatego szerokość akapitu wynosi 250 pikseli. Obszar przeznaczony na treść elementu div składa się więc z szarego prostokąta zajętego przez akapit oraz białego prostokąta znajdującego się pod akapitem. Wyznaczmy wymiary obszaru pokrytego przez tak sformatowany element div. Jest to obszar, który na rysunku 29.2 pokrywają biało-szaro skośne paski. Szerokość tego obszaru wyniesie: 100 (lewy margines) + 5 (lewe obramowanie) + 40 (lewe dopełnienie) + 250 (width) + 40 (prawe dopełnienie) + 5 (prawe obramowanie) + 100 (prawy margines)
  
  będzie to więc łącznie: 100 + 5 + 40 + 250 + 40 + 5 + 100 = 540 pikseli
  
  Część V ♦ Układ strony
  
  350
  
  W podobny sposób obliczamy wysokość: 100 (górny margines) + 5 (górne obramowanie) + 40 (górne dopełnienie) + 150 (height) + 40 (dolne dopełnienie) + 5 (dolne obramowanie) + 100 (dolny margines)
  
  Wyniesie więc ona: 100 + 5 + 40 + 150 + 40 + 5 + 100 = 440 pikseli
  
  Innymi słowy w układzie strony WWW na element div sformatowany stylami: div { margin: 100px; border: 5px solid black; padding: 40px; width: 250px; height: 150px; }
  
  musimy przewidzieć prostokąt o wymiarach 540×440 pikseli. Jeśli nie zapewnimy takich wymiarów, układ strony WWW może się wówczas zepsuć. Oczywiście element nie musi być symetryczny (jeśli chodzi o obramowanie, dopełnienie i marginesy). Sformatujmy element p stylami przedstawionymi na listingu 29.3. Listing 29.3. Style nadające elementowi p wymiary 266×416 pikseli p {
  
  }
  
  margin: 10px 20px 30px 0; border-left: 2px solid black border-right: 4px solid black border-top: 12px solid black border-bottom: 1px solid black padding: 0 15px 30px 100px; width: 125px; height: 333px;
  
  Wpis: margin: 10px 20px 30px 0;
  
  oznacza tyle samo co: margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 0;
  
  a: padding: 0 15px 30px 100px;
  
  jest równoważny z: padding-top: 0; padding-right: 15px; padding-bottom: 30px; padding-left: 100px;
  
  Rozdział 29. ♦ Obszar zajmowany przez element
  
  351
  
  Do wyznaczenia szerokości akapitu p bierzemy pod uwagę wartości:  margines lewy: 0,  margines prawy: 20,  obramowanie lewe: 2,  obramowanie prawe: 4,  dopełnienie lewe: 100,  dopełnienie prawe: 15,  szerokość zawartości: 125.
  
  Szerokość wynosi więc: 0 + 20 + 2 + 4 + 100 + 15 + 125 = 266
  
  Przy wyznaczaniu wysokości uwzględniamy:  margines górny: 10,  margines dolny: 30,  obramowanie górne: 12,  obramowanie dolne: 1,  dopełnienie górne: 0,  dopełnienie dolne: 30,  wysokość zawartości: 333.
  
  Po dodaniu wszystkich wartości stwierdzamy, że wysokość wynosi 416 pikseli: 10 + 30 + 12 + 1 + 0 + 30 + 333 = 416
  
  Tak sformatowany element p zajmie zatem w oknie przeglądarki prostokąt o wymiarach 266×416 pikseli. W części źródeł rozmiar elementu blokowego jest podawany z pominięciem marginesu. Podane przeze mnie powyżej wzory i obliczenia dotyczą wymiarów, które należy przewidzieć na element w układzie strony. W takim kontekście należy zawsze pamiętać o uwzględnieniu w wyznaczanym obszarze także marginesu.
  
  Właściwość display Tryb wyświetlania elementu HTML, który posłużył nam do zdefiniowania elementów blokowych i liniowych, możemy modyfikować stylami CSS. Służy do tego właściwość display, która może przyjmować wszystkie wartości wymienione w tabeli 28.6.
  
  Część V ♦ Układ strony
  
  352
  
  Element span wzbogacony o style: span { display: block; }
  
  będzie wyświetlany jako element blokowy. Element div o stylach: div { display: inline; }
  
  będzie natomiast wyświetlany jako element liniowy. Korzystając z właściwości display, każdy element możemy wyświetlać wedle uznania jako liniowy lub jako blokowy. Wykorzystamy to między innymi do przygotowania menu oraz przycisków. Właściwość display nie wpływa na składnię zagnieżdżania elementów. Nawet jeśli zmienisz style elementów div oraz span, tak by div był wyświetlany jako liniowy, a span jako blokowy: div { display: inline; } span { display: block; }
  
  to i tak jedynym poprawnym sposobem zagnieżdżenia będzie:
  
  
  
  Kod: PRZYKŁAD NIEPOPRAWNY
  
  
  
  pozostaje niepoprawny, bez względu na style CSS.
  
  Ćwiczenie 29.1 Wykonaj stronę, która pokaże, że właściwości width oraz height mogą być przypisywane wyłącznie do elementów blokowych. W kodzie strony umieść dwa akapity przedstawione na listingu 29.4. Niech każdy akapit zawiera jeden element span. Pierwszy span oznacz identyfikatorem p1, a drugi — identyfikatorem p2. Listing 29.4. Kod HTML strony z ćwiczenia 29.1

  Lorem ipsum dolor.

  
  
  

  Lorem ipsum dolor.

  
  
  Rozdział 29. ♦ Obszar zajmowany przez element
  
  353
  
  Akapity są oddzielone linią poziomą hr. Jedną z sytuacji, w których stosuję element hr, są takie właśnie ćwiczenia testowe. Następnie sformatuj elementy span stylami przedstawionymi na listingu 29.5. Listing 29.5. Style CSS strony z ćwiczenia 29.1 span#p1 { width: 200px; height: 200px; background: rgb(200,200,200); border: 2px solid black; } span#p2 { width: 200px; height: 200px; background: rgb(200,200,200); border: 2px solid black; display: block; }
  
  Oba elementy mają szare tło (właściwość background) oraz czarne obramowanie (właściwość border). Ich wymiary są ustalone na 200×200 pikseli (właściwości width oraz height). Pierwszy z nich jest wyświetlany jako element liniowy, a drugi jest wyświetlany w trybie block (właściwość display). Jeśli ćwiczenie to otworzysz w przeglądarce, to ujrzysz stronę taką jak na rysunku 29.3. Widać wyraźnie, że w odniesieniu do pierwszego elementu span właściwości width oraz height nie działają. Pierwszy element span ma wymiary minimalnego prostokąta, który pomieści zawarte w nim słowo ipsum. Właściwości width oraz height działają wyłącznie dla elementów wyświetlanych w trybie block. Rysunek 29.3. Wpływ właściwości width oraz height na element liniowy i na element blokowy
  
  Część V ♦ Układ strony
  
  354
  
  Wyśrodkowanie elementu blokowego W celu wyśrodkowania elementu blokowego należy skorzystać z właściwości margin. Przypisanie wartości auto lewemu oraz prawemu marginesowi spowoduje wyśrodkowanie elementu wewnątrz dostępnej przestrzeni. Nagłówek zawarty w treści dokumentu:
  
  Lorem ipsum
  
  możesz wyśrodkować na stronie stylami: h1 { width: 400px; margin-left: auto; margin-right: auto; background: yellow; }
  
  Zwróć uwagę, że powyższe rozwiązanie różni się istotnie od stylów: h1 { text-align: center; background: yellow; }
  
  W przypadku użycia właściwości width: 400px w połączeniu z margin-left: auto oraz margin-right: auto otrzymujesz element o szerokości 400 pikseli, który jest wyśrodkowany w obrębie przestrzeni przeznaczonej na element div. Użycie właściwości text-align powoduje wyśrodkowanie tekstu. Szerokość elementu h1 jest równa szerokości okna przeglądarki (pomniejszonej o domyślny margines elementu body). Wymiary elementu h1 możesz stwierdzić na podstawie żółtego koloru tła. Innym sposobem zapisu właściwości auto lewego i prawego marginesu jest: margin: 0 auto;
  
  Zapis taki przypisuje wartości:  marginesowi górnemu i dolnemu: 0,  marginesowi lewemu i prawemu: auto.
  
  W ten sposób możesz na przykład wyśrodkować element div: ...
  
  ...
  
  Rozdział 29. ♦ Obszar zajmowany przez element
  
  355
  
  Lorem ipsum dolor sit amet...
  
  Pamiętaj, że domyślnie elementy blokowe zajmują całą dostępną szerokość. Pozbawienie powyższych stylów właściwości width: div { margin: 0 auto; }
  
  nie da zatem zamierzonego efektu. Element div będzie zajmował całą szerokość okna, przez co i tak będzie wyśrodkowany (nawet bez wpisu margin: 0 auto).
  
  Ćwiczenie 29.2 Wykonaj stronę WWW, która będzie zawierała wyśrodkowany nagłówek h1 o szerokości 400 pikseli. W celu stwierdzenia położenia elementu h1 zmodyfikuj kolor jego tła. Rozwiązanie ćwiczenia jest przedstawione na listingu 29.6. Listing 29.6. Strona zawierająca wyśrodkowany nagłówek h1 o szerokości 400 pikseli ...
  
  ...
  
  
  
  Lorem ipsum
  
  Po wykonaniu ćwiczenia 29.2 uruchom przeglądarkę Firefox i przejdź do wtyczki Firebug. Panel Układ pozwala na dokładne zbadanie wymiarów i położenia każdego elementu zawartego w kodzie witryny. Diagram widoczny w prawej dolnej części rysunku 29.4 prezentuje obszary marginesu, obramowania, dopełnienia oraz treści elementu h1 wybranego w drzewie HTML. W przeglądarce Internet Explorer w trybie quirks mode środkowanie elementu blokowego poprzez ustalanie wartości marginesu lewego i prawego na auto nie działa. Rozwiązaniem, którego należy użyć w przeglądarce IE pracującej w trybie wstecznej zgodności, jest: text-align: center;
  
  To kolejny przykład istotnych różnic w interpretacji CSS w trybie standardów i w trybie wstecznej zgodności. Takie rozwiązanie jest oczywiście przestarzałe. Nigdy nie stosuj właściwości text-align do wyśrodkowania elementów blokowych!
  
  Część V ♦ Układ strony
  
  356
  
  Rysunek 29.4. Panel Układ wtyczki Firebug ilustruje wymiary marginesów, obramowania, dopełnienia oraz treści
  
  Łączenie marginesów pionowych Pionowe marginesy dwóch elementów blokowych umieszczonych jeden pod drugim ulegają połączeniu. Margines pionowy oddzielający elementy jest równy większej z podanych wartości, a nie ich sumie. Jeśli w kodzie HTML wystąpią elementy h1 oraz div: LOREM IPSUM
  
  sformatowane stylami: h1 { margin-bottom: 100px; } div { margin-top: 90px; }
  
  to wydawać by się mogło, że oddzielający je margines wyniesie 190 pikseli. W rzeczywistości margines ten będzie równy większej z wartości, zatem wyniesie 100 pikseli.
  
  Rozdział 29. ♦ Obszar zajmowany przez element
  
  357
  
  Ćwiczenie 29.3 Wykonaj stronę, która sprawdzi łączenie marginesów pionowych. W kodzie strony umieść elementy h1 oraz div sformatowane tak jak na listingu 29.7. Następnie, wykorzystując dowolny program graficzny, sprawdź odległość między szarymi prostokątami zawierającymi napisy LOREM oraz IPSUM. Listing 29.7. Strona badająca łączenie marginesów pionowych h1 { width: 400px; margin: 100px auto; background: #e4e4e4; } div { margin: 90px; background: #e4e4e4; } ... LOREM IPSUM
  
  Po wykonaniu strony z listingu 29.7 otwórz ją w dowolnej przeglądarce. Przyciskami Alt+PrintScreen wykonaj zrzut okna przeglądarki. Otrzymany obraz wklej w dowolnym programie graficznym. Jeśli korzystasz z programu GIMP, użyj opcji Edycja/Wklej jako nowy obraz (skrót: Ctrl+Shift+V). Następnie, wykorzystując narzędzie do pomiaru odległości, sprawdź, czy szare prostokąty są odsunięte od siebie o 100 pikseli. Sposób wykonywania pomiaru jest widoczny na rysunku 29.5. Rysunek 29.5. Łączenie marginesów pionowych
  
  Część V ♦ Układ strony
  
  358
  
  Pamiętaj, że łączeniu podlegają wyłącznie marginesy pionowe oddzielające dwa przylegające do siebie elementy blokowe. Marginesy poziome nie podlegają łączeniu. W starszych wersjach przeglądarki Internet Explorer marginesy poziome podlegały czasami łączeniu, jednak było to zachowanie błędne, które we współczesnych wersjach IE już nie występuje. Pomiar odległości na stronie WWW ułatwia opcja Różne/Wyświetl linijkę wtyczki Web Developer Toolbar przeglądarki Firefox. Wykorzystanie programu graficznego do pomiaru odległości jest znacznie bardziej pracochłonne, jednak może być wykonane dla dowolnej przeglądarki.
  
  Wymiary minimalne i maksymalne Ostatnimi właściwościami CSS związanymi z wymiarami elementów blokowych są:  min-width — minimalna szerokość elementu;  max-width — maksymalna szerokość elementu;  min-height — minimalna wysokość elementu;  max-height — maksymalna wysokość elementu.
  
  Służą one do ustalenia minimalnych oraz maksymalnych wymiarów elementu. Jeśli element h1 sformatujesz stylami: h1 { min-width: 400px; max-width: 800px; min-height: 100px; max-height: 200px; }
  
  to jego szerokość wyniesie od 400 do 800 pikseli, zaś wysokość — od 100 do 200 pikseli. Czynnikami, które wpłyną na wymiary elementu, będą szerokość okna przeglądarki oraz ilość zawartego w nim tekstu.
  
  Ćwiczenie 29.4 Wykonaj stronę, która sprawdzi wpływ szerokości okna przeglądarki, ilości tekstu zawartego w elemencie oraz właściwości min-width, max-width, min-height oraz max-height na wymiary elementu. W kodzie strony umieść element h1 sformatowany tak jak na listingu 29.8.
  
  Rozdział 29. ♦ Obszar zajmowany przez element
  
  359
  
  Listing 29.8. Strona testowa do badania minimalnych i maksymalnych wymiarów elementu h1 { min-width: 400px; max-width: 800px; min-height: 100px; max-height: 200px; } ... Lorem
  
  Stronę z listingu 29.8 otwórz w przeglądarce i zmniejszaj stopniowo szerokość okna przeglądarki. Szary prostokąt pozostanie niezmieniony, dopóki wymiar okna będzie większy niż 800 pikseli. Gdy okno przeglądarki będzie miało wymiar pomiędzy 400 a 800 pikseli, szary prostokąt będzie płynnie dostosowywał swój wymiar do wymiaru okna. Gdy szerokość okna przeglądarki będzie mniejsza niż 400 pikseli, wymiar szarego prostokąta pozostanie równy 400, a w dolnej części okna pojawi się poziomy pasek przewijania. W celu sprawdzenia wpływu właściwości max-height na wysokość elementu w miejsce słowa Lorem wprowadź cały akapit Lorem ipsum. Wysokość elementu h1 zostanie wówczas ustalona na 200 pikseli. Tylko początkowy fragment zawartości zmieści się w szarym prostokącie. Duża część będzie wystawała poniżej szarego prostokąta. Jeśli w stylach CSS elementu h1 dodasz właściwość: overflow: hidden;
  
  wówczas treść wystająca poza element nie będzie widoczna.
  
  360
  
  Część V ♦ Układ strony
  
  Rozdział 30.
  
  Elementy pływające Omawiając różnice pomiędzy elementami liniowymi i blokowymi, opisaliśmy domyślny sposób wizualnej prezentacji obu typów elementów. Elementy blokowe, które nie są zagnieżdżone: A B C ...
  
  są domyślnie pozycjonowane w oknie przeglądarki jeden pod drugim. Każdy z nich zajmie całą dostępną szerokość. Ilustruje to rysunek 28.2. Jeśli elementy blokowe zagnieździsz:
  
  

  Lorem...

  
  
  wtedy obszar zajmowany przez element wewnętrzny wypadnie wewnątrz obszaru elementu zewnętrznego. Taki przykład jest widoczny na rysunku 28.3, gdzie szare pasy są akapitami występującymi wewnątrz obramowanych elementów div. Oczywiście umieszczanie elementów blokowych jeden pod drugim jest niewystarczające, gdyż uniemożliwia tworzenie układów wielokolumnowych. Układy wielokolumnowe możemy tworzyć na dwa sposoby: stosując właściwość float oraz wykorzystując zaawansowane metody pozycjonowania.
  
  Właściwość float Elementy blokowe mogą być dosuwane do lewej bądź prawej krawędzi elementu, w którym są zawarte. Służy do tego właściwość float o wartościach left lub right. Ponieważ właściwość float zmienia sposób ustalania szerokości elementu blokowego, łączymy ją zazwyczaj z właściwością width, która ustali szerokość dosuwanego elementu.
  
  Część V ♦ Układ strony
  
  362
  
  Jeśli element div sformatujemy tak jak na listingu 30.1, wizualny efekt będzie wówczas taki jak na rysunku 30.1. Element div zostanie dosunięty do lewej krawędzi okna. Po prawej jego stronie pozostanie wolna przestrzeń, którą możemy wypełnić kolejnymi elementami dosuniętymi w podobny sposób. Listing 30.1. Element div, który po prawej stronie pozostawia wolną przestrzeń div { width: 100px; float: left; background: gray; } ... A
  
  Rysunek 30.1. Element div z listingu 30.1
  
  Dodajmy w kodzie z listingu 30.1 kilka dodatkowych elementów div i ustalmy margines elementów na 10 pikseli. Otrzymamy kod widoczny na listingu 30.2. Tym razem witryna wygląda tak jak na rysunku 30.2. Listing 30.2. Kilka elementów div dosuniętych do lewej krawędzi ... div { width: 100px; float: left; background: gray; margin: 10px; } ... A B C ...
  
  Rozdział 30. ♦ Elementy pływające
  
  363
  
  Rysunek 30.2. Wygląd dokumentu z listingu 30.2
  
  Każdy element div zostaje dosunięty do prawej krawędzi poprzedniego elementu, z zachowaniem dziesięciopikselowego marginesu. Liczba elementów div, które się zmieszczą w każdym wierszu, zależy od szerokości okna przeglądarki. Na każdy element potrzeba 120 pikseli, co wynika z wzoru: 10 (lewy margines) + 100 (width) + 10 (prawy margines) = 120
  
  Zmieniając szerokość okna przeglądarki, decydujesz o tym, ile elementów będzie wyświetlanych w pierwszym wierszu, ile w drugim, a ile w kolejnych. Jak będzie wyglądała strona z listingu 30.2 po usunięciu deklaracji float: left? Jak będzie wyglądała, gdy usuniesz także deklarację width: 100px? Jeśli nie potrafisz odpowiedzieć na to pytanie, wykonaj odpowiedni test!
  
  W podobny sposób możemy dosuwać elementy do prawej strony. Jeśli w kodzie z listingu 30.2 zmienimy wartość właściwości float z left na right, strona będzie wówczas wyglądała tak jak na rysunku 30.3. Zwróć uwagę, że na rysunku 30.3 litery A, B, C itd. pojawiają się w odwrotnej kolejności. Jeśli chciałbyś, by litery pojawiały się na stronie w kolejności A, B, C, to musisz zmienić kolejność elementów w kodzie HTML na odwrotną: F E ... B A
  
  Elementy, które mają właściwość float o wartości left lub right, nazywamy pływającymi.
  
  Część V ♦ Układ strony
  
  364 Rysunek 30.3. Wygląd strony z listingu 30.2 po zmianie właściwości float: left na float: right
  
  Spróbuj w kodzie z listingu 30.2 usunąć właściwość width. Efekt będzie taki jak na rysunku 30.4. Jako wniosek zapamiętaj, że szerokość elementów pływających, dla których nie określono właściwości width, jest minimalizowana. Szerokość każdego z elementów widocznych na rysunku 30.4 wynosi dokładnie tyle, by pomieścić jedną literę1. Rysunek 30.4. Rezultat usunięcia z listingu 30.2 właściwości width
  
  Ćwiczenie 30.1 Wykonaj stronę WWW przedstawioną na listingu 30.2 oraz rysunku 30.2.
  
  Ćwiczenie 30.2 Zmodyfikuj stronę wykonaną w ćwiczeniu 30.2 tak, by wyglądała jak na rysunku 30.3. 1
  
  Tyle samo wyniosłaby szerokość elementów liniowych.
  
  Rozdział 30. ♦ Elementy pływające
  
  365
  
  Układy kolumnowe Stosując elementy pływające, możemy w prosty sposób przygotowywać układy wielokolumnowe. Wystarczy wewnątrz pojemnika div o zadanej szerokości umieścić elementy pływające, których suma szerokości nie przekracza szerokości pojemnika. Elementy zawarte w pojemniku utworzą wówczas kolumny. Przygotujmy układ podzielony na dwie kolumny: lewą i prawą. Szerokość kolumny lewej ustalimy na 100, a prawej — na 200 pikseli. Kod HTML rozwiązania jest widoczny na listingu 30.3, a kod CSS — na listingu 30.4. Strona z listingów 30.3 oraz 30.4 będzie wyglądała tak jak na rysunku 30.5. Listing 30.3. Kod HTML układu dwukolumnowego z rysunku 30.5
  
  Lorem ipsum...
  
  In eget tellus...
  
  Listing 30.4. Style CSS układu dwukolumnowego z rysunku 30.5 #pojemnik { width: 400px; margin: 0 auto; } #lewa { width: 100px; float: left; background: red; } #prawa { width: 200px; float: right; background: green; }
  
  Ćwiczenie 30.3 Wykonaj stronę WWW przedstawioną na listingach 30.3 i 30.4 o wyglądzie takim jak na rysunku 30.5. Tworząc układy kolumnowe z wykorzystaniem elementów pływających, należy pamiętać o tym, że gdy szerokość kolumn przekroczy szerokość pojemnika, układ kolumnowy popsuje się. Kolumny, dla których zabraknie miejsca, zostaną przesunięte pod spód. Style CSS z listingu 30.4 nadają pojemnikowi szerokość 400 pikseli, kolumna lewa ma 100 pikseli szerokości, a kolumna prawa — 200 pikseli. Ponieważ szerokość kolumn w sumie wynosi 300, kolumny mieszczą się w pojemniku.
  
  Część V ♦ Układ strony
  
  366 Rysunek 30.5. Strona dwukolumnowa z listingów 30.3 oraz 30.4
  
  Jeśli szerokość kolumny lewej zwiększysz do 220 pikseli, kolumna prawa nie zmieści się wówczas i zostanie przesunięta poniżej kolumny lewej, tak jak na rysunku 30.6.
  
  Rysunek 30.6. Efekt uzyskiwany, gdy szerokość kolumn przekracza szerokość pojemnika
  
  Rozdział 30. ♦ Elementy pływające
  
  367
  
  Ćwiczenie 30.4 Zmodyfikuj style strony z ćwiczenia 30.3. Elementowi o identyfikatorze #lewa nadaj szerokość 220 pikseli. Otrzymasz efekt widoczny na rysunku 30.6.
  
  Znikające tło pojemnika Zmodyfikuj stronę przedstawioną na listingu 30.5 (wykonaną przez Ciebie w ćwiczeniu 30.3) tak, by element div o identyfikatorze pojemnik miał żółte tło: #pojemnik { width: 400px; margin: 0 auto; background: yellow; }
  
  Po otworzeniu zmodyfikowanej strony powinieneś zauważyć, że w przeglądarce widać wyłącznie kolory zielony i czerwony. Żółte tło elementu div#pojemnik nie jest nigdzie widoczne. Przyczyną takiego zachowania jest fakt, że elementy pływające nie wymuszają wysokości elementu nadrzędnego2. Obejmujący je element div#pojemnik przyjmuje, że każdy z zawartych w nim elementów pływających ma wysokość 0. W ten sposób ponieważ w żółtym pojemniku nie jest umieszczona żadna dodatkowa zawartość, jego wysokość wynosi 0. W związku z tym żółte tło nie jest nigdzie widoczne. Jeśli elementowi div#pojemnik spróbujesz nadać obramowanie: #pojemnik { width: 400px; margin: 0 auto; border: 1px solid black; }
  
  ujrzysz wówczas jedną cienką linię w górnej części strony. Wynika to z tego, że obramowanie elementu o wysokości 0 spowoduje narysowanie górnej i dolnej ramki w tym samym miejscu. Da to efekt jednopikselowej linii. Jedną z metod wymuszania wysokości elementów, które zawierają elementy pływające, jest tzw. czyszczenie, które poznamy w kolejnym punkcie.
  
  Ćwiczenie 30.5 Zmodyfikuj style strony z ćwiczenia 30.3. Elementowi div#pojemnik nadaj żółte tło i jednopikselowe obramowanie. Jeśli stronę z ćwiczenia 30.5 otworzysz w przeglądarce Internet Explorer w trybie quirks mode, ujrzysz wówczas żółte tło elementu div#pojemnik. 2
  
  Powody, dla których elementy pływające nie generują wysokości, zostały omówione w rozdziale 16. w punkcie „Dlaczego elementy pływające mają wysokość 0?”.
  
  Część V ♦ Układ strony
  
  368
  
  Czyszczenie elementów pływających Do wymuszania wysokości elementów pływających możemy zastosować dwie metody. Pierwsza z nich opiera się na właściwości clear, a druga — na właściwości override.
  
  Właściwość clear W celu wymuszania wysokości elementów pływających przy użyciu właściwości clear o wartości both należy w kodzie HTML przed zamknięciem pojemnika dodać dodatkowy element. Będzie on miał nadaną właściwość clear o wartości both. Możemy do tego użyć np. elementu br. Kod z listingu 30.5 będzie po otworzeniu w przeglądarce wyglądał tak jak na rysunku 30.7. Listing 30.5. Strona, w której wysokość elementu #pojemnik jest wymuszona przez element br klasy czyszczenie #pojemnik { width: 400px; margin: 0 auto; background: yellow; } #lewa { width: 100px; float: left; background: red; } #prawa { width: 200px; float: right; background: green; } .czyszczenie { clear: both; }
  
  ... ...
  
  
  Ćwiczenie 30.6 Wykonaj ćwiczenie z listingu 30.5. Otrzymana strona powinna wyglądać tak jak na rysunku 30.7. W roli elementu czyszczącego może wystąpić element br: .czyszczenie { clear: both; }
  
  Rozdział 30. ♦ Elementy pływające
  
  369
  
  Rysunek 30.7. Wygląd strony z listingu 30.5 ...
  
  
  lub element div:
  
  .czyszczenie { clear: both; height: 0; } ...
  
  Zaletą elementu div jest to, że nie będzie on generował pionowego odstępu. Wadą rozwiązania wykorzystującego właściwość clear jest to, że kod HTML musi zawierać dodatkowe elementy.
  
  Właściwość overflow Użycie właściwości overflow sprowadza się do dodania jednej reguły CSS w opisie stylu pojemnika: #pojemnik { ... overflow: hidden; }
  
  Kod HTML takiego rozwiązania nie zawiera żadnych dodatkowych elementów. Zarys rozwiązania jest przedstawiony na listingu 30.6.
  
  Część V ♦ Układ strony
  
  370
  
  Listing 30.6. Wymuszanie wysokości pojemnika przy użyciu właściwości overflow #pojemnik { width: 400px; margin: 0 auto; background: yellow; overflow: hidden; } #lewa { width: 100px; float: left; background: red; } #prawa { width: 200px; float: right; background: green; } ...
  
  Lorem ipsum...
  
  In eget tellus...
  
  Powyższe rozwiązanie jest opisane na blogu Petera Paula Kocha pod adresem http://www. quirksmode.org/css/clearing.html.
  
  Ćwiczenie 30.7 Wykonaj ćwiczenie z listingu 30.6. Otrzymana strona powinna wyglądać tak jak na rysunku 30.7.
  
  Rozdział 31.
  
  Zaawansowane metody pozycjonowania elementów blokowych Właściwość position Kolejną ważną właściwością dotyczącą pozycjonowania elementów blokowych jest position. Właściwość ta może przyjmować jedną z czterech wartości: static, relative, absolute lub fixed. W zależności od przyjmowanej wartości mówimy o pozycjonowaniu statycznym, względnym, bezwzględnym lub trwałym. W połączeniu z właściwością position będziemy stosowali także właściwości left, right, top oraz bottom, które ustalą położenie pozycjonowanego elementu. Wpływ właściwości position na położenie elementów HTML w układzie strony omówimy, formatując stylami CSS kod z listingu 31.1. Będziemy modyfikowali reguły CSS elementu o identyfikatorze #pozycjonowany, obserwując wpływ wprowadzanych wartości na układ elementów. Listing 31.1. Strona, która posłuży do zbadania wpływu właściwości position na układ elementów div { border: 1px solid blue; margin: 10px; } #pozycjonowany { background: red; border: 5px solid black; } ...
  
  Część V ♦ Układ strony
  
  372
  
  1 Lorem ipsum dolor sit amet... 2 Lorem ipsum dolor sit amet... 3 Lorem ipsum dolor sit amet... 4 Lorem ipsum dolor sit amet... 5 Lorem ipsum dolor sit amet... 6 Lorem ipsum dolor sit amet... 7 Lorem ipsum dolor sit amet... ...
  
  Strona z listingu 31.1 będzie w oknie przeglądarki wyglądała tak jak na rysunku 31.1. Dzięki właściwości margin: 10px elementy div są od siebie odsunięte, zaś obramowanie oraz tło elementu #pozycjonowany pozwalają na dokładne sprawdzenie położenia każdego elementu. Cyfry umieszczone wewnątrz elementów div ułatwiają identyfikację obramowanych prostokątów.
  
  Rysunek 31.1. Strona z listingu 31.1
  
  Analizując właściwość position, należy zwrócić uwagę na trzy aspekty:  W jaki sposób element #pozycjonowany wpływa na układ pozostałych elementów div?  Względem którego punktu wyznaczane jest położenie elementu #pozycjonowany?
  
  Innymi słowy jaki jest kontekst pozycjonowania?
  
   Jakie są wymiary i położenie elementu #pozycjonowany?  Jaki jest wpływ kolejności elementów HTML w kodzie źródłowym strony
  
  na układ?
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  373
  
  Znajomość czterech powyższych faktów w odniesieniu do każdego rodzaju pozycjonowania umożliwi nam wykorzystanie właściwości position w praktyce.
  
  Ćwiczenie 31.1 Wykonaj stronę przedstawioną na listingu 31.1 i na rysunku 31.1.
  
  Pozycjonowanie statyczne Domyślną wartością właściwości position jest static. Jeśli w stylach pomijamy wartość position: div { }
  
  to jest to równoważne zapisowi: div { position: static; }
  
  Opis układu elementów blokowych zawarty w rozdziale 28. w punkcie „Domyślny format wizualny elementów blokowych i liniowych” jest właśnie opisem pozycjonowania statycznego. W pozycjonowaniu statycznym:  Element blokowy domyślnie zajmuje całą dostępną dla niego szerokość.  Wysokość elementu blokowego jest ustalana na podstawie jego zawartości.
  
  Jest to najmniejsza możliwa wartość, dla której treść zmieści się wewnątrz elementu.  Elementy blokowe, które nie są zagnieżdżone, układają się jeden pod drugim.  Jeśli zagnieździmy jeden element blokowy w drugim, to obszar zajmowany
  
  przez dziecko będzie leżał wewnątrz obszaru zajmowanego przez rodzica. Powyższy algorytm pozycjonowania elementów jest określany jako normalne pozycjonowanie elementów (ang. normal flow).
  
  Stosując wartość position: static, nie możemy korzystać z właściwości left, right, top oraz bottom. Położenie i rozmiar elementu są wyznaczane przez podany powyżej normalny algorytm pozycjonowania. Oczywiście kolejność występowania elementów w kodzie źródłowym strony jest bardzo ważna. Jeśli element #pozycjonowany przeniesiesz na początek kodu HTML: 4 Lorem ipsum dolor sit amet... 1 Lorem ipsum dolor sit amet... 2 Lorem ipsum dolor sit amet... 3 Lorem ipsum dolor sit amet... 5 Lorem ipsum dolor sit amet... ...
  
  Część V ♦ Układ strony
  
  374
  
  wówczas pojawi się on na rysunku 31.1 jako pierwszy. Jeśli umieścisz go na końcu znaczników, to na stronie pojawi się jako ostatni. Elementy HTML pojawiają się na stronie WWW w kolejności takiej samej jak w kodzie źródłowym. Pozycjonowanie statyczne ilustrują listing 31.1 oraz rysunek 31.1.
  
  Ćwiczenie 31.2 W ćwiczeniu 31.1 dodaj właściwości left oraz top: #pozycjonowany { background:red; border: 5px solid black; left: 100px; top: 200px; }
  
  Przekonaj się, że właściwości te nie mają żadnego wpływu na położenie i wymiar elementu #pozycjonowany. Po dodaniu właściwości left oraz top strona będzie w dalszym ciągu wyglądała tak jak na rysunku 31.1.
  
  Pozycjonowanie względne Jeśli właściwości position nadamy wartość relative: position: relative
  
  wówczas mówimy, że element jest pozycjonowany względnie. W tej metodzie pozycjonowania:  Element ma taki sam wpływ na pozostałe elementy jak w pozycjonowaniu
  
  statycznym.  Właściwości left, top, right i bottom przesuwają element #pozycjonowany.  Przesunięcie elementu #pozycjonowany jest obliczane względem jego lewego
  
  górnego narożnika. Jeśli w kodzie z listingu 31.1 dodamy właściwości przedstawione na listingu 31.2, to strona będzie wyglądała tak jak na rysunku 31.2. Listing 31.2. Pozycjonowanie względne #pozycjonowany { background:red; border: 5px solid black; position: relative; left: 150px; top: 30px; }
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  375
  
  Rysunek 31.2. Pozycjonowanie względne
  
  Zwróć uwagę, że na rysunku 31.2 pomiędzy elementami div zawierającymi cyfry 3 oraz 5 występuje przerwa, w której zmieściłby się element #pozycjonowany. Przerwa ta będzie identyczna, bez względu na to, w którym miejscu wizualnie pojawi się element #pozycjonowany. Dzieje się tak dlatego, że elementy pozycjonowane względnie wpływają na pozostałe elementy strony identycznie jak przy pozycjonowaniu statycznym. Innymi słowy wolna przestrzeń pomiędzy trzecim i piątym elementem div na rysunku 31.2 jest identyczna z obszarem zajmowanym przez wyróżniony element div na rysunku 31.1. Położenie elementu pozycjonowanego względnie możemy ustalić właściwościami left, top, right oraz bottom. Wartości: left: 150px; top: 30px;
  
  są liczone względem zaznaczonego na rysunku 31.3 punktu A. Najważniejszą cechą pozycjonowania względnego jest zmiana punktu, względem którego liczone są współrzędne. Takie działanie jest określane jako modyfikacja kontekstu pozycjonowania.
  
  Część V ♦ Układ strony
  
  376 Rysunek 31.3. Wpływ właściwości top oraz left na położenie elementu pozycjonowanego względnie
  
  Element pozycjonowany względnie stylami: #pozycjonowany { position: relative; }
  
  będzie miał wymiary i położenie identyczne jak w trybie pozycjonowania statycznego, czyli takie jak na rysunku 31.1. Początek układu współrzędnych dla właściwości left, top, right oraz bottom znajdzie się jednak w punkcie oznaczonym na rysunku 31.3 literą A. Praktyczne znaczenie tego okaże się bardzo istotne, o czym przekonasz się w punkcie „Pozycjonowanie kontekstowe”.
  
  Ćwiczenie 31.3 Wykonaj stronę, na której element #pozycjonowany będzie pozycjonowany względnie. Użyj kodu z listingów 31.1 oraz 31.2. Powinieneś otrzymać stronę przedstawioną na rysunku 31.2.
  
  Pozycjonowanie bezwzględne Kolejnym sposobem pozycjonowania jest pozycjonowanie bezwzględne. Pozycjonowanie bezwzględne ma dwie ważne cechy:  Element pozycjonowany bezwzględnie nie ma żadnego wpływu na inne elementy.
  
  Pozostałe elementy zachowują się tak, jakby elementu pozycjonowanego bezwzględnie nie było w kodzie HTML.  Położenie elementu zostaje ustalone na podstawie bieżącego kontekstu.
  
  Domyślnym kontekstem pozycjonowania jest lewy górny narożnik przeglądarki.
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  377
  
  Kod z listingu 31.1 wzbogacony o style widoczne na listingu 31.3 da efekt przedstawiony na rysunku 31.4. Listing 31.3. Pozycjonowanie bezwzględne #pozycjonowany { background:red; border: 5px solid black; position: absolute; left: 150px; top: 30px; }
  
  Rysunek 31.4. Pozycjonowanie bezwzględne
  
  Analizując rysunek 31.4, zwróć uwagę, że pomiędzy elementami div zawierającymi cyfry 3 oraz 5 nie występuje żadna przerwa. Powodem jest to, że element pozycjonowany bezwzględnie zostaje wyjęty z normalnego układu elementów. Elementy: 1 2 3 5 6 ...
  
  Lorem Lorem Lorem Lorem Lorem
  
  ipsum ipsum ipsum ipsum ipsum
  
  dolor dolor dolor dolor dolor
  
  sit sit sit sit sit
  
  amet... amet... amet... amet... amet...
  
  są pozycjonowane w taki sposób, jakby elementu div#pozycjonowany w ogóle nie było w kodzie HTML. Nie ma więc również znaczenia, czy umieścisz go na samym początku:
  
  Część V ♦ Układ strony
  
  378 4 Lorem ipsum dolor sit amet... 1 Lorem ipsum dolor sit amet... 2 Lorem ipsum dolor sit amet... ...
  
  czy na samym końcu: 1 Lorem ipsum dolor sit amet... 2 Lorem ipsum dolor sit amet... ... 4 Lorem ipsum dolor sit amet...
  
  Miejsce występowania elementu pozycjonowanego bezwzględnie w kodzie HTML nie ma znaczenia. Domyślnym kontekstem pozycjonowania jest lewy górny narożnik przeglądarki. Jeśli nie zmienimy kontekstu pozycjonowania, to właściwości left oraz top odnoszą się do lewego górnego narożnika przeglądarki. Wyróżniony element widoczny na rysunku 31.4 jest umieszczony 150 pikseli na prawo od lewej krawędzi przeglądarki oraz 30 pikseli w dół od górnej krawędzi przeglądarki. Odpowiadają za to właściwości: left: 150px; top: 30px;
  
  Jedyną metodą zmiany kontekstu pozycjonowania jest użycie właściwości: position: relative
  
  Ćwiczenie 31.4 Wykonaj stronę, na której element #pozycjonowany będzie pozycjonowany bezwzględnie. Użyj kodu z listingów 31.1 oraz 31.3. Powinieneś otrzymać stronę przedstawioną na rysunku 31.4.
  
  Pozycjonowanie trwałe Pozycjonowanie trwałe (ang. fixed) różni się od pozycjonowania bezwzględnego tylko tym, że element nie podlega przewijaniu. Elementy pozycjonowane trwale pozostają na swoim miejscu nawet wtedy, gdy strona zostanie przewinięta do dołu. Jeśli witrynę z listingu 31.1 sformatujesz stylami z listingu 31.4, wówczas po przewinięciu witryny w dół otrzymasz efekt przedstawiony na rysunku 31.5. Zwróć uwagę na położenie suwaka widocznego z prawej strony okna przeglądarki. Listing 31.4. Pozycjonowanie trwałe #pozycjonowany { background: red; border: 5px solid black;
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  379
  
  Rysunek 31.5. Pozycjonowanie trwałe
  
  }
  
  position: fixed; left: 150px; top: 30px;
  
  Ćwiczenie 31.5 Wykonaj stronę, na której element #pozycjonowany będzie pozycjonowany trwale. Użyj kodu z listingów 31.1 oraz 31.4. Powinieneś otrzymać stronę przedstawioną na rysunku 31.5. Po otworzeniu strony w przeglądarce przewiń treść tak, by widoczny stał się akapit zawierający liczbę 10.
  
  Pozycjonowanie kontekstowe Bardzo ważnym sposobem pozycjonowania jest połączenie pozycjonowania względnego z pozycjonowaniem bezwzględnym lub względnym. Postępowanie takiego typu jest określane jako pozycjonowanie względnie bezwzględne (ang. absolute-relative) lub pozycjonowanie kontekstowe. Dotyczy ono elementów zagnieżdżonych i pozwala na przygotowywanie graficznych kontrolek o zadanych wymiarach (np. menu strony), które zawierają mniejsze kontrolki (np. przyciski).
  
  Część V ♦ Układ strony
  
  380
  
  Istota tego typu pozycjonowania polega na tym, by w elemencie nadrzędnym zmienić kontekst pozycjonowania, pozostawiając element na swoim miejscu. Elementy wewnętrzne pozycjonujemy względem lewego górnego narożnika kontrolki nadrzędnej. Przyjrzyjmy się stronie przedstawionej na listingu 31.5. Jej wygląd jest przedstawiony na rysunku 31.6. Listing 31.5. Pozycjonowanie względnie bezwzględne div { border: 1px solid black; background: aqua; width: 500px; height: 200px; position: relative; } h1 { margin: 0; background: black; color: white; width: 200px; height: 50px; position: absolute; left: 50px; top: 20px; } h2 { margin: 0; background: black; color: white; width: 150px; height: 50px; position: absolute; left: 300px; top: 120px; } ...
  
  Lorem ipsum Dolor sit amet
  
  Na listingu 31.5 widoczny jest jeden element div zawierający elementy h1 oraz h2:
  
  Lorem ipsum Dolor sit amet
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  381
  
  Rysunek 31.6. Pozycjonowanie względnie bezwzględne
  
  Element div chcemy przekształcić w większy element graficzny o wymiarach 500×200 pikseli, wewnątrz którego zawarte będą dwa mniejsze elementy. Sedno zadania polega na tym, by układ elementów tworzących cały element div nie ulegał zmianie, bez względu na położenie na stronie. Chcemy kontrolkę div sformatować w taki sposób, by można ją było dowolnie przemieszczać na stronie WWW oraz w kodzie HTML, pod warunkiem, że w układzie przeznaczymy na nią obszar o wymiarach 500×200 pikseli. W celu sformatowania kontrolki najpierw ustalamy jej wymiary i zmieniamy kontekst pozycjonowania: div { width: 500px; height: 200px; position: relative; }
  
  Dzięki wpisowi position: relative modyfikujemy kontekst pozycjonowania. Elementy zawarte wewnątrz elementu div będą pozycjonowane nie względem lewego górnego narożnika okna przeglądarki, a względem lewego górnego narożnika elementu div. Element div pozostawiamy na swoim miejscu, zatem nie stosujemy właściwości left, top, bottom i right. Wpis: position: relative;
  
  z listingu 31.5 ma za zadanie wyłącznie zmianę kontekstu pozycjonowania. Element div pozostawiamy na swoim miejscu.
  
  Wszystkie elementy zawarte wewnątrz elementu div, czyli nagłówki h1 oraz h2, pozycjonujemy bezwzględnie. Podajemy ich wymiary oraz przesunięcie: h1 { width: 200px; height: 50px; position: absolute; left: 50px; top: 20px;
  
  Część V ♦ Układ strony
  
  382 } h2 { width: 150px; height: 50px; position: absolute; left: 300px; top: 120px; }
  
  Dzięki wpisowi position: relative dla elementu div właściwości left oraz top elementów h1 i h2 są mierzone względem lewego górnego narożnika elementu div. Zostało to pokazane na rysunku 31.7. Rysunek 31.7. Kontekst pozycjonowania względnie bezwzględnego
  
  Ćwiczenie 31.6 Wykonaj stronę służącą do sprawdzenia pozycjonowania kontekstowego. Użyj kodu z listingu 31.5. Powinieneś otrzymać stronę przedstawioną na rysunku 31.6.
  
  Właściwości left, right, top oraz bottom Właściwości left, right, top oraz bottom będziemy wykorzystywali do ustalenia położenia elementu pozycjonowanego kontekstowo wewnątrz rodzica. Działanie tych właściwości zbadamy, wykorzystując kod z listingu 31.6. Element h1 zawiera element span, w którym zawarta jest strzałka do góry (encja &arr;). Kod z listingu 31.6 będzie w przeglądarce wyglądał tak jak na rysunku 31.8. Listing 31.6. Kod do analizy działania właściwości left, top, right oraz bottom h1 { background: black; color: white; padding: 30px; } span { background: #d8d8d8; color: black; padding: 5px; } ... Lorem ↑
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  383
  
  Rysunek 31.8. Wygląd kodu z listingu 31.6
  
  Wykorzystując pozycjonowanie kontekstowe oraz właściwości left, top, right oraz bottom, możemy ułożyć strzałkę w dowolnym narożniku czarnego prostokąta wyznaczającego obszar elementu h1. Umieśćmy strzałkę w prawym górnym narożniku. Najpierw należy zmodyfikować element span, by był on wyświetlany jako element blokowy: span { display: block }
  
  Następnie włączamy pozycjonowanie kontekstowe: h1 { position: relative } span { position: absolute }
  
  Na zakończenie przesuwamy element span do prawego górnego narożnika elementu h1: span { right: 0; top: 0; }
  
  Kod z listingu 31.6 po dodaniu stylów: h1 { position: relative } span { display: block; position: absolute right: 0; top: 0; }
  
  będzie wyglądał w przeglądarce tak jak na rysunku 31.9. Rysunek 31.9. Pozycjonowanie kontekstowe i właściwości right: 0 oraz top: 0
  
  Jeśli położenie elementu span ustalisz właściwościami right i bottom: h1 { position: relative } span { display: block; position: absolute right: 0; bottom: 0; }
  
  wówczas efekt będzie taki jak na rysunku 31.10. Strzałka znajdzie się w prawym dolnym narożniku.
  
  Część V ♦ Układ strony
  
  384 Rysunek 31.10. Pozycjonowanie kontekstowe i właściwości right: 0 oraz bottom: 0
  
  Style: span { left: 0; bottom: 0; }
  
  umieszczą strzałkę w lewym dolnym narożniku (rysunek 31.11), a style: span { left: 0; top: 0; }
  
  w lewym górnym narożniku (rysunek 31.12). Rysunek 31.11. Pozycjonowanie kontekstowe i właściwości left: 0 oraz bottom: 0 Rysunek 31.12. Pozycjonowanie kontekstowe i właściwości left: 0 oraz top: 0
  
  Jeśli jako wartość właściwości left, top, right i bottom podamy odległość większą od zera, to spowoduje ona odsunięcie pozycjonowanego elementu od odpowiedniej krawędzi elementu nadrzędnego. Rysunek 31.13 ilustruje efekt otrzymany po zastosowaniu stylów: span { right: 100px; bottom: 10px; }
  
  Strzałka została odsunięta od prawej krawędzi o 100 pikseli oraz od dolnej krawędzi o 10 pikseli. Rysunek 31.13. Pozycjonowanie kontekstowe i właściwości right: 100px oraz bottom: 10px
  
  Pamiętaj, że jedynymi poprawnymi wartościami właściwości left, top, right oraz bottom są jednostki długości. Poprawnymi zapisami są: left: 100px; right: 10%; top: 20px; bottom: 50%;
  
  Użycie wartości center oraz middle jest błędem:
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  385
  
  PRZYKŁAD NIEPOPRAWNY left: center; right: middle;
  
  Do wyśrodkowania elementów możesz spróbować użyć wartości 50%: left: 50%;
  
  Takie rozwiązanie da jednak gorsze rezultaty niż użycie opisanej w rozdziale 29. metody margin: 0 auto. Wpis right: 0
  
  należy interpretować jako dosunięcie prawej krawędzi elementu wewnętrznego (w przykładzie: span) do prawej krawędzi rodzica (w przykładzie: h1). Wartość większa od zera, np.: right: 100px
  
  oznacza dosunięcie prawej krawędzi elementu wewnętrznego do prawej krawędzi rodzica w taki sposób, by pozostała pomiędzy nimi przerwa wielkości 100 pikseli. Analogicznie interpretujemy pozostałe właściwości:  top: dosunięcie górnej krawędzi elementu wewnętrznego do górnej krawędzi
  
  rodzica;
  
   bottom: dosunięcie dolnej krawędzi elementu wewnętrznego do dolnej
  
  krawędzi rodzica;
  
   left: dosunięcie lewej krawędzi elementu wewnętrznego do lewej krawędzi rodzica.
  
  Ćwiczenie 31.7 Wykonaj stronę przedstawioną na listingu 31.6 i rysunku 31.8.
  
  Ćwiczenie 31.8 Bazując na listingu 31.6, wykonaj stronę z rysunku 31.9. W kodzie CSS użyj właściwości: right: 0 top: 0
  
  Po wykonaniu ćwiczenia 31.8 odwiedź stronę za pomocą przeglądarki Firefox. Wykorzystując wtyczkę Firebug, włącz ikonę, która została wskazana strzałką na rysunku 31.14. Spowoduje ona wyłączenie działania właściwości position: absolute. Zwróć uwagę, jaki to będzie miało wpływ na położenie strzałki w układzie strony. W ten sposób możesz zbadać, jaki wpływ na wygląd strony ma włączanie i wyłączanie dowolnych właściwości CSS.
  
  Część V ♦ Układ strony
  
  386
  
  Rysunek 31.14. Wyłączanie poszczególnych właściwości CSS przy użyciu wtyczki Firebug
  
  Ćwiczenie 31.9 Bazując na listingu 31.6, wykonaj stronę z rysunku 31.10. W kodzie CSS użyj właściwości: right: 0 bottom: 0
  
  Ćwiczenie 31.10 Bazując na listingu 31.6, wykonaj stronę z rysunku 31.11. W kodzie CSS użyj właściwości: left: 0 bottom: 0
  
  Ćwiczenie 31.11 Bazując na listingu 31.6, wykonaj stronę z rysunku 31.12. W kodzie CSS użyj właściwości: left: 0 top: 0
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  387
  
  Jak zmieni się wygląd strony z ćwiczenia 31.11 (rysunek 31.12), jeśli w kodzie CSS pominiesz wpis position: relative? Jeśli nie potrafisz odpowiedzieć, otwórz stronę w przeglądarce Firefox i korzystając z wtyczki Firebug, wyłącz działanie deklaracji position: relative. Metoda wyłączania działania poszczególnych właściwości CSS jest przedstawiona na rysunku 31.14.
  
  Ćwiczenie 31.12 Bazując na listingu 31.6, wykonaj stronę z rysunku 31.13. W kodzie CSS użyj właściwości: right: 100px; bottom: 10px;
  
  Otwórz w przeglądarce dowolne z ćwiczeń od 31.8 do 31.12 i zmień rozmiar okna przeglądarki. Zmiana rozmiaru okna przeglądarki spowoduje zmianę wymiaru elementu h1, czyli prostokąta o czarnym tle. Strzałka będzie pozycjonowana wewnątrz czarnego prostokąta, bez względu na jego rozmiar.
  
  Łącząc właściwości left i right, możemy ustalić szerokość elementu. Zapis: left: 0; right: 0;
  
  ustala szerokość elementu dokładnie na tyle, ile wynosi szerokość rodzica. Podając wartości większe od 0, np. 20 pikseli: left: 20px; right: 20px;
  
  pozostawiamy dwudziestopikselowe dopełnienie. Analogiczne działanie mają połączone wpisy: top: 0; bottom: 0;
  
  Powyższe właściwości ustalą wysokość elementu równą wysokości rodzica. W celu zapewnienia 50-pikselowego dopełnienia należy użyć wpisów: top: 50px; bottom: 50px;
  
  Warstwy i ich kolejność W przypadku stosowania pozycjonowania relative, absolute lub fixed otrzymujemy elementy, które mimo że nie są zagnieżdżone w kodzie HTML, to wizualnie mogą na siebie zachodzić. Możemy je traktować jak warstwy w programach graficznych, a także mówić w stosunku do nich o kolejności na stosie warstw: warstwy leżące wyżej przysłaniają to, co znajduje się pod nimi.
  
  Część V ♦ Układ strony
  
  388
  
  Kolejność warstw na stosie ustala właściwość z-index. Jeśli ją pominiemy, porządek warstw na stosie będzie wówczas taki sam jak kolejność elementów HTML w kodzie źródłowym strony. Umieśćmy na stronie WWW dwa elementy: jeden z tekstem AAAAA, drugi z tekstem BBBBBB. Ustalmy pozycjonowanie kontekstowe, a wymiary elementów dobierzmy tak, by zachodziły one na siebie. Wygląd strony z listingu 31.7 w przeglądarce jest przedstawiony na rysunku 31.15. Listing 31.7. Nachodzące na siebie elementy z tekstem AAAAA i BBBBB div
  
  { position: relative;
  
  } #a { display: block; position: absolute; left: 0; top: 0; } #b { display: block; position: absolute; left: 0; bottom: 0; } ...
  
  A A A A A B B B B B
  
  Rysunek 31.15. Warstwa B przysłania warstwę A
  
  Jeśli pominiemy właściwość z-index, wówczas element z tekstem BBBBB, który na listingu 31.7 występuje jako drugi, znajdzie się na wierzchu. Kolejność warstw na stosie ilustruje rysunek 31.16. Rysunek 31.16. Warstwy leżą jedna na drugiej, tworząc stos
  
  Zmodyfikujmy kod strony z listingu 31.7, ustalając jawnie kolejność warstw. Warstwę z tekstem AAAAA przesuńmy na wierzch, a warstwę z tekstem BBBBB — pod spód. Należy w tym celu nadać wartości z-index elementu z tekstem AAAAA wartość większą, np. 2, a elementowi z tekstem BBBBB — wartość mniejszą, np. 1. Style takie są przedstawione na listingu 31.8.
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  389
  
  Listing 31.8. Style, które spowodują umieszczenie warstwy z tekstem AAAAA na wierzchu #a { ... z-index: 2; } #b { ... z-index: 1; }
  
  Strona z listingu 31.7 będzie wówczas wyglądała tak jak na rysunku 31.17. Rysunek 31.17. Właściwość z-index: 2 podnosi warstwę z tekstem A na wierzch
  
  Ćwiczenie 31.13 Wykonaj ćwiczenie sprawdzające działanie właściwości z-index. Wykorzystując style z listingu 31.8, zmień wygląd strony z listingu 31.7 tak, by uzyskać efekt widoczny na rysunku 31.17. Za pomocą wtyczki Firebug włącz i wyłącz działanie właściwości z-index, obserwując przy tym wygląd badanej strony WWW. Domyślną wartością właściwości z-index jest auto. Wartość ta powoduje umieszczenie elementu na spodzie stosu. W celu podniesienia jednej warstwy na wierzch możesz zatem użyć jednego wpisu z-index. Wystarczy, że w ćwiczeniu 31.13 element z tekstem AAAAA będzie miał właściwość z-index o dowolnej wartości, np. 1: #a { ... z-index: 1; }
  
  a będzie on przysłaniał element z tekstem BBBBB. Warstwy pozycjonowane w normalny sposób (tj. position: static) mogą korzystać z właściwości z-index po dodaniu właściwości position o wartości relative. Wpis: div { position: relative; z-index: 1; }
  
  spowoduje przeniesienie elementu div na wierzch na stosie warstw. Jego położenie i wpływ na pozostałe elementy nie ulegnie zmianie. To rozwiązanie wykorzystamy do zmiany kolejności kolumn układu trójkolumnowego wykorzystującego ujemne marginesy.
  
  Część V ♦ Układ strony
  
  390
  
  Warto pamiętać, że kolejność warstw ma znaczenie wyłącznie dla elementów stojących w relacji rodzeństwa. Na listingu 31.7 pojawiają się dwa elementy span zawarte w elemencie div. Korzystając z właściwości z-index, przesuwamy pierwszy z elementów span na wierzch, a drugi pod spód. W odniesieniu do elementu div nie mówimy w ogóle o kolejności. Element div zawsze leży na spodzie, poniżej swoich dzieci.
  
  Przycinanie Kolejnym aspektem układu, w którym kilka elementów leży jeden na drugim, jest przycinanie - właściwość overflow elementu nadrzędnego decyduje o tym, czy zawarte w nim elementy mogą wystawać poza jego obszar. Jeśli element nadrzędny ma właściwość: overflow: visible
  
  wówczas elementy w nim zawarte są widoczne poza obszarem elementu nadrzędnego. Jeśli natomiast jako wartość właściwości overflow podasz hidden: overflow: hidden
  
  to dzieci elementu tak sformatowanego nie będą widoczne poza obszarem rodzica. Przedstawiona na listingu 31.9 strona WWW zawiera jeden element div oraz dwa elementy span. Jej wygląd jest przedstawiony na rysunku 31.18. Listing 31.9. Elementy pozycjonowane kontekstowo mogą wystawać poza obszar rodzica div
  
  { background: #e0e0e0; border: 1px solid black; width: 300px; height: 200px;
  
  position: relative; } #s1 { background: black; color: white; padding: 10px; display: block; position: absolute; left: -20px; top: -13px; } #s2 { background: black; color: white; padding: 10px;
  
  }
  
  display: block; position: absolute; left: 280px; bottom: -60px;
  
  Rozdział 31. ♦ Zaawansowane metody pozycjonowania elementów blokowych
  
  391
  
  Rysunek 31.18. Elementy pozycjonowane kontekstowo mogą wystawać poza obszar swojego rodzica
  
  ...
  
  Pierwszy Drugi
  
  Elementy span pozycjonujemy kontekstowo. Wartości właściwości left, top oraz bottom podajemy w taki sposób, by elementy span wystawały poza obszar elementu div. Obszar elementu div jest zaznaczony na rysunku 31.18 kolorem szarym, zaś elementy span — kolorem czarnym. Zwróć uwagę, że wartość każdej z właściwości left, top, right oraz bottom może być liczbą ujemną. Parametr: left: 100px;
  
  oznacza przesunięcie elementu w prawo tak, by jego lewa krawędź była odsunięta od lewej krawędzi rodzica o 100 pikseli. Analogicznie: left: -100px;
  
  oznacza przesunięcie elementu w lewo tak, by jego lewa krawędź była odsunięta od lewej krawędzi rodzica o 100 pikseli. W przypadku ujemnej wartości zmieniamy kierunek przesuwania. Wartość dodatnią 100 interpretujemy jako przesuwanie w prawo (do środka), a wartość ujemną –100 jako przesuwanie w lewo (na zewnątrz). Analogicznie zmieniamy kierunek przesuwania w przypadku właściwości right, top oraz bottom.
  
  Jeśli w kodzie z listingu 31.9 dodamy: div
  
  { ... overflow: hidden;
  
  }
  
  to strona będzie wyglądała tak jak na rysunku 31.19. Żaden z dwóch elementów span nie wystaje poza obszar rodzica (tj. elementu div).
  
  Część V ♦ Układ strony
  
  392 Rysunek 31.19. Strona z listingu 31.9 po przycięciu zawartości elementu div
  
  Ostatnią dostępną wartością właściwości overflow jest scroll. Właściwość ta powoduje wyświetlenie pasków przewijania, które umożliwiają przewijanie zawartości.
  
  Ćwiczenie 31.14 Wykonaj stronę przedstawioną na listingu 31.9, uzupełniając kod o właściwość overflow: hidden. Otrzymana strona powinna wyglądać tak jak na rysunku 31.19.
  
  Rozdział 32.
  
  Układy o stałej szerokości Znajomość:  elementów: header, footer, div;  metody środkowania elementów blokowych;  elementów pływających (tj. właściwości float)  oraz czyszczenia elementów pływających
  
  pozwala nam przejść do jednego z najważniejszych zagadnień, jakim jest przygotowywanie układów stron WWW. Zaczniemy od łatwiejszego przypadku, czyli od układów o stałej szerokości, nazywanych również układami sztywnymi. Układ taki charakteryzuje się tym, że szerokości jego kolumn oraz szerokość całego układu nie zależą od rozdzielczości monitora, wielkości okna przeglądarki czy ilości tekstu zawartego w poszczególnych elementach.
  
  Dobieranie szerokości układu Jeśli szerokość okna przeglądarki jest większa od szerokości układu, to układ nie wymaga poziomego paska przewijania. W takiej sytuacji pewien obszar okna przeglądarki nie jest nigdy wykorzystywany. Dążymy do tego, by marnowany obszar był jak najmniejszy. Z drugiej strony jeśli przygotujemy układ, który jest szerszy od okna przeglądarki, wówczas w dolnej części okna zostanie wyświetlony poziomy pasek przewijania. Takiej sytuacji należy unikać. Pojawienie się na stronie poziomego paska przewijania jest powszechnie uznawane za błąd. Mamy więc dwa czynniki wpływające na wybór szerokości układu. Z jednej strony chcemy, by jak najmniejszy fragment okna przeglądarki był zmarnowany — dlatego dążymy do zwiększania szerokości układu. Z drugiej strony nie możemy pozwolić na to, by w oknie pojawił się poziomy pasek przewijania — zatem układ przygotowujemy na tyle wąski, by u żadnego użytkownika nie wystąpił poziomy pasek przewijania.
  
  Część V ♦ Układ strony
  
  394
  
  Trudność decyzji dotyczącej szerokości układu polega na tym, że witryna internetowa może być odwiedzana przez osoby pracujące na komputerach różnej klasy. Skąd mamy wiedzieć, jakich rozdzielczości używają internauci odwiedzający serwis? Tutaj z pomocą przychodzi serwis ranking.pl, którego użyliśmy już do zbadania popularności przeglądarek (rysunek 1.1). Odwiedzając stronę http://ranking.pl/pl/rankings/screen-resolutions.html, poznasz statystyki rozdzielczości ekranów stosowanych przez polskich internautów. Analizując dane z rysunku 32.1, możemy stwierdzić, że procent polskich użytkowników internetu, którzy mają szerokość monitora niższą niż 1024, jest tak niewielki, że może być pominięty. Rysunek 32.1. Rozdzielczości monitorów stosowane przez polskich internautów w latach 2008 – 2010
  
  Obecnie, tj. pod koniec 2012 roku, dobrym wyborem jest zatem tworzenie układów sztywnych, których szerokość wynosi 980 pikseli1. 1
  
  Jeśli rozdzielczość monitora wynosi 1024×768, to nie należy przygotowywać układu sztywnego o szerokości 1024. W oknie przeglądarki występuje obramowanie oraz bardzo często pionowy pasek przewijania. Maksymalna szerokość układu, która nie spowoduje pojawienia się poziomego paska przewijania, jest zależna od przeglądarki i wynosi zazwyczaj około 1004 piksele. Dla bezpieczeństwa zwykle zmniejszam szerokość układu o około 20 – 30 pikseli.
  
  Rozdział 32. ♦ Układy o stałej szerokości
  
  395
  
  Obecnie (koniec 2012 roku) optymalnym wymiarem układów o stałej szerokości jest 1024. Pamiętając o tym, że nie cała przestrzeń w obrębie okna przeglądarki jest przeznaczona na stronę WWW, wymiar układu ustalamy na 980 pikseli.
  
  Układy przylegające do okna przeglądarki Każdy z ośmiu opisanych poniżej układów ma następujące style elementu body: body { margin: 0; padding: 0; }
  
  Powodują one, że witryna WWW przylega do krawędzi przeglądarki, nie pozostawiając żadnej wolnej przestrzeni. Dla jasności na listingach od 32.1 do 32.16 pominąłem także:  kolor tła (właściwość background),  środkowanie tekstu (właściwość text-align),  tekst zawarty wewnątrz elementów.
  
  Układ nr 1 Układ jest przedstawiony na rysunku 32.2 oraz listingach 32.1 i 32.2. Rysunek 32.2. Układ nr 1
  
  Część V ♦ Układ strony
  
  396 Listing 32.1. CSS układu nr 1 #pojemnik { width: 980px; margin: 0 auto; }
  
  Listing 32.2. HTML układu nr 1
  
  
  
  Układ ten stanowi bazę dla układów od 2. do 8. Zawiera on jedną sekcję div#pojemnik o stałej szerokości, która jest wyśrodkowana w oknie przeglądarki. Wysokość pojemnika div zależy od ilości umieszczonego w nim tekstu lub od wysokości zawartości.
  
  Układ nr 2 Układ jest przedstawiony na rysunku 32.3 oraz listingach 32.3 i 32.4. Rysunek 32.3. Układ nr 2
  
  Listing 32.3. CSS układu nr 2 #pojemnik { width: 980px; margin: 0 auto; } header { } #kolumna { } footer { }
  
  Rozdział 32. ♦ Układy o stałej szerokości
  
  397
  
  Listing 32.4. HTML układu nr 2
  
  
  
  
  
  Układ ten jest podzielony na trzy poziome obszary. W pojemniku o stałej szerokości umieszczone są trzy elementy: header, section i footer. Elementy te mogą nie mieć żadnych stylów, a i tak zajmą całą dostępną szerokość, ograniczoną tylko przez element nadrzędny, czyli div#pojemnik. Obramowanie dolne nagłówka (border-bottom) oraz górne stopki (border-top) nie jest istotne. Służy jedynie zwiększeniu czytelności rysunku 32.3.
  
  Układ nr 3 Układ jest przedstawiony na rysunku 32.4 oraz listingach 32.5 i 32.6. Rysunek 32.4. Układ nr 3
  
  Listing 32.5. CSS układu nr 3 #pojemnik { width: 980px; margin: 0 auto; overflow: hidden; } #kolumna_lewa { float: left; width: 200px;
  
  Część V ♦ Układ strony
  
  398 } #kolumna_prawa { float: right; width: 778px; border-left: 2px solid black; }
  
  Listing 32.6. HTML układu nr 3
  
  
  
  
  
  Układ ten wprowadza pionowy podział pojemnika głównego. Witryna jest podzielona na dwie kolumny: węższą po lewej stronie oraz szerszą po prawej stronie. Element div#kolumna_lewa dosuwamy do lewej krawędzi pojemnika (float: left), zaś div#kolumna_prawa — do prawej krawędzi pojemnika (float: right). Lewa kolumna zajmuje obszar o szerokości 200 pikseli, a prawa — obszar o szerokości 780 pikseli. Suma ich szerokości jest równa szerokości pojemnika: 200 + 780 = 980
  
  Zauważ, że prawa kolumna ma lewe obramowanie (border-left) o grubości dwóch pikseli. Pamiętaj, że obszar zajęty przez element blokowy jest sumą: marginesów, obramowania, dopełnienia i zawartości. Właściwość width dla kolumny prawej ma zatem wartość 778 pikseli. Wartość ta jest tak dobrana, by po dodaniu obramowania (jego grubość wynosi 2 piksele) otrzymać 780 pikseli. Musisz zawsze pamiętać, by grubość obramowania odjąć od właściwości width. W przeciwnym razie układ rozjedzie się! Zwróć również uwagę na właściwość overflow: hidden. Wymusza nadanie takiej wysokości pojemnika nadrzędnego, by pojemnik obejmował obie kolumny. Jeśli w tak przygotowanym układzie zdarzy się, że menu jest długie, a treść krótka, obramowanie nie będzie wówczas dochodziło do dolnej krawędzi układu. Będzie się ono kończyło wraz z końcem treści. Rozwiązaniem tego problemu jest efekt omówiony w rozdziale 38. pt. „Udawane kolumny”. Układ nr 3 możemy przygotować w czterech wersjach:  kolumna lewa float:left, kolumna prawa float:right;  kolumna lewa float:left, kolumna prawa float:left;  kolumna prawa float:right, kolumna lewa float:left (należy zamienić
  
  kolejność elementów w kodzie HTML: najpierw kolumna prawa, potem lewa);
  
   kolumna prawa float:right, kolumna lewa float:right (należy zamienić
  
  kolejność elementów w kodzie HTML: najpierw kolumna prawa, potem lewa).
  
  Rozdział 32. ♦ Układy o stałej szerokości
  
  399
  
  Właściwości float: left oraz float: right umożliwiają zmianę kolejności kolumn. Kolumny możemy ustawić w kodzie HTML w dowolnej kolejności, jaką uznamy za lepszą.
  
  Układ nr 4 Układ jest przedstawiony na rysunku 32.5 oraz listingach 32.7 i 32.8. Rysunek 32.5. Układ nr 4
  
  Listing 32.7. CSS układu nr 4 #pojemnik { width: 980px; margin: 0 auto; overflow: hidden; } #kolumna_prawa { float: right; width: 200px; } #kolumna_lewa { float: left; width: 778px; border-right: 2px solid black; }
  
  Listing 32.8. HTML układu nr 4
  
  
  
  
  
  Układ ten jest symetrycznym odbiciem układu 3. W miejsce float: right stosuję float: left i na odwrót. Krawędź pionowa wymaga użycia właściwości border-right (w układzie nr 3 użyto border-left).
  
  Część V ♦ Układ strony
  
  400
  
  Układ nr 5 Układ jest przedstawiony na rysunku 32.6 oraz listingach 32.9 i 32.10. Rysunek 32.6. Układ nr 5
  
  Listing 32.9. CSS układu nr 5 #pojemnik { width: 980px; margin: 0 auto; overflow: hidden; } #kolumna_lewa { float: left; width: 200px; } #kolumna_srodkowa { float: left; width: 526px; border-left: 2px solid black; border-right: 2px solid black; } #kolumna_prawa { float: left; width: 250px; }
  
  Listing 32.10. HTML układu nr 5
  
  
  
  
  
  Rozdział 32. ♦ Układy o stałej szerokości
  
  401
  
  Jest to układ trzykolumnowy. Kolumny mają identyfikatory kolumna_lewa, kolumna_ srodkowa oraz kolumna_prawa. Kolumna kolumna_lewa ma szerokość 200 pikseli i jest dosunięta do lewej krawędzi pojemnika. Kolumna kolumna_srodkowa ma szerokość 530 pikseli i jest dosunięta do lewej krawędzi. Kolumna kolumna_prawa ma szerokość 250 i również jest dosunięta do lewej krawędzi pojemnika. Po pierwsze, zauważ, że: 200 + 530 + 250 = 980
  
  czyli: suma szerokości trzech kolumn jest równa szerokości układu. Zwróć ponadto uwagę, że: 2 + 526 + 2= 530
  
  Innymi słowy: na szerokość kolumny środkowej (530 pikseli) składają się:  jej lewe i prawe obramowanie (2 piksele)  oraz szerokość zawartości (width: 526px).
  
  Wszystkie trzy kolumny są dosunięte do lewej strony (float: left).
  
  Układ nr 6 Układ jest przedstawiony na rysunku 32.7 oraz listingach 32.11 i 32.12. Rysunek 32.7. Układ nr 6
  
  Część V ♦ Układ strony
  
  402 Listing 32.11. CSS układu nr 6 #pojemnik { width: 980px; margin: 0 auto; } header { } #kolumna_lewa { float: left; width: 200px; } #kolumna_prawa { float: right; width: 778px; border-left: 2px solid black; } footer { clear: both; }
  
  Listing 32.12. HTML układu nr 6
  
  
  
  
  
  Jest on połączeniem układów 2. oraz 3. Pojemnik główny jest podzielony na trzy pasy poziome. W miejsce elementu div#kolumna z układu 2. pojawiają się div#kolumna_lewa oraz div#kolumna_prawa z układu 3. Łącznie w pojemniku występują cztery sekcje:  nagłówek: header;  menu: div#kolumna_lewa;  treść: div#kolumna_prawa;  stopka: footer.
  
  Nagłówek i stopka zajmują całą dostępną szerokość. Suma szerokości kolumn lewej i prawej jest równa szerokości pojemnika. Na szerokość kolumny prawej składa się lewe pionowe obramowanie (2px) oraz treść (width: 778px). Zauważ, że pojawienie się stopki pozwala zrezygnować z właściwości overflow: hidden. Elementem czyszczącym jest teraz stopka (ma ona właściwość clear o wartości both).
  
  Rozdział 32. ♦ Układy o stałej szerokości
  
  Układ nr 7 Układ jest przedstawiony na rysunku 32.8 oraz listingach 32.13 i 32.14. Rysunek 32.8. Układ nr 7
  
  Listing 32.13. CSS układu nr 7 #pojemnik { width: 980px; margin: 0 auto; } header { } #kolumna_lewa { float: left; width: 778px; border-right: 2px solid black; } #kolumna_prawa { float: right; width: 200px; } footer { clear: both; }
  
  Listing 32.14. HTML układu nr 7
  
  
  
  
  
  Układ ten jest symetrycznym odbiciem układu 6.
  
  403
  
  Część V ♦ Układ strony
  
  404
  
  Układ nr 8 Układ jest przedstawiony na rysunku 32.9 oraz listingach 32.15 i 32.16. Rysunek 32.9. Układ nr 8
  
  Listing 32.15. CSS układu nr 8 #pojemnik { width: 980px; margin: 0 auto; } header { } #kolumna_lewa { float: left; width: 200px; } #kolumna_srodkowa { float: left; width: 526px; border-left: 2px solid black; border-right: 2px solid black; } #kolumna_prawa { float: left; width: 250px; } footer { clear: both; }
  
  Listing 32.16. HTML układu nr 8
  
  
  
  Rozdział 32. ♦ Układy o stałej szerokości
  
  405
  
  
  
  Układ ten jest połączeniem układów 2. oraz 5. W ten sposób w pojemniku pojawiają się:  nagłówek (header),  menu lewe (div#kolumna_lewa),  treść (div#kolumna_srodkowa),  menu prawe (div#kolumna_prawa),  stopka (footer). Oczywiście w każdym z układów elementy div, header i footer możesz zastąpić elementami:  article,  section,  nav,  aside.
  
  406
  
  Część V ♦ Układ strony
  
  Rozdział 33.
  
  Układy płynne Na bazie ośmiu układów opracowanych w poprzednim rozdziale przygotujemy osiem układów, których szerokość zależy od szerokości okna przeglądarki. Układy takie są nazywane układami o zmiennej szerokości lub układami płynnymi.
  
  Układ nr 9 Układ jest przedstawiony na rysunku 32.2 oraz listingach 33.1 (CSS) i 32.2 (HTML). Układ ten powstał na bazie układu nr 1. Kod HTML z listingu 32.2 należy wzbogacić o style z listingu 33.1. Listing 33.1. CSS układu nr 9 #pojemnik { width: 80%; margin: 0 auto; }
  
  Dzięki temu, że wartość właściwości width jest wyrażona w procentach, rozmiar pojemnika będzie dostosowywał się do bieżącego rozmiaru okna.
  
  Układ nr 10 Układ jest przedstawiony na rysunku 32.3 oraz listingach 33.2 (CSS) i 32.4 (HTML). Układ ten powstał na bazie układu nr 2. Kod HTML z listingu 32.4 należy wzbogacić o style z listingu 33.2.
  
  Część V ♦ Układ strony
  
  408 Listing 33.2. CSS układu nr 10 #pojemnik { width: 80%; margin: 0 auto; } header { } #kolumna { } footer { }
  
  Układ nr 11 Układ jest przedstawiony na rysunku 32.4 oraz listingach 33.3 (CSS) i 32.6 (HTML). Listing 33.3. CSS układu nr 11 #pojemnik { width: 80%; margin: 0 auto; overflow: hidden; } #kolumna_lewa { float: left; width: 29%; } #kolumna_prawa { float: right; width: 69%; border-left: 2px solid black; }
  
  Układ ten powstał na bazie układu nr 3. Kod HTML z listingu 32.6 należy wzbogacić o style z listingu 33.3. Zwróć uwagę, że szerokości dwóch kolumn są wyrażone w procentach. Kolumna lewa ma zająć 30% obszaru wewnątrz pojemnika, a kolumna prawa — 70%. W miejsce wartości 30 oraz 70 użyte są wartości o jeden mniejsze: 29 oraz 69. W ten sposób zapewniam, że menu i treść zawsze będą mieściły się obok siebie. Odbywa się to kosztem dwóch procent obszaru. Wadą podanego rozwiązania jest użycie na przemian jednostek procentowych oraz pikseli. Grubość obramowania wynosi 2 piksele. Jeśli ramek będzie kilka i ich łączna grubość wyniesie ponad 2% obszaru, wówczas układ rozjedzie się. Ponieważ obramowanie jest wyrażone w pikselach, a szerokości kolumn w procentach, może się zdarzyć tak, że przy dużym obszarze okna układ będzie wyglądał poprawnie, a po zmniejszeniu szerokości okna — rozjedzie się.
  
  Rozdział 33. ♦ Układy płynne
  
  409
  
  Układ nr 12 Układ jest przedstawiony na rysunku 32.5 oraz listingach 33.4 (CSS) i 32.8 (HTML). Listing 33.4. CSS układu nr 12 #pojemnik { width: 80%; margin: 0 auto; overflow: hidden; } #kolumna_prawa { float: right; width: 29%; } #kolumna_lewa { float: left; width: 69%; border-right: 2px solid black; }
  
  Układ ten powstał na bazie układu 4. Kod HTML z listingu 32.8 należy wzbogacić o style z listingu 33.4.
  
  Układ nr 13 Układ jest przedstawiony na rysunku 32.6 oraz listingach 33.5 (CSS) i 32.10 (HTML). Listing 33.5. CSS układu nr 13 #pojemnik { width: 80%; margin: 0 auto; overflow: hidden; } #kolumna_lewa { float: left; width: 29%; } #kolumna_srodkowa { float: left; width: 54%; border-left: 2px solid black; border-right: 2px solid black; } #kolumna_prawa { float: left; width: 14%; }
  
  Układ ten powstał na bazie układu nr 5. Kod HTML z listingu 32.10 należy wzbogacić o style z listingu 33.5.
  
  Część V ♦ Układ strony
  
  410
  
  Trzy kolumny układu mają zająć 30%, 55% oraz 15% pojemnika. Oczywiście: 30% + 55% + 15% = 100%
  
  Ze względu na obramowanie liczby te należy zmniejszyć o jeden procent. Otrzymamy szerokości 29%, 54% oraz 14%.
  
  Układ nr 14 Układ jest przedstawiony na rysunku 32.7 oraz listingach 33.6 (CSS) i 32.12 (HTML). Listing 33.6. CSS układu nr 14 #pojemnik { width: 80%; margin: 0 auto; } header { } #kolumna_lewa { float: left; width: 29%; } #kolumna_prawa { float: right; width: 69%; border-left: 2px solid black; } footer { clear: both; }
  
  Układ ten powstał na bazie układu 6. Kod HTML z listingu 32.12 należy wzbogacić o style z listingu 33.6.
  
  Układ nr 15 Układ jest przedstawiony na rysunku 32.8 oraz listingach 33.7 (CSS) i 32.14 (HTML). Listing 33.7. CSS układu nr 15 #pojemnik { width: 80%; margin: 0 auto; } header { } #kolumna_lewa { float: left; width: 69%; border-right: 2px solid black;
  
  Rozdział 33. ♦ Układy płynne
  
  411
  
  } #kolumna_prawa { float: right; width: 29%; } footer { clear: both; }
  
  Układ ten powstał na bazie układu nr 7. Kod HTML z listingu 32.14 należy wzbogacić o style z listingu 33.7.
  
  Układ nr 16 Układ jest przedstawiony na rysunku 32.9 oraz listingach 33.8 (CSS) i 32.16 (HTML). Listing 33.8. CSS układu nr 16 #pojemnik { width: 80%; margin: 0 auto; } header { } #kolumna_lewa { float: left; width: 29%; } #kolumna_srodkowa { float: left; width: 54%; border-left: 2px solid black; border-right: 2px solid black; } #kolumna_prawa { float: left; width: 14%; } footer { clear: both; }
  
  Układ ten powstał na bazie układu nr 8. Kod HTML z listingu 32.16 należy wzbogacić o style z listingu 33.8.
  
  412
  
  Część V ♦ Układ strony
  
  Rozdział 34.
  
  Układy hybrydowe Osobnym rodzajem są układy, które stanowią połączenie układów o stałej szerokości z układami płynnymi. W takich rozwiązaniach część kolumn zachowuje stałą szerokość, a część dostosowuje swoje wymiary do dostępnej przestrzeni. Nazywamy je układami hybrydowymi.
  
  Układy dwukolumnowe Dwukolumnowy układ hybrydowy jest przedstawiony na rysunkach 34.1 oraz 34.2. Rysunek 34.1. Dwukolumnowy układ hybrydowy
  
  Część V ♦ Układ strony
  
  414
  
  Rysunek 34.2. Dwukolumnowy układ hybrydowy po zmianie szerokości okna przeglądarki
  
  Po zwiększeniu szerokości okna przeglądarki kolumna z tekstem Lorem ipsum… rozszerza się. Druga z kolumn zajmuje stałą szerokość bez względu na wymiar okna przeglądarki. Dwukolumnowy układ hybrydowy możemy wykonać, stosując:  właściwość float w połączeniu z marginesem (układ 17),  pozycjonowanie połączone z marginesem (układ 18),  właściwość float w połączeniu z ujemnymi wartościami marginesów (układ 19).
  
  Układ nr 17 Jest to dwukolumnowy układ hybrydowy realizowany z wykorzystaniem właściwości float oraz marginesów. Układ jest przedstawiony na listingach 34.1 (HTML) i 34.2 (CSS). Listing 34.1. HTML układu nr 17
  
  
  
  
  
  Listing 34.6. CSS układu nr 19 .hybrydowy_um { overflow: hidden; } .hybrydowy_um .pojemnik { width: 100%; float: right; margin-left: -315px; } .hybrydowy_um .kolumna_plynna { margin-left: 315px; } .hybrydowy_um .kolumna_stala { width: 315px; float: left; }
  
  Układ nr 19 jest wykonany z wykorzystaniem ujemnych marginesów1. Trudność polega na wykonaniu kolumny płynnej, która zajmie całą dostępną szerokość z wyjątkiem 315 pikseli. W tym celu przygotowujemy dwa zagnieżdżone elementy: div.pojemnik oraz div.kolumna_plynna:
  
  
  
  Element zewnętrzny zajmuje 100% dostępnego obszaru, jest dosunięty do prawej strony, a jego lewy margines ma wartość ujemną: .hybrydowy_um .pojemnik { width: 100%; float: right; margin-left: -315px; } 1
  
  Technika ujemnych marginesów została opisana w artykule Ryana Brilla pt. Creating Liquid Layouts with Negative Margins (http://www.alistapart.com/articles/negativemargins/).
  
  Rozdział 34. ♦ Układy hybrydowe
  
  417
  
  Wartość ujemną możemy interpretować jako margines leżący na zewnątrz obszaru zajmowanego przez element. W ten sposób obszar marginesu ma zadaną szerokość i nie należy do elementu div.pojemnik. Kolumna płynna układu jest zawarta w elemencie div.kolumna_plynna, którego lewy margines gwarantuje, że miejsce przeznaczone na kolumnę stałą nie zmniejszy się. Style kolumny płynnej zawierają jeden wpis: .hybrydowy_um .kolumna_plynna { margin-left: 315px; }
  
  Elementy div.pojemnik oraz div.kolumna_plynna dają w efekcie kolumnę, która zajmie całą dostępną szerokość z wyjątkiem 315 pikseli. W obszar 315 pikseli jest wsunięty element div.kolumna_stala. Zbadaj zachowanie układów 17., 18. oraz 19., gdy:  Kolumna menu jest dłuższa od treści.  Kolumna z treścią jest dłuższa od menu.
  
  Układ trójkolumnowy Trójkolumnowy układ hybrydowy jest widoczny na rysunkach 34.3 oraz 34.4. Kolumny lewa i prawa mają stałą szerokość, niezależną od szerokości okna przeglądarki. Kolumna środkowa wypełnia pozostałą dostępną przestrzeń.
  
  Rysunek 34.3. Trójkolumnowy układ hybrydowy
  
  Część V ♦ Układ strony
  
  418 Rysunek 34.4. Trójkolumnowy układ hybrydowy z rysunku 34.3 po zmianie szerokości okna przeglądarki
  
  Układ trójkolumnowy również wykonamy trzema technikami. Wykorzystamy:  właściwość float oraz marginesy,  pozycjonowanie kontekstowe,  ujemne marginesy.
  
  Układ nr 20 Jest to trójkolumnowy układ hybrydowy realizowany z wykorzystaniem właściwości float oraz marginesów. Układ jest przedstawiony na listingach 34.7 (HTML) i 34.8 (CSS). Listing 34.7. HTML układu nr 20
  
  
  
  
  
  
  
  Listing 34.12. CSS układu nr 22 .hybrydowy_um { overflow: hidden; } .hybrydowy_um .pojemnik { width: 100%; margin-left: -175px; float: right; overflow: hidden; } .hybrydowy_um .kolumna_plynna { margin-left: 175px; overflow: hidden; } .hybrydowy_um .lewa { width: 175px; float: left; }
  
  Rozdział 34. ♦ Układy hybrydowe
  
  421
  
  .hybrydowy_um .prawa { float: right; width: 325px; } .hybrydowy_um .tresc { margin-right: 325px; }
  
  Układ ten wykonujemy, wykorzystując trik z układu 19. Najpierw wykonujemy układ dwukolumnowy, w którym kolumną o stałej szerokości jest kolumna div.lewa, a kolumną płynną — div.kolumna_plynna. Następnie kolumnę płynną dzielimy na div.prawa oraz div.tresc. Podział ten jest wykonywany przy użyciu marginesów oraz właściwości float: .hybrydowy_um .prawa { float: right; width: 325px; } .hybrydowy_um .tresc { margin-right: 325px; }
  
  422
  
  Część V ♦ Układ strony
  
  Rozdział 35.
  
  Podsumowanie części piątej Naukę praktycznego wykorzystania technik pozycjonowania rozpoczynamy od prostych dokumentów, które prezentują pojedynczy tekst lub artykuł. Wykorzystując opisane techniki, możemy tworzyć strony zawierające wyśrodkowaną kolumnę oraz wzbogacać je o różnego rodzaju fiszki, których położenie ustalamy stylami CSS. Takie rozwiązania są pokazane w dwóch pierwszych projektach. Dwie kolejne przykładowe witryny koncentrują się na zagadnieniu tworzenia tabelarycznego zestawienia miniaturowych obrazów. Główną umiejętnością, jaką należy posiadać po lekturze części piątej, jest praktyczne operowanie układami. Dwa końcowe projekty prezentują, w jaki sposób technikę tworzenia układów połączyć z opisanymi w rozdziale 18. elementami do tworzenia menu strony. W ten sposób przechodzimy do tworzenia witryn zawierających wiele podstron, w których każda podstrona jest sformatowana identycznym układem.
  
  Projekt 35.1. Maria Konopnicka: „Miłosierdzie gminy” Wykonaj stronę z utworem Marii Konopnickiej pt. Miłosierdzie gminy. Tekst utworu ma być wyjustowany, a całość — wyśrodkowana na stronie. Kod HTML strony jest przedstawiony na listingu 35.1. Rolę pojemnika odgrywa element article. Najważniejsze są style pojemnika widoczne na listingu 35.2. To one odpowia-
  
  dają za nadanie szerokości 760 pikseli i wyśrodkowanie kolumny tekstu.
  
  Część V ♦ Układ strony
  
  424 Listing 35.1. Kod HTML noweli Marii Konopnickiej
  
  Maria Konopnicka Miłosierdzie gminy

  Dziewiąta dochodzi na zegarze ...

  ...

  W chwilę potem Kuntz...

  
  
  Listing 35.2. Style pojemnika z listingu 35.1 article { width: 760px; margin: 0 auto; }
  
  Pozioma linia oddzielająca nazwisko pisarki od tytułu jest obramowaniem elementu h1: h1 { text-align: center; border-bottom: 4px solid black; width: 400px; margin: 40px auto; font-variant: small-caps; padding: 40px; }
  
  Zauważ, w jaki sposób linia ta została wyśrodkowana na stronie. Służą do tego właściwości width oraz margin. Pierwsza z nich nadaje szerokość elementowi h1, a druga — środkuje nagłówek h1 na stronie. Za wyśrodkowanie tekstu odpowiada natomiast właściwość text-align.
  
  Projekt 35.2. Stefan Żeromski: „Rozdzióbią nas kruki, wrony” Przygotuj stronę WWW z utworem Stefana Żeromskiego pt. Rozdzióbią nas kruki, wrony. Ważne fragmenty w treści utworu zaznacz fiszkami. Kolumna tekstu ma być wyśrodkowana na stronie, zaś fiszki umieść nieco po lewej stronie tekstu na wysokości odpowiadającego im akapitu. Treść noweli formatujemy elementami article, h1 oraz h2, oraz p. Fiszki są zawarte w elementach aside. Każda fiszka znajduje się w kodzie HTML bezpośrednio przed akapitem, którego dotyczy. Na przykład fiszka z tekstem Andrzej Borycki, pseudonim dotyczy akapitu rozpoczynającego się od słów Właśnie o samym świcie…, dlatego jest umieszczona bezpośrednio nad nim.
  
  Rozdział 35. ♦ Podsumowanie części piątej
  
  425
  
  Zarys kodu HTML projektu 35.4 jest widoczny na listingu 35.3. Listing 35.3. Nowela Stefana Żeromskiego z fiszkami wskazującymi fragmenty tekstu
  
  Stefan Żeromski Rozdzióbią nas kruki, wrony

  Ani jeden żywy promień...

  Ponura jesień zwarzyła już...

  Andrzej Borycki, pseudomim

  Właśnie o samym świcie Andrzej Borycki...

  ...
  
  Style nadające format fiszkom są widoczne na listingu 35.4. Najpierw należy sformatować pojemnik: nadać mu szerokość i wyśrodkować na stronie. Następnie formatujemy akapity. Tekst akapitów jest wyjustowany. Dopełnienie lewe i prawe akapitów wynosi 150 pikseli. W ten sposób zapewniamy odpowiednie miejsce na fiszki. Dzięki temu, że dopełnienie lewe ma identyczną wartość jak prawe, tekst utworu pozostaje wyśrodkowany. Same fiszki są dosunięte do lewej strony (float: left) i mają szerokość 130 pikseli. Listing 35.4. Formatowanie fiszek article { width: 900px; margin: 0 auto; } p { text-align: justify; text-indent: 2em; line-height: 160%; margin-bottom: 40px; padding: 0 150px; } aside { text-indent: 0; width: 130px; float: left; font-size: 60%; font-family: "Trebuchet MS", sans-serif; letter-spacing: 0.2em; text-align: right; border: 1px solid black; background: white; padding: 10px 5px; margin: 0; }
  
  Część V ♦ Układ strony
  
  426
  
  Projekt 35.3. Szablony XHTML/CSS Projekt demonstruje użycie elementów ul i li do wykonania zestawienia miniaturek. Wykonaj witrynę prezentującą zestawienie szablonów XHTML/CSS. Każdy szablon jest zawarty w osobnym folderze oznaczonym numerem. Plik główny szablonu nazywa się index.html. Trzy pierwsze szablony są więc zawarte w plikach: 1/index.html 2/index.html 3/index.html
  
  Dla każdego szablonu dostępna jest miniaturka prezentująca jego wygląd. Miniatura pierwszego szablonu jest zawarta w pliku img/1.png, drugiego — w pliku img/2.png itd. Zestawienie szablonów wykonaj przy użyciu listy ul, która jest przedstawiona na listingu 35.5. Listing 35.5. Lista ul wykorzystana w projekcie 35.3
  • Template #1
  • Template #2
  • Template #3
  ...
  
  
  Miniaturki układamy w postaci tabelki o trzech kolumnach i czterech wierszach. W tym celu ustalamy szerokość listy ul na 700 pikseli, a elementy li dosuwamy do lewej: ul { width: 700px; margin: 0 auto; list-style-type: none; } li { float: left; }
  
  Każda miniaturka ma wymiary 200×50 pikseli, więc w każdym wierszu znajdą się trzy miniaturki. Efekt rollover hiperłączy polega na zmianie koloru obramowania oraz tła elementu li: li:hover { background: #eeeeee; border: 1px double #aaaaaa; }
  
  Rozdział 35. ♦ Podsumowanie części piątej
  
  427
  
  Projekt 35.4. Tabelka miniatur o różnych wymiarach Wykonaj stronę prezentującą tabelkę miniaturowych zdjęć. Do ułożenia miniatur na stronie użyj elementów div oraz stylów CSS. Każda miniaturka może mieć dowolne wymiary, dochodzące do 140×110 pikseli. Stronę wykonaj tak, by pomimo tego, że miniaturki mają różne kształty, obszar zajmowany przez każdą z nich był identyczny. Dane do projektu składają się z ośmiu plików: auto-moto-0.jpg, auto-moto-1.jpg, …, auto-moto-7.jpg. Szerokość każdego z nich jest mniejsza lub równa 140 pikseli, a wysokość nie przekracza 110 pikseli. Kod XHTML rozwiązania jest trywialny. Strona zawiera przedstawiony na listingu 35.6 pojemnik section, który zawiera elementy figure. W każdym z nich umieszczony jest jeden element img. Listing 35.6. Pierwszy krok pracy nad stroną z projektu 35.4
  
  
  
  
  
  ...
  
  Ułożenie elementów figure realizujemy, dosuwając je do lewej strony wewnątrz pojemnika o stałej szerokości: section { width: 800px; margin: 0 auto; } figure { width: 142px; height: 112px; float: left; ... }
  
  Szerokość i wysokość elementu figure jest równa wymiarom maksymalnego obrazu powiększonym o obramowanie zdjęcia. Jeśli element img ma obramowanie jednopikselowe: figure img { border: 1px solid black; ... }
  
  Część V ♦ Układ strony
  
  428
  
  to wymiary elementu div.minifotka wynoszą 142×112 pikseli: 142 = 140 + 1 (lewe obramowanie obrazu) + 1 (prawe obramowanie obrazu) 112 = 110 + 1 (górne obramowanie obrazu) + 1 (dolne obramowanie obrazu)
  
  Każda miniaturka ma zajmować identyczną przestrzeń 140×110 pikseli. W obrębie własnego pola zdjęcie ma być wyśrodkowane poziomo i pionowo. Za wyśrodkowanie poziome odpowiada właściwość text-align. Wyśrodkowanie pionowe jest trudniejsze. Najpierw właściwością line-height ustalamy wysokość wiersza tekstu. Wynosi ona tyle samo ile wysokość maksymalnego obrazu, czyli 110 pikseli. Następnie właściwością font-size ustalamy rozmiar czcionki na 0, co ma spowodować usunięcie niewielkiego pionowego odstępu. Na zakończenie element img wyrównujemy w pionie, wykorzystując do tego właściwość vertical-align: figure { line-height: 110px; font-size: 0; ... } figure img { vertical-align: middle; ... }
  
  Projekt 35.5. Zabytki Lublina Przygotuj witrynę zawierającą zdjęcia i krótki opis kilku zabytków Lublina. Układ witryny podziel na dwie kolumny. Fotografie umieść z lewej strony, a odpowiadający im opis — z prawej. Całość wykonaj w postaci pionowego białego pasa stałej szerokości na niebieskim tle. Pracę rozpocznij od wykonania pasa. Użyj do tego elementów html oraz body. Jeśli element html ma niebieskie tło, a element body stałą szerokość, jest wyśrodkowany i ma białe tło: html { background: #457fbe; margin: 0; padding: 0 } body { width: 1000px; margin: 0 auto; padding: 0; background: white; }
  
  to otrzymasz efekt białego pasa na niebieskim tle. Szerokość pasa możesz zmienić, podając inną szerokość elementu body. Wnętrze białego pasa należy podzielić na dwie kolumny. Podział ten nie może być wykonany w taki sposób jak w układach omówionych w rozdziale 32., gdyż utracimy pionowe powiązanie fotografii z tekstem. Każdy zabytek będzie zawarty w elemencie
  
  Rozdział 35. ♦ Podsumowanie części piątej
  
  429
  
  article, który podzielimy na kolumny elementami figure (kolumna przeznaczona na ilustrację) oraz div.tekst (kolumna przeznaczona na tekst). Kod XHTML pierwszego
  
  zabytku jest przedstawiony na listingu 35.7. Takie rozwiązanie gwarantuje, że zdjęcie zabytku będzie wyrównane w pionie z odpowiadającym mu podpisem (zawsze, tj. bez względu na wielkość czcionki czy inne czynniki). Listing 35.7. Podział na dwie kolumny w opisie zabytków Lublina Zabytki Lublina
  
  
  
  Zamek Królewski Zamek Królewski był siedzibą Jagiellonów...
  
  
  
  
  
  Brama Krakowska Przy placu Władysława Łokietka...
  
  ...
  
  Zwróć uwagę na wygląd zdjęć. Mają one zaokrąglone narożniki. Efekt taki osiągniesz, zaokrąglając narożniki fotografii w programie graficznym. Każda fotografia umieszczana na stronie WWW jest prostokątna. Zmianę kształtu obrazu z prostokątnego na inny osiągamy przez zlewanie fragmentu (w tym przypadku narożników) z tłem strony. Rysunek 35.1 przedstawia obraz umieszczony na białym tle, rysunek 35.2 przedstawia obraz po włączeniu obramowania, zaś na rysunku 35.3 kolor tła został zmieniony na szary. Rysunek 35.1. Obraz na białym tle
  
  Część V ♦ Układ strony
  
  430 Rysunek 35.2. Obraz po dodaniu obramowania
  
  Rysunek 35.3. Obraz po umieszczeniu na stronie o szarym tle
  
  Projekt 35.6. Kolędy Wykonaj witrynę prezentującą nuty i teksty kolęd. Każda z kolęd jest dostępna w czterech formatach: PDF, PNG, TXT oraz MUS. Pliki PDF, PNG oraz MUS zawierają nuty utworu, a plik tekstowy — słowa kolędy. Nuty w formacie PNG są dostępne w dwóch rozdzielczościach: większej o szerokości około 800 pikseli oraz mniejszej o szerokości 400 pikseli. Wszystkie pliki dotyczące jednej kolędy mają identyczne nazwy. Oto pliki dotyczące kolędy pt. Cicha noc: cicha-noc.txt cicha-noc.pdf cicha-noc.png cicha-noc.mus mini/cicha-noc.png
  
  Witrynę wykonamy w taki sposób, by zawierała menu główne z tytułami kolęd oraz by pozwalała na pobieranie plików we wszystkich formatach. Wybranie tytułu kolędy z menu ma powodować przejście do strony WWW poświęconej tej kolędzie. Do oznaczenia formatów PDF, TXT oraz MUS użyjemy ikon zawartych w folderze ikony/. Witryna będzie się składała z tylu plików, ile jest kolęd. Każda kolęda będzie zawarta w osobnym pliku XHTML. Tekst i nuty kolędy pt. Cicha noc umieścimy w pliku cichanoc.html, strona kolędy pt. Bóg się rodzi będzie zawarta w pliku bog-się-rodzi.html itd.
  
  Rozdział 35. ♦ Podsumowanie części piątej
  
  431
  
  Witrynę wykonamy, wykorzystując układ numer 3 z rozdziału 32. Jest to układ stałej szerokości podzielony na dwie pionowe kolumny: lewą i prawą. Pracę nad plikiem cicha-noc.html rozpoczynamy od utworzenia pustej strony WWW i umieszczenia w niej elementów div#pojemnik, nav oraz article, wyznaczających podział na kolumny lewą i prawą. Zarys kodu XHTML jest przedstawiony na listingu 35.8. Listing 35.8. Pierwszy krok pracy nad plikiem cicha-noc.html z projektu 35.6
  
  
  
  
  
  Następnie w elemencie nav umieszczamy listę, która będzie stanowiła menu witryny. Lista taka jest przedstawiona na listingu 35.9. Każda pozycja listy z listingu 35.9 odpowiada jednej kolędzie. Listing 35.9. Menu projektu 35.6 — plik cicha-noc.html
  
  
  • A wczora z wieczora
  • Bóg się rodzi
  • Cicha noc
  • Do szopy
  ...
  
  W projekcie tym w menu wyróżnimy kolędę, która jest aktualnie wyświetlana na stronie. Użyjemy do tego klasy wybrana. W każdym pliku XHTML klasę wybrana należy dodać do jednej pozycji menu. W pliku cicha-noc.html klasę wybrana dodamy elementowi li zawierającemu odsyłacz do kolędy pt. Cicha noc. W pliku do-szopy.html klasę wybrana dodamy elementowi li zawierającemu odsyłacz do kolędy pt. Do szopy. I tak dalej. W elemencie article, który jest widoczny na listingu 35.8, należy dodać tytuł, tekst i nuty kolędy, a także odsyłacze do plików .pdf, .txt oraz .mus. Zarys kodu dotyczącego kolędy Cicha noc jest przedstawiony na listingu 35.10. Listing 35.10. Treść zawarta w kodzie strony cicha-noc.html
  
  Cicha noc
  
  
  
  
  
  
  
  Część V ♦ Układ strony
  
  432
  
  
  
  
  
  

  Cicha noc, święta noc,
  Pokój niesie ludziom wszem.
  ...

  
  
  Najpierw umieszczamy w kodzie tytuł Cicha noc oraz trzy ikony pozwalające na pobranie plików cicha-noc.txt, cicha-noc.mus oraz cicha-noc.pdf. Tytuł zawarty w elemencie h1 oraz ikony zawarte w elemencie nav umieszczamy w elemencie header. Otrzymujemy następującą strukturę XHTML:
  
  
  
  Dzięki temu możemy ułożyć tytuł oraz ikony tak, by były wyrównane do górnej krawędzi oraz rozsunięte na boki według schematu: tytul
  
  ikony
  
  Zadanie to realizujemy, wykorzystując pozycjonowanie kontekstowe: header { position: relative; } header h1 { /* domyślne pozycjonowanie: top left */ } header nav { position: absolute; right: 0; top: 0 }
  
  Ikony do pobierania plików .txt, .mus oraz .pdf są zawarte w hiperłączach wskazujących odpowiednie pliki:
  
  
  
  Ikony traktujemy jako obrazy ozdobne, zatem pozostawiamy puste atrybuty alt. Ponieważ w treści hiperłącza nie występuje żaden tekst, w atrybucie title dołączamy odpowiedni opis.
  
  Rozdział 35. ♦ Podsumowanie części piątej
  
  433
  
  Poniżej elementu header na listingu 35.10 widać element figure. Zawiera on element img prezentujący nuty kolędy w formacie PNG. Nuty są dostępne w dwóch rozdzielczościach, dlatego w kodzie pojawia się hiperłącze, które zawiera element img:
  
  
  
  Nuty są rysunkiem związanym z treścią strony, dlatego w atrybucie alt podajemy opis obrazu. Dodatkowo ponieważ w elemencie a nie jest zawarty żaden tekst, opis hiperłącza umieszczamy w atrybucie title. Ostatnim nieopisanym elementem listingu 35.10 jest akapit p, który zawiera tekst kolędy. Plik cicha-noc.html powstaje przez połączenie listingów 35.8, 35.9 oraz 35.10. W analogiczny sposób należy wykonać pliki XHTML dla pozostałych kolęd. Oczywiście style CSS w tym projekcie wykonujemy w zewnętrznym pliku style.css. Dzięki temu format wszystkich kolęd jest ustalony w jednym miejscu. Pewnym utrudnieniem jest to, że nie dla wszystkich kolęd są dostępne nuty. Przykładem takiej kolędy jest Jam jest dudka. W folderze danych znajdziesz wyłącznie plik jam-jest-dudka.txt zawierający tekst kolędy. Dla kolędy tej hiperłącza pozwalające na pobieranie nut zastępujemy obrazami:
  
  Jam jest dudka
  
  
  
  
  
  Ikony ikona-mus-brak.png oraz ikona-pdf-brak.png są wyblakłe. W ten sposób wygląd wszystkich kolęd jest identyczny. Jeśli zasoby MUS oraz PDF są dostępne, wówczas ich ikony mają mocną kolorystykę i są hiperłączami. Jeśli pliki z nutami nie są dostępne, wówczas na stronie pojawiają się blade ikony, które nie są hiperłączami. Zwróć uwagę, że projekt ten zawiera dwa rodzaje obrazów: obrazy ozdobne (ikony) oraz obrazy dotyczące treści (nuty kolęd). Oba rodzaje obrazów umieściliśmy na stronie elementem img. Lepszym rozwiązaniem będzie użycie w odniesieniu do ikon właściwości background.
  
  Część V ♦ Układ strony
  
  434
  
  Po odwiedzeniu kilku hiperłączy do plików tekstowych zauważysz, że bardzo często pliki o rozszerzeniu .txt zawierają błędne kodowanie polskich liter. W celu poprawnego wyświetlenia takiego pliku należy w przeglądarce ręcznie ustawić kodowanie utf-8. Plik jest tekstowy, więc nie mamy możliwości umieszczenia w nim elementu meta. Niestety dołączenie do hiperłącza atrybutu ustalającego typ pliku i kodowanie znaków:
  
  
  
  nie przyniesie oczekiwanego skutku. Co ciekawe, pierwsza część atrybutu type= "text/html" poprawnie przełącza sposób interpretacji kodu z tekstowego na HTML. Rozwiązaniem tego problemu jest dołączenie kodowania plików w nagłówku HTTP. Jeśli korzystasz z serwera Apache, to nagłówek HTTP możesz zmienić, umieszczając w folderze koledy-dane/ plik tekstowy .htaccess o zawartości: AddType text/plain;charset=utf-8 .txt
  
  Oczywiście rozwiązanie takie będzie poprawnie działało tylko wtedy, gdy strony są przekazywane protokołem HTTP, czyli po opublikowaniu w internecie, lub wtedy, gdy do odwiedzenia ich użyjesz w przeglądarce adresu rozpoczynającego się od http://localhost. W przypadku gdy pliki są otwierane z dysku twardego podwójnym kliknięciem, metoda ta nie będzie działała.
  
  Część VI
  
  Tła
  
  436
  
  HTML5 i CSS3. Praktyczne projekty
  
  Rozdział 36.
  
  Właściwości CSS dotyczące tła Pierwsza metoda umieszczania obrazów na stronie WWW została przedstawiona w rozdziale 16. Głównym przeznaczeniem omówionego elementu img jest wstawianie obrazów, które są związane z tekstem witryny. W tej części podręcznika zajmiemy się drugim rozwiązaniem — tłami. Dzięki temu, że tła są dołączane do strony w stylach CSS, otrzymywany kod HTML jest maksymalnie zwięzły. Nie pojawiają się w nim żadne elementy graficzne związane z wyglądem witryny. Tło może zostać przypisane w CSS niemalże każdemu elementowi HTML. Poznane wcześniej właściwości CSS color i background pozwalają na zmianę koloru czcionki i tła: p { color: rgb(136, 136, 255); background: rgb(64, 255, 64); }
  
  Do tej pory wartością właściwości background był zawsze kolor, bądź to w postaci nazwanej (np. red, blue, black), bądź zapisany jako kod RGB (np. rgb(0, 136, 255) lub #00ffd3). Jeśli jako wartość background podasz adres URL pliku graficznego: background: url('tlo.jpg');
  
  to obraz ten zostanie użyty jako tło elementu. Domyślnie tło jest umieszczane w lewym górnym narożniku i powielane w dwóch kierunkach: do dołu i w prawo. Ścieżka prowadząca do pliku graficznego jest podawana względem folderu zawierającego plik CSS. Jeśli witryna składa się z folderów: witryna/ css/ style.css images/ tlo.png index.html
  
  Część VI ♦ Tła
  
  438
  
  wówczas w pliku index.html umieszczamy element link prowadzący do pliku w folderze css/:
  
  W pliku style.css znajdzie się natomiast właściwość background: background: url('../images/tlo.jpg');
  
  Ścieżka do pliku z tłem prowadzi z folderu CSS do góry, za co odpowiada fragment ../, a następnie do folderu images/. Do modyfikacji tła służą następujące właściwości CSS:  background-color — kolor tła;  background-image — obraz umieszczany w tle;  background-repeat — powielanie obrazu tła;  background-attachment — unieruchomienie obrazu tła;  background-position — położenie obrazu tła;  background-size — wymiar tła;  background-clip — przycinanie tła do obszaru zajmowanego przez element;  background — łączne ustalanie dowolnych spośród powyższych cech.
  
  Właściwość background-color ustala jednolity kolor tła. Zapisy: background: red;
  
  oraz: background-color: red;
  
  są równoważne. Właściwość background-image służy do umieszczenia w tle obrazu: background-image: url('tlo.jpg');
  
  Właściwość background-repeat określa sposób powielania tła. Dopuszczalnymi wartościami background-repeat są:  repeat — powielanie w pionie i w poziomie, jest to wartość domyślna;  repeat-x — powielanie tylko w poziomie;  repeat-y — powielanie tylko w pionie;  no-repeat — brak powielania.
  
  Właściwość background-attachment pozwala na unieruchomienie tła. Może ona przyjmować tylko dwie wartości:  scroll — tło podlega przewijaniu.  fixed — tło jest unieruchomione.
  
  Rozdział 36. ♦ Właściwości CSS dotyczące tła
  
  439
  
  Jej działanie jest zbliżone do pozycjonowania trwałego (position: fixed). Pozycję tła możemy ustalić, korzystając z właściwości background-position, której poprawnymi wartościami są:  słowa kluczowe wyznaczające położenie poziome: left, center, right;  słowa kluczowe wyznaczające położenie pionowe: top, center, bottom;  jednostki długości, np. piksele;  wartości procentowe.
  
  Na przykład zapis: background-position: top right;
  
  spowoduje umiejscowienie tła na górze z prawej strony, zaś wpis: background-position: 350px 140px;
  
  przesunie tło do piksela o współrzędnych (350, 140)1, co ilustruje rysunek 36.1. Rysunek 36.1. Wpływ wpisu background-position: 350px 140px na położenie tła
  
  Właściwość background-size pozwala na przeskalowanie obrazu umieszczonego w tle do wymiarów okna przeglądarki oraz treści strony. Właściwość background-clip ustala natomiast sposób przycinania tła do obszaru zajmowanego przez element. 1
  
  Początek układu współrzędnych jest w lewym górnym narożniku. Osie są skierowane w prawo i do dołu. Punkt (350, 140) wypada 350 pikseli na prawo od lewej krawędzi okna oraz 140 pikseli w dół od górnej krawędzi okna.
  
  Część VI ♦ Tła
  
  440
  
  Ćwiczenie 36.1 Przygotuj stronę z tekstem Lorem ipsum. W tle umieść obraz tlo.jpg. Ćwiczenie składa się z dwóch plików: index.html oraz tlo.jpg. Oba pliki należy umieścić w tym samym folderze. Plik index.html zawiera style wewnętrzne. Zasadnicza część kodu pliku index.html jest przedstawiona na listingu 36.1. Tło przypisujemy elementowi body. Dzięki temu obraz tlo.jpg będzie wypełniał całe okno przeglądarki, bez względu na obszar zajmowany przez akapit. Listing 36.1. Rozwiązanie ćwiczenia 36.1 body { background: url('tlo.jpg'); } ...
  
  

  Lorem ipsum dolor sit amet...

  
  
  Apostrofy otaczające nazwę pliku: url('tlo.jpg');
  
  nie są koniecznie i mogą być pominięte lub zastąpione cudzysłowem: url(tlo.jpg); url("tlo.jpg");
  
  Obraz tlo.jpg jest przedstawiony na rysunku 36.2, a wygląd strony z ćwiczenia 36.1 — na rysunku 36.3. Zwróć uwagę, że domyślnie tło jest powielane poziomo i pionowo. Wymiary obrazu tlo.jpg wynoszą 200×189 pikseli. Rysunek 36.2. Obraz tlo.jpg wykorzystany w ćwiczeniu 36.1 ma wymiary 200×189
  
  Ćwiczenie 36.2 Przygotuj stronę z tekstem Lorem ipsum i powielanym pionowo tłem przedstawiającym liście. Tło jest zapisane w pliku tlo-liscie.jpg. Fragment rozwiązania jest przedstawiony na listingu 36.2.
  
  Rozdział 36. ♦ Właściwości CSS dotyczące tła
  
  441
  
  Rysunek 36.3. Wygląd strony z ćwiczenia 36.1 Listing 36.2. Tło powielane w pionie body { background-image: url('tlo-liscie.png'); background-repeat: repeat-y; } ...
  
  

  Lorem ipsum dolor sit amet

  
  
  Style z listingu 36.2 można zapisać w skróconej postaci przy użyciu właściwości background: body { background: url('tlo-liscie.png') repeat-y; }
  
  Obraz tlo-liscie.png jest przedstawiony na rysunku 36.4, a wygląd strony z ćwiczenia 36.2 — na rysunku 36.5. Rysunek 36.4. Obraz tlo-liscie.jpg wykorzystany w ćwiczeniu 36.2
  
  Część VI ♦ Tła
  
  442
  
  Rysunek 36.5. Wygląd strony z ćwiczenia 36.2
  
  Ćwiczenie 36.3 Przygotuj stronę WWW z tekstem Lorem ipsum i powielanym poziomo tłem tlo-wzor.png. Rozwiązanie ćwiczenia jest przedstawione na listingu 36.3. Zwróć uwagę, że właściwości background-color oraz background-image mogą występować razem. Obszar strony niepokryty obrazem tła będzie miał tło o zadanym kolorze. Listing 36.3. Tło powielane poziomo body { background-color: rgb(244,252,255); background-image: url('tlo-wzor.png'); background-repeat: repeat-x; } ...
  
  

  Lorem ipsum dolor sit amet

  
  
  Style z listingu 36.3 można w skrócie zapisać jako: body { background: rgb(244,252,255) url('tlo-wzor.png') repeat-x; }
  
  Rozdział 36. ♦ Właściwości CSS dotyczące tła
  
  443
  
  Obraz tlo-wzor.png jest przedstawiony na rysunku 36.6, a wygląd strony z ćwiczenia 36.3 — na rysunku 36.7. Zwróć uwagę, że obraz powielany może mieć bardzo małą szerokość. Obraz z rysunku 36.4 ma szerokość 9 pikseli. Możemy użyć obrazu jednopikselowego, jednak tak wąskie obrazy stwarzały czasami problemy wydajnościowe: wyświetlenie strony, która stosowała wiele obrazów jednopikselowych, było — w starszych wersjach przeglądarek — niekiedy zauważalne. Rysunek 36.4. Obraz tlo-liscie.jpg wykorzystany w ćwiczeniu 36.3 ma szerokość 9 pikseli
  
  Rysunek 36.7. Wygląd strony z ćwiczenia 36.3
  
  Część VI ♦ Tła
  
  444
  
  Ćwiczenie 36.4 Przygotuj stronę WWW z tekstem Lorem ipsum sformatowanym w postaci wyśrodkowanej kolumny stałej szerokości. W górnej części kolumny, w tle, umieść obraz lilia.jpg. Stronę wykonaj tak, by tło pojawiało się jednokrotnie (tj. by nie było powielane w żadnym kierunku). Zarys rozwiązania jest przedstawiony na listingu 36.4. Listing 36.4. Tło, które nie będzie powielane body { margin: 0; padding: 0; background: #b9d8d4; } #pojemnik { width: 680px; margin: 0 auto; padding: 550px 60px 100px 60px; background-color: #59a69e; background-image: url('lilia.jpg'); background-repeat: no-repeat; border-left: 2px solid black; border-right: 2px solid black; } ...
  
  Lorem ipsum dolor sit amet...
  
  Wykorzystujemy układ 1. z rozdziału 32. Ustalamy kolor tła elementu body oraz modyfikujemy wygląd pojemnika div#pojemnik. Element ten ma szerokość równą szerokości obrazu lilia.jpg, czyli 800 pikseli: 800 = 680 + 60 * 2 (dopełnienie lewe i prawe)
  
  Tekst zawarty w elemencie div przesuwamy 550 pikseli w dół. Wykorzystujemy do tego celu właściwość padding-top. Nad tekstem będzie znajdowało się zdjęcie lilii. Dzięki temu, że powielanie tła jest wyłączone: background-repeat: no-repeat;
  
  fotografia będzie widoczna tylko w górnej części strony, nie będzie2 powielana pod tekstem Lorem ipsum. Poniżej zdjęcia lilii element div będzie miał kolor nadany właściwością background-color (selektor: div#pojemnik): background-color: #59a69e;
  
  2
  
  Po wykonaniu ćwiczenia wpis background-repeat ujmij w komentarz CSS /* ... */ i sprawdź, jaki to będzie miało wpływ na wygląd strony.
  
  Rozdział 36. ♦ Właściwości CSS dotyczące tła
  
  445
  
  Style dotyczące tła elementu #pojemnik można nieco krócej zapisać przy użyciu właściwości background: #pojemnik { ... background: #59a69e url('lilia.jpg') no-repeat; ... }
  
  Obraz lilia.jpg jest przedstawiony na rysunku 36.8, a wygląd strony z ćwiczenia 36.4 — na rysunku 36.9. Rysunek 36.8. Obraz lilia.jpg wykorzystany w ćwiczeniu 36.4
  
  Rysunek 36.9. Wygląd strony z ćwiczenia 36.4
  
  Ćwiczenie 36.5 Przygotuj stronę WWW z tekstem Lorem ipsum. Wykorzystaj układ 2. z rozdziału 32. Stronę wykonaj w taki sposób, by w miejscu nagłówka pojawiała się ilustracja z pliku po-deszczu.jpg. Zarys rozwiązania jest przedstawiony na listingu 36.5.
  
  Część VI ♦ Tła
  
  446 Listing 36.5. Tło elementu o sztywno zadanych wymiarach #pojemnik { width: 800px; margin: 0 auto; background: rgb(174,206,121); } header { background-image: url('po-deszczu.jpg'); width: 800px; height: 350px; border-bottom: 2px solid black; } #kolumna { padding: 60px; font-family: Georgia, serif; line-height: 3; letter-spacing: 0.15em; word-spacing: 0.5em; }
  
  Lorem ipsum... ©lorem ipsum
  
  Obraz po-deszczu.jpg ma wymiary 800×350, zatem w szablonie o stałej szerokości przygotowujemy nagłówek o dokładnie takich wymiarach. Jak widać na listingu 36.5, cały pojemnik ma szerokość 800 pikseli, a wymiary nagłówka ustalamy przy użyciu właściwości width oraz height. Tak wykonany nagłówek ma wymiary identyczne jak obraz użyty w tle. W związku z tym właściwości background-repeat czy background-color nie są istotne. Tło elementu header jest ustalane wyłącznie przy użyciu właściwości background-image. Oczywiście można też użyć właściwości background. Obraz po-deszczu.jpg jest przedstawiony na rysunku 36.10, a wygląd strony z ćwiczenia 36.5 — na rysunku 36.11. Rysunek 36.10. Obraz po-deszczu.jpg wykorzystany w ćwiczeniu 36.5
  
  Zwróć uwagę na napis Po deszczu… widoczny na ukończonej stronie (rysunek 36.11). Napis ten jest dostępny tylko dla przeglądarek graficznych. Ani osoby niewidome, ani roboty internetowe, ani osoby surfujące z wyłączonym pobieraniem obrazów lub stylów nie mają do niego dostępu. Problem ten możesz ominąć, stosując technikę FIR (ang. Fahrner Image Replacement — metodę Fahrnera wymiany obrazów na tekst) opisaną w kolejnym rozdziale.
  
  Rozdział 36. ♦ Właściwości CSS dotyczące tła
  
  447
  
  Rysunek 36.11. Wygląd strony z ćwiczenia 36.5
  
  Ćwiczenie 36.6 Przygotuj stronę WWW z tekstem Lorem ipsum. Wykorzystaj układ 1. z rozdziału 32. Stronę wykonaj w taki sposób, by w jej środkowej części pojawiało się tło w kształcie pionowego paska. Użyj pliku tlo-pas.png. Zarys rozwiązania ćwiczenia jest przedstawiony na listingu 36.6. Listing 36.6. Tło umiejscowione na środku i powielane pionowo body { margin: 0; padding: 0; background-repeat: repeat-y; background-position: top center; background-image: url('tlo-pas.png'); }
  
  Za wyśrodkowanie pasa umieszczonego w tle odpowiada wpis: background-position: top center;
  
  Pas powstaje poprzez pionowe (repeat-y) powielenie obrazu tlo-pas.jpg. Szerokość pasa jest zawsze stała: wynika z szerokości i wyglądu obrazu tła. W skrócie style z listingu 36.6 można zapisać jako: background-image: url('tlo-pas.png') top center repeat-y;
  
  Część VI ♦ Tła
  
  448
  
  Obraz tlo-pas.png jest przedstawiony na rysunku 36.12, a wygląd strony z ćwiczenia 36.6 — na rysunku 36.13.
  
  Rysunek 36.12. Obraz tlo-pas.jpg wykorzystany w ćwiczeniu 36.6
  
  Rysunek 36.13. Wygląd strony z ćwiczenia 36.6
  
  Ćwiczenie 36.7 Przygotuj stronę z tekstem Lorem ipsum. Na stronie umieść w lewym górnym narożniku logo zapisane w pliku logo.png. Stronę wykonaj w taki sposób, by tło nie podlegało przewijaniu. Rozwiązanie ćwiczenia jest przedstawione na listingu 36.7. Listing 36.7. Tło, które nie podlega przewijaniu html { background-image: url('logo.png'); background-repeat: no-repeat; background-position: 0 250px; background-attachment: fixed; margin: 0; padding: 0; } body {
  
  Rozdział 36. ♦ Właściwości CSS dotyczące tła
  
  }
  
  449
  
  margin: 0; padding: 20px 150px 20px 200px;
  
  Właściwości dotyczące tła możemy zapisać w skrócie: background: url('logo.png') no-repeat 0 250px fixed;
  
  Tło nie jest powielane (no-repeat), znajduje się przy lewej krawędzi ekranu 250 pikseli w dół od górnej krawędzi okna (0 250px) i jest unieruchomione (fixed). Wygląd strony z ćwiczenia 36.7 jest przedstawiony na rysunku 36.14.
  
  Rysunek 36.14. Strona z ćwiczenia 36.7
  
  Ćwiczenie 36.8 Wykonaj stronę z tekstem Lorem ipsum. W tekście umieść trzy akapity przeplatające się z nagłówkami h1, h2 oraz h3. Akapity ozdób ornamentem wzor.png, zaś w nagłówkach umieść — w postaci tła — obrazy lorem-ipsum.png, dolor-sit-amet.png oraz quam-urna.png. Zarys rozwiązania ćwiczenia jest przedstawiony na listingu 36.8.
  
  Część VI ♦ Tła
  
  450 Listing 36.8. Tła elementów p, h1, h2 oraz h3 html { background: rgb(255,255,183); } p { padding: 40px 40px 140px 40px; background: url('wzor.png') center bottom no-repeat; } #loremipsum { background: url('lorem-ipsum.png'); width: 222px; height: 59px; } #dolorsitamet { background: url('dolor-sit-amet.png'); width: 254px; height: 63px; } #quamurna { background: url('quam-urna.png'); width: 206px; height: 53px; } ...
  
  

  Lorem ipsum dolor sit amet...

  
  
  

  Curabitur non turpis...

  
  
  

  Lorem ipsum dolor sit amet...

  
  
  Przykład ten ilustruje to, że tło może być stosowane w połączeniu z wieloma elementami HTML, m.in. akapitami, nagłówkami, elementami frazowymi (np. em, strong), elementami ogólnymi (div, span) czy odsyłaczami a. W celu ozdobienia akapitów stosujemy właściwość background: background: url('wzor.png') center bottom no-repeat;
  
  Tło umieszczamy na dole, wyśrodkowane poziomo i niepowielane. Widoczność tła zapewnia pionowe dolne dopełnienie o wielkości 140 pikseli: padding: ... 140px ...
  
  Zwróć uwagę na zawartość nagłówków h1, h2 oraz h3. Elementy te są puste. Każdy z nich ma sztywno ustalone wymiary odpowiadające obrazowi tła. Na przykład pierwszy nagłówek h1 ma wymiary 222×59, identyczne z wymiarami obrazu lorem-ipsum.png. Obraz ten jest umieszczony w tle przy użyciu właściwości background:
  
  Rozdział 36. ♦ Właściwości CSS dotyczące tła
  
  451
  
  #loremipsum { background: url('lorem-ipsum.png'); width: 222px; height: 59px; }
  
  Oczywiście tak wykonane nagłówki są dostępne wyłącznie dla przeglądarek graficznych. Dlatego takie rozwiązania koniecznie należy łączyć z techniką FIR, która zapewni tekstową wersję informacji zawartych w tłach. Ornamenty ozdabiające akapity są bardzo dobrym przykładem obrazów ozdobnych. Tego typu obrazy należy umieszczać jako tła, a nie elementem img.
  
  Wygląd strony z ćwiczenia 36.8 jest przedstawiony na rysunku 36.15. Rysunek 36.15. Strona z ćwiczenia 36.8
  
  Ćwiczenie 36.9 Przygotuj stronę, która będzie zawierała w tle fotografię podroz.jpg. Zadanie wykonaj, wykorzystując właściwość: background-size: cover;
  
  Sprawdź wpływ wymiaru okna przeglądarki oraz stopnia powiększenia tekstu na sposób skalowania obrazu w tle. Zarys rozwiązania jest przedstawiony na listingu 36.9.
  
  Część VI ♦ Tła
  
  452
  
  Listing 36.9. Dwa gradienty: jeden rozpoczyna stronę na górze, a drugi kończy na dole body { background: url('podroz.jpg') top center no-repeat; background-size: cover; background-color: black; }
  
  Wygląd strony z ćwiczenia 36.9 jest przedstawiony na rysunku 36.16.
  
  Rysunek 36.16. Strona z ćwiczenia 36.9
  
  Wielokrotne tła Język CSS3 pozwala na definiowanie dowolnej liczby obrazów tła dla pojedynczego elementu. Parametry poszczególnych obrazów wymieniamy, oddzielając je przecinkami: background: właściwości właściwości właściwości ... właściwości
  
  pierwszego obrazu tła, drugiego obrazu tła, trzeciego obrazu tła, ostatniego obrazu tła;
  
  Rozdział 36. ♦ Właściwości CSS dotyczące tła
  
  453
  
  na przykład: background: url('pierwszy-obraz.png') left top repeat-x, url('drugi-obraz.png') left bottom repeat-x, url('trzeci-obraz.png') center center repeat-x;
  
  Podane obrazy są umieszczane na warstwach. Pierwszy wymieniony obraz jest na najwyższej warstwie, więc przysłania wszystkie obrazy. Ostatni wymieniony obraz jest na najniższej warstwie, więc wszystkie obrazy go przysłaniają:  pierwszy-obraz.png — najwyższa warstwa (przysłania wszystkie niższe);  …  ostatni-obraz.png — najniższa warstwa (przysłaniana przez wszystkie wyższe).
  
  Ćwiczenie 36.10 Przygotuj stronę z tekstem Lorem ipsum. Wykorzystując dwa obrazy: gradient-gora.png oraz gradient-dol.png, dodaj do strony gradient (na samej górze i na samym dole). Oba obrazy mają wysokość 250 pikseli. Przedstawiają gradient liniowy płynnie przechodzący od zupełnej przezroczystości do częściowo przezroczystego koloru szarego. Obraz gradient-dol.png jest lustrzanym odbiciem pionowym obrazu gradient-gora.png. Dzięki wykorzystaniu formatu PNG i przezroczystości ten sam obraz może być wykorzystany na stronie o dowolnym kolorze. Zarys rozwiązania jest przedstawiony na listingu 36.10. Listing 36.10. Dwa gradienty: jeden rozpoczyna stronę na górze, a drugi kończy na dole body { padding: 250px 215px; margin: 0; background: url('gradient-gora.png') left top repeat-x, url('gradient-dol.png') left bottom repeat-x; background-color: #d9fcff; }
  
  Jak widać na listingu 36.10, oba obrazy przypisujemy do elementu body: jeden na górze, a drugi na dole. Oba gradienty są powielane poziomo (repeat-x). Miejsce na tło (wysokość obrazu wynosi 250 pikseli) jest zapewnione przez wpis: padding: 250px ...
  
  Po wykonaniu strony zmień kolor #d9fcff na inny, np. yellow. Zmniejsz wielokrotnie wielkość czcionki i sprawdź, jaki to będzie miało wpływ na wygląd witryny.
  
  Część VI ♦ Tła
  
  454
  
  Ćwiczenie 36.11 Przygotuj stronę z tekstem Lorem ipsum. Tekst umieść w prostokątnej ramce rzucającej cień. Ramkę tworzą trzy obrazy: tlo-gora.png, tlo-srodek.png oraz tlo-dol.png. Obrazy tlo-gora.png oraz tlo-dol.png mają wymiary 840×130 pikseli. Wymiary obrazu tlo-srodek.png wynoszą 840×30. Wszystkie trzy obrazy przypisujemy jako tła elementu p. Style, które to realizują, są przedstawione na listingu 36.11. Listing 36.11. Style strony zawierającej tekst wewnątrz prostokąta rzucającego cień p { margin: 0 auto; width: 680px; background: url('tlo-dol.png') center bottom no-repeat, url('tlo-gora.png') center top no-repeat, url('tlo-srodek.png') left top repeat-y; padding: 120px 80px; }
  
  Tło umieszczone na najniższej warstwie jest powielane w pionie na obszarze całego prostokąta. Znajdujące się na wyższych warstwach obrazy tlo-dol.png oraz tlo-gora.png przysłaniają fragmenty pokryte tłem tlo-srodek.png.
  
  Rozdział 37.
  
  FIR — wymiana obrazów na teksty Ćwiczenia omówione w poprzednim rozdziale mają ciekawą wspólną cechę. Otóż po wyłączeniu stylów CSS wszelkie obrazy przestają być widoczne. Ilustrują to rysunki 37.1 oraz 37.2. Widać na nich stronę z ćwiczenia 36.5. Na rysunku 37.1 style CSS są włączone, dzięki czemu na stronie pojawia się obraz umieszczony w tle. Po wyłączeniu interpretacji stylów ze strony znika obraz tła. Taki stan witryny jest widoczny na rysunku 37.2. Rysunek 37.1. Strona z ćwiczenia 36.5 przy włączonych stylach CSS
  
  Część VI ♦ Tła
  
  456 Rysunek 37.2. Strona z ćwiczenia 36.5 przy wyłączonych stylach CSS
  
  Napis Po deszczu… widoczny na rysunku 37.1 jest dostępny tylko dla przeglądarek graficznych. Ani osoby niewidome, ani wyszukiwarki internetowe nie mają do niego dostępu. Ten sam problem dotyczy strony z ćwiczenia 36.8. Nagłówki h1, h2 oraz h3 są dostępne wyłącznie w graficznej postaci; znikają po wyłączeniu stylów. Rozwiązaniem problemu dostępności tekstu zawartego w obrazie tła jest technika nazywana FIR (ang. Fahrner Image Replacement — metoda Fahrnera wymiany obrazów na tekst). Przy użyciu techniki FIR tworzymy dwie wersje strony:  Pierwsza wersja jest przeznaczona dla przeglądarek graficznych.  Druga wersja jest przeznaczona dla tych wszystkich, dla których obrazy są
  
  niedostępne. Przełączanie pomiędzy wersjami witryny jest wykonywane przez włączanie i wyłączanie interpretacji stylów. W wersji graficznej na stronie widoczne są obrazy tła. W wersji tekstowej znikają obrazy tła, a w ich miejsce pojawiają się teksty. Za znikanie obrazów odpowiada CSS: jeśli obraz jest przypisany do elementu jako obraz tła, to wyłączenie interpretacji CSS spowoduje, że obraz zniknie. W jaki sposób dodać tekst, który pojawi się dopiero po wyłączeniu interpretacji stylów? Jeśli tekst Lorem ipsum wpiszemy wewnątrz elementu h1: Lorem ipsum
  
  to będzie on widoczny nad tłem, psując efekt graficzny. Należy sprawić, by tekst nie był widoczny przy włączonych stylach. Istnieją trzy metody rozwiązania tego problemu:
  
  Rozdział 37. ♦ FIR — wymiana obrazów na teksty
  
  457
  
   Pierwsza metoda wykorzystuje właściwość display o wartości none.  Druga metoda polega na przesunięciu tekstu poza widoczny obszar. Wykorzystana do tego zostaje właściwość text-indent.  Trzecia metoda wykorzystuje przysłanianie warstw.
  
  Efekt FIR wykonany przy użyciu display: none Efekt FIR wykonany przy użyciu właściwości display o wartości none jest przedstawiony na listingu 37.1. Listing 37.1. FIR wykonany przy użyciu span i display #loremipsum { background: url('lorem-ipsum.png') no-repeat; width: 222px; height: 59px; } #loremipsum span { display: none; } Lorem ipsum
  
  Element h1 ma wymiary identyczne jak obraz. Właściwość background ustala tło elementu h1. Na obrazie widoczny jest tekst Lorem ipsum. Dzięki stylom: #loremipsum span { display: none; }
  
  tekst zawarty w elemencie span nie jest wyświetlany. Tak wykonana witryna będzie widoczna:  przy włączonej interpretacji stylów i wyświetlaniu obrazów — w postaci graficznej;  przy wyłączonej interpretacji stylów — w postaci tekstowej.
  
  Gdy style są włączone:  Obraz tła jest widoczny.  Tekst zawarty w elemencie span jest niewidoczny.
  
  Gdy style są wyłączone:  Tło nie jest widoczne.  Style display: none przestają obowiązywać, a zatem tekst staje się widoczny.
  
  Część VI ♦ Tła
  
  458
  
  Wadą tego rozwiązania jest to, że czytniki stron WWW pomijają elementy o właściwości display: none. Dlatego dla osób niewidomych tekst zawarty w elemencie span będzie niedostępny.
  
  Efekt FIR wykonany przy użyciu text-indent Efekt FIR wykonany przy użyciu właściwości text-indent jest przedstawiony na listingu 37.2. Listing 37.2. FIR wykonany przy użyciu text-indent #loremipsum { background: url('lorem-ipsum.png') no-repeat; width: 222px; height: 59px; text-indent: -2000em; } Lorem ipsum
  
  Gdy style są włączone:  Obraz tła jest widoczny.  Tekst jest przesunięty o 2000em na lewo, a więc staje się niewidoczny.
  
  Gdy style są wyłączone:  Tło nie jest widoczne.  Style text-indent przestają obowiązywać, przez co tekst wraca na swoje miejsce
  
  i jest widoczny. Problem stwarza przypadek, gdy style są włączone, a obrazy wyłączone. Witryna w wersji graficznej staje się wówczas niedostępna. Nie widać na niej ani tekstu zawartego w obrazie, ani tekstu umieszczonego w elemencie span.
  
  Efekt FIR wykorzystujący kolejność warstw Efekt FIR wykorzystujący kolejność warstw jest przedstawiony na listingu 37.3. Listing 37.3. FIR wykonany przy użyciu warstw #loremipsum { width: 222px; height: 59px; position: relative;
  
  Rozdział 37. ♦ FIR — wymiana obrazów na teksty
  
  459
  
  } #loremipsum span { display: block; position: absolute; width: 100%; height: 100%; background: url('lorem-ipsum.png') no-repeat; } Lorem ipsum
  
  W trzecim rozwiązaniu wewnątrz elementu h1 umieszczamy element span. Element span pozycjonujemy kontekstowo względem elementu h1. Wymiary elementu span są identyczne z wymiarami elementu h1, więc element span pokrywa całkowicie element h1. Jeśli przypiszemy tło do elementu span, wówczas obraz ten przysłoni tekst zawarty wewnątrz h1. Jeśli element span zechcesz umieścić w innym miejscu kodu, np. po napisie: Lorem ipsum
  
  to pamiętaj o dodaniu w stylach elementu span właściwości top oraz left, które zapewnią umiejscowienie tła w lewym górnym narożniku elementu h1: #loremipsum span { ... top: 0; left: 0; }
  
  Efekt FIR stosujący przezroczyste obrazy Jeśli do efektu FIR użyjemy obrazów, które są przezroczyste, tekst znajdujący się pod obrazem będzie wówczas częściowo widoczny. Problem ten rozwiążemy, stosując trzy warstwy:  Na najwyższej warstwie umieścimy częściowo przezroczysty obraz PNG.  Środkowa warstwa będzie zawierała nieprzezroczyste tło.  Najniższa warstwa będzie zawierała teksty.
  
  Zarys rozwiązania jest przedstawiony na listingu 37.4. Listing 37.4. Kod HTML efektu FIR stosującego przezroczyste obrazy PNG #loremipsum { width: 222px; height: 59px; position: relative; background: #ffffb7; }
  
  Część VI ♦ Tła
  
  460 #loremipsum span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #loremipsum span.label { z-index: -1; } #loremipsum span.img { background: url('lorem-ipsum.png') no-repeat; }
  
  Lorem ipsum
  
  W rozwiązaniu z listingu 37.4 wewnątrz elementu h1 umieszczamy dwa elementy span. Łącznie mamy więc trzy elementy:  span.buttton — najwyższa warstwa; tłem elementu będzie częściowo
  
  przezroczysty obraz PNG.  h1 — środkowa warstwa; tło elementu będzie jednolite, nieprzezroczyste.  span.label — najniższa warstwa; na niej znajduje się tekst lorem ipsum.
  
  Wszystkie trzy elementy mają wymiary identyczne jak obraz PNG i zajmują dokładnie ten sam obszar. Element span.label przesuwamy pod spód wpisem: z-index: -1;
  
  Szczegółowy opis wszystkich podanych rozwiązań znajdziesz w Wikipedii: http://en.wikipedia.org/wiki/Fahrner_Image_Replacement.
  
  Ćwiczenie 37.1 Wykonaj stronę sprawdzającą działanie efektu FIR wykonanego przy użyciu display: none. Użyj kodu z listingu 37.1.
  
  Ćwiczenie 37.2 Wykonaj stronę sprawdzającą działanie efektu FIR wykonanego przy użyciu text-indent. Użyj kodu z listingu 37.2.
  
  Rozdział 37. ♦ FIR — wymiana obrazów na teksty
  
  461
  
  Ćwiczenie 37.3 Wykonaj stronę sprawdzającą działanie efektu FIR wykonanego przy użyciu warstw. Użyj kodu z listingu 37.3.
  
  Ćwiczenie 37.4 Wykonaj stronę sprawdzającą działanie efektu FIR wykonanego z wykorzystaniem przezroczystych obrazów. Użyj kodu z listingu 37.4.
  
  Ćwiczenie 37.5 Wykonaj stronę z ćwiczenia 36.5, stosując technikę FIR z użyciem text-indent. Zarys rozwiązania jest przedstawiony na listingu 37.5. Listing 37.5. Rozwiązanie ćwiczenia 37.5 #naglowek { background: url('po-deszczu.jpg') no-repeat; width: 800px; height: 350px; border-bottom: 2px solid black; text-indent: -2000em; margin: 0; } ...
  
  Po deszczu ... ©lorem ipsum
  
  W kodzie HTML ćwiczenia 36.5 header zastąpiono elementem h1. Strona po wyłączeniu interpretacji stylów wygląda teraz tak jak na rysunku 37.3. Jak widać, tekst Po deszczu… jest dostępny. Rysunek 37.3. Strona stosująca technikę FIR po wyłączeniu interpretacji stylów
  
  Część VI ♦ Tła
  
  462
  
  Po wykonaniu ćwiczenia usuń1 z folderu plik po-deszczu.jpg. Strona wygląda teraz tak jak na rysunku 37.4 — tym razem treść jest nieczytelna. Jeśli w ten sposób wykonasz menu witryny, to nawigacja nie będzie możliwa, dopóki nie zostaną pobrane pliki graficzne. Rysunek 37.4. Strona z ćwiczenia 37.5 przy włączonych stylach CSS i wyłączonych obrazach
  
  Ćwiczenie 37.6 Wykonaj ćwiczenie 36.8, stosując technikę FIR opartą na warstwach. Zarys rozwiązania jest przedstawiony na listingu 37.6. Listing 37.6. Technika FIR zastosowana do nagłówków #loremipsum { width: 222px; height: 59px; margin: 40px auto 20px auto; position: relative; } #loremipsum span { display: block; position: absolute; top: 0; left: 0; background: url('lorem-ipsum.png') no-repeat; width: 222px; height: 59px; 1
  
  Jest to prosta i niezależna od przeglądarki metoda wyświetlenia witryny tak, by style CSS były włączone, a obrazy wyłączone. Oczywiście obrazów nie musisz fizycznie usuwać — możesz je przenieść do innego folderu. Jeśli wszystkie obrazy znajdują się w jednym folderze, np. img/, wówczas wystarczy zmiana nazwy folderu.
  
  Rozdział 37. ♦ FIR — wymiana obrazów na teksty
  
  463
  
  } #dolorsitamet { width: 254px; height: 63px; margin: 40px auto 20px auto; position: relative; } #dolorsitamet span { display: block; position: absolute; top: 0; left: 0; background: url('dolor-sit-amet.png') no-repeat; width: 254px; height: 63px; } ... Lorem ipsum ... Dolor sit amet
  
  Jeśli teraz usuniesz z folderu pliki graficzne, strona będzie wyglądała tak jak na rysunku 37.5. Rysunek 37.5. Strona z ćwiczenia 37.5 po usunięciu z folderu obrazów
  
  W celu wyłączenia widoczności obrazów możesz użyć przedstawionej na rysunku 37.6 opcji Wyłącz obrazki. Pamiętaj jednak, że opcja ta działa poprawnie wyłącznie dla obrazów pobieranych z sieci. Ćwiczenie musisz więc opublikować na serwerze i odwiedzić poprzez sieć lub zainstalować serwer Apache i użyć adresu rozpoczynającego się od http://localhost.
  
  Część VI ♦ Tła
  
  464 Rysunek 37.6. Opcja Wyłącz obrazki wtyczki Web Developer Toolbar
  
  Sprawdzenie wyglądu witryny przy włączonych stylach CSS i wyłączonych obrazach możesz wykonać na dwa sposoby:  usuwając pliki graficzne,  wykorzystując opcję Wyłącz obrazki wtyczki Web Developer Toolbar.
  
  Ćwiczenie 37.7 Wykonaj ćwiczenie 37.6, stosując przezroczyste obrazy PNG. Zarys rozwiązania jest przedstawiony na listingu 37.7. Listing 37.7. Technika FIR i przezroczyste obrazy h1 { position: relative; margin: 40px auto 20px auto; background: #d0eee8; } h1 span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } h1 span.label { z-index: -1; } #loremipsum { width: 222px; height: 59px;
  
  Rozdział 37. ♦ FIR — wymiana obrazów na teksty
  
  465
  
  } #loremipsum span.img { background: url('lorem-ipsum.png') no-repeat; } ...
  
  Lorem ipsum
  
  Dolor sit amet
  
  Quam urna
  
  W celu zminimalizowania liczby potrzebnych wpisów CSS najpierw ustalamy wspólne cechy wszystkich trzech warstw dla wszystkich nagłówków: h1 { ... } h1 span { ... } h1 span.label { ... }
  
  Na zakończenie każdy z nagłówków otrzymuje indywidualne wymiary oraz tło, np.: #loremipsum { width: 222px; height: 59px; } #loremipsum span.img { background: url('lorem-ipsum.png') no-repeat; }
  
  466
  
  Część VI ♦ Tła
  
  Rozdział 38.
  
  Udawane kolumny Elementy pływające stwarzają pewne problemy. W celu wymuszenia wysokości elementu nadrzędnego stosowaliśmy tzw. czyszczenie (por. punkt „Czyszczenie elementów pływających” w rozdziale 30.). Niestety nawet stosując czyszczenie, nie osiągniemy efektu równej wysokości kolumn. Przeanalizuj układ nr 5 z rozdziału 32. W kodzie HTML znajduje się pojemnik główny, który jest następnie — zgodnie z listingiem 38.1 — podzielony na trzy pionowe kolumny. Listing 38.1. Trójkolumnowy układ nr 5 z rozdziału 32.
  
  ... ... ...
  
  Jeśli kolumna środkowa będzie miała obramowanie pionowe, to długość krawędzi obramowania będzie zależna od wysokości kolumn. W przypadku gdy wysokość kolumny prawej będzie większa od wysokości kolumny środkowej, obramowanie zostanie urwane w połowie, co ilustruje rysunek 38.1. Rysunek 38.1. Wysokość obramowania kolumny środkowej zależy od wysokości kolumn lewej i prawej
  
  Część VI ♦ Tła
  
  468
  
  Najprostszym rozwiązaniem opisanego problemu z wysokościami kolumn jest sztuczka nazywana udawanymi kolumnami (ang. faux columns). Obramowanie wykonujemy nie przy użyciu właściwości border, a stosując tła. Technika udawanych kolumn została opisana przez Dana Cederholma w artykule pt. Faux Columns, który jest dostępny pod adresem http://www.alistapart.com/articles/fauxcolumns/. Najpierw należy przygotować obraz, który zostanie umieszczony w tle. Obraz taki jest widoczny na rysunku 38.2. Ma on szerokość 760 pikseli i może być powielany w pionie, tworząc dowolnie długi pas. Rysunek 38.2. Tło wykorzystane w efekcie udawanych kolumn
  
  W stylach pojemnika obraz z rysunku 38.2 przypisujemy jako tło (zauważ, że pojemnik ma identyczną szerokość jak obraz tlo.png): #pojemnik { width: 760px; margin: 0 auto; background: url('tlo.png'); overflow: hidden; }
  
  Tło pojemnika będzie wypełniało całą dostępną przestrzeń od góry do dołu, bez względu na wysokość samego pojemnika czy indywidualnych kolumn. Ilustruje to rysunek 38.3. Działanie takiego rozwiązania jest zależne od czyszczenia. Bez wymuszenia wysokości elementu #pojemnik tło nie pojawi się w ogóle na stronie. Rysunek 38.3. Witryna o trzech kolumnach. Obramowanie kolumny środkowej jest wykonane jako udawane kolumny
  
  Tło udawanych kolumn może być przypisane nie do pojemnika, a do całej strony. Jeśli pojemnik i tło wyśrodkujesz1 na stronie: 1
  
  Pojemnik środkujemy stylami margin: 0 auto. Za wyśrodkowanie tła odpowiada wartość center właściwości background.
  
  Rozdział 38. ♦ Udawane kolumny
  
  469
  
  body { background: url('tlo.png') top center repeat-y; } #pojemnik { width: 760px; margin: 0 auto; }
  
  wówczas udawane kolumny będą się rozciągały od samej góry do samego dołu okna przeglądarki. Ilustruje to rysunek 38.4. Tym razem czyszczenie nie jest potrzebne. Wysokość pojemnika nie ma wpływu na wygląd tła elementu body. Rysunek 38.4. Udawane kolumny jako tło elementu body rozciągają się na wysokość całego okna przeglądarki
  
  Podane rozwiązania różnią się:  koniecznością wymuszania wysokości pojemnika poprzez czyszczenie,  zachowaniem układu po zmniejszeniu szerokości okna poniżej szerokości
  
  pojemnika. Jeśli udawane kolumny są stosowane jako tło pojemnika, czyszczenie jest wówczas konieczne. Gdy natomiast tło nadajemy elementowi html lub body, czyszczenie jest zbędne. Zmiana szerokości okna poniżej szerokości pojemnika (czyli 760 pikseli) nie ma wpływu na rozwiązanie stosujące selektor #pojemnik. Witryna wygląda poprawnie, choć — ponieważ nie mieści się w oknie — zawiera poziomy pasek przewijania. Ilustruje to rysunek 38.5. Niestety rozwiązanie stosujące dla tła selektor body po zmniejszeniu szerokości okna rozjeżdża się, co widać na rysunku 38.6. Tło jest przez cały czas wyśrodkowane, zaś środkowanie pojemnika zostaje wstrzymane, gdy okno przeglądarki jest zbyt wąskie, by go pomieścić.
  
  Część VI ♦ Tła
  
  470 Rysunek 38.5. Strona z rysunku 38.3 po zmniejszeniu szerokości okna jest poprawna
  
  Rysunek 38.6. Strona z rysunku 38.4 po zmniejszeniu szerokości okna rozjeżdża się
  
  Problem środkowania tła rozwiążemy, nadając minimalną szerokość elementowi html. Gotowe rozwiązanie jest widoczne na listingu 38.2.
  
  Rozdział 38. ♦ Udawane kolumny
  
  471
  
  Listing 38.2. Udawane kolumny jako tło elementu html. Rozwiązanie odporne na zmniejszanie szerokości okna html { margin: 0; padding: 0; background: url('tlo.png') top center repeat-y; min-width: 760px; } body { margin: 0; padding: 0; } #pojemnik { width: 760px; margin: 0 auto; }
  
  Kod z listingu 38.2 ustala szerokość pojemnika na 760 pikseli. Obraz tlo.png musi mieć identyczną szerokość. Pojemnik i tło są wyśrodkowane. Właściwością min-width ustalamy minimalną szerokość elementu html. Usuwamy marginesy oraz dopełnienie elementów html i body.
  
  Ćwiczenie 38.1 Wykonaj układ nr 5 z rozdziału 32. Nadaj pięciopikselowe pionowe obramowanie kolumnie środkowej, a w prawej kolumnie umieść dużo tekstu. Otrzymasz stronę z rysunku 38.1.
  
  Ćwiczenie 38.2 Rozwiązanie ćwiczenia 38.1 wzbogać o efekt udawanych kolumn. Jako tło pojemnika #pojemnik użyj pliku tlo.png.
  
  Ćwiczenie 38.3 Zmodyfikuj rozwiązanie ćwiczenia 38.2. Obraz tlo.png przypisz jako powielane w pionie tło obrazu body. Zmniejszając szerokość okna przeglądarki, doprowadź witrynę do stanu z rysunku 38.6.
  
  Ćwiczenie 38.4 Rozwiązanie ćwiczenia 38.3 przekształć tak, by otrzymany układ był odporny na dowolne zmniejszanie szerokości okna przeglądarki. Obraz tła przypisz do elementu html oraz użyj właściwości min-width. Gdy okno ma szerokość poniżej szerokości układu, na stronie pojawi się poziomy pasek przewijania, lecz strona pozostanie poprawna. Błąd widoczny na rysunku 38.6 nie pojawi się.
  
  Część VI ♦ Tła
  
  472
  
  Ćwiczenie 38.5 Wykonaj witrynę składającą się z trzech stron WWW: piskleta.html, zaskroniec.html oraz zaba.html. Na pierwszej stronie umieść zdjęcie piskląt: piskleta.jpg, na drugiej — zdjęcie zaskrońca: zaskroniec.jpg, a na trzeciej — zdjęcie żaby: zaba.jpg. Na każdej stronie umieść identyczne menu zawierające odsyłacze do trzech stron. Stronę wykonaj w dwukolumnowym układzie stałej szerokości. Zastosuj udawane kolumny dla bardziej ozdobnego wyglądu. Wykorzystaj do tego obraz paskowanie.png. Obraz ten ma szerokość 760 pikseli i wyznacza podział na kolumny o szerokościach 240 oraz 520 pikseli. Ćwiczenie składa się z ośmiu plików:  HTML: piskleta.html, zaskroniec.html, zaba.html;  CSS: style.css;  zdjęcia: piskleta.jpg, zaskroniec.jpg, zaba.jpg;  tła: paskowanie.png.
  
  Wszystkie pliki należy umieścić w tym samym folderze. Kod HTML pierwszej ze stron, piskleta.html, jest widoczny na listingu 38.3. Listing 38.3. Kod HTML strony piskleta.html z ćwiczenia 38.5
  
  
  • Pisklęta
  • Zaskroniec
  • Żaba
  
  
  Pisklęta
  
  
  
  W stylach CSS widocznych na listingu 38.4:  Ustalamy szerokości pojemnika (760px) i kolumn nav (240px) oraz article (520px).  Kolumny umieszczamy obok siebie (float: left).  Nadajemy tło elementowi html.  Środkujemy położenie pojemnika (margin: 0 auto) oraz tła (background: top center).
  
  Rozdział 38. ♦ Udawane kolumny
  
  473
  
   Powielamy obraz paskowanie.png w pionie (repeat-y).  Ustalamy minimalną szerokość elementu html (min-width).  Usuwamy dopełnienie i margines elementów html i body. Listing 38.4. Style ćwiczenia 38.5 html { margin: 0; padding: 0; background: url('paskowanie.png') top center repeat-y; min-width: 760px; } body { margin: 0; padding: 0; font-family: Georgia, serif; text-transform: uppercase; } #pojemnik { width: 760px; margin: 0 auto; padding-top: 50px; } nav { float: left; width: 240px; } article { float: left; width: 520px; text-align: center; }
  
  Po wykonaniu pierwszej strony plik piskleta.html kopiujemy, zmieniamy nazwę kopii na zaba.html, po czym w treści wprowadzamy zdjęcie i podpis żaby. Identycznie wykonujemy trzecią stronę. Po wykonaniu każdego ćwiczenia sprawdź zachowanie układu po:  wielokrotnym zmniejszeniu/zwiększeniu wielkości czcionki,  zmniejszeniu szerokości okna przeglądarki poniżej szerokości układu.
  
  474
  
  Część VI ♦ Tła
  
  Rozdział 39.
  
  Przyciski rollover w CSS Łącząc tła oraz poznany w rozdziale 18. w punkcie „Style CSS odsyłaczy” selektor :hover, możemy wykonać efekt określany mianem rollover. Polega on na tym, że po wskazaniu kursorem myszy wymieniany jest obraz umieszczony w tle odsyłacza. W ten sposób opcja menu, nad którą został umieszczony kursor myszy, zostaje wyróżniona.
  
  Wymiana obrazu tła Obraz umieszczony w tle wymieniamy, wykorzystując pseudoklasę :hover. Reguła: a { }
  
  background: url('zwykly.jpg');
  
  ustala tło odnośnika. Styl: a:hover { background: url('wyrozniony.jpg'); }
  
  ustala natomiast tło, które zostanie wyświetlone po wskazaniu elementu a kursorem myszki. Jeśli element a ma mieć identyczne wymiary jak obraz, to należy dodatkowo wykorzystać właściwości width oraz height w połączeniu z display. W takiej sytuacji oba wykorzystane obrazy, zwykly.jpg oraz wyrozniony.jpg, powinny mieć identyczne wymiary, np. 178×46. W stylach należy ustalić wymiar elementu a. Ponadto stosując technikę FIR, ukrywamy tekst zawarty w hiperłączu: a {
  
  display: block; width: 178px; height: 46px; background: url('zwykly.png') no-repeat; text-indent: -2000em;
  
  } a:hover { background: url('wyrozniony.png') no-repeat; }
  
  Część VI ♦ Tła
  
  476
  
  Ćwiczenie 39.1 Wykonaj przycisk Witaj reagujący na najechanie kursorem myszki. Wykorzystaj obrazy witaj.png (odsyłacz w stanie nieaktywnym) oraz witaj-on.png (odsyłacz w stanie aktywnym). Oba obrazy mają wymiary 300×100 pikseli. Rozwiązanie jest widoczne na listingu 39.1. Listing 39.1. Odsyłacz reagujący na kursor myszy a { display: block; width: 300px; height: 100px; background: url('witaj.png') no-repeat; text-indent: -2000em; } a:hover { background: url('witaj-on.png') no-repeat; } ...

  Witaj

  
  
  Ćwiczenie 39.2 Przygotuj przycisk z ćwiczenia 39.1, stosując efekt FIR wykorzystujący warstwy. Rozwiązanie jest widoczne na listingu 39.2. Listing 39.2. Rozwiązanie ćwiczenia 39.2 a { display: block; width: 300px; height: 100px; position: relative } a span { position: absolute; top: 0; left: 0; width: 300px; height: 100px; background: url('witaj.png') no-repeat; } a:hover span { background: url('witaj-on.png') no-repeat; }
  
  Rozdział 39. ♦ Przyciski rollover w CSS
  
  477
  
  Przycisk z etykietą tekstową W ćwiczeniach 39.1 oraz 39.2 tekst zawarty w hiperłączu został ukryty techniką FIR. Napis Witaj zawarty na przycisku pochodził z pliku graficznego. Nie jest to jednak konieczne — możemy tworzyć przyciski reagujące na kursor myszki, które mają tło graficzne oraz etykietę pisaną tekstem w kodzie HTML. Tego typu opcje pozwalają na łatwe modyfikacje strony: wymiana etykiet opcji menu sprowadza się do modyfikacji kodu HTML. Tworzenie przycisków z etykietami tekstowymi tylko nieznacznie różni się od tworzenia przycisku poznanego w ćwiczeniu 39.1. Oprócz ustalenia wymiarów przycisku należy zadbać o wyśrodkowanie poziome i pionowe etykiety. W tym celu:  Stosujemy właściwość text-align.  Ustalamy wysokość interlinii równą wysokości elementu.
  
  Przykładowe style, które wyśrodkują etykietę przycisku o wymiarach 300×100, są przedstawione na listingu 39.3. Listing 39.3. Wyśrodkowanie etykiety tekstowej a { display: block; width: 300px; height: 100px; background: url('button.png') no-repeat; text-align: center; line-height: 100px; color: black; text-decoration: none; } a:hover { background: url('button-on.png') no-repeat; } Witaj
  
  Ćwiczenie 39.3 Przygotuj stronę z przyciskiem rollover zawierającym etykietę tekstową. Użyj obrazów button.png oraz button-on.png o wymiarach 300×100 pikseli. Zadanie wykonaj w taki sposób, by etykieta była wyśrodkowana pionowo i poziomo wewnątrz przycisku. Rozwiązanie ćwiczenia jest przedstawione na listingu 39.3.
  
  Część VI ♦ Tła
  
  478
  
  Przyciski pozycjonowane kontekstowo Przy tworzeniu menu składającego się z kilku przycisków-odsyłaczy wykorzystujących technikę rollover ważną rolę odgrywa opisane w rozdziale 31. pozycjonowanie kontekstowe. W dużym elemencie umieszczamy mniejszy element, np.:
  
  Lorem ipsum
  
  Następnie stylami CSS ustalamy: div { position: relative; } a { position: absolute; }
  
  Dzięki temu współrzędne elementu a będą liczone względem lewego górnego narożnika elementu div. Element div może być umieszczony w dowolnym miejscu strony. Zmiana położenia elementu div na stronie nie ma wpływu na położenie elementu a wewnątrz div.
  
  Ćwiczenie 39.4 Przygotuj stronę z jednym odsyłaczem, który jest przyciskiem rollover. Użyj obrazów calosc.jpg oraz fragment.jpg. Ćwiczenie wykonaj, wykorzystując pozycjonowanie kontekstowe. Rozpocznij od przeanalizowania obrazów. Obraz calosc.jpg, przedstawiony na rysunku 39.1, ma wymiary 800×600 pikseli. Rysunek 39.1. Obraz calosc.jpg o wymiarach 800×600 pikseli
  
  Obraz fragment.jpg, widoczny na rysunku 39.2, ma wymiary 390×190 pikseli.
  
  Rozdział 39. ♦ Przyciski rollover w CSS
  
  479
  
  Rysunek 39.2. Obraz fragment.jpg o wymiarach 390×190 pikseli
  
  Obraz fragment.jpg jest wycięty z obrazu calosc.jpg. Lewy górny narożnik obrazu fragment.jpg wypada w punkcie o współrzędnych 240 i 170 wewnątrz obrazu calosc.jpg. Ilustruje to rysunek 39.3. Rysunek 39.3. Położenie obrazu fragment.jpg wewnątrz obrazu calosc.jpg
  
  Mamy zatem trzy wymiary:  rozmiar dużego obrazu: 800×600,  rozmiar małego obrazu: 390×190,  położenie małego obrazu w dużym obrazie: 240×170.
  
  Najpierw ustalamy wymiary elementu div oraz elementu a. Pamiętaj, by zmienić tryb wyświetlania elementu a na blokowy, gdyż w przeciwnym razie właściwości width oraz height nie będą działały zgodnie z oczekiwaniami: div { width: 800px; height: 600px; } a { display: block; width: 390px; height: 190px; }
  
  Następnie wprowadzamy pozycjonowanie kontekstowe: element div otrzymuje wpis position: relative, zaś a — position: absolute. Kolejnym krokiem jest zaczepienie elementu a wewnątrz elementu div. Jako wartości właściwości left i top podajemy współrzędne zaczepienia fragmentu w całości: 240 i 170. Współrzędne te są zaznaczone na rysunku 39.3. Na zakończenie dodajemy tło elementu div oraz tło elementu a wyświetlane po wskazaniu kursorem myszy.
  
  Część VI ♦ Tła
  
  480
  
  Gotowe rozwiązanie jest widoczne na listingu 39.4. Listing 39.4. Pozycjonowanie względnie bezwzględne w praktyce div { width: 800px; height: 600px; background: url('calosc.jpg') no-repeat; position: relative; } a { display: block; width: 390px; height: 190px; top: 170px; left: 240px; position: absolute; } a:hover { background: url('fragment.jpg') no-repeat; } ...
  
  Lorem ipsum
  
  Dzięki pozycjonowaniu względnie bezwzględnemu element div może zostać przesunięty w dowolne miejsce strony. Spróbuj w rozwiązaniu ćwiczenia 39.4 wprowadzić zmiany: body { margin: 155px 270px; }
  
  lub: div { margin: 45px 120px; }
  
  Nie musisz martwić się o położenie elementu a. Zostanie on poprawnie umiejscowiony wewnątrz elementu div, bez względu na to, gdzie umieścisz div. Na tym polega zaleta pozycjonowania kontekstowego. Ponieważ wszelkie obrazy pojawiają się wyłącznie w stylach CSS, po wyłączeniu interpretacji stylów strona zawiera tylko tekst.
  
  Ćwiczenie 39.5 Stosując pozycjonowanie kontekstowe oraz efekt rollover wykonany w CSS, przygotuj stronę, która będzie zawierała menu z czterema opcjami. Wykorzystaj obraz ul-bkg.png oraz jego cztery fragmenty: o1.png, o2.png, o3.png oraz o4.png. Obraz ul-bkg.png jest przedstawiony na rysunku 39.4. Ma on wymiary 800×600.
  
  Rozdział 39. ♦ Przyciski rollover w CSS
  
  481
  
  Rysunek 39.4. Obraz ul-bkg.png o wymiarach 800×600
  
  Obraz o1.png o wymiarach 200×72 będzie tłem pierwszej opcji menu: Lorem. Jest on przedstawiony na rysunku 39.5. Rysunek 39.5. Obraz o1.png o wymiarach 200×72
  
  Obraz o2.png o wymiarach 205×82 będzie tłem drugiej opcji menu: Ipsum. Jest on przedstawiony na rysunku 39.6. Rysunek 39.6. Obraz o2.png o wymiarach 205×82
  
  Obraz o3.png o wymiarach 233×90 będzie tłem trzeciej opcji menu: Dolor. Jest on przedstawiony na rysunku 39.7. Rysunek 39.7. Obraz o3.png o wymiarach 233×90
  
  Obraz o4.png o wymiarach 394×95 będzie tłem czwartej opcji menu: Sit. Jest on przedstawiony na rysunku 39.8. Rysunek 39.8. Obraz o4.png o wymiarach 394×95
  
  Obrazy o1.png, o2.png, o3.png oraz o4.png są fragmentami obrazu ul-bkg.png. Ich punktami zaczepienia są:  o1.png: A(309,21);  o2.png: B(172,140);  o3.png: C(448,195);  o4.png: C(248,324).
  
  Ilustruje to rysunek 39.9.
  
  Część VI ♦ Tła
  
  482 Rysunek 39.9. Punkty zaczepienia obrazów o1.png, o2.png, o3.png oraz o4.png w obrazie ul-bkg.png
  
  Kod HTML menu będzie bardzo zwięzły:
  
  
  • Sit
  
  
  Zauważ, że każda opcja li otrzymuje identyfikator id, który posłuży do nadania unikalnych wymiarów każdej opcji i przypisania odpowiedniego obrazu tła. W stylach CSS najpierw modyfikujemy wszystkie hiperłącza: a { text-decoration: none; text-align: center; display: block; position: absolute; line-height: 0.1em; } a:hover { text-decoration: underline; color: rgb(0,0,0); }
  
  Zwróć uwagę, że elementy a otrzymały właściwości position: absolute oraz display: block. Następnie zmieniamy wygląd listy ul: usuwamy wypunktowanie, nadajemy wymiary i tło, usuwamy margines, dopełnienie i obramowanie, a także dołączamy właściwość position odpowiedzialną za pozycjonowanie względnie bezwzględne: ul { list-style-type: none; background: url('ul-bkg.png') no-repeat; width: 800px; height: 600px; padding: 0; margin: 0;
  
  Rozdział 39. ♦ Przyciski rollover w CSS
  
  483
  
  border: none; position: relative; }
  
  Na koniec modyfikujemy wygląd czterech opcji. Pierwsza z nich ma identyfikator #o1. Ponieważ obraz o1.png ma wymiary 200×72, wartościami właściwości width, height, padding-top oraz padding-bottom są liczby 200, 0, 36 (połowa wysokości) oraz 36 (połowa wysokości): #o1 a { width: 200px; height: 0; left: 309px; top: 21px; padding-top: 36px; padding-bottom: 36px; } #o1 a:hover { background: url('o1.png') no-repeat; }
  
  W ćwiczeniu 39.5 etykiety przycisków są wyśrodkowane stylami: a { line-height: 0.1em; } #o1 a { width: 200px; height: 0; padding-top: 36px; /*połowa wysokości przycisku*/ padding-bottom: 36px; /*połowa wysokości przycisku*/ }
  
  Taki sposób wyśrodkowania etykiet przycisków sprawdzi się także wtedy, gdy w opcjach przeglądarki ustalisz dawny tryb skalowania witryn, czyli Widok/Powiększenie/ Powiększaj tylko tekst.
  
  Wartości left oraz top należy ustalić zgodnie z punktem zaczepienia obrazu o1.png w obrazie ul-bkg.png. Punktem tym jest widoczny na rysunku 39.9 punkt A o współrzędnych A(309,21). W stylach opisujących pierwszą opcję wystąpią zatem wpisy: left: 309px; top: 21px;
  
  W identyczny sposób ustal właściwości pozostałych trzech opcji. Jeśli wysokość obrazu jest liczbą nieparzystą, to właściwości padding-top oraz padding-bottom będą różniły się o jeden. Ich suma ma być równa wysokości obrazu. Na przykład wysokość obrazu o4.png wynosi 95 pikseli. Jako wartości padding-top oraz padding-bottom należy podać 47 oraz 48, gdyż: 47 + 48 = 95
  
  Część VI ♦ Tła
  
  484
  
  Oto style czwartej z opcji: #o4 a { width: 394px; height: 0; left: 248px; top: 324px; padding-top: 47px; padding-bottom: 48px; }
  
  Ćwiczenie 39.6 Przygotuj trzy strony WWW: maliny.html, truskawki.html oraz pomarancze.html. Strony połącz, wykonując menu z efektem rollover. Do wykonania menu użyj obrazów: maliny.png, maliny-on.png, truskawki.png, truskawki-on.png, pomarancze.png oraz pomarancze-on.png. W treści każdej ze stron umieść jedno zdjęcie: foto-maliny.jpg, foto-truskawki.jpg lub foto-pomarancze.jpg. Witryna składa się z plików:  HTML: maliny.html, truskawki.html, pomarancze.html;  CSS: style.css;  obrazy opcji menu: maliny.png, maliny-on.png, truskawki.png,
  
  truskawki-on.png, pomarancze.png, pomarancze-on.png;  zdjęcia: foto-maliny.jpg, foto-truskawki.jpg, foto-pomarancze.jpg.
  
  Struktura folderów zadania jest następująca: 39-05/ css/ style.css img/ maliny.png maliny-on.png ... maliny.html truskawki.html pomarancze.html
  
  Pracę rozpocznij od przygotowania kodu HTML pierwszego pliku (tj. maliny.html). W rozwiązaniu wykorzystany został układ 3. z rozdziału 32. Kod HTML pliku maliny.html jest przedstawiony na listingu 39.5. Style CSS odpowiedzialne za wygląd pierwszej opcji menu są przedstawione na listingu 39.6. Listing 39.5. Kod HTML strony maliny.html
  
  
  
  Rozdział 39. ♦ Przyciski rollover w CSS
  
  485
  
  
  • MALINY
  • TRUSKAWKI
  • POMARAŃCZE
  
  
  
  
  
  
  Listing 39.6. Style pierwszej opcji menu z ćwiczenia 39.6 ul { list-style: none; margin: 0; padding: 50px 0; } #maliny { display: block; width: 170px; height: 60px; position: relative; } #maliny span { display: block; width: 170px; height: 60px; position: absolute; top: 0; left: 0; background: url('../img/maliny.png') no-repeat; } #maliny:hover span { background: url('../img/maliny-on.png') no-repeat; }
  
  Ćwiczenie 39.7 Wykonaj element strony WWW służący do oceniania zawartości. Element ma prezentować pięć gwiazdek. Wskazanie myszką dowolnej gwiazdki ma powodować zmianę koloru danej gwiazdki i wszystkich gwiazdek leżących na lewo od niej. Rysunek 39.10 prezentuje wygląd elementu po wskazaniu kursorem myszki drugiej gwiazdki. Rysunek 39.10. Ocena dwie gwiazdki widoczna po wskazaniu kursorem drugiej gwiazdki
  
  Część VI ♦ Tła
  
  486
  
  Pracę nad elementem rozpoczynamy od ustalenia kodu HTML. To jest najłatwiejsza część zadania. Element do oceniania będzie listą numerowaną zawierającą hiperłącza. Kod listy jest przedstawiony na listingu 39.7. Ponieważ każdy element li będzie wymagał innych stylów CSS, konieczne jest użycie identyfikatorów. Teksty zawarte w hiperłączach zostaną ukryte techniką FIR wykorzystującą właściwość text-align. Listing 39.7. Kod HTML elementu do wystawiania ocen
  
  
  • 5
  
  
  Następnie przygotowujemy dwa pliki o identycznych wymiarach: 160×39 pikseli. Pierwszy z nich nazywa się gwiazdki-off.png i prezentuje gwiazdki puste. Drugi nazywa się gwiazdki-on.png i zawiera pięć wypełnionych gwiazdek. Rozmiar pojedynczej gwiazdki w każdym pliku wynosi 39×39 pikseli. Rysunek 39.11 prezentuje plik gwiazdki-off.png, a rysunek 39.12 — plik gwiazdki-on.png. Rysunek 39.11. Plik gwiazdki-off.png Rysunek 39.12. Plik gwiazdki-on.png
  
  Podstawowy format elementu do głosowania ustalamy stylami widocznymi na listingu 39.8:  Usuwamy wypunktowanie listy.  Nadajemy wymiary elementowi.  Przypisujemy tło.  Zmieniamy kontekst pozycjonowania.  Stosujemy technikę FIR. Listing 39.8. Podstawowy format elementu z ćwiczenia 39.7 .ocena { list-style-type: none; width: 160px; height: 39px; background: url('gwiazdki-off.png') no-repeat; position: relative; text-indent: -2000em; }
  
  Rozdział 39. ♦ Przyciski rollover w CSS
  
  487
  
  Jak ma się zachowywać element do głosowania? Po wskazaniu kursorem myszki trzeciej gwiazdki, czyli elementu
  • , mamy zmodyfikować tło trzech pierwszych gwiazdek. Są nimi elementy:
  • 1
  • 2
  • 3
  
  
  Trudność polega na tym, że stosując selektor :hover dla elementu
  • , nie możemy zaprogramować zmian wyglądu elementów
  • oraz
  • . Elementy te są rodzeństwem. Selektor :hover umożliwia dostęp wyłącznie do elementu, który wygenerował zdarzenie (czyli
  • ) oraz jego potomstwa (czyli hiperłącza a). Uciekniemy się więc do oszustwa. Zdarzenie :hover elementu
  • zaprogramujemy tak, że po jego wystąpieniu zwiększymy rozmiar zawartego w nim elementu a. Rozmiar powiększonego hiperłącza podamy taki, by pokrywał trzy pierwsze gwiazdki. Tłem elementu a będzie obraz z rysunku 39.12, tak więc wizualnie trzy pierwsze gwiazdki staną się wybrane. Ostatnia trudność polega na tym, że przesuwając kursor w lewo, na przykład na pierwszą gwiazdkę, cały czas będziemy generowali zdarzenia :hover dla powiększonego elementu a. Element ten należy więc przesunąć na stosie warstw pod spód przy użyciu właściwości z-index. Wtedy przesunięcie kursora myszki na inną gwiazdkę będzie generowało zdarzenie elementu li, a nie odsyłacza. Najpierw ustalamy pozycjonowanie kontekstowe dla elementów li. Każdy z nich ma wymiary 39×39 pikseli. Są one pionowo dosunięte do górnej krawędzi całego elementu (top: 0) i leżą na wierzchołku stosu warstw (właściwość z-index): .ocena li { position: absolute; width: 39px; height: 39px; top: 0; z-index: 1; }
    
    Następnie hiperłącza pozycjonujemy kontekstowo i przypisujemy im tło z pliku przedstawiającego wypełnione gwiazdki (rysunek 39.12): .ocena li a { display: block; position: absolute; background: url('gwiazdki-on.png') no-repeat; }
    
    W dalszej kolejności ustalamy położenie poszczególnych gwiazdek. Mają one stałą szerokość, więc wartości przypisane do właściwości left są wielokrotnością liczby 32: .ocena #o1 { left: 0; } .ocena #o2 { left: 32px; } .ocena #o3 { left: 64px; } ...
    
    Część VI ♦ Tła
    
    488
    
    Na zakończenie oprogramowujemy zdarzenie :hover dla poszczególnych gwiazdek. Style trzeciej gwiazdki będą następujące: .ocena #o3:hover { z-index: 0; } .ocena #o3:hover a { left: -64px; top: 0; width: 96px; height: 32px; }
    
    Po pierwsze, po wystąpieniu zdarzenia opcja
  • jest przesuwana na spód. Dzieje się tak dzięki właściwości z-index. Równocześnie modyfikujemy wymiary elementu a zawartego wewnątrz
  • . Element ten będzie obejmował trzy pierwsze gwiazdki. Jego szerokość wynosi zatem 3·32 = 96 pikseli. Hiperłącze przesuwamy tak, by rozpoczynało się ono w punkcie 0. W stylach ustaliliśmy poprzednio położenie jako: .ocena #o3 { left: 64px; }
    
    więc dosunięcie do lewej krawędzi elementu ol osiągniemy, podając wartość left równą -64 piksele. W podobny sposób sformatuj pozostałe elementy li i zawarte w nich hiperłącza. Zwróć uwagę, że w ćwiczeniu 39.7 po wystąpieniu zdarzenia :hover modyfikujemy dwa różne elementy. Jest to możliwe dzięki użyciu selektorów potomnych. Jeśli strona zawiera kod: h1:hover { } h1:hover span { } ...
    
    to wskazanie kursorem myszki elementu h1 spowoduje wystąpienie zdarzenia :hover. Zastosowane wówczas zostaną wszystkie reguły, których selektory rozpoczynają się od h1:hover. W podobny sposób możesz zmodyfikować wygląd czterech elementów na raz: div:hover { } div:hover span { } div:hover em { } div:hover strong { }
    
    ... ... ...
    
    Rozdział 39. ♦ Przyciski rollover w CSS
    
    Rozwiązanie takie możesz także stosować do elementów zagnieżdżonych wielokrotnie: div:hover { } div:hover span { } div:hover span em { }
    
    ...
    
    489
    
    490
    
    Część VI ♦ Tła
    
    Rozdział 40.
    
    Kafelkowanie Technika kafelkowania (ang. sprites) polega na zapisaniu w jednym pliku graficznym kilku różnych obrazów. Poszczególne rysunki wydobywamy z obrazu, podając odpowiednie współrzędne oraz wymiary. Wykorzystujemy do tego właściwości width, height oraz background-position. Załóżmy, że chcemy umieścić na stronie sześć rysunków zapisanych w plikach:  lorem-ipsum.jpg,  home.jpg,  contact.jpg,  services.jpg,  strzalka.jpg,  learn-more.jpg.
    
    o wyglądzie takim jak na rysunku 40.1. Rysunek 40.1. Sześć plików, które chcemy umieścić na stronie WWW
    
    Wszystkie sześć obrazów z rysunku 40.1 zapisujemy w jednym pliku o nazwie sprite.jpg. Poszczególne rysunki są ułożone jeden obok drugiego, jak to zostało przedstawione na rysunku 40.2.
    
    Część VI ♦ Tła
    
    492 Rysunek 40.2. Jeden plik zawierający sześć plików z rysunku 40.1 ułożonych w mozaikę
    
    Obrazy zapisane w pliku sprite.jpg będziemy umieszczali na stronie WWW jako tła. Właściwości width oraz height wykorzystamy do ustalenia wymiarów elementu HTML. Właściwość background-position umożliwi natomiast przesunięcia obrazu tła. W ten sposób z dużego obrazu sprite.jpg wytniemy dowolny zawarty w nim prostokąt. Technika kafelkowania jest wykorzystywana w wielu popularnych serwisach internetowych, m.in.:  Amazon.com (rysunek 40.3),  Facebook.com (rysunek 40.4),  Google.com (rysunek 40.5),  YouTube.com (rysunek 40.6). Rysunek 40.3. Przykład wykorzystania kafelkowania w witrynie Amazon.com
    
    Rozdział 40. ♦ Kafelkowanie
    
    493
    
    Rysunek 40.4. Przykład wykorzystania kafelkowania w witrynie Facebook.com
    
    Rysunek 40.5. Przykład wykorzystania kafelkowania w aplikacjach Google
    
    W jaki sposób sprawdzić, czy dana witryna stosuje kafelkowanie? Najwygodniej użyć wtyczki Web Developer Toolbar. Po wybraniu opcji Wyświetl informacje o obrazkach należy przejrzeć listę wszystkich obrazów użytych na stronie. Na rysunku 40.7 pokazana jest opcja Wyświetl informacje o obrazkach oraz wynik analizy obrazów serwisu Onet.pl. W połowie strony odnaleziony został obraz wskazany strzałką, co dowodzi, że w witrynie Onet.pl również są stosowane kafelki.
    
    Część VI ♦ Tła
    
    494 Rysunek 40.6. Przykład wykorzystania kafelkowania w witrynie YouTube.com
    
    Rysunek 40.7. To, czy dana witryna stosuje kafelkowanie, najłatwiej sprawdzić przy użyciu opcji Wyświetl informacje o obrazkach
    
    Ćwiczenie 40.1 Dany jest obraz piora.jpg, który ma wymiary 800×600. Zdjęcie przedstawia cztery pióra. Wykonaj stronę WWW, która będzie prezentowała wyłącznie trzecie pióro. Utwórz nowy dokument HTML i umieść w nim element div. Fragment obrazu umieścimy na stronie jako tło elementu div.
    
    Rozdział 40. ♦ Kafelkowanie
    
    495
    
    W zadaniu występują trzy wymiary:  wymiary obrazu piora.jpg: 800×600;  wymiary elementu div: 579×126;  punkt zaczepienia tła w obrazie: A(200,207).
    
    Zależności pomiędzy tymi wymiarami są przedstawione na rysunku 40.8. Tłem elementu div ma zostać pióro zaznaczone prostokątem. Rysunek 40.8. Fragment obrazu piora.jpg, który ma zostać wykorzystany jako tło elementu div
    
    Kod HTML oraz style CSS rozwiązania są widoczne na listingu 40.1. Listing 40.1. Tło małego elementu div pochodzące z dużego pliku graficznego div { width: 579px; height: 126px; background-image: url('piora.jpg'); background-position: -200px -207px; background-repeat: no-repeat; } ...
    
    lorem ipsum
    
    Elementowi div nadajemy wymiary (właściwości width oraz height) odpowiadające zdjęciu trzeciego pióra, czyli 579 na 126 pikseli. Następnie przypisujemy mu tło (background-image) i wyłączamy powielanie (background-repeat). Właściwość backgroundposition wskazuje, w jakim kierunku i o ile ma zostać przesunięte tło. Ponieważ wartości są ujemne, przesuwanie będzie się odbywało w lewo i do góry. Obraz piora.jpg umieszczony w tle zostanie przesunięty o 200 pikseli na lewo i o 207 pikseli do góry, czyli o wektor wynikający z położenia punktu A w całym obrazie. Dzięki temu wewnątrz elementu div widoczne będzie trzecie pióro zaznaczone prostokątem na rysunku 40.1.
    
    Część VI ♦ Tła
    
    496
    
    Style dotyczące tła elementu div można w skrócie zapisać jako: background: url('piora.jpg') -200px -207px no-repeat;
    
    Oczywiście takie korzystanie z właściwości background-position byłoby marnotrawstwem łącza: zamiast przekazywać duży obraz i w stylach wycinać jego fragment znacznie lepiej byłoby wyciąć fragment obrazu programem graficznym i przekazać do przeglądarki tylko wycięty fragment. Korzyść z opisanej techniki przesuwania tła będziemy mieli dopiero wtedy, gdy w jednym pliku graficznym upakujemy kilka obrazów. Ćwiczenie 40.1 demonstruje, w jaki sposób z dużego pliku graficznego wyciąć dowolny prostokątny fragment i umieścić go w tle elementu blokowego. Wymiary obrazu są większe od wymiarów elementu blokowego. Technika taka może być wykorzystana do wykonania jednego lub kilku przycisków.
    
    Ćwiczenie 40.2 Dany jest obraz przyciski.png, którego wymiary wynoszą 250×50 pikseli. Zawiera on pięć ikon, z których każda ma wymiary 50×50 pikseli. Obraz przyciski.png jest przedstawiony na rysunku 40.9. Rysunek 40.9. Obraz przyciski.png z ćwiczenia 40.2
    
    Wykonaj stronę WWW, na której umieszczone zostaną dwa spośród pięciu przycisków z rysunku 40.9. Pracę nad ćwiczeniem rozpoczynamy od przygotowania kodu HTML:
    
    ...
    
    ...
    
    ...
    
    Pojedynczy przycisk wykonujemy jako element div zawierający hiperłącze:
    
    Klasa przycisk służy do nadania wymiarów każdemu przyciskowi (wszystkie przyciski mają identyczne wymiary: 50×50), a klasy internet oraz ikona będą służyły do ustalenia obrazu tła. W stylach CSS ustalamy wymiary każdego przycisku: .przycisk { margin: 0; padding: 0;
    
    Rozdział 40. ♦ Kafelkowanie
    
    497
    
    width: 50px; height: 50px;
    
    } .przycisk a { display: block; width: 50px; height: 50px; }
    
    Każda z ikon widocznych na rysunku 40.9 ma wymiary 50×50 pikseli. Kula ziemska ma współrzędne (50;0). Dlatego style przycisku:
    
    są następujące: .przycisk a.internet { background: url('przyciski.png') -50px 0 no-repeat; }
    
    Podobnie żarówka ma współrzędne (200;0), zatem style przycisku z żarówką:
    
    zawierają wpis: .przycisk a.bulb { background: url('przyciski.png') -200px 0 no-repeat; }
    
    Zwróć uwagę, że w kodzie HTML przycisku nie występuje żaden tekst. Przyciski wykonane w taki sposób są dostępne wyłącznie dla przeglądarek graficznych.
    
    Ćwiczenie 40.3 Przygotuj stronę z ćwiczenia 39.1. Wykorzystaj jeden obraz oba.png, w którym są zapisane dwa obrazy: witaj.png oraz witaj-on.png. Jak widać na rysunku 40.10, obraz oba.png zawiera dwa obrazy. Cały obraz oba.png ma wymiar 300×200. Obie połowy są równe i mają wymiary 300×100. Rysunek 40.10. Obraz oba.png składa się z dwóch fragmentów
    
    W kodzie strony umieszczamy jeden akapit, a w nim — hiperłącze. Element a zmieniamy w element blokowy i nadajemy mu sztywne wymiary: szerokość 300, wysokość 100 pikseli. Następnie dodajemy tło hiperłącza i ukrywamy tekst. Co dzieje się po wskazaniu hiperłącza kursorem myszy? Następuje wtedy przesunięcie tła. Obraz tła pozostaje ten sam, ale przesunięty o 100 pikseli do góry (backgroundposition: 0 –100px). Zarys rozwiązania jest przedstawiony na listingu 40.2.
    
    Część VI ♦ Tła
    
    498 Listing 40.2. Przycisk rollover wykorzystujący kafelkowanie a { display: block; width: 300px; height: 100px; background: url('oba.png'); text-indent: -2000em; } a:hover { background: url('oba.png') 0 -100px; } ...

    Witaj

    
    
    W ten sposób efekt rollover jest wykonany przy użyciu jednego obrazu oba.png. Ma to pewną zaletę w stosunku do rozwiązania stosującego dwa pliki. Otóż plik oba.png jest pobrany od razu przy wejściu na stronę. W ten sposób pierwsze wskazanie odsyłacza kursorem myszy nie będzie powodowało mrugnięcia przy wymianie obrazu1. Rozwiązanie zawarte w ćwiczeniu 40.3 stosuje technikę FIR opartą na właściwości text-indent. Jest to rozwiązanie lepsze od rozwiązania z ćwiczenia 40.2.
    
    Ćwiczenie 40.4 Przygotuj stronę z ćwiczenia 39.4, stosując technikę kafelkowania. Użyj obrazu calosc-kafelki.jpg widocznego na rysunku 40.11. Rysunek 40.11. Obraz calosc-kafelki.jpg z ćwiczenia 40.4
    
    1
    
    Efekt rollover wykonywany w JavaScript był zazwyczaj zaopatrzony w tzw. preloading, tj. wstępne pobieranie wszystkich obrazów. Rozwiązanie stosujące kafelki nie wymaga preloadingu: wszystkie obrazy są wstępnie pobrane, gdyż pochodzą z jednego pliku graficznego, który jest wymagany już przy początkowym wyświetleniu strony.
    
    Rozdział 40. ♦ Kafelkowanie
    
    499
    
    Obraz calosc-kafelki.jpg ma wymiary 1110×600 pikseli. Składa się on z dużego obrazu o wymiarach 800×600 widocznego z lewej strony rysunku 40.11 oraz mniejszego obrazu o wymiarach 310×600 (prawa strona rysunku 40.11). Obszar zaznaczony szachownicą jest niewykorzystany. Jego zawartość nie odgrywa żadnej roli. Rozwiązanie ćwiczenia jest przedstawione na listingu 40.3. Listing 40.3. Rozwiązanie ćwiczenia 40.4 div { width: 800px; height: 600px; background: url('calosc-kafelki.jpg') no-repeat; position: relative; } a { display: block; width: 310px; height: 190px; top: 170px; left: 240px; position: absolute; } a:hover { background: url('calosc-kafelki.jpg') -800px 0 no-repeat; } ...
    
    Lorem ipsum
    
    Łączymy w nim pozycjonowanie kontekstowe, efekt rollover wykonany w CSS i kafelkowanie. Najpierw ustalamy wymiary elementu div i nadajemy mu tło. Ponieważ wymiary elementu wynoszą 800×600, tłem elementu div będzie lewy fragment rysunku 40.11. Następnie, stosując pozycjonowanie kontekstowe, umieszczamy wewnątrz elementu div element a. Element ten ma sztywno nadane wymiary (właściwości width i height) oraz położenie (właściwości left i top). Po wskazaniu kursorem myszki element a otrzymuje tło pochodzące z pliku calosc-kafelki.jpg. Dzięki parametrowi –800px: background: url('calosc-kafelki.jpg') -800px 0 no-repeat;
    
    tło zostanie przesunięte o 800 pikseli w lewo. Po najechaniu hiperłącza kursorem myszki ujrzymy zatem tło widoczne po prawej stronie rysunku 40.11.
    
    Ćwiczenie 40.5 Przygotuj stronę z ćwiczenia 39.5, wykorzystując kafelkowanie. Użyj jednego obrazu: kafelki.png przedstawionego na rysunku 40.12. W ćwiczeniu występują cztery opcje menu, które mają wymiary: 200×72, 205×82, 233×90 oraz 314×95. Do efektu rollover należy wykorzystać cztery obrazy umieszczone nad szachownicą z prawej strony rysunku 40.12. Kluczową sprawą jest — podobnie jak przy pozycjonowaniu kontekstowym — wyznaczenie punktów zaczepienia poszczególnych kafelków. Punkty te są zaznaczone na rysunku 40.13. W celu zwiększenia czytelności obrazu wymiary opcji nie zostały podane.
    
    Część VI ♦ Tła
    
    500 Rysunek 40.12. Obraz kafelki.png z ćwiczenia 40.5
    
    Rysunek 40.13. Punkty zaczepienia kafelków
    
    Listing 40.4 przedstawia style pierwszej opcji menu. W rozwiązaniu wykorzystane są następujące triki:  pozycjonowanie kontekstowe,  efekt rollover w CSS,  wyśrodkowanie pionowe i poziome etykiety przycisku,  kafelkowanie. Listing 40.4. Fragment stylów CSS z ćwiczenia 40.5 ul { background: url('kafelki.png') no-repeat; width: 800px; height: 600px; padding: 0; margin: 0; border: none; list-style-type: none; position: relative;
    
    Rozdział 40. ♦ Kafelkowanie
    
    501
    
    } a { text-decoration: none; text-align: center; display: block; position: absolute; line-height: 0.1em; } a:hover { text-decoration: underline; color: rgb(0,0,0); } #o1 a { width: 200px; height: 0; left: 309px; top: 21px; padding-top: 36px; padding-bottom: 36px; } #o1 a:hover { background: url('kafelki.png') -800px 0px no-repeat; }
    
    Całe menu jest listą ul o zadanych wymiarach. Tło zawarte w pliku kafelki.png jest większe niż wymiary elementu ul. Domyślnie tło jest dosunięte do lewego górnego narożnika elementu, dlatego pod elementem ul widoczny jest tylko lewy fragment rysunku 40.12. Jeśli zwiększysz szerokość elementu ul do 900 pikseli, widoczne będą wówczas fragmenty opcji. Pierwsza opcja menu ma wymiary 200×72 i jest zaczepiona w punktach A(800,0) oraz E(309,21) widocznych na rysunku 40.13. Najpierw ustalamy wymiary opcji. Nadajemy szerokość równą 200, wysokość równą 0 oraz dopełnienie górne i dolne po 36 pikseli: #o1 a { width: 200px; height: 0; padding-top: 36px; padding-bottom: 36px; }
    
    Tak wykonany element będzie miał wymiary 200×72. Etykieta przycisku będzie wyśrodkowana pionowo nawet wówczas, gdy przeskalujesz wyłącznie wielkość czcionki. Następnie, wykorzystując pozycjonowanie kontekstowe, umieszczamy opcję w punkcie E(309,21): #o1 a { left: 309px; top: 21px; }
    
    Część VI ♦ Tła
    
    502
    
    Na zakończenie definiujemy obsługę zdarzenia :hover. Tło opcji musi być przesunięte do punktu A(800,0): #o1 a:hover { background: url('kafelki.png') -800px 0px no-repeat; }
    
    Druga opcja jest oznaczona identyfikatorem #o2. Ma ona wymiary 205×82 i jest zaczepiona na rysunku 40.13 w punktach B(800,72) i F(172,140). Najpierw ustalamy wymiary opcji: #o2 a { width: 205px; height: 0; padding-top: 41px; padding-bottom: 41px; }
    
    Następnie pozycjonujemy ją kontekstowo w punkcie F(172,140): #o2 a { left: 172px; top: 140px; }
    
    oraz ustalamy obsługę zdarzenia :hover. Obraz tła ma być przesunięty do punktu B(800,72): #o2 a:hover { background: url('kafelki.png') -800px -72px no-repeat; }
    
    W analogiczny sposób formatujemy pozostałe dwie opcje. Technika kafelkowania jest użyteczna przy wykonywaniu kontrolek, które reagują na kursor myszy. Dzięki kafelkowaniu nie jest konieczne wstępne pobieranie obrazów (tzw. preloading). Zmniejsza się także liczba zapytań HTTP. W przypadku gdy witryna stosuje kilkadziesiąt małych ikonek (tak jak np. Facebook czy YouTube) może to mieć duży wpływ na wydajność aplikacji internetowej.
    
    Ćwiczenie 40.6 Na podstawie wielowarstwowego pliku szablon.xcf lub szablon.psd2 przygotuj obraz z kafelkami sprite.png. Plik szablon.xcf jest przedstawiony na rysunku 40.14, zaś plik sprite.png na rysunku 40.15. Obraz z rysunku 40.14 ma wymiary 300×150 pikseli. Rysunek 40.14. Wielowarstwowy obraz XCF wykorzystany w ćwiczeniu 40.6
    
    2
    
    Plik o rozszerzeniu XCF jest przeznaczony dla użytkowników programu GIMP, a plik o rozszerzeniu PSD dla użytkowników programu Photoshop.
    
    Rozdział 40. ♦ Kafelkowanie
    
    503
    
    Rysunek 40.15. Obraz sprite.png wykorzystany w ćwiczeniu 40.6
    
    Obraz z rysunku 40.14 może być wykonany w programie Photoshop lub GIMP. Poszczególne ikony są umieszczone na osobnych warstwach. Każda z ikon jest umieszczona w obrazie dwukrotnie. Na jednej warstwie umieszczamy czarnobiałą miniaturkę, a na drugiej — dużą kolorową ikonę. Włączając i wyłączając widoczność warstwy zawierającej dużą ikonę, zmieniamy stan opcji. Dodatkowo każda duża ikona jest ozdobiona delikatną poświatą, która również jest umieszczona na osobnej warstwie, dzięki czemu może być niezależnie włączana i wyłączana. Etap pierwszy: pokrojenie szablonu na oddzielne pliki Pierwszym etapem pracy jest pokrojenie szablonu na osobne pliki graficzne. Najpierw przygotuj obraz szablon.png, który będzie identyczny z rysunkiem 40.14. Otwórz plik szablon.xcf, wyłącz widoczność wszystkich powiększonych ikon oraz poświat, a otrzymany obraz zapisz w pliku szablon.png. Otrzymany plik będzie miał wymiary 300×150 pikseli. Następnie w obrazie z rysunku 40.14 dodaj na nowych warstwach trzy czarne, częściowo przezroczyste prostokąty. Każdy prostokąt ma pokrywać jedną z opcji w stanie aktywnym. Prostokąt należy tak umiejscowić w obrazie, by całkowicie pokrywał powiększoną ikonę danej opcji. W dalszej części ćwiczenia konieczne będzie użycie współrzędnych lewego górnego narożnika każdego z prostokątów. Dlatego obraz z dodanymi prostokątami koniecznie zapisz. Rysunek 40.16 przedstawia trzy prostokąty oraz ich punkty zaczepienia w obrazie. Rysunek 40.16. Prostokąty wyznaczające zasięg opcji menu
    
    Wykorzystując prostokąty widoczne na rysunku 40.16, skopiuj z szablonu każdą opcję w stanie aktywnym. Najpierw włącz widoczność powiększonych ikon, a następnie zaznacz obszar wyznaczony przez prostokąt, wyłącz widoczność prostokąta i skopiuj zaznaczony fragment. Skopiowany fragment zapisz w nowym pliku. W ten sposób powstaną trzy pliki:  user.png o wymiarach 89×117 pikseli,  heart.png o wymiarach 91×82 piksele,  letter.png o wymiarach 89×125 pikseli.
    
    Część VI ♦ Tła
    
    504
    
    W przykładzie tym celowo zaznaczyłem trzy różne odsunięte od siebie prostokąty. W ten sposób łatwiej będzie nam śledzić miejsca, w których wprowadzamy poszczególne współrzędne i wymiary. Oczywiście w rzeczywistym projekcie możesz użyć tych samych wymiarów dla każdej opcji. Etap drugi: sklejenie oddzielnych plików w jeden plik sprite.png Dysponujemy czterema plikami: szablon.png, user.png, heart.png oraz letter.png. Utwórz nowy obraz i wklej do niego wszystkie cztery pliki. Wklejone obrazy umieść na nowych warstwach i rozmieść tak jak na rysunku 40.17. W obrazie tym punkty zaczepienia zostały oznaczone literami D, E oraz F. Rysunek 40.17. Plik sprite.png otrzymany po sklejeniu czterech oddzielnych plików graficznych
    
    Ćwiczenie 40.7 Wykonaj stronę WWW, która będzie zawierała menu ozdobione graficznie plikiem sprite.png wykonanym w poprzednim ćwiczeniu. Wykorzystaj technikę kafelkowania oraz efekt FIR operujący warstwami. Najpierw przygotowujemy kod HTML, który jest przedstawiony na listingu 40.5. Listing 40.5. Kod HTML menu
    
    
  • user
  • heart
  • letter
  
  
  W stylach CSS ustalamy wymiary całego elementu ol: ol { width: 300px; height: 150px; position: relative; background: url('../img/sprite.png') no-repeat; list-style-type: none; }
  
  Każda opcja menu będzie pozycjonowana bezwzględnie. Trzy elementy li, a oraz span tworzące opcję:
  • letter
  
  
  Rozdział 40. ♦ Kafelkowanie
  
  505
  
  będą miały identyczne wymiary. W celu przysłonięcia tekstu zawartego w opcji ustalimy tło elementu span. Style wspólne dla wszystkich opcji włączają pozycjonowanie kontekstowe oraz modyfikują tryb wyświetlania na blokowy: ol li { position: absolute; } ol li a { position: absolute; display: block; left: 0; top: 0; } ol li a span { position: absolute; display: block; left: 0; top: 0; }
  
  Style pierwszej opcji menu są widoczne na listingu 40.6. Listing 40.6. Style pierwszej opcji menu ol #o1 { width: 89px; height: 117px; left: 10px; top: 16px; } ol #o1 a { width: 89px; height: 117px; } ol #o1 span { width: 89px; height: 117px; background: url('../img/sprite.png') -10px -16px no-repeat; } ol #o1 a span:hover { background: url('../img/sprite.png') 0 -150px no-repeat; }
  
  Wymiary pierwszej opcji są identyczne jak wymiary pliku user.png, czyli wynoszą 89×117 pikseli. Wymiary takie przypisujemy trzem elementom: li, a oraz span. Położenie opcji w menu wyznacza punkt A(10, 16) zaznaczony na rysunku 40.16. Jako wartości właściwości left oraz top podajemy współrzędne punktu A: left: 10px; top: 16px;
  
  Część VI ♦ Tła
  
  506
  
  W celu przysłonięcia tekstu opcji stosujemy technikę FIR. Element span otrzyma tło, które będzie pobierane z pliku sprite.png. Punkt zaczepienia tła w pliku sprite.png jest identyczny z punktem zaczepienia opcji w menu. Jest to punkt A(10, 16) z rysunku 40.16. W celu przesunięcia tła elementu stosujemy wartości -10 oraz -16: background: url('../img/sprite.png') -10px -16px no-repeat;
  
  Reakcję na myszkę oprogramowujemy jako obsługę zdarzenia :hover elementu span. Po wskazaniu opcji kursorem myszki tło elementu span należy przesunąć tak, by widoczny był fragment, który na rysunku 40.17 jest zaczepiony w punkcie D(0,150). Dlatego tło elementu span po wystąpieniu zdarzenia jest przesuwane o –150 pikseli: ol #o1 a span:hover { background: url('../img/sprite.png') 0 -150px no-repeat; }
  
  W identyczny sposób przygotowujemy drugą opcję. Jej style są przedstawione na listingu 40.7. Listing 40.7. Style drugiej opcji ol #o2 { width: 91px; height: 82px;
  
  }
  
  left: 109px; top: 31px;
  
  ol #o2 a { width: 91px; height: 82px; } ol #o2 span { width: 91px; height: 82px; background: url('../img/sprite.png') -109px -31px no-repeat; } ol #o2 a span:hover { background: url('../img/sprite.png') -89px -150px no-repeat; }
  
  Na listingu 40.7 występują następujące wartości:  Wysokość i szerokość opcji to wymiary pliku heart.png, czyli 91×82 piksele.  Punkt zaczepienia B(109,31) z rysunku 40.10 służy do ustalenia właściwości left i top oraz przesunięcia tła opcji w stanie nieaktywnym.  Punkt zaczepienia E(89,150) z rysunku 40.11 służy do ustalenia przesunięcia
  
  tła opcji w stanie aktywnym. Niestety opisane rozwiązanie ma wadę. W przypadku powiększenia obrazu Chrome, Opera, Safari oraz Internet Explorer będą wyświetlały pęknięcia, takie jak to widoczne na rysunku 40.18.
  
  Rozdział 40. ♦ Kafelkowanie
  
  507
  
  Rysunek 40.18. Powiększanie widoku strony powoduje pęknięcia w rozwiązaniu z ćwiczenia 40.7
  
  Rozwiązanie problemu pękania kafelków Pękanie kafelków widoczne na rysunku 40.18 wynika prawdopodobnie z błędnego zaokrąglania wymiarów prostokątów. Biały obszar występujący pod ikoną z wizerunkiem użytkownika jest brakującym fragmentem obrazu 40.17. Sposób powstawania pęknięcia jest przedstawiony na rysunku 40.19.
  
  Rysunek 40.19. Sposób powstawania pęknięć kafelków z rysunku 40.18
  
  Część VI ♦ Tła
  
  508
  
  Rozwiązaniem problemu jest stosowanie powiększonych obrazów w pliku sprite.png. Jeśli opcja ma mieć wymiary 50×50 pikseli, w pliku z kafelkami należy wówczas umieścić obraz powiększony o 10 pikseli z każdej strony, tj. o wymiarach 70×70. Przeanalizuj rysunek 40.20. Widoczna na nim opcja, która przedstawia żarówkę, ma mieć wymiary 50×50 pikseli. Wymiary opcji zaznaczono białym kwadratem. Na potrzeby obrazu z kafelkami należy skopiować obraz powiększony o 10 pikseli. Powiększony obraz będzie miał wymiary 70×70 i jest on zaznaczony czarną obwódką. Taką samą technikę stosujemy dla każdej opcji oraz dla całego obrazu stanowiącego tło menu. Rysunek 40.20. Technika wykonania obrazu z kafelkami, który będzie odporny na problemy przedstawione na rysunkach 40.18 oraz 40.19
  
  Ćwiczenie 40.8 Na podstawie projektu przedstawionego na rysunku 40.21 wykonaj stronę WWW, która będzie zawierała menu reagujące na wskaźnik myszki. Zadanie rozwiąż, wykorzystując technikę kafelkowania, która jest odporna na błąd przedstawiony na rysunku 40.19. Rysunek 40.21. Projekt, który wykorzystamy w ćwiczeniu 40.8
  
  Etap pierwszy: obraz sprite.png Obraz przedstawiony na rysunku 40.21 ma wymiary 330×130. Na podstawie tego obrazu przygotujemy menu o wymiarach 310×110. Element, który umieścimy na stronie WWW, został na rysunku 40.22 rozjaśniony białym prostokątem. Rysunek 40.22. Obszar projektu z rysunku 40.21, który będzie widoczny na stronie WWW
  
  Zarys techniki wykrajania kafelków z projektu jest przedstawiony na rysunku 40.23. Czarne i białe prostokąty oraz kwadraty zostały dodane do obrazu wyłącznie w celu wyjaśnienia obszarów, które kopiujemy. W wygenerowanym pliku z kafelkami nie mogą pojawiać się żadne białe ani czarne kwadraty.
  
  Rozdział 40. ♦ Kafelkowanie
  
  509
  
  Rysunek 40.23. Technika krojenia obrazu 40.22 na kafelki
  
  Istotnymi punktami w obrazie 40.23 są: A, B oraz C. Punkt A wskazuje punkt zaczepienia całego menu. Punkty B oraz C dotyczą pierwszej opcji menu. Plik sprite.png, który należy przygotować, jest przedstawiony na rysunku 40.24. W celu ułatwienia zrozumienia, jak ten obraz powstał, zaznaczyłem w nim punkty A, B i C z rysunku 40.23. Rysunek 40.24. Plik sprite.png z ćwiczenia 40.8
  
  Etap drugi: kod HTML/CSS Kod HTML ćwiczenia 40.8 jest przedstawiony na listingu 40.8. Listing 40.8. Kod HTML ćwiczenia 40.8
  
  
  • bulb
  • gear
  • net
  
  
  Etap trzeci: style CSS Style CSS całego menu są widoczne na listingu 40.9. Listing 40.9. Style CSS całego menu nav.menu { width: 310px; height: 110px; position: relative; background: url('../img/sprite.png') -10px -10px no-repeat; }
  
  Część VI ♦ Tła
  
  510 nav.menu ol { list-style-type: none; width: 310px; height: 110px; margin: 0; padding: 0; }
  
  Menu składa się z elementów nav oraz ol. Element nav ma wymiary 310×110, które odpowiadają rozjaśnionemu prostokątowi z rysunku 40.22. Element ol pokrywa cały element nav. Jego wymiary są identyczne. Punkt A na rysunkach 40.23 i 40.24 ma współrzędne (10;10). Na tej podstawie tło należy przesunąć o wektor -10px w poziomie oraz -10px w pionie: background: url('../img/sprite.png') -10px -10px no-repeat;
  
  Każda opcja menu składa się z trzech elementów: li, a oraz span. Elementy li mają wymiary 50×50 i są pozycjonowane kontekstowo. Element a wypełnia w całości swojego rodzica li, a element span wypełnia w całości swojego rodzica a. Wspólne style wszystkich opcji są przedstawione na listingu 40.10. Listing 40.10. Wspólne style wszystkich opcji menu nav.menu li { width: 50px; height: 50px; position: absolute; } nav.menu li a { width: 50px; height: 50px; position: absolute; display: block; left: 0; top: 0; } nav.menu li a span { width: 50px; height: 50px; position: absolute; display: block; left: 0; top: 0; }
  
  Każdą z opcji pozycjonujemy indywidualnie, wykorzystując do tego klasę. Style pierwszej opcji przedstawiającej żarówkę są widoczne na listingu 40.11. Listing 40.11. Style opcji z żarówką nav.menu .o-bulb { left: 30px; top: 30px; }
  
  Rozdział 40. ♦ Kafelkowanie
  
  511
  
  nav.menu .o-bulb span { background: url('../img/sprite.png') no-repeat -40px -40px; } nav.menu .o-bulb a span:hover { background: url('../img/sprite.png') no-repeat -10px -140px ; }
  
  Punkty A, B i C na rysunkach 40.23 i 40.24 mają współrzędne: A(10;10) B(40;40) C(10;140)
  
  Wpis: nav.menu .o-bulb { left: 30px; top: 30px; }
  
  zawiera liczby, które wyznaczają odległość punktu A od B: B(40;40) - A(10;10)
  
  ===> (30;30)
  
  Wpis: nav.menu .o-bulb span { background: url('../img/sprite.png') no-repeat -40px -40px; }
  
  zawiera współrzędne punktu B. Reguła: nav.menu .o-bulb a span:hover { background: url('../img/sprite.png') no-repeat -10px -140px ; }
  
  zawiera natomiast współrzędne punktu C. Margines, który zastosowałem w ćwiczeniu 40.8, ma 10 pikseli. Uprościło to wszelkie obliczenia. W praktyce margines taki można zmniejszyć do dwóch lub trzech pikseli.
  
  Kafelkowanie a przezroczystość Jeśli do kafelkowania ikon wykorzystamy przezroczyste obrazy, opcje menu będzie można wówczas dowolnie przesuwać w obrębie całego tła, bez konieczności dokładnego przeliczania współrzędnych oraz ponownego wykrajania obrazów. Przykładowy obraz z przezroczystymi kafelkami ikon jest przedstawiony na rysunku 40.25. Każda z ikon zajmuje identyczny obszar: kwadrat 70×70 pikseli. Nieprzezroczyste piksele każdej z ikon są zawarte wewnątrz kwadratu 50×50 pikseli. Tak więc każda z ikon ma 10-pikselowy przezroczysty margines z każdej strony.
  
  Część VI ♦ Tła
  
  512 Rysunek 40.25. Kafelkowanie wykorzystujące przezroczystość
  
  Kafelki z rysunku 40.25 pozwalają na tworzenie na stronie WWW przycisków o wymiarach 50×50 pikseli. Do ułożenia przycisków stosujemy połączenie pozycjonowania kontekstowego oraz efektu FIR dostosowanego do przezroczystych obrazów (ćwiczenie 37.4). W kodzie HTML każdego przycisku dodajemy dodatkowy element span, np.:
  • 
    
    bulb
    
    
  
  
  Element span.label będzie zawierał tekst. Przesuniemy go pod tło. Element span. button będzie prezentował tło. Po najechaniu kursorem myszki tło będzie wymieniane. Style CSS dotyczące wszystkich przycisków ustalają wymiary każdego przycisku na 50×50 pikseli i pozycjonują elementy li, a, span.label, span.button dokładnie w tym samym miejscu (jeden nad drugim): nav.menu li { width: 50px; height: 50px; position: absolute; } nav.menu li a { width: 50px; height: 50px; position: absolute;
  
  Rozdział 40. ♦ Kafelkowanie
  
  513
  
  display: block; left: 0; top: 0; } nav.menu li a span { width: 50px; height: 50px; position: absolute; display: block; left: 0; top: 0; }
  
  Następnie ukrywamy wszystkie teksty przycisków, przesuwając je pod spód: nav.menu li a span.label { z-index: -1; }
  
  Na zakończenie ustalamy style każdego przycisku z osobna. Zmieniamy położenie, dodajemy obraz tła i definiujemy efekt rollover: nav.menu .o-bulb { left: 30px; top: 30px; } nav.menu .o-bulb span.button { background: url('../img/sprite.png') no-repeat -10px -10px; } nav.menu .o-bulb a span.button:hover { background: url('../img/sprite.png') no-repeat -10px -80px; }
  
  W rozwiązaniu takim położenie przycisku ustalamy właściwościami left oraz top. Po zmianie wartości na: nav.menu .o-bulb { left: 5px; top: 233px; }
  
  przycisk będzie działał poprawnie, lecz znajdzie się w zupełnie innym miejscu. Bez względu na użyty obraz tła nie zachodzi konieczność ponownego krojenia układu. Plik sprite.png z rysunku 40.25 możemy wykorzystać przy dowolnym tle.
  
  Ćwiczenie 40.9 Stosując dowolne ikony dostępne w serwisie Open Clipart (http://openclipart.org/), wykonaj częściowo przezroczysty obraz sprite.png przedstawiony na rysunku 40.25. Stosując przygotowany obraz z kafelkami, wykonaj stronę WWW, która będzie zawierała przyciski reagujące na kursor myszki. Tło menu zapisz w osobnym pliku bkg.png. Sprawdź poprawność otrzymanego rozwiązania we wszystkich przeglądarkach. Zbadaj wygląd strony:
  
  Część VI ♦ Tła
  
  514  po wyłączeniu stylów CSS,  po wyłączeniu pobierania obrazów,
  
   po zmianie wielkości czcionki w przeglądarce (Ctrl+, Ctrl-, Ctrl+0).
  
  Ćwiczenie 40.10 Zmodyfikuj ćwiczenie 40.9 w taki sposób, by obraz tła był także zawarty w pliku sprite.png. Rozwiązanie takie zmniejsza liczbę plików graficznych o jeden, ale bardzo istotnie utrudnia przygotowanie pliku sprite.png.
  
  Rozdział 41.
  
  Podsumowanie części szóstej Omówione w tym rozdziale tła stanowią alternatywną — w stosunku do elementu img — metodę dodawania obrazów do stron WWW. Różnią się one od img dwoma istotnymi cechami. Pierwszą różnicą jest powielanie. Tła mogą być powielane poziomo, pionowo lub w obu kierunkach. Obrazy wstawiane przy użyciu img nie są powielane. Drugą cechą odróżniającą tła jest to, że nie pojawiają się one w kodzie HTML. Jest to więc idealna metoda na dodawanie do strony elementów czysto dekoracyjnych. Wyłączenie stylów powoduje, że osoba odwiedzająca witrynę ujrzy wyłącznie tekst. Obrazy umieszczone na stronie przy użyciu elementu img nie znikają po wyłączeniu stylów CSS. Pamiętaj, że każdy element HTML może mieć tło. W poprzednich wersjach CSS ograniczeniem było to, że jeden element mógł mieć tylko jedno tło. Obecnie każdemu elementowi możemy przypisać dowolną liczbę obrazów umieszczanych w tle.
  
  Projekt 41.1. Fraszki Przygotuj witrynę prezentującą trzy wybrane fraszki Jana Kochanowskiego. W nagłówku strony wykorzystaj obraz fraszki.jpg. Stosujemy układ 2. z rozdziału 32. Cały kod jest ujęty w pojemniku, a pojemnik podzielony na trzy poziome pasy: nagłówek, treść i stopkę. W nagłówku znajdują się elementy h1 i h2 zawierające imię i nazwisko autora, tytuł fraszki oraz menu witryny. Zarys kodu HTML jest przedstawiony na listingu 41.1.
  
  Część VI ♦ Tła
  
  516 Listing 41.1. Kod HTML projektu 41.1.
  
  Jan Kochanowski Fraszki
  
  
  • do gościa
  ...
  
  
  
  Do gościa

  ...

  
  
  ©2012 Włodzimierz Gajda
  
  Obraz widoczny na stronie jest tłem elementu nav. Teksty zawarte w elementach h1 oraz h2 przesuwamy pod warstwę z obrazem: z-index: -1;
  
  Projekt 41.2. Jack London: The Call of the Wild Przygotuj stronę z tekstem opowiadania Jacka Londona pt. The Call of the Wild. Autora utworu, tytuł oraz tytuły rozdziałów wykonaj nietypową czcionką przy użyciu techniki FIR. Po prawej stronie tytułu rozdziału dodaj przycisk przewijający zawartość strony na samą górę. Przycisk wykonaj, łącząc technikę FIR z kafelkowaniem. Do wykonania strony potrzebne są obrazy zawierające tytuł utworu, nazwisko autora oraz tytuły podrozdziałów. Obrazy te są zapisane w folderze img/. Pracę nad stroną rozpoczynamy od przygotowania kodu HTML przedstawionego na listingu 41.2. Listing 41.2. Zarys projektu The Call of the Wild
  
  ...
  
  The Call of the Wild by Jack London
  
  
  • Into the Primitive
  
  
  Rozdział 41. ♦ Podsumowanie części szóstej
  
  517
  
  
  • The Law of Club and Fang
  ...
  
  
  
  Chapter I Into the Primitive do góry
  
  

  ...

  ...

  ...
  
  Chapter II The Law of Club and Fang do góry
  
  

  ...

  ...

  ...
  
  ...
  
  Zwróć uwagę na użycie atrybutów lang do oznaczenia języka. Cała strona jest w języku angielskim, dlatego atrybuty elementu html przyjmują wartość en. Odsyłacze zawierające tekst do góry są w języku polskim, więc atrybuty określające język przyjmują wartość pl. Zauważ także, że identyfikator #top jest przypisany do elementu html. Dzięki temu aktywacja hiperłącza do góry będzie przewijała dokument do samej góry. Jeśli atrybut id="top" przypiszesz do elementu body, przewinięcie będzie wówczas uwzględniało margines elementu body i dokument nie będzie przewijany do samej góry. Autor jest oznaczony elementem h1, a tytuł utworu — h2. Spis treści jest wykonany jako lista numerowana. Rozdziały są wykonane jako elementy article, w których zawarte są elementy header, h3, h4 oraz a. Dzięki użyciu elementu header możemy w łatwy sposób wyrównać pionowo przyciski wykonane jako hiperłącza. Wystarczy w tym celu hiperłącza oraz elementy h3 wypozycjonować kontekstowo. Elementy h3 dosuwamy do lewej strony (left: 0), a hiperłącza — do prawej (right: 0). Elementy h1, h2, h3 oraz h4 zawierają element span, którego tło ma przysłaniać tekst. Wszystkie elementy span mają być pozycjonowane kontekstowo i wypełniać przestrzeń swojego rodzica. Taki format nadają style z listingu 41.3.
  
  Część VI ♦ Tła
  
  518
  
  Listing 41.3. Pozycjonowanie elementów span wykorzystanych do warstwowego efektu FIR span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; }
  
  Elementy h1 oraz h2 są zwykłymi nagłówkami stosującymi warstwową technikę FIR. Są one zatem pozycjonowane względnie i mają sztywno ustalone wymiary, zaś zawarty w nich element span ma przypisane tło. Wymiary elementów h1 oraz h2 odpowiadają co do piksela wymiarom obrazów użytych jako tła elementów span. Style elementu h1 są przedstawione na listingu 41.4. Listing 41.4. Style elementu h1 h1 { margin: 50px auto; width: 800px; height: 100px; position: relative; } h1 span { background: url('img/the-call-of-the-wild.png') no-repeat; }
  
  Najtrudniejszy do wykonania jest element header, w szczególności przyciski z tekstem do góry. Style CSS przycisków są przedstawione na listingu 41.5. Listing 41.5. Style przycisków do góry article header { width: 800px; height: 200px; position: relative; } article a { display: block; width: 32px; height: 32px; position: absolute; top: 34px; right: 0; font-size: 11px; overflow: hidden; } article a span { background: url('img/przycisk.png') 0 0 no-repeat; }
  
  Rozdział 41. ♦ Podsumowanie części szóstej
  
  519
  
  article a span:hover { background: url('img/przycisk.png') -32px 0 no-repeat; }
  
  Przyciski są wykonane z wykorzystaniem dwóch trików:  kafelkowania,  warstwowego efektu FIR.
  
  Najpierw pozycjonujemy przyciski w prawym górnym narożniku elementu header. Odpowiadają za to wpisy: position: absolute; top: 34px; right: 0;
  
  elementu a oraz wpisy: width: 800px; height: 200px; position: relative;
  
  elementu header. Rysunki z tekstami Chapter I, Chapter II itd. mają wysokość 100 pikseli, a przycisk ma wysokość 32 piksele. W celu pionowego wyśrodkowania przycisku w obrębie tekstu Chapter X podajemy zatem wartość 34px, gdyż: 34 = (100 – 32)/2
  
  (Od wysokości obrazu z tekstem Chapter odejmujemy wysokość obrazu z przyciskiem. Otrzymaną wartość dzielimy na pół). Oba stany przycisku są zapisane w jednym pliku przycisk.png. Dlatego selektory article a span oraz article a span:hover stosują ten sam plik tła. W obsłudze zdarzenia :hover plik jest przesunięty o 32 piksele w lewo. W projekcie 41.2 kafelkowanie zostało wykorzystane tylko do przycisku. Oczywiście nic nie stoi na przeszkodzie, by kafelkowanie zastosować także dla pozostałych plików graficznych. Wszystkie obrazy w tym projekcie mogą być zapisane w jednym pliku graficznym sprite.png. Korzyścią z takiego rozwiązania będzie zmniejszenie liczby zapytań HTTP.
  
  Projekt 41.3. Zakładki Wykonaj trzy strony WWW: lorem.html, ipsum.html oraz dolor.html. Pliki te połącz, umieszczając na samej górze menu, które będzie prezentowane graficznie w postaci zakładek. W menu umieść trzy opcje: Lorem, Ipsum oraz Dolor. Zadanie wykonaj w taki sposób, by po wejściu na stronę Lorem pierwsza z zakładek została wyciągnięta na wierzch. Po odwiedzeniu strony Ipsum druga z zakładek ma leżeć na wierzchu. Po odwiedzeniu strony Dolor wybrana ma natomiast zostać trzecia opcja menu. Do wykonania menu wykorzystaj plik sprite.png, który jest widoczny na rysunku 41.1.
  
  Część VI ♦ Tła
  
  520 Rysunek 41.1. Plik sprite.png zawierający trzy obrazy, które wykorzystane są jako tła w projekcie 41.3
  
  Zwróć uwagę, że rysunek 41.1 jest podzielony na cztery pasy. Najwyższy pas będzie użyty jako tło menu w pliku lorem.html. Drugi pas będzie użyty jako tło menu w pliku ipsum.html. Trzeci pas będzie użyty jako tło menu w pliku dolor.html. Najniższy, czwarty pas będzie użyty jako tło górnej części strony WWW. Każdy z pasów ma wysokość 79 pikseli. Projekt wykonaj w taki sposób, by menu witryny zawarte w trzech plikach było identyczne, bez żadnych modyfikacji. W jaki sposób możemy wykonać menu, które pomimo tego, że kod HTML jest identyczny, będzie różniło się wyglądem na trzech stronach? W projekcie 35.6 w opcjach menu dodaliśmy klasę wybrana (listing 35.9). W ten sposób na każdej stronie zaznaczona była odpowiednia pozycja menu. Tym razem mamy przygotować projekt w taki sposób, by kod menu każdej ze stron był identyczny. Informację o tym, która opcja jest wybrana, przeniesiemy do elementu nadrzędnego, a w stylach CSS użyjemy selektorów potomnych. Kod pliku lorem.html jest przedstawiony na listingu 41.6. Listing 41.6. Plik lorem.html z projektu 41.3
  
  
  • lorem
  • ipsum
  • dolor
  
  
  Dzięki identyfikatorowi id="lorem" w stylach CSS możemy użyć selektora potomnego #lorem .menu. Przy jego pomocy ustalimy tło menu tak, by był nim najwyższy pas z rysunku 41.1: #lorem .menu { background: url('sprite.png') no-repeat 0 0; }
  
  Jeśli w dokumencie nie wystąpi identyfikator #lorem, powyższa reguła w ogóle nie zostanie wówczas zastosowana. Treść pliku ipsum.html jest przedstawiona na listingu 41.7.
  
  Rozdział 41. ♦ Podsumowanie części szóstej
  
  521
  
  Listing 41.7. Plik ipsum.html z projektu 41.3
  
  
  • lorem
  • ipsum
  • dolor
  
  
  W celu wyciągnięcia zakładki Ipsum na wierzch należy ustalić, by tłem menu był drugi od góry pas z rysunku 41.1. Tło sprite.png należy zatem podciągnąć o 79 pikseli do góry: #ipsum .menu { background: url('sprite.png') no-repeat 0 -79px; }
  
  W analogiczny sposób definiujemy tło w trzecim pliku dolor.html. W kodzie HTML pliku dolor.html pojawi się identyfikator:
  
  a style CSS będą zawierały regułę przesuwającą tło o dwa pasy1 wysokości 79 pikseli do góry: #dolor #menu { background: url('sprite.png') no-repeat 0 -158px; }
  
  Dodatkową ciekawostką zaprezentowaną w projekcie 41.3 jest zapisanie tła rozciągającego się na dowolną szerokość w pliku sprite.png. Tłem elementu nav.menu jest plik sprite.png: #pas { background: url('sprite.png') 0 -237px repeat-x; width: 100%; height: 79px; margin: 0; padding: 0; }
  
  Obraz tła jest podciągnięty do góry o 237 = 3·79 pikseli. Zauważ, że najniższy pas, użyty jako rozciągające się tło, musi przylegać do lewej i do prawej krawędzi obrazu sprite.png. Nie może być wykonany tak jak jedna z opcji na rysunku 40.9. Jeśli w podobny sposób zechcesz użyć fragmentu pliku sprite.png jako tła tworzącego pionowy pas, odpowiedni fragment pliku z kafelkami będzie musiał się wówczas rozciągać od samej góry do samego dołu obrazu.
  
  1
  
  Oczywiście 2·79 = 158.
  
  Część VI ♦ Tła
  
  522
  
  Projekt 41.4. Przyciski aktywne/ nieaktywne wykonane jako tła Zmodyfikuj projekt 35.6 pt. Kolędy. Występujące w nim ikony TXT, MUS oraz PDF wykonaj techniką kafelkowania. Użyj przedstawionego na rysunku 41.2 pliku sprite.png. Rysunek 41.2. Plik sprite.png z ikonami
  
  Plik sprite.png zawiera trzy wersje ikon zawarte w trzech poziomych pasach. W najwyższym wierszu znajdują się małe ikony o mocnych kolorach. Użyjemy ich jako ikon, które są dostępne, a których stan jest nieaktywny. Środkowy wiersz zawiera powiększone ikony. Rysunków tych użyjemy dla ikon w stanie aktywnym (tj. wskazanych przez kursor myszki). Trzeci, najniższy wiersz zawiera małe wyblakłe ikony. Takie rysunki będziemy prezentowali wówczas, gdy ikona nie jest dostępna (tj. nie można jej kliknąć). Przeanalizuj listing 35.10. W rozwiązaniu projektu 35.6 użyliśmy elementów img. Jeśli chcemy, by ikona, której nie można kliknąć, była widoczna na stronie, musimy wówczas użyć elementu img, który nie jest hiperłączem:
  
  Stosując tła, możemy kod HTML przygotować w taki sposób, by znalazły się w nim wyłącznie obrazy, które możemy kliknąć. Obrazy, których kliknąć nie można, będą widoczne jako tło całego elementu ol. W celu wykonania elementu z ikonami najpierw przygotujmy kod HTML. Będzie to element nav zawierający trzy lub jedno hiperłącze. Plik cicha-noc.html jest przedstawiony na listingu 41.8. Wszystkie trzy ikony są aktywne. Listing 41.8. Plik cicha-noc.html z projektu 41.4
  
  TXT
  
  Rozdział 41. ♦ Podsumowanie części szóstej
  
  523
  
  MUS
  
  PDF
  
  Witryna poświęcona kolędom nie zawiera nut dla kolędy pt. Jam jest dudka. Plik jam-jest-dudka.html z projektu 41.4 jest widoczny na listingu 41.9. Element nav zawiera tylko jedną pozycję: ikonę TXT. Ikony, których nie da się kliknąć, nie występują w kodzie HTML. Listing 41.9. Plik jam-jest-dudka.html z projektu 41.4
  
  TXT
  
  Przygotowanie stylów CSS rozpoczynamy od ustalenia wymiarów ikon. Każda pojedyncza ikona z rysunku 41.2 ma wymiary 40×40 pikseli. Cały jeden wiersz z rysunku 41.2 ma zatem wymiary 120×40 pikseli. Element nav.ikony ma wymiary 120×40 i jest wyrównany do prawego górnego narożnika elementu nadrzędnego header: .ikony { position: absolute; right: 0; top: 0; width: 120px; height: 40px; background: url('ikony/sprite.png') 0 -80px; }
  
  Reguła background ustala tło wszystkich ikon. Domyślnie jest to najniższy pas z rysunku 41.2. Dlatego wektor przesunięcia wynosi 0 –80px, czyli w poziomie nie przesuwamy tła, a w pionie podnosimy je o 80 pikseli. W ten sposób nawet jeśli wewnątrz elementu nav.ikony nie umieścimy żadnego kodu HTML, to ikony w stanie niedostępnym będą widoczne jako tło.
  
  Część VI ♦ Tła
  
  524
  
  Hiperłącza zawarte w elemencie nav.ikony oraz wewnętrzne elementy span.label i span. button stosują warstwowy efekt FIR w połączeniu z kafelkowaniem. Elementy a oraz span mają wymiary pojedynczej ikony, czyli 40×40, i leżą jeden na drugim: .ikony a { width: 40px; height: 40px; display: block; position: absolute; } .ikony a span { position: absolute; left: 0; top: 0; width: 40px; height: 40px; }
  
  Tekst ukrywamy, przesuwając element span.label pod spód: .ikony a span.label { z-index: -1; }
  
  Poszczególne przyciski są przesunięte o 40 pikseli. Każda z nich ma zdefiniowane dwa tła. Tło elementu span.button pochodzi z najwyższego pasa. Po wystąpieniu zdarzenia :hover tłem elementu span.button zostaje natomiast rysunek ze środkowego pasa. Oto style drugiej opcji: .ikony .mus { left: 40px; } .ikony .mus .button { background: url('ikony/sprite.png') -40px 0; } .ikony .mus:hover .button { background: url('ikony/sprite.png') -40px -40px; }
  
  W ten sposób:  Jeśli element a w ogóle nie wystąpi w kodzie HTML, widoczne będzie wówczas tło elementu nav.ikony (czyli opcja, której nie można kliknąć — jedna z ikon
  
  z najniższego paska).  Jeśli element a wystąpi w kodzie HTML, widocznym tłem będzie wówczas tło zawartego w nim elementu span.button (czyli opcja, którą można kliknąć
  
  — jedna z ikon z najwyższego paska).
  
   Jeśli element a występuje w kodzie HTML i został wskazany myszką, widocznym tłem będzie wówczas tło przypisane do selektora span.button:hover (czyli
  
  powiększona ikona — jeden z rysunków ze środkowego paska). Po wykonaniu strony odwiedź ją w przeglądarce i wyłącz style CSS. Po wyłączeniu formatowania na stronie pojawiają się wyłącznie te ikony, które są dostępne. W pozbawionym stylów CSS kodzie HTML są one prezentowane jako zwykłe odsyłacze. Sprawdź i porównaj wygląd stron cicha-noc.html oraz jam-jest-dudka.html po wyłączeniu stylów CSS w projekcie 41.4 oraz 35.6.
  
  Część VII
  
  Zagadnienia zaawansowane
  
  526
  
  HTML5 i CSS3. Praktyczne projekty
  
  Rozdział 42.
  
  Struktura funkcjonalna witryny Dokumenty hipertekstowe połączone odsyłaczami tworzą pewną strukturę. Każdy projekt i ćwiczenie omawiane w książce można zakwalifikować np. jako:  witrynę zawartą w całości w jednym pliku (w dokumencie takim nie
  
  występują odsyłacze);  witrynę składającą się z wielu plików niepowiązanych ze sobą (w dokumentach
  
  nie występują odsyłacze);  witrynę zawartą w jednym pliku, wzbogaconą o wewnętrzny spis treści oraz
  
  ewentualnie odsyłacze przewijające zawartość na początek (dokument zawiera wyłącznie odsyłacze wewnętrzne stosujące adresy ze znakiem #);  wiele plików zawierających wspólny spis treści, na każdej stronie znajduje się
  
  odsyłacz: powrót do spisu treści;  witrynę zawierającą menu stale widoczne na stronie.
  
  Przykładem dokumentu, który składa się z jednego pliku, jest projekt 26.3 z tekstem epopei pt. Pan Tadeusz. Treść utworu jest w całości zawarta na pojedynczej stronie WWW. Brak jakichkolwiek odsyłaczy czy spisu treści powoduje, że dokument jest niewygodny. Dokumentem drugiego rodzaju jest zestawienie właściwości CSS z projektu 26.1. Witryna składa się z czternastu niepowiązanych ze sobą plików. Tak jak w poprzednim przypadku, brak odsyłaczy powoduje, że przeglądanie, a szczególnie wyszukiwanie informacji jest niewygodne. Wymaganą stronę możemy odnaleźć jedynie na podstawie nazw plików. Trzeci rodzaj dokumentów jest znacznie wygodniejszy od dwóch poprzednich. Menu wewnętrzne, takie jak na przykład w projekcie 22.5 z utworem The Wonderful Wizard of Oz, pozwala na szybkie odnalezienie dowolnego rozdziału. Rozwiązanie to można dodatkowo wzbogacić o opcję powrotu do spisu treści umieszczoną na początku lub
  
  Część VII ♦ Zagadnienia zaawansowane
  
  528
  
  na końcu każdego rozdziału. Przycisk powrotu do góry omówiliśmy w projekcie 41.2 prezentującym opowiadanie Jacka Londona pt. The Call of the Wild. Witryna czwartego rodzaju jest podzielona na wiele mniejszych plików. Przykładem jest ćwiczenie 18.3 prezentujące moje wierszyki. Podobnie jak w poprzednim rozwiązaniu, spis treści oraz opcje powrotu do spisu treści umożliwiają odszukanie dowolnego wiersza. Na stronie pojedynczego wiersza nie pojawia się menu nawigacyjne. Ostatnie z rozwiązań jest najwygodniejsze: witryna zawiera oprócz zawartości spis treści, który jest zawsze widoczny. Dzięki temu w dowolnym momencie możemy przejść do dowolnej pozycji spisu treści. Rozwiązanie takie występuje między innymi w projektach 41.1 pt. Fraszki oraz 41.4 prezentującym nuty i teksty kolęd. Cechami charakterystycznymi opisanych pięciu rozwiązań są:  liczba dokumentów HTML (wiele dokumentów HTML lub jeden dokument
  
  HTML);  obecność spisu treści (spis treści występuje lub nie występuje);  forma spisu treści (spis treści wewnętrzny1 lub zewnętrzny);  widoczność spisu treści (spis treści jest widoczny na każdej stronie lub tylko
  
  na specjalnej stronie z indeksem);  obecność odsyłaczy powrotnych.
  
  Oczywiście te same informacje mogą być zaprezentowane przy użyciu dowolnej z pięciu opisanych metod.
  
  Ćwiczenie 42.1 Wykonaj witrynę z sześcioma fraszkami Jana Kochanowskiego w postaci jednego pliku HTML. Wymagane cechy rozwiązania:  jeden dokument HTML,  brak spisu treści,  brak odsyłaczy powrotnych.
  
  Ćwiczenie 42.2 Wykonaj witrynę z sześcioma fraszkami Jana Kochanowskiego w postaci sześciu niepowiązanych plików HTML.
  
  1
  
  Tj. stosujący hiperłącza #id.
  
  Rozdział 42. ♦ Struktura funkcjonalna witryny
  
  529
  
  Wymagane cechy rozwiązania:  wiele dokumentów HTML,  brak spisu treści,  brak odsyłaczy powrotnych.
  
  Ćwiczenie 42.3 Wykonaj witrynę z sześcioma fraszkami Jana Kochanowskiego w postaci jednego pliku HTML z wewnętrznym spisem treści. Wymagane cechy rozwiązania:  jeden dokument HTML,  wewnętrzny spis treści,  spis treści zawsze dostępny na górze strony,  odsyłacze powrotne do spisu treści poniżej treści każdego utworu.
  
  Ćwiczenie 42.4 Wykonaj witrynę z sześcioma fraszkami Jana Kochanowskiego. Każda fraszka ma być umieszczona w osobnym pliku HTML. Rozwiązanie wzbogać o spis treści oraz opcje powrotu do spisu treści. Wymagane cechy rozwiązania:  wiele dokumentów HTML,  spis treści z odsyłaczami zewnętrznymi,  spis treści dostępny tylko na stronie z indeksem utworów,  odsyłacze powrotne do spisu treści poniżej treści każdego utworu.
  
  Ćwiczenie 42.5 Wykonaj witrynę z sześcioma fraszkami Jana Kochanowskiego. Każda fraszka ma być umieszczona w osobnym pliku HTML. Na każdej ze stron ma się znajdować identyczny spis treści umożliwiający przejście do dowolnego utworu. Wymagane cechy rozwiązania:  wiele dokumentów HTML,  spis treści z odsyłaczami zewnętrznymi,  spis treści dostępny na górze każdej strony,  brak odsyłaczy powrotnych.
  
  530
  
  Część VII ♦ Zagadnienia zaawansowane
  
  Rozdział 43.
  
  Kolejność elementów w kodzie HTML Kolejność elementów w kodzie HTML ma istotny wpływ na wygląd witryny. Strona: Lorem ipsum

  Dolor sit amet...

  
  
  będzie wyglądała inaczej niż strona:

  Dolor sit amet...

  Lorem ipsum
  
  Mając na uwadze dostępność stron WWW, kod HTML należy organizować w taki sposób, by treść występowała w kodzie HTML przed menu i przed stopką1. Zamiast w ten sposób: PRZYKŁAD NIEZALECANY
  
  ...
  
  ...
  
  stronę WWW tworzymy zatem tak: PRZYKŁAD ZALECANY
  
  ... 1
  
  Mark Pilgrim, W głąb dostępności, Dzień 10.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  532
  
  ...
  
  Jeśli jest to trudne do wykonania, to należy przynajmniej na początku strony umieścić odsyłacz wewnętrzny umożliwiający szybkie przejście do treści: PRZYKŁAD DOPUSZCZALNY #przejdz-do-tresci { display: none; } ...
  
  

  przejdź do treści

  
  
  ...
  
  ...
  
  Widoczność odnośnika przejdź do treści w przeglądarkach graficznych wyłączamy stylami display: none.
  
  Zmiana kolejności kolumn pionowych W rozdziale 32. przygotowaliśmy wielokolumnowe układy o stałej szerokości. W szablonach dwukolumnowych numer 3 oraz 4 możemy modyfikować kolejność elementów div#kolumna_lewa oraz div#kolumna_prawa, nie zmieniając stylów CSS. Jeśli w kodzie z listingu 20.6 kolumnę div#kolumna_prawa umieścimy w pojemniku jako pierwszą, otrzymamy wówczas kod przedstawiony na listingu 43.1. Kod z listingu 43.1 sformatowany stylami z listingu 32.5 będzie wyglądał tak jak na rysunku 32.4. Listing 43.1. Układ nr 3 z rozdziału 32. po zmianie kolejności kolumn w kodzie HTML
  
  
  
  
  
  W przypadku układów trójkolumnowych sytuacja jest trochę bardziej skomplikowana, gdyż kolumna z treścią ma wystąpić jako pierwsza w kodzie. Nie możemy jej jednak dosunąć ani do lewej, ani do prawej strony, gdyż ma ona znaleźć się wizualnie na środku. Możemy zastosować dwa rozwiązania: dodać dodatkowy element div lub użyć ujemnych marginesów.
  
  Rozdział 43. ♦ Kolejność elementów w kodzie HTML
  
  533
  
  Pierwsze rozwiązanie polega na tym, by układ podzielić na dwa układy dwukolumnowe. Do układu z listingu 32.10 dodajmy dodatkowy element div#tmp oraz zmieńmy kolejność kolumn tak, by kolumna środkowa (przeznaczona na treść) występowała jako pierwsza. Otrzymamy kod przedstawiony na listingu 43.2. Listing 43.2. HTML układu nr 5 z rozdziału 32. po dodaniu dodatkowego elementu div i zmianie kolejności kolumn
  
  
  
  
  
  
  
  Style CSS z listingu 43.3 sformatują kod HTML z listingu 43.2 tak, że będzie on wyglądał identycznie jak układ przedstawiony na rysunku 32.6. Listing 43.3. Style CSS formatujące kod z listingu 43.2 do postaci z rysunku 32.6 #pojemnik { width: 980px; margin: 0 auto; } #tmp { float: left; width: 730px; } #kolumna_lewa { float: left; width: 200px; } #kolumna_srodkowa { float: right; width: 526px; border-left: 2px solid black; border-right: 2px solid black; } #kolumna_prawa { float: right; width: 250px; }
  
  Szerokość kolumny div#tmp jest równa sumie szerokości kolumn div#kolumna_lewa oraz div#kolumna_prawa. Element div#tmp dosuwamy do lewej strony, a element div# ´kolumna_prawa — do prawej. Wewnątrz elementu div#tmp element div#kolumna_ srodkowa dosuwamy do prawej strony, a element div#kolumna_lewa — do lewej. Druga metoda modyfikacji kolejności kolumn układu 5. z rozdziału 32. wykorzystuje ujemne marginesy. Gotowe rozwiązanie jest przedstawione na listingu 43.4.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  534
  
  Listing 43.4. Modyfikacja kolejności elementów div w układzie 5. przy użyciu ujemnych marginesów #pojemnik { width: 980px; margin: 0 auto; } #kolumna_lewa { float: left; width: 200px; margin-left: -730px; } #kolumna_srodkowa { float: left; width: 526px; border-left: 2px solid black; border-right: 2px solid black; margin-left: 200px; } #kolumna_prawa { float: left; width: 250px; } ...
  
  ... ... ...
  
  W kodzie HTML pierwszym elementem jest div#kolumna_srodkowa. Element ten jest dosunięty do lewej krawędzi (float: left). Należy go odsunąć od lewej krawędzi o szerokość kolumny div#kolumna_lewa. Dlatego w regule o selektorze #kolumna_srodkowa pojawia się wpis: margin-left: 200px;
  
  Po sformatowaniu elementu div#kolumna_srodkowa przechodzimy do elementu div# ´kolumna_lewa. Ustalamy jego szerokość i podając ujemną wartość marginesu, przesuwamy na lewo od elementu div#kolumna_srodkowa: #kolumna_lewa { float: left; width: 200px; margin-left: -730px; }
  
  Podana wartość –730 jest równa sumie szerokości elementów div#tresc (530 pikseli) oraz div#kolumna_lewa (200 pikseli). Style elementu p nie ulegają zmianie. Układ 5. z rozdziału 32. składa się z trzech pionowych kolumn: ... ... ...
  
  Rozdział 43. ♦ Kolejność elementów w kodzie HTML
  
  535
  
  Kolumny te oznaczmy literami L, T oraz P od pierwszych liter słów: lewa, treść, prawa. Oryginalny układ numer 5 z rozdziału 32. stosuje kolejność LTP. Listing 43.2 przedstawia rozwiązanie, w którym elementy są uporządkowane TLP. Stosując ujemne marginesy oraz dosuwanie do lewej i do prawej krawędzi, elementy L, T oraz P można uporządkować w dowolny inny sposób. Wszystkich kombinacji jest sześć: 1. LTP, 2. TLP, 3. LPT, 4. PTL, 5. TPL, 6. PLT.
  
  Kombinację LTP wykorzystaliśmy w układzie nr 5 z rozdziału 32., a porządek TLP omówiliśmy w dwóch wersjach:  rozwiązanie z dodatkowym elementem div#tmp — listing 43.2,  rozwiązanie bazujące na ujemnych marginesach — listing 43.4.
  
  Ćwiczenie 43.1 Wykonaj dwukolumnowy układ nr 3 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku przedstawionym na listingu 43.1.
  
  Ćwiczenie 43.2 Wykonaj dwukolumnowy układ nr 4 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku przedstawionym na listingu 43.1.
  
  Ćwiczenie 43.3 Wykonaj trójkolumnowy układ nr 5 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku TLP. Wykorzystaj technikę dosuwania dodatkowego elementu div#tmp przedstawioną na listingach 43.2 oraz 43.3.
  
  Ćwiczenie 43.4 Wykonaj trójkolumnowy układ nr 5 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku TLP. Wykorzystaj przedstawioną na listingu 43.4 technikę ujemnych marginesów.
  
  Ćwiczenie 43.5 Wykonaj układ nr 5 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku LPT.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  536
  
  Ćwiczenie 43.6 Wykonaj układ nr 5 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku PTL.
  
  Ćwiczenie 43.7 Wykonaj układ nr 5 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku TPL.
  
  Ćwiczenie 43.8 Wykonaj układ nr 5 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku PLT.
  
  Zmiana kolejności poziomych pasów Układ 2. z rozdziału 32. prezentował podział na trzy poziome pasy. Kolejność elementów w kodzie HTML jest przedstawiona na listingu 43.5. Elementy te w skrócie oznaczymy jako N, T oraz S (od słów: nagłówek, treść, stopka). Listing 43.5. Kolejność elementów HTML w układzie nr 2 z rozdziału 32.
  
  
  
  
  
  Witryna zoptymalizowana pod względem dostępności powinna mieć kod HTML przedstawiony na listingu 43.6. Pierwszym elementem jest treść, po niej następują nagłówek i stopka. Listing 43.6. Układ nr 2 z rozdziału 32. po zastosowaniu kolejności TNS #pojemnik { width: 760px; margin: 0 auto; position: relative; } #naglowek { height: 100px; position: absolute; top: 0; width: 760px; } #kolumna { padding-top: 100px; } ...
  
  Rozdział 43. ♦ Kolejność elementów w kodzie HTML
  
  537
  
  
  
  W celu zmiany kolejności elementów w kodzie HTML wykorzystujemy pozycjonowanie kontekstowe omówione w rozdziale 31. Pojemnik otrzymuje wpis position: relative, zaś nagłówek i treść są wzbogacone o position: absolute. Treść przesuwamy o wysokość nagłówka do dołu, podając dopełnienie górne równe 100px. Następnie ustalamy wysokość nagłówka (height: 100px) oraz przesuwamy go do góry (top: 0). Konieczne jest również ustalenie szerokości nagłówka (width: 760px). Style stopki nie wymagają modyfikacji. Podział na pasy NTS również może być wykonany w sześciu wariantach: 1. NTS (układ nr 2 z rozdziału 32.), 2. TNS (listing 43.3), 3. NST, 4. STN, 5. TSN, 6. SNT.
  
  Ćwiczenie 43.9 Wykonaj układ nr 2 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku TNS.
  
  Ćwiczenie 43.10 Wykonaj układ nr 2 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku NST.
  
  Ćwiczenie 43.11 Wykonaj układ nr 2 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku STN.
  
  Ćwiczenie 43.12 Wykonaj układ nr 2 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku TSN.
  
  Ćwiczenie 43.13 Wykonaj układ nr 2 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku SNT.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  538
  
  Zmiana kolejności kolumn oraz poziomych pasów Oczywiście opisane techniki modyfikacji kolejności pionowych kolumn oraz poziomych pasów możemy połączyć. Układ nr 8 z rozdziału 32. należy wykonać tak, by element div#kolumna_srodkowa wystąpił w kodzie HTML jako pierwszy. Rozwiązanie takie jest przedstawione na listingu 43.7. Listing 43.7. Układ nr 8 z rozdziału 32. po ustaleniu kolejności elementów TLPNS #pojemnik { width: 980px; margin: 0 auto; position: relative; } #srodek { padding-top: 100px; padding-bottom: 100px; } #tmp { float: left; width: 730px; } #kolumna_lewa { float: left; width: 200px; } #kolumna_srodkowa { float: right; width: 526px; border-left: 2px solid black; border-right: 2px solid black; } #kolumna_prawa { float: right; width: 250px; } header { border-bottom: 2px solid black; position: absolute; top: 0; left: 0; width: 980px; height: 100px; } footer { border-top: 2px solid black; position: absolute; bottom: 0; left: 0; width: 980px; height: 100px; }
  
  Rozdział 43. ♦ Kolejność elementów w kodzie HTML
  
  539
  
  
  
  
  
  
  
  
  
  Ćwiczenie 43.14 Wykonaj układ nr 8 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku TLPNS.
  
  Ćwiczenie 43.15 Wykonaj układ nr 8 z rozdziału 32. Kolumny umieść w kodzie HTML w porządku TNLPS. Ponieważ nagłówek jest pozycjonowany bezwzględnie, możesz go umieścić w kodzie HTML w dowolnym miejscu.
  
  540
  
  Część VII ♦ Zagadnienia zaawansowane
  
  Rozdział 44.
  
  Atrybuty HTML Specyfikacja języka HTML w punkcie 3.2.3 zawiera obszerną listę atrybutów, które mogą być przypisywane do wszystkich elementów HTML. Są to: accesskey class contenteditable contextmenu dir draggable dropzone hidden id inert spellcheck style tabindex title translate
  
  Oczywiście jeden element może mieć kilka dowolnych atrybutów. Poprawnym przykładem jest: ...
  
  Najpopularniejsze atrybuty Najczęściej stosowanymi atrybutami HTML są:  id — identyfikator elementu;  class — klasa elementu;  style — style CSS elementu;  title — tytuł elementu.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  542
  
  Atrybut id wykorzystujemy w dwóch celach:  do przygotowania wewnętrznych odsyłaczy o adresach #id,  do ustalenia stylów elementu przy użyciu selektora #id { }.
  
  Atrybut class wykorzystujemy do modyfikacji stylów elementu. Stosujemy wówczas selektor .klasa { }. Atrybut style umożliwia przypisanie stylów CSS do konkretnego elementu HTML. Ma on zastosowanie w sytuacji, gdy chcemy zezwolić na nadanie dowolnego stylu elementowi bez możliwości modyfikacji plików CSS. Atrybut title nadaje natomiast elementowi etykietę, która może być wykorzystana w przypadku, gdy treść elementu nie zawiera wersji tekstowej.
  
  Atrybuty językowe Do grupy tej należą atrybuty:  lang — określenie języka elementu;  dir — kierunek przetwarzania tekstu;  translate — decyduje o tym, czy dany element ma podlegać tłumaczeniu;  spellcheck — decyduje o tym, czy dany element ma podlegać sprawdzaniu
  
  pisowni. Atrybut lang ustala język treści elementu: ...
  
  Wartością atrybutu dir może być ltr (ang. left to right — od lewej do prawej) lub rtl (ang. right to left — od prawej do lewej). Atrybuty translate oraz spellcheck przyjmują wartości logiczne: true lub false. Pierwszy z nich decyduje o tym, czy treść elementu ma podlegać tłumaczeniu, a drugi — czy treść elementu ma podlegać sprawdzaniu pisowni.
  
  Skróty klawiszowe Kolejną grupą atrybutów są atrybuty odpowiedzialne za skróty klawiszowe oraz kolejność aktywnych kontrolek. Atrybutami tymi są:  accesskey — definicja skrótu klawiszowego;  tabindex — kolejność elementów wyróżnianych przyciskiem tabulacji;
  
  Rozdział 44. ♦ Atrybuty HTML
  
  543
  
  Atrybut accesskey przypisany do odsyłacza: ...
  
  umożliwia aktywację odsyłacza przy użyciu skrótu klawiszowego. Metoda aktywacji skrótów klawiszowych zależy od przeglądarki. W Firefoksie skróty klawiszowe aktywujemy, naciskając Lewy Alt+Shift+litera, np. Lewy Alt+Shift+G. Powrót do poprzedniej strony realizuje przycisk backspace. W przeglądarce Chrome skróty klawiszowe aktywujemy identycznie jak w Firefoksie. W przeglądarce Internet Explorer należy najpierw nacisnąć kombinację Lewy Alt+litera (np. Lewy Alt+G), a następnie wybór potwierdzić Enterem. Przeglądarka Safari aktywuje skróty po naciśnięciu kombinacji Lewy Alt+litera, bez konieczności naciskania Entera. W celu aktywacji skrótów klawiszowych w Operze należy nacisnąć kombinację przycisków Shift+Esc. Na ekranie zostanie wówczas wyświetlona lista dostępnych skrótów wraz z informacją o tym, jak uaktywnić każdy z nich. Etykietami prezentowanych skrótów są napisy zawarte w hiperłączach, wartości atrybutów title lub — w przypadku kontrolek formularzy — wartości atrybutu value. Atrybut tabindex ustala porządek odwiedzania odsyłaczy przy użyciu tabulacji. Jeśli strona zawiera hiperłącza: A B C
  
  to przycisk tabulacji będzie wędrował po nich w porządku B, C, A.
  
  Ćwiczenie 44.1 Przygotuj stronę WWW z czterema odsyłaczami do stron: http://www.google.com, http://www.onet.pl, http://www.allegro.pl i http://www.e-bay.com występującymi na stronie w dokładnie takiej kolejności. Witrynę wykonaj w taki sposób, by tabulator przechodził po odsyłaczach w kolejności: Allegro, Google, eBay, Onet. Dodatkowo zdefiniuj skróty klawiszowe: A (Allegro), G (Google), E (eBay) oraz O (Onet). Rozwiązanie ćwiczenia jest przedstawione na listingu 44.1. Listing 44.1. Rozwiązanie ćwiczenia 44.1
  • eBay
  
  
  Wykonaną stronę otwórz w przeglądarce. Naciskaj przycisk tabulacji i obserwuj kolejność, w jakiej będą wyróżniane odsyłacze. Na zakończenie ćwiczenia przejdź do strony Allegro, aktywując skrót klawiszowy.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  544
  
  Pozostałe atrybuty Rola pozostałych atrybutów jest następująca:  contenteditable zezwala na edycję zawartości elementu.  contextmenu ustala menu kontekstowe elementu.  draggable oraz dropzone umożliwiają oprogramowanie w języku JavaScript
  
  obsługi zdarzeń ciągnij-upuść.  hidden wyłącza widoczność danego elementu.  inert wyłącza reakcję elementu na zdarzenia.
  
  Użycie pierwszych dwóch atrybutów — contenteditable oraz contextmenu — jest przedstawione w ćwiczeniach 44.2 oraz 44.3. Atrybuty dotyczące zdarzeń ciągnij-upuść należy oprogramować w języku JavaScript. Dodanie atrybutów w kodzie HTML bez odpowiedniego kodu JavaScript nie będzie powodowało żadnych widocznych rezultatów. Atrybut hidden wyłącza widoczność danego elementu. Według opisu ze specyfikacji języka HTML5 atrybut inert ma powodować ignorowanie elementu podczas przeszukiwania strony (operacja Edycja/Znajdź; skrót Ctrl+F) oraz zaznaczania na stronie. Obecnie żadna z przeglądarek nie implementuje takiego zachowania.
  
  Ćwiczenie 44.2 Wykonaj stronę zawierającą jeden akapit tekstu Lorem ipsum. Do elementu p przypisz atrybut contenteditable:

  ...

  
  
  Uruchom stronę w przeglądarce, po czym kliknij w akapit tekstu. Przeglądarka umożliwi Ci modyfikację treści elementu. W identyczny sposób możesz umożliwić edycję innych elementów, np.: Lorem ipsum
  
  Ćwiczenie 44.3 Wykonaj stronę zawierającą jeden akapit tekstu Lorem ipsum, którego menu kontekstowe będzie zawierało dwie opcje: Lorem oraz Ipsum. Rozwiązanie ćwiczenia jest przedstawione na listingu 44.2.
  
  Rozdział 44. ♦ Atrybuty HTML
  
  545
  
  Listing 44.2. Menu kontekstowe z ćwiczenia 44.3
  
  Lorem ipsum dolor sit amet...
  
  
  
  Jeśli w obrębie tekstu Lorem ipsum klikniesz prawym przyciskiem myszki, ujrzysz menu kontekstowe przedstawione na rysunku 44.1. Rysunek 44.1. Menu kontekstowe z opcjami Lorem oraz Ipsum
  
  Zdarzenia Do grupy zdarzeń należą1 m.in.:  onclick — kliknięcie;  ondblclick — podwójne kliknięcie;  onmousedown — naciśnięcie przycisku myszy;  onmouseup — zwolnienie przycisku myszy;  onmousemove — przesunięcie wskaźnika myszy nad element;  onmouseout — przesunięcie wskaźnika myszy poza element; 1
  
  Pełna lista zdarzeń HTML5 liczy 55 atrybutów. Znajdziesz je wszystkie w specyfikacji, w punkcie 3.2.3.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  546
  
   onkeypress — naciśnięcie i zwolnienie przycisku na klawiaturze;  onkeydown — naciśnięcie przycisku na klawiaturze;  onkeyup — zwolnienie przycisku na klawiaturze.
  
  Wartością powyższych atrybutów jest kod JavaScript, który zostanie wykonany po wystąpieniu zdarzenia. Na przykład kliknięcie napisu lorem w elemencie span: lorem
  
  spowoduje wyświetlenie okna z tekstem ipsum. Wygląd elementu możemy zmienić, stosując style: span { color: blue; cursor: pointer; text-decoration: underline; }
  
  Ćwiczenie 44.4 Przygotuj stronę WWW, która będzie zawierała jeden element span reagujący na kliknięcie. Rozwiązanie ćwiczenia jest przedstawione na listingu 44.3. Listing 44.3. Rozwiązanie ćwiczenia 44.4 span { color: blue; cursor: pointer; text-decoration: underline; } ...
  
  

  lorem

  
  
  Ćwiczenie 44.5 Wykorzystując ćwiczenie 6.1, przygotuj stronę WWW, która po kliknięciu w dowolnym miejscu będzie wyświetlała informacje o trybie pracy przeglądarki. Rozwiązanie ćwiczenia jest przedstawione na listingu 44.4. Listing 44.4. Rozwiązanie ćwiczenia 44.5
  
  

  Lorem ipsum dolor sit amet...

  
  
  Rozdział 45.
  
  Powiązania dokumentów Witryna WWW zazwyczaj składa się z wielu różnych plików. W omówionych dotychczas ćwiczeniach treść dostępna na stronach była zapisana w plikach HTML, a ich format wizualny w pliku CSS. Znacznikiem:
  
  ustalaliśmy powiązanie pomiędzy plikami HTML i CSS. Strona WWW zawierająca powyższy element link będzie sformatowana zgodnie ze stylami zawartymi w pliku przyklad.css. Informacja o tym, że plik przyklad.css zawiera arkusze stylów, jest zawarta w atrybucie rel. Atrybut ten ustala typ relacji łączącej plik HTML, w którym występuje element link, z plikiem, którego nazwa jest zawarta w atrybucie href. Powiązanie dokumentów .html oraz .css jest więc wykonywane w sposób jawny elementem link zawartym w nagłówku. Innymi typami powiązań, z którymi zetkniesz się, tworząc strony WWW, są:  wskazanie kanału RSS/Atom dla witryny;  wskazanie na spis treści, indeks, następną i poprzednią stronę witryny;  dołączenie do strony WWW ikony;  ustalenie listy osób tworzących witrynę.
  
  Jako dokumenty połączone z witryną WWW możemy także traktować pliki robots.txt oraz sitemap.xml. Są one powiązane w sposób niejawny. Powiązanie takie występuje zawsze, bez konieczności podawania w kodzie HTML jakichkolwiek znaczników. Sumaryczne zestawienie wszystkich rodzajów powiązań jest zawarte w tabeli 45.1. Jawność powiązania oznacza, że w kodzie HTML musimy umieścić odpowiedni znacznik HTML. Powiązania niejawne są zdefiniowane zawsze, bez konieczności umieszczania jakichkolwiek znaczników w kodzie HTML.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  548
  
  Tabela 45.1. Rodzaje powiązań plików tworzących witrynę WWW Rodzaj powiązania
  
  Sposób definicji powiązania
  
  Typy dołączanych zasobów
  
  Rozszerzenia nazw plików
  
  Style CSS witryny
  
  Jawny, elementem link
  
  text/css
  
  .css
  
  Alternatywne style witryny Struktura nawigacyjna witryny Kanał RSS/ Atom dla witryny
  
  Jawny, elementem link
  
  text/css
  
  .css
  
  Jawny, elementem link
  
  text/html
  
  .html, .htm
  
  Jawny, elementem link
  
  application/rss+xml
  
  .xml
  
  Ikona strony WWW
  
  Jawny, elementem link, lub niejawny (plik musi się wówczas nazywać favicon.ico)
  
  application/atom+xml image/vnd. microsoft.icon image/png
  
  .ico .png .gif
  
  image/gif Lista twórców witryny
  
  Jawny, elementem link
  
  Plik z instrukcjami dla robotów Plik z mapą witryny
  
  Niejawny, plik zawsze musi text/plain się nazywać robots.txt Jawny, zawarty w pliku robots.txt application/xml
  
  text/plain
  
  .txt .txt .xml
  
  Element link Element link jest elementem pustym, który umieszczamy w nagłówku strony WWW. Najważniejszym jego atrybutem jest rel, który definiuje typ powiązania między dokumentami. Poprawne wartości1 atrybutu rel dla elementu link są zawarte w tabeli 45.2. Tabela 45.2. Wartości atrybutu rel Wartość atrybutu rel
  
  Opis
  
  alternate
  
  Alternatywna wersja dokumentu (np. kanał RSS, Atom lub dodatkowe arkusze stylów) Adres strony autora Adres strony z opisem Ikona strony Licencja strony Następna strona witryny Wskazuje zasoby, które powinny podlegać wstępnemu pobieraniu i zapisywaniu w pamięci podręcznej Poprzednia strona witryny Wskazuje usługę służącą do przeszukiwania bieżącego dokumentu Style CSS dokumentu
  
  author help icon license next prefetch prev search stylesheet 1
  
  Pełna lista poprawnych wartości atrybutu rel jest podana w specyfikacji HTML5 w punkcie 4.12.5, Link types.
  
  Rozdział 45. ♦ Powiązania dokumentów
  
  549
  
  Style alternatywne Style formatujące wygląd witryny możemy wykonać w kilku wersjach. Przełączanie stosowanych stylów wykonujemy, wybierając odpowiednią opcję w menu przeglądarki Widok/Styl strony. Jeśli dokument HTML zawiera trzy elementy link:
  
  
  
  domyślnie zastosowane zostaną style z pliku style.css. Style z plików duzy-kontrast.css oraz jasne.css będziemy mogli zastosować, wybierając opcje Widok/Styl strony/Style o wysokim kontraście oraz Widok/Styl strony/Style jasne. Style domyślne mają atrybut: rel="stylesheet"
  
  Wartością atrybutu rel dla stylów alternatywnych jest: rel="alternate stylesheet"
  
  Tytuły ustalone atrybutem title nadają nazwy opcjom w menu przeglądarki Widok/Styl strony. Działanie stylów alternatywnych możesz sprawdzić, odwiedzając witrynę http:// www.w3.org/Style/Examples/007/alternatives. Po odwiedzeniu podanego adresu z menu Widok/Styl strony wybierz kilka różnych formatów witryny.
  
  Ćwiczenie 45.1 Do rozwiązania ćwiczenia 39.6 dołącz style alternatywne menu-z-prawej.css oraz menuna-gorze.css. Pierwszy plik ma formatować dokument tak, by kolumna menu była tekstowa, nie zawierała żadnych obrazów tła i pojawiała się z prawej strony. Style menu-na-gorze.css mają sformatować witrynę tak, by style CSS pojawiły się w postaci poziomego paska w górnej części strony.
  
  Kanały RSS i Atom Kanały RSS oraz Atom służą do informowania czytelników witryny o nowych artykułach i stronach dostępnych w serwisie. Odwiedź witrynę http://helion.pl i kliknij hiperłącze, które na rysunku 45.1 zostało wskazane strzałką2. Ujrzysz wówczas stronę z rysunku 45.2. Jest to lista nowości, jakie oferuje serwis helion.pl. 2
  
  Domyślnie przycisk wskazany na rysunku 45.1 nie jest widoczny. W celu włączenia go kliknij prawym przyciskiem w pasek narzędzi, wybierz opcję Dostosuj i przeciągnij przycisk RSS na pasek zadań.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  550 Rysunek 45.1. Ikona kanału RSS wyświetlana przez przeglądarkę Firefox dla witryny helion.pl
  
  Rysunek 45.2. Wygląd kanału RSS witryny helion.pl
  
  Treść kanału zapisujemy w pliku XML i dołączamy do dokumentu HTML znacznikiem link. W celu dodania do strony WWW kanału RSS zapisanego w pliku rss.xml stosujemy znacznik:
  
  Element dołączający kanał Atom różni się wartością atrybutu type oraz nazwą pliku:
  
  Jeśli stronę WWW zawierającą jeden z powyższych elementów link udostępnisz w sieci, to przeglądarki Firefox i Opera wyświetlą w wierszu adresu ikonę RSS. Wiele osób umieszcza jednak w treści witryny dodatkowe hiperłącze ułatwiające dotarcie do kanału. Na rysunku 45.3 wskazane są dwie ikony RSS. Górna ikona jest wyświetlana przez przeglądarkę, a dolna jest umieszczona w dokumencie HTML jako zwykłe hiperłącze.
  
  Rozdział 45. ♦ Powiązania dokumentów
  
  551
  
  Rysunek 45.3. Ikony ułatwiające dotarcie do kanału RSS
  
  Ćwiczenie 45.2 Dana jest witryna WWW składająca się z czterech stron: lorem.html, ipsum.html, dolor.html oraz sit-amet.html. Wzbogać ją o kanał RSS. Wykonanie ćwiczenia rozpocznijmy od przygotowania pliku rss.xml. Struktura dokumentów RSS jest opisana w specyfikacji dostępnej pod adresem http://cyber.law. harvard.edu/rss/rss.html oraz w Wikipedii: http://pl.wikipedia.org/wiki/RSS. Kanał RSS jest zapisany w języku XML. W wersji 2.0 zawiera on następujące elementy:  rss — główny element pliku RSS;  channel — element definiujący jeden kanał wiadomości;  title — tytuł kanału wiadomości;  link — adres strony, dla której kanał jest zdefiniowany;  description — opis kanału;  language — język;  copyright — prawa autorskie do dokumentu,  elementy item.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  552
  
  Każdy z elementów item opisuje jedną nową informację na stronie, podając:  title — tytuł informacji;  link — adres strony zawierającej pełną informację (wszystkie adresy zawarte
  
  w dokumencie RSS muszą być bezwzględne);  pubDate — datę publikacji informacji;  description — krótki opis informacji.
  
  Przykładowy plik rss.xml jest przedstawiony na listingu 45.1. Listing 45.1. Plik rss.xml z ćwiczenia 45.1
  
  Lorem ipsum dolor sit amet http://www.example.net www.example.net - lorem ipsum dolor sit amet pl Jan Kowalski
  
  Lorem http://example.net/lorem.html Mon, 3 January 2010 8:00:00 +0100 Opis strony lorem...
  
  Ipsum http://example.net/ipsum.html Mon, 10 January 2010 18:30:00 +0100 Opis strony ipsum...
  
  ...
  
  Plik rss.xml z listingu 45.1 dołączamy do każdej z czterech stron, umieszczając w nich identyczny element link:
  
  W treści każdej ze stron dodajemy hiperłącze: RSS
  
  Identyfikator jest wykorzystywany do pozycjonowania przycisku, a element span służy do wykonania warstwowego efektu FIR. Hiperłącza zawarte w pliku rss.xml muszą być bezwzględne. W celu uruchomienia przykładu trzeba go zatem opublikować w internecie. Podane adresy http:// example.net/ zastąp poprawnymi adresami stosowanymi na Twoim serwerze.
  
  Rozdział 45. ♦ Powiązania dokumentów
  
  553
  
  Ćwiczenie 45.3 Zmodyfikuj ćwiczenie 45.2. Informacje o nowościach na stronie opublikuj w formacie Atom. Struktura formatu Atom jest opisana w Wikipedii: http://pl.wikipedia.org/wiki/Atom_ (standard) oraz w specyfikacji RFC 4287: http://tools.ietf.org/html/rfc4287. Pliki Atom, podobnie jak RSS, są dokumentami XML. Dokument z listingu 45.1 przekonwertowany do formatu Atom jest przedstawiony na listingu 45.2. Listing 45.2. Plik atom.xml z ćwiczenia 45.2
  
  Lorem ipsum Dolor sit amet! http://example.net/atom/
  
  2008-01-02T10:15:00Z
  
  Jan Kowalski
  
  Copyright (c) 2003 Jan Kowalski
  
  Lorem
  
  2007-12-18T8:10:00Z Opis strony lorem...
  
  Ipsum
  
  2007-12-19T9:15:00Z Opis strony ipsum...
  
  ...
  
  Plik atom.xml z listingu 45.2 należy dołączyć do każdej ze stron, stosując element link:
  
  oraz hiperłącze: ATOM
  
  Część VII ♦ Zagadnienia zaawansowane
  
  554
  
  Następny, poprzedni oraz spis treści Element link o atrybucie rel przyjmującym jedną z wartości3: next prev first last up
  
  definiuje powiązanie pomiędzy kilkoma dokumentami HTML. Przykładowe użycie może mieć postać:
  
  Użycie powyższych elementów może ułatwić nawigację pomiędzy poszczególnymi podstronami witryny. Wtyczki NextPage dla Chrome’a oraz NextPlease dla Firefoksa pozwalają na przejście do stron zdefiniowanych jako next oraz prev przy użyciu skrótów klawiszowych:  prev: Ctrl+strzałka w lewo,  next: Ctrl+strzałka w prawo.
  
  Innym ciekawym rozwiązaniem jest wtyczka Site Navigation Toolbar4, która prezentuje odsyłacze prev i next w postaci przycisków pokazanych na rysunku 45.4.
  
  Ćwiczenie 45.4 Przygotuj witrynę przedstawiającą szesnaście zdjęć kapsli piwnych. Zadanie wykonaj w taki sposób, by każde zdjęcie było prezentowane na osobnej stronie WWW. W każdym pliku HTML umieść odsyłacze pozwalające na przejście do następnej, poprzedniej, pierwszej i ostatniej strony, a także do strony zawierającej indeks wszystkich fotografii. Na stronie prezentującej indeks umieść szesnaście miniaturowych zdjęć będących odsyłaczami do stron z poszczególnymi zdjęciami. Każde hiperłącze wykonaj podwójnie: stosując element a oraz element link. Witryna ma prezentować 16 zdjęć kapsli i ma zawierać indeks. Będzie ją zatem tworzyło siedemnaście plików HTML: plik z indeksem (index.html) oraz szesnaście plików kapsle-1.html, kapsle-2.html, …, kapsle-16.html. Każde ze zdjęć jest dostępne w czterech rozdzielczościach: 200×150, 400×300, 800×600 i 3264×2448. Do wykonania witryny wykorzystamy więc 16·4 = 64 pliki ze zdjęciami kapsli. 3
  
  W specyfikacji HTML5 dostępnej na stronie W3C występują wyłącznie wartości next oraz prev. Użycie pozostałych wartości jest opisane w dokumencie http://blog.whatwg.org/the-road-to-html-5-link-relations.
  
  4
  
  Wtyczka ta jest dostępna na stronie http://www.bolwin.com/software/snb.shtml.
  
  Rozdział 45. ♦ Powiązania dokumentów
  
  555
  
  Rysunek 45.4. Pasek narzędzi Poprzedni/Następny widoczny na stronie http://gimp.gajdaw.pl
  
  Zdjęcia o wymiarach 200×150 są zapisane w folderze img/200×150 i nazywają się: kapsle-01.jpg, kapsle-02.jpg, ... kapsle-16.jpg
  
  Zdjęcia o wymiarach 400×300 są zapisane w folderze img/400×300 w plikach: kapsle-01.jpg, kapsle-02.jpg, ... kapsle-16.jpg
  
  Podobnie jest w przypadku zdjęć o rozdzielczości 800×600 (folder img/800×600) oraz 3264×2448 (folder img/3264×2448). Ostatnie dziewięć obrazów to strzałki: first.png, first-brak.png next.png, next-brak.png index.png last.png, last-brak.png prev.png, prev-brak.png
  
  Zawarte w folderze img/.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  556
  
  Struktura folderów i pliki tworzące rozwiązanie ćwiczenia są przedstawione na rysunku 45.5. Rysunek 45.5. Struktura folderów i pliki tworzące rozwiązanie ćwiczenia 45.4
  
  Wstawiając na stronę WWW obraz zawarty w folderze, musisz pamiętać o podaniu ścieżki dostępu, np.:
  
  Listing 45.3 ilustruje powiązania wykonane w postaci zwykłych hiperłączy na stronie numer 6. Powrót do strony poprzedniej jest hiperłączem do strony 5., przejście do strony następnej jest odsyłaczem do strony 7. Pierwsza strona ma numer 1, a ostatnia — 16. Na listingu 45.4 przedstawione zostały te same powiązania wykonane elementem link. Listing 45.3. Powiązania pomiędzy dokumentami wykonane przy użyciu odsyłaczy
  
  Listing 45.4. Powiązania pomiędzy dokumentami wykonane przy użyciu elementu link
  
  ...
  
  Rozdział 45. ♦ Powiązania dokumentów
  
  557
  
  Oba rodzaje powiązań są przedstawione na rysunku 45.6.
  
  Rysunek 45.6. Przyciski poprzedni/następny wiążące strony witryny z ćwiczenia 45.4
  
  Ikona witryny WWW Element:
  
  dołącza do witryny ikonę zapisaną w pliku ikona.ico. Ikona witryny jest wyświetlana przez przeglądarki na przyciskach kart, co ilustruje rysunek 45.7. Rysunek 45.7. Ikony witryn w przeglądarce Firefox
  
  Część VII ♦ Zagadnienia zaawansowane
  
  558
  
  Specyfikacja języka HTML5 jako poprawną wartość podaje icon. Internet Explorer poprawnie interpretuje jednak wyłącznie zapis rel="shortcut icon". Pozostałe przeglądarki poprawnie interpretują oba rodzaje zapisów.
  
  Współczesne przeglądarki rozpoznają ikony w formatach ICO, PNG oraz GIF. Starsze wersje Internet Explorera obsługiwały wyłącznie format ICO. Pliki ICO oznaczamy typem: image/vnd.microsoft.icon
  
  Element link wzbogacony o typ przyjmuje postać:
  
  Ikonę możesz narysować w dowolnym programie graficznym umożliwiającym zapis obrazu w formacie ICO, PNG lub GIF, na przykład w GIMP-ie. Pamiętaj o tym, że:  Ikona powinna mieć wymiary 16×16 pikseli.  Obraz może być wielowarstwowy, lecz przed zapisaniem wszystkie warstwy
  
  należy połączyć w jedną (tj. obraz należy spłaszczyć).  Obraz może zawierać obszary przezroczyste.  Podczas zapisywania należy podać rozszerzenie ICO.
  
  Rysunek 45.8 przedstawia rysunek ikony w programie GIMP. Ikona ta umieszczona na białym tle będzie wyglądała tak jak na rysunku 45.9. Rysunek 45.8. Ikona narysowana w programie GIMP
  
  Część przeglądarek wyświetla ikonę, nawet jeśli kod HTML nie zawiera elementu link. Dzieje się tak wtedy, gdy na serwerze WWW w folderze głównym zostanie umieszczony plik favicon.ico. Powiązanie witryny z plikiem ikony możemy zatem traktować zarówno jako jawne (w kodzie HTML umieszczamy element link, plik z ikoną nazywa się dowolnie), jak i niejawne (w kodzie HTML nie ma elementu link wskazującego ikonę, plik z ikoną nazywa się favicon.ico).
  
  Rozdział 45. ♦ Powiązania dokumentów
  
  559
  
  Rysunek 45.9. Ikona ikona.ico umieszczona na białym tle
  
  Ćwiczenie 45.5 W dowolnym programie graficznym narysuj ikonę o wymiarach 16×16 pikseli. Wykonany obraz wykorzystaj jako ikonę witryny z tekstem Lorem ipsum.
  
  Twórcy witryny WWW Element:
  
  wiąże stronę z plikiem tekstowym humans.txt, który zawiera listę nazwisk twórców witryny. Przykładowy plik humans.txt jest przedstawiony na listingu 45.5. Listing 45.5. Fragment pliku http://humanstxt.org/humans.txt Chef:Juanjo Bernabeu Contact: hello [at] humanstxt.org Twitter: @cssbarcelona From:Barcelona, Catalonia, Spain CSS3 and HTML5 Girl: Maria Macias Twitter: @lafabricaverde From:Barcelona, Catalonia, Spain
  
  Więcej informacji na temat plików humans.txt jest dostępnych na stronie http:// humanstxt.org.
  
  Plik robots.txt Plik robots.txt jest powiązany z witryną WWW w sposób niejawny. Roboty internetowe rozpoczynają pobieranie stron z wybranej domeny od pobrania pliku robots.txt zawartego w folderze głównym. Dla księgarni internetowej Helion pobierany plik ma adres http://helion.pl/robots.txt. Plik robots.txt może zawierać reguły Disallow zakazujące automatycznego wędrowania po zasobach oraz regułę Sitemap, która wskazuje mapę witryny WWW. Zawartość przykładowego pliku robots.txt jest przedstawiona na listingu 45.6.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  560 Listing 45.6. Przykładowy plik robots.txt User-agent: * Disallow: /cgi/ Disallow: /private/ Disallow: /tmp/ Sitemap: http://gajdaw.pl/sitemap.xml
  
  Więcej informacji na temat plików robots.txt znajdziesz w Wikipedii: http://pl.wikipedia. org/wiki/Robots_Exclusion_Protocol oraz pod adresem http://www.robotstxt.org/wc/ robots.html.
  
  Plik sitemap.xml Plik sitemap.xml zawiera zestawienie wszystkich adresów URL tworzących witrynę wraz z informacjami o częstotliwości zmian plików. Rola pliku sitemap.xml polega na ułatwieniu indeksacji całej witryny WWW przez wyszukiwarkę. Listing 45.7 przedstawia fragment pliku sitemap.xml witryny http://gajdaw.pl. Listing 45.7. Fragment pliku sitemap.xml witryny http://gajdaw.pl
  
  http://www.gajdaw.pl/php/pear-auth/index.html 2007-11-02 monthly 0.6
  
  http://www.gajdaw.pl/gimp/gimp-kurs-3/index.html 2007-10-31 monthly 0.6
  
  ...
  
  Więcej informacji o plikach sitemap.xml znajdziesz w Wikipedii: http://pl.wikipedia.org/ wiki/Sitemap oraz na stronie http://sitemaps.org.
  
  Ćwiczenie 45.6 Witrynę omówioną w ćwiczeniu 45.2 wzbogać o wszystkie rodzaje powiązań omówionych w tym rozdziale. Rozwiązanie ćwiczenia składa się z:  czterech plików HTML (lorem.html, ipsum.html, dolor.html, sit-amet.html);  dwóch plików CSS (style główne — style.css, style alternatywne — inne.css);
  
  Rozdział 45. ♦ Powiązania dokumentów  ikony (plik favicon.ico);  kanału RSS (plik rss.xml);  pliku humans.txt;  plików robots.txt oraz sitemap.xml.
  
  Foldery i pliki rozwiązania ćwiczenia 45.6 są widoczne na rysunku 45.10. Rysunek 45.10. Foldery i pliki rozwiązania ćwiczenia 45.6
  
  Nagłówek head z pliku lorem.html jest przedstawiony na listingu 45.8. Listing 45.8. Nagłówek head z pliku lorem.html
  
  Lorem
  
  
  
  
  
  
  
  561
  
  562
  
  Część VII ♦ Zagadnienia zaawansowane
  
  Rozdział 46.
  
  Element meta — dodatkowe informacje na temat strony WWW Elementy meta występują w nagłówkach stron WWW, czyli pomiędzy znacznikami oraz . Ich zadaniem jest dostarczanie dodatkowych informacji na temat witryny WWW. Dane ustalane elementami meta są nazywane metainformacjami. Listing 46.1 przedstawia kod przykładowej witryny wzbogacony o trzy elementy meta. Metainformacje zawarte na tej stronie ustalają kodowanie znaków, nazwisko autora oraz prawa autorskie. Elementy meta mogą występować w kodzie HTML w dowolnej kolejności, zarówno w stosunku do siebie, jak i pozostałych elementów nagłówka strony. Listing 46.1. Witryna zawierająca przykładowe metainformacje
  
  
  
  
  
  ...
  
  Metainformacje nie są wyświetlane przez przeglądarki podczas wizyty na stronie. Ich zadanie polega na dostarczaniu dodatkowych danych na temat dokumentu HTML. Dane te odgrywają następującą rolę:  Ustalają kodowanie znaków.  Zawierają krótki opis zawartości witryny.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  564
  
   Zawierają nazwisko autora, nazwę wydawcy oraz inne dane identyfikujące
  
  twórców dokumentu.  Ustalają czas ważności dokumentu i zezwalają (lub nie) na zapisywanie
  
  dokumentu w pamięci podręcznej (ang. cache). Metainformacje są związane z konkretną witryną i należy je zawrzeć w kodzie HTML. Jeśli witryna składa się z wielu podstron, metainformacje dołączamy na każdej podstronie z osobna.
  
  Składnia elementu meta Element meta należy — wraz z elementami style oraz link — do grupy elementów, które mogą wystąpić tylko w nagłówku strony WWW. Jest to element pusty o atrybutach przedstawionych w tabeli 46.1. Jak widać na listingu 46.1, na jednej stronie możemy zawrzeć dowolną liczbę elementów meta. Tabela 46.1. Atrybuty elementu meta Lp.
  
  Atrybut
  
  Opis
  
  1.
  
  name
  
  Identyfikuje rodzaj metainformacji
  
  2.
  
  http-equiv
  
  Identyfikator metainformacji używany zamiennie z atrybutem name
  
  3.
  
  content
  
  Atrybut wymagany, zawierający metainformacje
  
  4.
  
  charset
  
  Kodowanie znaków
  
  Element meta może być użyty na trzy sposoby:
  
  
  
  Pierwszy sposób ustala kodowanie znaków w całym dokumencie. Drugi z powyższych znaczników definiuje meta informację o nazwie a i wartość b. Ostatni znacznik ustala meta informację o nazwie c i wartość d.
  
  Dwa rodzaje elementów meta Ponieważ nazwa elementu meta może być określona atrybutem name lub http-equiv, w istocie mamy do czynienia z dwoma rodzajami elementów meta. Pierwszy z nich posługuje się atrybutem name:
  
  drugi — atrybutem http-equiv:
  
  Rozdział 46. ♦ Element meta — dodatkowe informacje na temat strony WWW
  
  565
  
  Metainformacje Specyfikacja języka HTML5 definiuje bardzo niewielki zbiór wartości dla atrybutu name. Są to:  application-name — nazwa aplikacji;  author — dane autora witryny;  description — krótki opis zawartości witryny;  generator — nazwa oprogramowania, które wygenerowało kod witryny.
  
  Zgodnie ze specyfikacją HTML5 jedynymi poprawnymi elementami meta zawierającymi atrybut name są zatem:
  
  Bardzo obszerna lista elementów meta, które nie zostały jeszcze oficjalnie zatwierdzone, jest dostępna na stronie http://wiki.whatwg.org/wiki/MetaExtensions.
  
  Metainformacje Poprawnymi wartościami dla atrybutu http-equiv są:  content-language — ustalenie kodowania treści; wartość ta jest jawnie odradzana: do oznaczenia języka treści należy użyć atrybutu lang;  content-type — kodowanie znaków (alternatywna forma dla zapisu );  default-style — domyślny język interpretacji stylów CSS;  refresh — automatyczne odświeżenie witryny;  set-cookie — ustalenie ciasteczka.
  
  Znacznik:
  
  spowoduje, że po dziesięciu sekundach bieżący dokument zostanie zastąpiony dokumentem http://google.com. Elementy meta przyjmują jedną z dwóch postaci:
  
  lub:
  
  Część VII ♦ Zagadnienia zaawansowane
  
  566
  
  Metainformacje dedykowane dla konkretnych aplikacji Element meta bywa wykorzystywany przez twórców oprogramowania w różnych specyficznych celach. Obecnie praktyczną rolę odgrywają wyłącznie dwa spośród takich rozwiązań. Pierwszym z nich są omówione w rozdziale 6. elementy meta przełączające przeglądarkę IE w tryb pracy jednej ze starszych wersji:
  
  Dzięki temu nie musimy już instalować na komputerze czterech wersji przeglądarki IE. W celu przetestowania wyglądu witryny w Internet Explorerze w wersji 8 wystarczy w kodzie witryny dodać odpowiedni znacznik meta i przetestować jej wygląd w IE 8. Drugim przykładem użycia elementów meta jest identyfikacja autora witryny. Takie rozwiązanie jest stosowane w serwisie Google Analytics. Jeśli chcesz poznać bardzo szczegółowe informacje na temat oglądalności witryny WWW:  Zarejestruj się w serwisie Google Analytics.  Utwórz nowy profil statystyk i podaj adres domeny, której oglądalność chcesz
  
  śledzić.  Zostaniesz poinformowany o konieczności wklejenia w kodzie witryny WWW odpowiedniego znacznika meta, który będzie dowodził, że jesteś właścicielem
  
  witryny.  Ostatnim etapem konfiguracji statystyk jest wklejenie do kodu HTML krótkiego
  
  skryptu JavaScript. Kod ten będzie powodował gromadzenie danych o oglądalności witryny. Opisane powyżej elementy meta pozwalają na dostarczenie tylko bardzo ogólnych informacji o stronach WWW. Profesjonalnym systemem klasyfikacji, stosowanym do tworzenia wirtualnych zasobów bibliotecznych, jest zestaw metadanych nazywany Dublin Core. Szczegółowy opis metadanych Dublin Core znajdziesz na stronach:  http://kurs.browsehappy.pl/HTML/DublinCore  http://en.wikipedia.org/wiki/Dublin_Core
  
  Rozdział 47.
  
  Uzupełnienie wiadomości na temat CSS Pomiędzy wersjami 2.1 oraz 3 rozwój arkuszy stylów CSS był tak duży, że pojedyncza specyfikacja Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification dostępna pod adresem http://www.w3.org/TR/CSS21/ została zastąpiona przez kilkadziesiąt nowych dokumentów. Style CSS w wersji 3 zostały podzielone na odrębne specyfikacje. Najważniejsze z nich dotyczą:  selektorów:
  
  Selectors Level 3 http://www.w3.org/TR/css3-selectors/  jednostek:
  
  CSS Values and Units Module Level 3 http://www.w3.org/TR/css3-values/  kolorów:
  
  CSS Color Module Level 3 http://www.w3.org/TR/css3-color/  obramowań i tła:
  
  CSS Backgrounds and Borders Module Level 3 http://www.w3.org/TR/css3-background/  czcionek:
  
  CSS Fonts Module Level 3 http://www.w3.org/TR/css3-fonts/  właściwości tekstu:
  
  CSS Text Module Level 3 http://www.w3.org/TR/css3-text/  definicji obszarów zajmowanych przez elementy:
  
  CSS basic box model http://www.w3.org/TR/css3-box/
  
  Część VII ♦ Zagadnienia zaawansowane
  
  568
  
   zaawansowanych technik pozycjonowania:
  
  CSS Positioned Layout Module Level 3 http://www.w3.org/TR/css3-positioning/  układów giętkich:
  
  CSS Flexible Box Layout Module http://www.w3.org/TR/css3-flexbox/  układów wielokolumnowych:
  
  CSS Multi-column Layout Module http://www.w3.org/TR/css3-multicol/ Pełna lista specyfikacji wraz z informacją o stopniu zaawansowania prac jest dostępna na stronie http://www.w3.org/Style/CSS/current-work.
  
  Selektory CSS3 W kaskadowych arkuszach stylów w wersji 3 możemy stosować następujące selektory:  selektor typu,  selektor identyfikatora,  selektor klasy,  selektor potomka,  selektor dziecka,  selektor następnego brata,  selektor brata,  selektor atrybutu,  selektor języka,  selektor uniwersalny,  selektor grupowy. Pełna specyfikacja selektorów jest dostępna w specyfikacji Selectors Level 3 dostępnej pod adresem http://www.w3.org/TR/selectors/.
  
  Sumaryczne zestawienie selektorów jest zawarte w tabeli 47.1. Wszystkie przeglądarki wymienione w rozdziale 1. obsługują pełny zestaw selektorów z tabeli 47.1.
  
  Rozdział 47. ♦ Uzupełnienie wiadomości na temat CSS
  
  569
  
  Tabela 47.1. Selektory CSS 2.1 Selektor
  
  Nazwa
  
  Znaczenie
  
  E
  
  Selektor typu
  
  Pasuje do elementu E.
  
  E#foo
  
  Selektor identyfikatora
  
  Pasuje do elementu E o identyfikatorze foo.
  
  lub
  
  lub
  
  #foo
  
  Pasuje do elementu o identyfikatorze foo. Selektor klasy
  
  E.foo lub
  
  Pasuje do elementów E, których jedną z wartości atrybutu class jest foo. lub
  
  .foo
  
  Pasuje do elementów, których jedną z wartości atrybutu class jest foo. Nazwy kilku klas oddzielamy spacjami, np. class="a b c". E F
  
  Selektor potomka
  
  Pasuje do elementu F zawartego (dowolnie głęboko) wewnątrz E.
  
  E > F
  
  Selektor dziecka
  
  Pasuje do elementu F zawartego bezpośrednio w E.
  
  E + F
  
  Selektor następnego brata
  
  Pasuje do elementu F bezpośrednio poprzedzonego przez E.
  
  E ~ F
  
  Selektor brata
  
  Pasuje do elementu F poprzedzonego przez E.
  
  E[foo]
  
  Selektor atrybutu
  
  Pasuje do elementów, które mają atrybut foo (o dowolnej wartości).
  
  E[foo="bar"]
  
  Selektor atrybutu o podanej dokładnej wartości
  
  Pasuje do elementów, które mają atrybut foo o wartości bar.
  
  E[foo^="bar"]
  
  Selektor atrybutu, którego wartość rozpoczyna się od podanego ciągu
  
  Pasuje do elementów, które mają atrybut foo o wartości rozpoczynającej się od ciągu bar.
  
  E[foo$="bar"]
  
  Selektor atrybutu, którego wartość kończy się podanym ciągiem
  
  Pasuje do elementów, które mają atrybut foo o wartości zakończonej ciągiem bar.
  
  E[foo*="bar"]
  
  Selektor atrybutu, którego wartość zawiera podany ciąg
  
  Pasuje do elementów, które mają atrybut foo o wartości zawierającej ciąg bar.
  
  E[foo~="bar"]
  
  Selektor atrybutu o zadanej wartości
  
  Pasuje do elementu E z atrybutem foo, którego jedną z wartości jest bar.
  
  E[lang|="en"]
  
  Selektor języka
  
  Pasuje do elementów, których atrybut lang ma wartość en lub rozpoczyna się od wartości en, po której następuje dywiz.
  
  *
  
  Selektor uniwersalny
  
  Pasuje do każdego elementu.
  
  S1, S2, S3
  
  Selektor grupowy
  
  S1, S2 i S3 są dowolnymi selektorami. Selektor grupowy pasuje do każdego z nich. Liczba selektorów w grupie może być dowolna.
  
  Selektor typu był stosowany we wszystkich ćwiczeniach i projektach. Przyjmuje on postać nazwy elementu HTML. Przykładem tego typu selektora jest:
  
  Część VII ♦ Zagadnienia zaawansowane
  
  570 p { }
  
  ...
  
  Dotyczy on każdego wystąpienia podanego elementu. Selektor identyfikatora stosuje znak #, np.: #naglowek { ... }
  
  Dotyczy on jednego elementu na stronie WWW: tego, który ma atrybut id o podanej wartości. Selektor ten można zapisać, poprzedzając identyfikator nazwą elementu: p#naglowek { ... }
  
  Selektor klasy wykorzystuje znak kropki. Może być zapisywany bez nazwy elementu: .zaznaczenie { }
  
  lub z nazwą elementu: p.zaznaczenie { }
  
  W pierwszym przypadku selektor dotyczy wszystkich elementów klasy zaznaczenie, a w drugim tylko elementów p klasy zaznaczenie. Co ciekawe, ponieważ atrybut class może przyjmować kilka wartości oddzielonych spacjami:
  
  
  selektor klasy może składać się z kilku członów. Selektor: p.zaznaczenie.specjalny { }
  
  dotyczy tych elementów p, które w atrybucie class mają wymienione co najmniej dwie klasy: zaznaczenie oraz specjalny. Selektor: .inny.zaznaczenie.tekst { }
  
  dotyczy natomiast wszystkich elementów, które mają co najmniej trzy klasy: inny, zaznaczenie i tekst. Obejmie więc między innymi element:
  
  Selektor: .lorem { }
  
  dotyczy każdego elementu, który jako jedną z wartości atrybutu class ma lorem, a więc między innymi elementów:
  
  Rozdział 47. ♦ Uzupełnienie wiadomości na temat CSS
  
  571
  
  
  
  Selektor potomka składa się z dwóch członów oddzielonych spacją, np. h1 em { } #naglowek em { } .menu .tytul { } #stopka .nazwa { }
  
  Członami mogą być elementy, klasy lub dowolne inne selektory. Pierwszy z podanych selektorów dotyczy elementu em zawartego dowolnie głęboko wewnątrz h1. Swoim działaniem obejmie więc między innymi napisy lorem, ipsum oraz dolor: lorem ipsum dolor
  
  Selektor dziecka różni się od selektora potomka separatorem członów: h1 > em { } #naglowek > em { } .menu > .tytul { } #stopka > .nazwa { }
  
  Drugi z podanych elementów musi być zawarty bezpośrednio (a nie głębiej) w pierwszym. Pierwszy z przykładowych selektorów dotyczy elementu em zawartego wewnątrz h1. Swoim działaniem obejmie napis dolor, a nie obejmie napisów lorem oraz ipsum: lorem ipsum dolor
  
  Selektor następnego brata: em + span { }
  
  wskazuje element span, który występuje bezpośrednio po elemencie em. Obejmuje więc napis ipsum:

  lorem ipsum

  
  
  Selektor ten wybiera zawsze tylko jeden element. Spośród czterech poniższych elementów span selektor em + span obejmie tylko element zawierający literę c:

  a
  
  Część VII ♦ Zagadnienia zaawansowane
  
  572 b lorem c d

  
  
  Selektor brata: em ~ span { }
  
  wskazuje elementy span, które występują po elemencie em. Obejmuje więc napis ipsum:

  foo bar lorem ipsum dolor sit amet

  
  
  Spośród powyższego kodu wybrane zostaną elementy z napisami dolor oraz amet. Selektor atrybutu powoduje zastosowanie podanej reguły do elementów mających konkretny atrybut o zadanej wartości. Selektor: th[scope="col"] { }
  
  dotyczy tych komórek th, które mają atrybut scope o wartości col, np.:
  
  Selektor ten można stosować bez podawania wartości: th[scope] { }
  
  wówczas dotyczy on wszystkich elementów th mających atrybut scope o dowolnej wartości. Inną metodą stosowania tego atrybutu jest podawanie jednej z dopuszczalnych wartości: em[class~="inny"] { }
  
  Selektor ten dotyczy elementu em, którego atrybut class ma jako jedną z wartości inny. Możemy także stosować selektory: [id^="a"] { } [id$="b"] { } [id*="c"] { }
  
  Pierwszy z nich pasuje do elementów, których atrybut id rozpoczyna się od a. Drugi pasuje do elementów, których wartość atrybutu id kończy się na b. Trzeci pasuje do elementów, których atrybut id zawiera listerę c.
  
  Rozdział 47. ♦ Uzupełnienie wiadomości na temat CSS
  
  573
  
  Ostatnim selektorem w tabeli 47.1 jest selektor grupowy. Przyjmuje on postać dowolnej liczby selektorów oddzielonych przecinkami, np.: h1, h2, h3 { }
  
  Powyższa reguła CSS zostanie zastosowana zarówno do h1 i h2, jak i h3. Reguła: .nazwapliku, .naglowek h3 { }
  
  zostanie natomiast zastosowana do elementów klasy nazwapliku oraz do elementów h3 zawartych w elemencie klasy naglowek.
  
  Ćwiczenie 47.1 Wykonaj witrynę sprawdzającą działanie wszystkich selektorów z tabeli 47.1.
  
  Pseudoklasy CSS3 W języku CSS3 dostępne są pseudoklasy zawarte w tabeli 47.2. Tabela 47.2. Pseudoklasy języka CSS3 Selektor
  
  Nazwa
  
  Znaczenie
  
  E:first-child
  
  Pseudoklasa :first-child
  
  Pasuje do elementów E, które są pierwszym dzieckiem swojego rodzica.
  
  E:last-child
  
  Pseudoklasa :last-child
  
  Pasuje do elementów E, które są ostatnim dzieckiem swojego rodzica.
  
  E:only-child
  
  Pseudoklasa :only-child
  
  Pasuje do elementów E, które są jedynymi dziećmi swoich rodziców.
  
  E:nth-child(n)
  
  Pseudoklasa :nth-child
  
  Pasuje do elementów E, które są n-tymi dziećmi swoich rodziców.
  
  E:nth-lastchild(n)
  
  Pseudoklasa Pasuje do elementów E, które są n-tymi dziećmi swoich :nth-last-child rodziców, licząc od końca.
  
  E:first-of-type
  
  Pseudoklasa :first-of-type
  
  Pasuje do elementów E, które są pierwszymi dziećmi danego typu.
  
  E:last-of-type
  
  Pseudoklasa :last-of-type
  
  Pasuje do elementów E, które są ostatnimi dziećmi podanego typu.
  
  E:only-of-type
  
  Pseudoklasa :only-of-type
  
  Pasuje do elementów E, które są jedynymi dziećmi podanego typu.
  
  E:nth-of-type(n)
  
  Pseudoklasa :nth-of-type
  
  Pasuje do elementów E, które są n-tymi dziećmi podanego typu.
  
  E:nth-last-oftype(n)
  
  Pseudoklasa :nth-last-oftype
  
  Pasuje do elementów E, które są n-tymi dziećmi podanego typu, licząc od końca.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  574 Tabela 47.2. Pseudoklasy języka CSS3 — ciąg dalszy Selektor
  
  Nazwa
  
  Znaczenie
  
  E:first-line
  
  Pseudoklasa :first-line
  
  Pasuje do pierwszego wiersza tekstu elementu E.
  
  E:first-letter
  
  Pseudoklasa :first-letter
  
  Pasuje do pierwszej litery elementu E.
  
  E:before
  
  Pseudoklasa :before
  
  Umożliwia wstawianie zawartości przed podanym elementem.
  
  E:after
  
  Pseudoklasa :after
  
  Umożliwia wstawianie zawartości za podanym elementem.
  
  E:link
  
  Pseudoklasa :link
  
  Pasuje do hiperłączy, które nie były jeszcze odwiedzone.
  
  E:visited
  
  Pseudoklasa :visited
  
  Pasuje do hiperłączy, które były odwiedzone.
  
  E:hover
  
  Pseudoklasa :hover
  
  Pasuje do hiperłącza, które jest wskazane kursorem myszy.
  
  E:active
  
  Pseudoklasa :active
  
  Pasuje do hiperłącza, które jest właśnie aktywowane (np. po naciśnięciu i przytrzymaniu przycisku myszki na hiperłączu).
  
  E:focus
  
  Pseudoklasa :focus
  
  Pasuje do elementu E, który jest aktywny, tzn. w którym jest umiejscowiony kursor wprowadzania danych (dotyczy głównie kontrolek formularzy).
  
  E:enabled
  
  Pseudoklasa :enabled
  
  Pasuje do elementu E, który jest dostępny.
  
  E:disabled
  
  Pseudoklasa :disabled
  
  Pasuje do elementu E, który nie jest dostępny.
  
  E:checked
  
  Pseudoklasa :checked
  
  Pasuje do elementu E, który jest zaznaczony (tj. ma właściwość checked o wartości true).
  
  E:lang(c)
  
  Pseudoklasa :lang
  
  Pasuje do elementu E, który jest w języku c.
  
  E:root
  
  Pseudoklasa :root
  
  Pasuje do głównego elementu w dokumencie.
  
  E:empty
  
  Pseudoklasa :empty
  
  Pasuje do elementu E, który jest pusty (tj. nie ma dzieci ani żadnej treści).
  
  E:target
  
  Pseudoklasa :target
  
  Pasuje do elementu E, który jest wskazany jako cel (ang. target) hiperłącza.
  
  E:not(s)
  
  Pseudoklasa :not
  
  Negacja pseudoklasy.
  
  Pseudoklasy zawierające słowo child umożliwiają wskazywanie elementów na podstawie relacji rodzic – dziecko. Pozwalają one na wybieranie dzieci o zadanym numerze lub zadanego typu. Na przykład selektor:first-child wybiera elementy, które są pierwszymi dziećmi swoich rodziców. Reguła: p:first-child { }
  
  Rozdział 47. ♦ Uzupełnienie wiadomości na temat CSS
  
  575
  
  będzie dotyczyła akapitów zawierających litery a oraz d:
  
  

  a

  b

  c

  
  
  

  d

  e

  f

  
  
  Selektory :first-line oraz :first-letter obejmują pierwszy wiersz oraz pierwszą literę wewnątrz elementu. Pseudoklasy :before oraz :after służą do wstawiania dodatkowej zawartości wewnątrz elementów. Można je wykorzystywać m.in. do umieszczania w tekście cudzysłowów, dodawania etykiet oraz automatycznego numerowania rozdziałów. Listing 14.8 przedstawia style CSS, które wykorzystując pseudoklasy :before oraz :after, umieszczają w dokumencie cudzysłowy zależne od języka. Reguła: q[lang="pl"]:before { content: "„"; } q[lang="pl"]:after { content: "”"; }
  
  wstawia przed każdym elementem q, którego treść jest oznaczona językiem pl, polski cudzysłów. Wartością właściwości content jest wstawiany napis. Reguła: p:before { content: "XXX"; } p:after { content: "YYY"; }
  
  powoduje wstawienie na początku i na końcu każdego akapitu tekstów XXX oraz YYY. Powyższa reguła zmienia akapit:

  lorem ipsum

  
  
  tak, że będzie w przeglądarce wyglądał tak samo jak:

  XXXlorem ipsumYYY

  
  
  W ten sposób możemy we wszystkich akapitach klasy .uwaga dodać na początku tekst UWAGA: .uwaga:before { content: "UWAGA: "; }

  Lorem ipsum dolor sit amet...

  
  
  Część VII ♦ Zagadnienia zaawansowane
  
  576
  
  Pamiętaj jednak, że tekst podany jako wartość właściwości content nie może zawierać kodu HTML: PRZYKŁAD NIEPOPRAWNY .uwaga:before { content: "UWAGA"; }
  
  Łącząc selektory :before i:after z licznikami i właściwościami counter-reset, counterincrement i content oraz funkcją counter(), możemy definiować w dokumentach automatyczną numerację elementów. W projekcie 22.5 wewnątrz elementów h4 umieściliśmy numery rozdziałów, np.: 1. The Cyclone 2. The Council with the Munchkins 3. How Dorothy Saved the Scarecrow ...
  
  Numerację taką możemy wykonać w sposób automatyczny, wykorzystując style z listingu 47.1. Listing 47.1. Automatyczna numeracja rozdziałów oznaczonych nagłówkami h4 body { }
  
  counter-reset: rozdzial;
  
  h4:before { content: counter(rozdzial) ". "; counter-increment: rozdzial; } The Cyclone The Council with the Munchkins How Dorothy Saved the Scarecrow ...
  
  Właściwość counter-reset resetuje licznik o nazwie rozdzial. Można powiedzieć, że w ten sposób definiujemy zmienną o nazwie rozdzial. Wykorzystując pseudoklasę :before, wartość zmiennej rozdzial wstawiamy w tytułach podrozdziałów. Po numerze rozdziału dodajemy kropkę oraz spację. W deklaracji: content: counter(rozdzial) ". ";
  
  funkcja counter() zwraca bieżącą wartość licznika o nazwie rozdzial. Do zwróconej wartości dołączany jest napis ujęty w cudzysłów, czyli kropka oraz spacja. Po wstawieniu wartości zmiennej rozdzial do dokumentu zwiększamy jej wartość: counter-increment: rozdzial;
  
  Automatyczna numeracja może być wielopoziomowa. Takie rozwiązanie prezentuje listing 47.2.
  
  Rozdział 47. ♦ Uzupełnienie wiadomości na temat CSS
  
  577
  
  Listing 47.2. Wielopoziomowa automatyczna numeracja body { counter-reset: h1; } h1 { counter-reset: h2; } h1:before { content: counter(h1) ". "; counter-increment: h1; } h2 { counter-reset: h3; } h2:before { content: counter(h1) "." counter(h2) ". "; counter-increment: h2; } h3 { counter-reset: h4; } h3:before { content: counter(h1) "." counter(h2) "." counter(h3) ". "; counter-increment: h3; } Lorem ipsum Dolor sit amet Duis sapien Pellentesque viverra Curabitur non turpis Lorem Ipsum Dolor Sit Amet
  
  W stylach z listingu 47.2 definiujemy cztery liczniki: h1, h2, h3 oraz h4. Licznik h1 jest resetowany na początku dokumentu. Licznik h2 resetujemy po wystąpieniu każdego nagłówka h1. Dzięki temu numeracja nagłówków h2 po wystąpieniu nagłówka h1 będzie rozpoczynała się od 1. W podobny sposób resetujemy liczniki h3 oraz h4. Kolejnymi pseudoklasami z tabeli 47.2 są :link, :visited, :hover oraz :active. Służą one do formatowania odsyłaczy. Ich działanie szczegółowo omówiliśmy w rozdziale 18. Pseudoklasy :focus, :enabled, :disabled oraz :checked dotyczą kontrolek formularzy. Selektor: input:focus { }
  
  dotyczy tego elementu input, w którym obecnie jest wprowadzany tekst. Selektor: :lang(fr) { }
  
  Część VII ♦ Zagadnienia zaawansowane
  
  578
  
  obejmuje wszystkie elementy w języku francuskim (tj. te, których atrybut lang jako jedną z wartości przyjmuje fr). Pseudoklasa :empty wybiera elementy puste, a :root — główny element dokumentu, tj. html.
  
  Ćwiczenie 47.2 Wykonaj witrynę sprawdzającą działanie wszystkich pseudoklas z tabeli 47.2.
  
  Ćwiczenie 47.3 Wykonaj projekt 22.5, wykorzystując automatyczną numerację przedstawioną na listingu 47.1.
  
  Ćwiczenie 47.4 Wykonaj witrynę sprawdzającą działanie wielopoziomowej automatycznej numeracji z listingu 47.2.
  
  Importowanie stylów W arkuszach stylów możemy osadzać zawartość zewnętrznych plików CSS. Służy do tego reguła @import. Jeśli w stylach CSS umieścisz instrukcję: @import "uklad.css";
  
  to spowoduje ona dołączenie zawartości pliku uklad.css. Dzięki regule @import plik CSS może zostać podzielony na kilka fragmentów. Na przykład w dokumencie HTML dołączamy style zewnętrzne z pliku style.css:
  
  W pliku style.css umieszczamy natomiast dwie reguły: @import "uklad.css"; @import "szczegoly.css";
  
  Tak wykonana witryna będzie się składała z czterech plików:  index.html,  style.css,  uklad.css,  szczegoly.css.
  
  Rozdział 47. ♦ Uzupełnienie wiadomości na temat CSS
  
  579
  
  Wykorzystując to, można na przykład przyznać uprawnienia do modyfikowania wyglądu dokumentu bez możliwości modyfikacji kodu HTML. Jeśli masz uprawnienia do modyfikacji plików uklad.css oraz szczegoly.css, to możesz zmieniać wygląd witryny. Nie są Ci potrzebne żadne uprawnienia do kodu HTML. Importowanie stylów możesz wykonać bezpośrednio w kodzie HTML. Reguła @import może wystąpić w stylach wewnętrznych:
  
  W takiej sytuacji witryna będzie składała się z dwóch plików:  index.html,  uklad.css.
  
  Importowanie stylów CSS bywa wykorzystywane do ominięcia różnic w interpretacji CSS przez przeglądarkę Internet Explorer. W dokumencie HTML umieszczamy specjalne komentarze, a w nich instrukcję @import:
  
  Skrypt HTML5Shiv włącza w przeglądarkach Internet Explorer 6, 7 i 8 obsługę elementów strukturalnych HTML5, czyli: article section nav aside header footer hgroup
  
  Szczegółową historię, jak doszło do powstania skryptu HTML5Shiv, opisał na swoim blogu Paul Irish: http://paulirish.com/2011/the-history-of-the-html5-shiv/ Dodatkowe informacje znajdziesz także w Wikipedii: http://en.wikipedia.org/wiki/HTML5_Shiv
  
  Ćwiczenie 49.2 Zmodyfikuj rozwiązanie ćwiczenia 49.1, dodając w nim skrypt z listingu 49.1. Otrzymana strona będzie wyglądała poprawnie także w Internet Explorerze 7 oraz 8. Rozwiązanie ćwiczenia jest dostępne pod adresem http://html5.gajdaw.pl/cwiczenia/ 49-02/index.html.
  
  1
  
  HTML5Shiv jest także dostępny na Githubie: https://github.com/aFarkas/html5shiv.
  
  Rozdział 50.
  
  Podsumowanie części siódmej Materiał opisany w siódmej części podręcznika stanowi uzupełnienie zasadniczej części kursu, która została zawarta w pierwszych sześciu częściach. Kompletny kurs HTML5 i CSS3 powinien zawierać:  pełne zestawienie głównych atrybutów HTML,  listę selektorów CSS3,  opis elementów dotyczących formularzy  oraz kompletne informacje o elementach link i meta.
  
  Niezbędne są także wyjaśnienia na temat możliwości użycia samych języków HTML5 i CSS3 oraz poszczególnych ich cech we współczesnych przeglądarkach. Wszystkie powyższe zagadnienia są zebrane w osobne rozdziały części siódmej. Struktura książki oddaje jednak dobrze mój punkt widzenia na temat nauczania webmasteringu. W trakcie prowadzonych kursów koncentruję się na tym, by uczestnicy nabywali praktyczne umiejętności, które pozwolą im na podjęcie pracy na jednym z następujących stanowisk: programista HTML/CSS, projektant witryn WWW czy frontend developer. Moim zdaniem kluczowymi umiejętnościami są:  semantyczne oznaczanie treści dokumentu przy użyciu znaczników HTML5  oraz pozycjonowanie poszczególnych elementów HTML przy użyciu
  
  rozwiązań opisanych w części piątej. Opanowanie powyższych dwóch tematów wystarczy bowiem do tworzenia szablonów stron WWW odpowiadających projektom wykonanym w programach graficznych (np. Photoshop, Illustrator, GIMP, Inkscape). Stąd między innymi tak duży nacisk na naukę kafelkowania (rozdział 40.). Opisane tam rozwiązania nauczą Cię precyzyjnie pozycjonować elementy graficzne witryny.
  
  Część VII ♦ Zagadnienia zaawansowane
  
  608
  
  Praktyka, praktyka, praktyka Moją ulubioną metodą nauki, którą zawsze polecam wszystkim studentom, jest samodzielne wykonywanie ćwiczeń. Po wykonaniu pewnej liczby ćwiczeń opisanych w książce i nabyciu podstawowych umiejętności w operowaniu elementami HTML5 oraz stylami CSS3 należy przejść do kolejnego etapu — tworzenia kompletnych witryn opartych na konkretnych szablonach graficznych. Ja wykorzystuję do tego celu popularne serwisy zawierające zestawienia atrakcyjnych projektów, takie jak CSS Mania (http://cssmania.com). Zadania, które stanowią treść egzaminów praktycznych, polegają na samodzielnym wykonaniu podanej strony WWW zgodnie z pewnymi dodatkowymi wymaganiami. Na przykład:  Rozwiązanie powinno opierać się na szablonie stałej szerokości.  Rozwiązanie powinno stosować kafelkowanie i warstwowy efekt FIR.  Rozwiązanie powinno stosować zaokrąglone narożniki CSS3.  I tak dalej.
  
  Sądzę, że po uważnej lekturze książki powinieneś umieć samodzielnie wykonać poniższe zadania.
  
  Wymagania dotyczące wszystkich poniższych zadań 1. Zastosuj języki HTML5 oraz CSS3. 2. Kod HTML5 oraz CSS3 powinien być poprawny1. 3. Witryna ma poprawnie wyglądać we wszystkich współczesnych
  
  przeglądarkach: IE, FF, Chromie, Operze i Safari. 4. Witryna ma poprawnie wyglądać w przeglądarkach IE7 i IE8. 5. Treści zawarte w witrynach możesz kopiować (nie musisz ich przepisywać).
  
  Dopuszczalna jest operacja kopiowania zarówno bezpośrednio ze strony, jak i ze źródła HTML5. 6. Do skopiowania dowolnego elementu graficznego z podanej strony WWW
  
  możesz wykorzystać wyłącznie operację tworzenia zrzutu ekranu (przycisk PrintScreen na klawiaturze oraz opcja Edycja/Wklej w dowolnym edytorze graficznym)2.
  
  1
  
  Poprawność kodu HTML5 oraz CSS3 definiujemy jako zgodność z walidatorami W3C.
  
  2
  
  Dzięki temu wymaganiu każdy student może otrzymać własne unikalne zadanie (np. dowolny projekt z serwisu CSSMania). W ten sposób każde zadanie pisane na każdym egzaminie jest inne. Egzamin nie polega na nauczeniu się kodu konkretnej strony WWW, a raczej na umiejętności konwersji pliku w formacie BMP na witrynę WWW.
  
  Rozdział 50. ♦ Podsumowanie części siódmej
  
  609
  
  Projekt 50.1. Witryna html5.gajdaw.pl Wykonaj samodzielnie stronę główną witryny http://html5.gajdaw.pl. Stronę przygotuj w oparciu o układ stałej szerokości. Wszystkie ikony dostępne na stronie wykonaj jako obrazy PNG zawarte w tle i poddane kafelkowaniu.
  
  Projekt 50.2. Witryna noth.gajdaw.pl Wykonaj samodzielnie stronę główną witryny http://noth.gajdaw.pl. Stronę przygotuj w oparciu o układ hybrydowy, w którym lewa kolumna ma stałą szerokość, a prawa wypełnia całą dostępną przestrzeń. Witrynę wykonaj w taki sposób, by wszystkie zaokrąglone narożniki oraz cienie były wykonane z wykorzystaniem właściwości CSS3.
  
  Skorowidz A adres URL, 203 bazowy URL, 259 akapit, 75, 349 animacje, 172 aplikacja, Patrz program arkusze stylów, 101, 109, 113 artykuły, 224 ASCII, 33 atrybut, 35, Patrz także właściwość abbr, 202 action, 586 allowfullscreen, 244 alt, 36, 164 border, 184 border-collapse, 186 checked, 593 class, 125 colspan, 192 controls, 237 coords, 218 enctype, 587 font-family, 297 frameborder, 244 headers, 189 href, 102, 203, 207 id, 127 lang, 43, 54, 517 media, 580 multiple, 598 rel, 547, 549 rowspan, 192 scope, 189, 275 shape, 218 size, 598 src, 165, 178, 180
  
  style, 104 target, 216, 253 title, 36, 207 type, 208 usemap, 218 atrybuty elementów tabel, 202 elementu meta, 564 formularza, 586, 588 HTML, 541, 544 językowe, 542 kontrolek formularza, 589 logiczne, 37 znaczników, 35 automatyczne dzielenie wyrazów, 77
  
  B białe znaki, 31, 76, 111, 316 biblioteka jQuery, 36 modernizr, 605 blok deklaracji, declaration block, 109 błąd parsowania XML, 59 składniowy, 57 zaokrąglenia, 507 błędne wyświetlanie witryny, 69 błędy w wyświetlaniu znaków, 50
  
  C cienie, 584 cień tekstu, 315 CSS, Cascading Style Sheets, 101, 109, 113 CSS basic box model, 347
  
  CSS Color Module Level 3, 119 CSS Fonts Module Level 3, 309 CSS Multi-column Layout Module, 319 CSS Text Module Level 3, 309 cudzysłów, 151 cytaty, 150, 266 czcionka Carefree, 293 Chess Kingdom, 289 Belligerent Madness, 304 Diavlo, 293 domyślna, 296 Modern Pictograms, 307 Parisian, 301 Petrucci, 289 Scriptina Pro, 293 Seville, 288 Tangerine, 305 Webdings, 288 czcionki bezpłatne, 293, 303 bezszeryfowe, 115, 285, 297 Core fonts for the Web, 296, 310 dostępne w systemach, 296 fantazyjne, 297 komercyjne, 296, 306 nieproporcjonalne, 286, 297 odręczne, 297 proporcjonalne, 286 specjalne, 287 stałej szerokości, 287 szeryfowe, 115, 285, 297 czyszczenie, 467 czyszczenie elementów pływających, 368
  
  Skorowidz
  
  611
  
  D Dailymotion, 245 deklaracja, declaration, 109 dodatki Firefoksa, 14 dokumentacja komentarzy, 579 dołączanie czcionki, 305 skryptu JavaScript, 256 stylów, 101 domyślne wymiary elementów, 343 dopełnienie, padding, 347 dostęp do elementu, 487 dosuwanie elementów, 361 drzewo DOM, 196 dziedziczenie, 580 dzielenie wyrazów, 81
  
  E efekt cienia, 121 FIR, 457–464, 475, 498, 504, 518 migania, 276 przesuwania obrazów, 169 rollover, 426, 475, 480, 484, 498, 513 element, 20 a, 203, 216, 479, 510, 524 abbr, 146, 276 address, 229 article, 224, 331, 405, 423 aside, 227, 234, 405 audio, 237 base, 259 blockquote, 150, 267 body, 23, 232 br, 83, 142 button, 597 canvas, 258 caption, 191, 198 cite, 146, 272 code, 147 col, 198 colgroup, 198 del, 248 dfn, 90, 147 div, 168, 248, 341, 349 DOCTYPE, 67, 72 em, 89, 122 embed, 238, 252 fieldset, 601 figcaption, 180, 274 figure, 180, 270, 427 font, 104
  
  footer, 228 form, 587 h1, 85 head, 23 header, 228, 325, 518 hgroup, 222 hr, 261, 353 html, 273, 428 iframe, 253 img, 163–168, 250, 427, 515 input, 590 ins, 248 kbd, 147 li, 153, 426 link, 102, 547, 554 map, 218 meta, 23, 39, 41, 563, 566 atrybuty, 564 składnia, 564 nav, 234, 405, 510 noscript, 257 object, 238, 250 ol, 205, 510 optgroup, 598 option, 598 object, 251 optgroup, 598 p, 75, 141, 338, 346 param, 251 pre, 95, 143, 263 q, 150 samp, 148 script, 255 section, 226, 234, 329, 405, 427 select, 598 span, 248, 341, 352 strong, 89, 122, 344 style, 103 sub, 149 sup, 149 table, 184 tbody, 194, 196 td, 183 tfoot, 194, 196 th, 183 thead, 194, 196, 198 time, 148 title, 23 tr, 183, 194 track, 242 ul, 153, 205, 426 UNTITLED, 232 var, 148, 272 video, 239 wbr, 142 zewnętrzny, 416
  
  elementów rozmiar, 347 rozmiar maksymalny, 358 rozmiar minimalny, 358 elementy blokowe, 32, 337, 339, 340 czyszczące, 368 dotyczące formularzy, 586 frazowe, 144 HTML5, 21 kanału RSS, 551 liniowe, 337, 340 niepuste, 29 ogólne, 247, 341 pływające, 176, 361, 467 podstawowe, 75, 92 prezentacyjne, 145, 149 puste, 29, 83 semantyczne, 145, 221 tabeli, 183, 201 uwypuklające, 145 wyznaczające sekcje, 230 zagnieżdżone, 344 emotikony, 265 encja, 45 &bdquo, 281, 333 &mdash, 281, 333 &rdquo, 281, 333 ­, 81 dziesiętna numeryczna, 33 nazwana, 33 szesnastkowa numeryczna, 33 etykieta, label, 600 przycisku, 501 tekstowa, 477
  
  F FIR, Fahrner Image Replacement, 456 Firefox, 14 fiszki, 424 format, Patrz także rozszerzenie pliku GIF, 170, 172 EOT, 302 mp3, 237 odsyłaczy, 215 OGG, 237 PNG, 170 prezentacji elementów, 342 VTT, 242 formatowanie akapitu, 69, 70 elementu div, 349 elementu p, 350, 351 epopei, 332
  
  612
  
  HTML5 i CSS3. Praktyczne projekty
  
  formatowanie fiszek, 425 kodu CSS, 113 komórek, 187 tabel, 187 tekstu, 141 trenów, 332 wydruku, 580 wyglądu list, 157 formaty audio, 238 graficzne, 164 kodowania, 177 multimedialne, 237 wideo, 240 formularz, 585–602 atrybuty, 586 element button, 597 elementy HTML, 586 listy, 598 pola wyboru, 592 pole hasła, 592 przyciski, 595 rodzaje kontrolek, 588 wprowadzanie danych, 591 fragment obrazu, 496 funkcja header(), 57 image_encode(), 178 maximum(), 143
  
  G generowanie obrazu, 258 gradienty, 453 grubość czcionki, 313 obramowania, 398 grupowanie kontrolek, 600 nagłówków, 222
  
  H hiperłącze, Patrz odsyłacz, 203
  
  I identyfikator, 127 #top, 517 tytul, 209 ikona witryny, 557 ikony, 513 importowanie stylów, 578 indeksy, 145, 149 instalowanie czcionek, 293
  
  instrukcja @import, 579 warunkowa if, 579 interfejs API, 258 Internet Explorer 8, 605
  
  J język CSS, 101, 105 HTML, 101 Java, 252 JavaScript, 255 PHP, 168 język przetwarzania po stronie klienta, 602 po stronie serwera, 602 języki znacznikowe, 19, 602
  
  K kafelkowanie, sprites, 491–514 kanał Atom, 550 RSS, 549 kaskadowe arkusze stylów, 101 klasa przycisk, 496 klasy, 126 kod CSS, 113 kodowanie iso-8859-2, 40, 46 pliku, 41 polskich znaków, 41 utf-8, 40, 46, 86, 290, 434 windows-1250, 40, 46 znaków, 39 kody języków, 44 znaków diakrytycznych, 40 znaków Wingdings, 290 kolejność kolumn, 532 poziomych pasów, 536 warstw, 388, 458 wyróżniania odsyłaczy, 543 kolory, 119 kolumna, Patrz układ, Patrz także udawane kolumny, 467–471 kolumna płynna, 417 kolumny tabeli, 198 komentarze, 38, 106, 112 ignorowane, 579 warunkowe, 579 komórki nagłówkowe, 188, 190 rozciągające, 193
  
  komunikat BackCompat, 63 CSS1Compat, 63 o błędzie, 58 kontrolka audio, 238 kontrolka input typu button, 595 checkbox, 592 file, 595 image, 596 password, 592 submit, 591 text, 591 kontrolki danych HTML5, 596 formularza, 588 ukryte, 594 konwersja formatów, 238, 241 korekta, 248 krojenie obrazu, 509 krój czcionki, 310 fantazyjny, fantasy, 287 odręczny, cursive, 287 kształt hiperłączy, 218
  
  L liczba elementów listy, 598 kolumn, 319 linia pozioma, 424 link, Patrz odsyłacz, 203 lista, 205, 426 definicji, definition list, 153, 155 nieuporządkowana, unordered list, 153 specyfikacji, 568 ul, 501 uporządkowana, ordered list, 153 listy wyboru, 598, 599
  
  Ł łamanie tekstu, 77 wiersza, 82, 83 łączenie marginesów, 356 obramowania, 184 stylów, 581
  
  M margines, margin, 118, 347 margines pionowy, 356
  
  Skorowidz
  
  613
  
  menu, 480, 484, 501 kontekstowe, 239 nawigacyjne, 204, 236 metainformacje, 566 metoda fillRect(), 259 metody kodowania, 40 modyfikacja kontekstu pozycjonowania, 375 kroju, 313 nagłówka, 59 tła, 438
  
  N nagłówek, 23, 85, 221, 561 nagłówek i stopka, 228, 235 nagłówki kolumn, 189 wierszy, 189 napisy do filmu, 243 nawigacja pomiędzy podstronami, 554 nazwa klasy, 125 normalne pozycjonowanie elementów, 373 nota boczna, 228 numeracja automatyczna wielopoziomowa, 577 nagłówków, 230 numerowanie, 154
  
  O obramowania zaokrąglone, 121, 583 obramowanie, border, 121, 185, 347 obramowanie pionowe, 467 obraz, 163 calosc.jpg, 478 calosc-kafelki.jpg, 498 fragment.jpg, 479 fraszki.jpg, 515 gradient-dol.png, 453 gwiazdki-off.png, 486 kafelki.png, 500 lilia.jpg, 444, 445 logo.png, 448 lorem-ipsum.png, 450 oba.png, 497 piora.jpg, 494, 495 po-deszczu.jpg, 446 przyciski.png, 496 sprite.jpg, 492 tlo.jpg, 440
  
  tlo-gora.png, 454 tlo-liscie.jpg, 441 tlo-wzor.png, 443 ul-bkg.png, 481 obrazy nieprostokątne, 169 wielowarstwowe, 502 obsługa HTML5 w IE, 606 JavaScript, 257 zdarzenia hover, 502 odnośnik, Patrz odsyłacz, 203 odstęp między kolumnami, 323 literami, 314 wyrazami, 317 odsyłacz, 203 do plików PDF, 207 do plików tekstowych, 207 do plików ZIP, 208 do strony, 209 odsyłacze reagujące na kursor, 476 nieprostokątne, 217 wewnętrzne, 209 zawierające obraz, 211, 212 zawierające tabelę, 211 okno Drukuj, 582 opcje menu, 499 opcjonalny łącznik, 81 opływanie obrazu, 174, 177 ornamenty, dingbat, 287 ornamenty ozdabiające akapity, 451 osadzanie animacji Flash, 252 apletów, 251 czcionek, 300 dokumentów, 250 filmów z Dailymotion, 245 filmów z YouTube, 243 kodu JavaScript, 255 obrazu, 177 pliku, 178 stylów wydruku, 582 otwieranie nowych okien, 216 ozdabianie tekstu, 315 oznaczanie zmian, 248
  
  P panel Układ, 356 pangramy, 43, 289 parser XML, 57 pasek narzędzi poprzedni/następny, 555 pękanie kafelków, 507
  
  plik .htaccess, 59, 434 1_400.jpg, 271 atom.xml, 553 bkg.png, 513 blues.mp3, 237, 238 blues.ogg, 237, 238 blues.webm, 239 calosc-kafelki.jpg, 499 cicha-noc.html, 431, 433, 522 css2.zip, 208 ekstraklasa-m.html, 277 gwiazdki-off.png, 486 html.gif, 173 html4.zip, 266 html40.zip, 208 html5shiv.js, 606 humans.txt, 559 index.html, 23, 102, 136, 179 index.php, 178 index.xhtml, 59 jam-jest-dudka.html, 523 kapsle-1.html, 554 loading.gif, 164 orthocenter.zir, 251 orzel.svg, 251 Parisian.eot, 302 Parisian.ttf, 300 piskleta.html, 473 przycisk.png, 519 robots.txt, 559 rss.xml, 552 sitemap.xml, 560 skrypt.js, 256 sprite.jpg, 491 sprite.png, 502, 504, 522 strona.html, 209 style.css, 102, 136, 215 subtitles.vtt, 242 szablon.xcf, 502 toc.css, 275 zirkel.jar, 252 pliki, Patrz także rozszerzenie pliku binarne, 177 graficzne, 164 pobieranie filmu, 240 plików, 432 podpis tabeli, 191 podział elementu article, 270 treści na sekcje, 230 pola wyboru, 593 pole tekstowe, 600 pole typu password, 592
  
  614 położenie elementów, 355 elementu a, 480 pomiar odległości, 357 poprawianie błędów, 53 powiązania dokumentów, 547 powielanie tła, 441 pozycjonowanie bezwzględne, 371, 376 elementów, 371 elementów span, 518 kontekstowe, 163, 379, 383, 391, 478 przycisku, 478 statyczne, 371, 373 trwałe, 371, 378 względne, 371, 374 względnie bezwzględne, 379–381, 480, 482 problemy Internet Explorera, 606 program ASCII Art, 264 Audacity, 238 GIMP, 503 Kod Paskowy Rezystorów, 279 Miro Video Converter, 241 Photoshop, 503 XHTML/CSS Image, 263 programy graficzne, 607 przeglądarki, 12 przekształcanie tekstu, 316 przestarzałe elementy, 62 przesuwanie elementu, 391 elementu div, 480 obrazu tła, 439, 492 przezroczystość, 170, 459, 511, 583 przycinanie, 390 przycisk, 496, 595 do resetowania, 591 poprzedni/następny, 557 rollover, 498 Umieść, 243 z etykietą, 477 zatwierdzający, 591 przypisanie tła, 440 przypisy dolne, 281 pseudoklasa after, 581 pseudoklasy CSS3, 573 publikowanie filmu, 243–246 punkty podziału, 77 zaczepienia, 482, 500 puste szablony, 44
  
  HTML5 i CSS3. Praktyczne projekty
  
  R ramka, 184 reguła, rule, 109, 125 @font-face, 300, 303, 310 @import, 305 @media print, 582 resetowanie licznika, 576 RGB, Red, Green, Blue, 120, 437 rodzaje elementów meta, 564 powiązań plików, 548 stylów, 101, 107 rollover, 475 rozciąganie elementów, 324 rozdzielczość monitora, 394 rozmiar elementu, 348 ikony, 558 powiększonego hiperłącza, 487 tekstu, 311 rozszerzenie pliku, 548 .css, 102 .eot, 302 .gif, 172 .ico, 558 .mp3, 237 .ogg, 237 .png, 170 .psd, 502 .vtt, 242 .xcf, 502 .xhtml, 58 rysowanie prostokąta, 258
  
  S sekcja div, 215 sekcje, 226 selektor, selector, 109 ::active, 213 ::after, 151 ::before, 151 ::hover, 213, 475, 487 ::link, 213 ::visited, 213 #pojemnik, 469 atrybutu, 572 brata, 572 dziecka, 571 następnego brata, 571 p, 109 potomka, 571 typu, 569
  
  selektory CSS 2.1, 569 CSS 3, 568 identyfikatorów, 128, 570 klas, 126, 570 potomne, 129, 132, 200, 488 separatory kolumn, 323 serwer WWW Apache, 168 serwis Can I use…, 603 CSS Mania, 608 Find me by IP, 603 Font Squirrel, 303 Google Fonts, 305 Typekit, 306 skalowanie obrazów, 167 sklejenie plików, 504 składnia CSS, 109 elementu meta, 564 HTML, 55 HTML5, 27 tabel, 184 XML, 38 skróty klawiszowe, 542 skrypt html5shiv.js, 606 specyfikacja CSS, 110, 347 CSS 2.1, 208, 567 czcionek, 567 definicji obszarów, 567 HTML 4.01, 208 HTML5, 25 jednostek, 567 kolorów, 567 obramowań i tła, 567 selektorów, 567 układów giętkich, 568 układów wielokolumnowych, 568 właściwości tekstu, 567 zaawansowanych technik pozycjonowania, 568 spis treści, 231, 268, 274 sprawdzanie implementacji, 603 pisowni, 54 trybu pracy, 63 trybu wyświetlania, 339 stopień implementacji, 603 stosowanie kafelkowania, 493 stronicowanie podglądu wydruku, 197 struktura dokumentu, 22, 122 funkcjonalna witryny, 527 witryny, 221
  
  Skorowidz
  
  615
  
  style alternatywne, 549 CSS, 101, 206 CSS odsyłaczy, 213 CSS przycisków, 512 do druku, 580, 582 domyślne, 101 kroju, 312 opcji menu, 485, 505, 510 przycisków, 497, 518 spisu treści, 275 wewnętrzne, 103 zewnętrzne, 102, 328 szablony graficzne, 608 pustych stron, 44 szerokość w pikselach, 408 w procentach, 408 kolumny, 322 okna, 470 układu, 393 szeryfy, 285
  
  Ś ścieżka do pliku, 438
  
  T tabela ekstraklasy, 277 unikodu, 34 wyników, 200 z zestawieniem, 185 tabele, 183 nieregularne, 192 regularne, 192 tabeli atrybuty, 202 kolumny, 199 nagłówek i stopka, 195, 197 nagłówek, thead, 194 stopka, tfoot, 194 treść, tbody, 194 tekst, 141 preformatowany, 143 wielokolumnowy, 319, 324 testowanie czcionek, 289 stron, 15 tła, 163, 437 elementów, 450 wielokrotne, 452 tło elementu html, 471 gwiazdek, 487
  
  niepowielane, 449 o stałych wymiarach, 446 pojemnika, 367 powielane poziomo, 442 powielane w pionie, 441 udawanych kolumn, 468 umieszczone na warstwie, 454 w kształcie paska, 447 treść odsyłacza, 211 tabeli, 194 tryb block, 337 inline, 337 none, 340 tryb pracy przeglądarki quirks mode, 61, 67 standard mode, 61, 67 tryby wyświetlania elementów, 338, 341 twarda spacja, 82 tworzenie ikony, 558 list, 598 menu, 480, 484, 499 obrazu, 263 przycisków, 477, 597 szablonów, 607 twórcy witryny, 559 typ MIME, 177 typy dołączanych zasobów, 548 elementu input, 590 powiązań, 547
  
  U udawane kolumny, faux columns, 467–471 udostępnianie pobierania, 280 układ dwukolumnowy, 323, 365, 413 dwukolumnowy hybrydowy, 413–416 hybrydowy, 413 kolumnowy, 365 o stałej szerokości, 393 o zmiennej szerokości, 407 płynny, 407 przylegający, 395 strony, 335, 350 sztywny, 393 trójkolumnowy, 320 trójkolumnowy hybrydowy, 417–420 ukośnik, slash, 20
  
  ukrywanie tekstu, 475 unikod, 34 uprawnienia do kodu HTML, 579 do modyfikacji plików, 579 URL, Universal Resource Locator, 203 ustalanie szerokości elementu, 387 usuwanie elementów, 581
  
  W W3C, 56 W3C Quality Assurance, 24 wady osadzania plików, 180 walidacja strony, 57 walidator W3C, 15, 56, 242 warstwy, 163, 387 wartości atrybutu target, 216, 254 RGB, 120 wartość, value, 109 wcięcie akapitu, 315 wielkość liter, 110 właściwości CSS, 115, 123 CSS list, 157 CSS tła, 437 czcionek, 310, 327 tekstu, 314, 327 właściwość, property, 109 background, 119, 163, 172, 251, 353, 437 background-position, 439, 492, 496 background-repeat, 438 background-size, 439 border, 121, 348, 353 bottom, 385 clear, 368 color, 119, 437 column-count, 319, 322 column-span, 324 display, 351, 457, 581 float, 171, 361, 414 font, 313 font-family, 297, 310 font-size, 115, 311 font-stretch, 312 font-style, 116, 312 font-variant, 313 font-weight, 116, 313 height, 169, 348, 353 left, 384, 385 letter-spacing, 314 line-height, 117, 314
  
  616 właściwość, property list-style, 162 list-style-image, 159 list-style-position, 162 list-style-type, 158 margin, 118, 348, 354 max-height, 359 min-width, 358 overflow, 369, 390 padding, 70, 348 padding-top, 444 position, 371, 372 src, 300 right, 383 text-align, 117, 314, 328, 354, 486, 580 text-decoration, 315 text-indent, 315, 458 text-shadow, 315 text-transform, 316 top, 385 vertical-align, 187 white-space, 316, 331 width, 70, 169, 348, 353 word-spacing, 317 z-index, 388, 389, 487 wstawianie filmu, 243–245, Patrz także osadzanie linii, 261 wstępne pobieranie obrazów, 502 wtyczka Firebug, 24, 355 Site Navigation Toolbar, 554 Tooltip, 36 Web Developer, 257 Web Developer Toolbar, 358, 464, 493 wybór tła, 524 trybu pracy, 67
  
  HTML5 i CSS3. Praktyczne projekty
  
  wycofane znaczniki, 22 wygląd strony, 62, 122 wykorzystywanie fragmentu obrazu, 495 wyłączanie obrazu, 462–464 stylów CSS, 16, 331, 455 właściwości, 386, 389 wymagania, 608 wymiana obrazu tła, 475 wymiary akapitu p, 69 elementów blokowych, 69 obrazu, 166 wymuszanie wysokości elementów, 367 wypełnienie, padding, 324 wypunktowanie, 153 wyrażenia regularne, 128 wyrównanie poziome, 117, 314 wyróżnianie tekstu, 89 WYSIWYG, 12 wysokość obramowania, 467 wiersza, 117, 314 wyśrodkowanie elementu blokowego, 354 elementu div, 354 etykiety, 477 nagłówka, 355 tekstu, 354 wyświetlanie elementów, 351 obrazu tła, 458 tekstu, 457 zdjęć kapsli, 554 znaków diakrytycznych, 43, 45
  
  Y YouTube, 243
  
  Z zagnieżdżanie elementów, 32, 130, 230, 342 elementów blokowych, 361 list, 156 zakładki, 519 zaokrąglone narożniki, 429 obramowania, 121, 583 zapisywanie plików wideo, 240 zasięg elementu, 20 opcji menu, 503 zawartość, content, 347 zaznaczanie gwiazdek, 485 zdarzenia, 545 zdarzenie :hover, 487, 502 zestaw czcionek, 115, 190, 296 zmiana kolejności kolumn, 532, 538 pasów, 536, 538 znacznik, tag, 20 znaczniki otwierające, 20, 27 zamykające, 20, 27 znaki diakrytyczne, 45 francuskie, 47 niemieckie, 48 polskie, 39, 46 rosyjskie, 49 interpunkcyjne, 85 specjalne, 33, 35, 40, 75, 90 zrzuty ekranu, 269
  
  Notatki