Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00055 006699 14489030 na godz. na dobę w sumie
HTML, XHTML i CSS. Praktyczne projekty. Wydanie II - książka
HTML, XHTML i CSS. Praktyczne projekty. Wydanie II - książka
Autor: Liczba stron: 512
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3049-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Zostań świetnym webmasterem!

O projektowaniu stron internetowych napisano zapewne grube tysiące książek. Ta dziedzina zmienia się jednak na tyle szybko, a profesjonalnych projektantów, mających dużą wiedzę i obdarzonych umiejętnością jej przekazania, jest na tyle mało, że warto skorzystać z ich doświadczeń. Zwłaszcza, jeśli niezbędne wiadomości podane są w formie praktycznych przykładów, a dotyczą tak istotnych kwestii, jak używanie języków HTML i XHTML oraz kaskadowych arkuszy stylów, zgodność stron z obowiązującymi standardami, komponowanie układu serwisu WWW i tworzenie jego zawartości.

Drugie wydanie książki 'HTML, XHTML i CSS. Praktyczne projekty' pozwoli Ci od podszewki poznać tajniki projektowania naprawdę przemyślanych stron internetowych, uwzględniających potrzeby ich użytkowników. Dowiesz się, jak zachować poprawność składniową XHTML i CSS. Poznasz semantykę kodu XHTML i opanujesz metodologię pracy zgodnej ze standardami. Zrozumiesz, dlaczego ważne jest zapewnienie dostępności Twoich stron dla osób niepełnosprawnych i co zrobić, by wyszukiwarki mogły bez trudu przeanalizować oraz zaklasyfikować zawartość serwisu. Nauczysz się wybierać czcionki, tło, projektować wygodny interfejs i poszczególne fragmenty strony, a także zapisywać szczególnie udane projekty w formie szablonów.

Wykorzystaj swoją kreatywność, tworząc zachwycające strony WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Idź do • Spis treści • Przykładowy rozdział • Skorowidz Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online Kontakt Helion SA ul. Kościuszki 1c 44-100 Gliwice tel. 32 230 98 63 e-mail: helion@helion.pl © Helion 1991–2011 HTML, XHTML i CSS. Praktyczne projekty. Wydanie II Autor: Włodzimierz Gajda ISBN: 978-83-246-3049-3 Format: 158×235, stron: 512 Zostań świetnym webmasterem! • Podstawy i rozróżnienia, czyli czym różni się HTML od XHTML i co to jest CSS • Standardy i zasady, czyli o czym pamiętać przy projektowaniu strony internetowej • Czcionki i układy stron, czyli jak stworzyć znakomity projekt i szablon strony WWW O projektowaniu stron internetowych napisano zapewne grube tysiące książek. Ta dziedzina zmienia się jednak na tyle szybko, a profesjonalnych projektantów, mających dużą wiedzę i obdarzonych umiejętnością jej przekazania, jest na tyle mało, że warto skorzystać z ich doświadczeń. Zwłaszcza, jeśli niezbędne wiadomości podane są w formie praktycznych przykładów, a dotyczą tak istotnych kwestii, jak używanie języków HTML i XHTML oraz kaskadowych arkuszy stylów, zgodność stron z obowiązującymi standardami, komponowanie układu serwisu WWW i tworzenie jego zawartości. Drugie wydanie książki „HTML, XHTML i CSS. Praktyczne projekty” pozwoli Ci od podszewki poznać tajniki projektowania naprawdę przemyślanych stron internetowych, uwzględniających potrzeby ich użytkowników. Dowiesz się, jak zachować poprawność składniową XHTML i CSS. Poznasz semantykę kodu XHTML i opanujesz metodologię pracy zgodnej ze standardami. Zrozumiesz, dlaczego ważne jest zapewnienie dostępności Twoich stron dla osób niepełnosprawnych i co zrobić, by wyszukiwarki mogły bez trudu przeanalizować oraz zaklasyfikować zawartość serwisu. Nauczysz się wybierać czcionki, tło, projektować wygodny interfejs i poszczególne fragmenty strony, a także zapisywać szczególnie udane projekty w formie szablonów. • Składnia i poprawność języka XHTML • Znaki diakrytyczne i oznaczanie języka dokumentu • Praca w trybie standardów • Podstawowe elementy XHTML • Kaskadowe arkusze stylów – składnia i właściwości • Klasy i identyfikatory, rodzaje czcionek • Wszystkie atrybuty CSS 2.1 dotyczące czcionek i tekstu • Elementy blokowe, liniowe i pływające • Obszar zajmowany przez element i metody pozycjonowania elementów blokowych • Układy stałej szerokości, płynne i hybrydowe • Tekst, listy, tabele, odsyłacze i pozostałe elementy XHTML • Właściwości CSS dotyczące tła i przyciski rollover w CSS • Struktura funkcjonalna witryny, kolejność elementów w kodzie XHTML i atrybuty XHTML • Formularze i powiązania dokumentów • Element meta – dodatkowe informacje na temat strony WWW • Dostępność strony WWW • Semantyczny XHTML Wykorzystaj swoją kreatywność, tworząc zachwycające strony WWW! Spis treĈci CzöĈè I Elementarz ...................................................................... 11 Rozdziaä 1. Wprowadzenie ................................................................................................13 Dla kogo jest ta ksiąĪka? ................................................................................................................... 13 Jak czytaü tĊ ksiąĪkĊ? ........................................................................................................................ 14 Warsztat pracy ................................................................................................................................... 14 Firefox ............................................................................................................................................... 16 Testowanie stron WWW ................................................................................................................... 16 Edycja kodu XHTML ....................................................................................................................... 17 Rozdziaä 2. Skäadnia jözyka XHTML ...................................................................................21 Znaczniki i elementy ......................................................................................................................... 21 Wszystkie elementy jĊzyka XHTML ................................................................................................ 22 Elementy puste i niepuste .................................................................................................................. 22 Znaczniki wymagane i opcjonalne oraz elementy puste .................................................................... 23 WielkoĞü liter w nazwach znaczników .............................................................................................. 24 Biaáe znaki wewnątrz znaczników .................................................................................................... 24 Biaáe znaki w treĞci elementów ......................................................................................................... 25 ZagnieĪdĪanie elementów ................................................................................................................. 25 Znaki specjalne ................................................................................................................................. 26 Atrybuty znaczników ........................................................................................................................ 28 Biaáe znaki w wartoĞciach atrybutów ................................................................................................ 30 Atrybuty logiczne, wyliczeniowe i inne ............................................................................................ 30 Komentarze w XHTML .................................................................................................................... 32 Struktura dokumentu HTML ............................................................................................................. 33 Pierwsza strona WWW ..................................................................................................................... 34 Rozdziaä 3. Znaki diakrytyczne i oznaczanie jözyka dokumentu ..........................................37 Polskie znaki diakrytyczne ................................................................................................................ 37 Metody kodowania polskich znaków diakrytycznych ....................................................................... 37 Fizyczne kodowanie pliku ................................................................................................................. 38 Element meta ustalający kodowanie dokumentu XHTML ................................................................ 39 Pangramy .......................................................................................................................................... 40 Atrybuty lang oraz xml:lang .............................................................................................................. 41 Szablony pustych polskich stron WWW ........................................................................................... 42 Znaki diakrytyczne w postaci encji ................................................................................................... 42 Kodowanie stron zawierających teksty w kilku jĊzykach ................................................................. 43 Jakiego kodowania uĪywaü? ............................................................................................................. 47 BáĊdne wyĞwietlanie polskich znaków diakrytycznych .................................................................... 47 ûwiczenia .......................................................................................................................................... 48 4 Spis treĈci Rozdziaä 4. XHTML poprawny skäadniowo ..........................................................................53 Czy poprawnoĞü skáadniowa jest waĪna? .......................................................................................... 53 Obecny stan internetu ........................................................................................................................ 54 Metody sprawdzania poprawnoĞci skáadniowej ................................................................................ 54 Rozdziaä 5. Praca w trybie standardów ..............................................................................61 Quirks mode i standard mode — dwa tryby pracy przeglądarek internetowych ............................... 61 Problemy z trybami pracy ................................................................................................................. 62 Które przeglądarki mają tryb standardów? ........................................................................................ 62 Jak sprawdziü tryb pracy przeglądarki? ............................................................................................. 63 W jaki sposób przeglądarka wybiera tryb pracy? .............................................................................. 65 BáĊdne wyĞwietlanie witryny wynikające z przeáączenia trybu pracy przeglądarki .......................... 66 Stosuj DOCTYPE jĊzyka XHTML 1.0 strict .................................................................................... 69 Rozdziaä 6. Podstawowe elementy XHTML ........................................................................71 Akapit ................................................................................................................................................ 71 Dzielenie wyrazów ............................................................................................................................ 76 Zakaz áamania wiersza ...................................................................................................................... 77 Záamanie wiersza .............................................................................................................................. 78 Znaki interpunkcyjne ........................................................................................................................ 80 Nagáówki ........................................................................................................................................... 80 WyróĪnianie tekstu ............................................................................................................................ 83 Tekst preformatowany ...................................................................................................................... 85 Indeksy dolny i górny ........................................................................................................................ 86 Linia pozioma ................................................................................................................................... 87 Popularne znaki specjalne ................................................................................................................. 88 Zestawienie ....................................................................................................................................... 88 Rozdziaä 7. Kaskadowe arkusze stylów .............................................................................91 Struktura a wygląd dokumentów HTML ........................................................................................... 91 Doáączanie stylów do dokumentu ..................................................................................................... 91 Style zewnĊtrzne ......................................................................................................................... 91 Style wewnĊtrzne ........................................................................................................................ 92 Atrybut style ............................................................................................................................... 93 DomyĞlny jĊzyk stylów ..................................................................................................................... 94 Ujmowanie stylów wewnĊtrznych w komentarz ............................................................................... 95 Rozdziaä 8. Skäadnia kaskadowych arkuszy stylów ............................................................97 Terminologia ..................................................................................................................................... 97 WielkoĞü liter w selektorach ............................................................................................................. 98 WielkoĞü liter w nazwach i wartoĞciach wáaĞciwoĞci ....................................................................... 99 Biaáe znaki ........................................................................................................................................ 99 Komentarze ..................................................................................................................................... 100 Formatowanie kodu CSS ................................................................................................................. 100 Rozdziaä 9. Przykäadowe wäaĈciwoĈci CSS .......................................................................103 Czcionki .......................................................................................................................................... 103 WysokoĞü wiersza tekstu ................................................................................................................ 104 Wyrównanie poziome tekstu ........................................................................................................... 105 Marginesy ....................................................................................................................................... 105 Kolory ............................................................................................................................................. 106 Obramowanie .................................................................................................................................. 108 XHTML — struktura, CSS — wygląd ............................................................................................ 109 Zestawienie sumaryczne ................................................................................................................. 109 Rozdziaä 10. Klasy i identyfikatory ..................................................................................111 Atrybut class ................................................................................................................................... 111 Selektory dotyczące klas ................................................................................................................. 112 Spis treĈci 5 Stosowanie klas ............................................................................................................................... 112 Atrybut id ........................................................................................................................................ 113 Selektory dotyczące identyfikatorów .............................................................................................. 113 Stosowanie identyfikatorów ............................................................................................................ 114 Walka z classitis: selektory potomne .............................................................................................. 115 Rozdziaä 11. Projekty .....................................................................................................119 CzöĈè II Czcionki na stronach WWW ........................................... 127 Rozdziaä 12. Rodzaje czcionek ........................................................................................129 Czcionki szeryfowe i bezszeryfowe ................................................................................................ 129 Czcionki proporcjonalne i nieproporcjonalne ................................................................................. 130 Inne podziaáy czcionek .................................................................................................................... 131 Testowanie czcionek ....................................................................................................................... 133 Rozdziaä 13. Czcionki dla webmastera ............................................................................135 Core fonts for the Web .................................................................................................................... 138 Czcionki dostĊpne na róĪnych platformach ..................................................................................... 138 Definiowanie kroju czcionki ........................................................................................................... 139 Osadzanie czcionek na stronach WWW .......................................................................................... 141 Google Fonts ................................................................................................................................... 143 Rozdziaä 14. Wszystkie wäaĈciwoĈci CSS 2.1 dotyczñce czcionek i tekstu .......................145 font-family ...................................................................................................................................... 145 font-size ........................................................................................................................................... 146 font-style ......................................................................................................................................... 148 font-weight ...................................................................................................................................... 148 font-variant ...................................................................................................................................... 148 font .................................................................................................................................................. 148 text-align ......................................................................................................................................... 149 text-decoration ................................................................................................................................ 149 text-indent ....................................................................................................................................... 149 text-transform .................................................................................................................................. 150 word-spacing ................................................................................................................................... 150 letter-spacing ................................................................................................................................... 150 white-space ..................................................................................................................................... 150 line-height ....................................................................................................................................... 151 Rozdziaä 15. Projekty .....................................................................................................153 CzöĈè III Ukäad strony ................................................................ 159 Rozdziaä 16. Elementy blokowe i liniowe .........................................................................161 Elementy blokowe i liniowe — definicja skáadniowa ..................................................................... 161 Elementy blokowe i liniowe — definicja prezentacyjna ................................................................. 165 Który ze sposobów definiowania elementów blokowych i liniowych jest lepszy i dlaczego? ........ 167 Elementy ogólne div i span ............................................................................................................. 168 UĪywanie elementów div i span w poáączeniu z klasami i identyfikatorami .................................. 169 Typowy przykáad uĪycia elementów div ......................................................................................... 170 DomyĞlny format wizualny elementów blokowych i liniowych ..................................................... 171 Rozdziaä 17. Obszar zajmowany przez element .................................................................175 WáaĞciwoĞü display ......................................................................................................................... 179 WyĞrodkowanie elementu blokowego ............................................................................................ 180 àączenie marginesów pionowych ................................................................................................... 183 Wymiary minimalne i maksymalne ................................................................................................. 184 6 Spis treĈci Rozdziaä 18. Elementy päywajñce ....................................................................................187 WáaĞciwoĞü float ............................................................................................................................. 187 Ukáady kolumnowe ......................................................................................................................... 190 Znikające táo pojemnika .................................................................................................................. 192 Czyszczenie elementów páywających ............................................................................................. 193 Rozdziaä 19. Zaawansowane metody pozycjonowania elementów blokowych ....................195 WáaĞciwoĞü position ........................................................................................................................ 195 Pozycjonowanie statyczne ............................................................................................................... 197 Pozycjonowanie wzglĊdne .............................................................................................................. 198 Pozycjonowanie bezwzglĊdne ......................................................................................................... 200 Pozycjonowanie trwaáe ................................................................................................................... 201 Pozycjonowanie kontekstowe ......................................................................................................... 202 WáaĞciwoĞci left, right, top oraz bottom .......................................................................................... 205 Warstwy i ich kolejnoĞü .................................................................................................................. 210 Przycinanie ...................................................................................................................................... 212 Rozdziaä 20. Ukäady o staäej szerokoĈci ..........................................................................215 Dobieranie szerokoĞci ukáadu ......................................................................................................... 215 Ukáady przylegające do okna przeglądarki ..................................................................................... 217 Rozdziaä 21. Ukäady päynne .............................................................................................227 Rozdziaä 22. Ukäady hybrydowe .......................................................................................231 Ukáady dwukolumnowe .................................................................................................................. 231 Ukáad trójkolumnowy ..................................................................................................................... 235 Rozdziaä 23. Projekty .....................................................................................................239 CzöĈè IV Elementy XHTML ......................................................... 247 Rozdziaä 24. Tekst .........................................................................................................249 Elementy frazowe ............................................................................................................................ 249 Trudne wybory ................................................................................................................................ 251 Cytaty .............................................................................................................................................. 252 Tekst na stronach WWW — podsumowanie ................................................................................... 253 Rozdziaä 25. Listy ...........................................................................................................255 Wypunktowanie .............................................................................................................................. 255 Numerowanie .................................................................................................................................. 256 Lista definicji .................................................................................................................................. 256 ZagnieĪdĪanie list ............................................................................................................................ 257 WáaĞciwoĞci CSS list ...................................................................................................................... 259 Rozdziaä 26. Element img ...............................................................................................263 Pliki graficzne ................................................................................................................................. 264 Skáadnia elementu img .................................................................................................................... 264 Wymiary obrazów ........................................................................................................................... 265 Obrazy nieprostokątne ..................................................................................................................... 268 Animacje ......................................................................................................................................... 270 Opáywanie ....................................................................................................................................... 271 Dlaczego elementy páywające nie generują wysokoĞci? ................................................................. 273 Osadzanie obrazów w kodzie XHTML ........................................................................................... 275 Rozdziaä 27. Tabele ........................................................................................................279 Obramowanie i áączenie obramowania ............................................................................................ 280 Podstawowe formatowanie komórek i caáych tabel ........................................................................ 281 Nagáówki kolumn i nagáówki wierszy ............................................................................................. 283 Podpis i opis tabeli .......................................................................................................................... 285 Spis treĈci 7 Tabele regularne i nieregularne ....................................................................................................... 286 Nagáówek, stopka i treĞü tabeli ........................................................................................................ 288 Kolumny tabeli ................................................................................................................................ 290 Tabele XHTML — podsumowanie ................................................................................................. 294 Rozdziaä 28. Odsyäacze ...................................................................................................297 Spis treĞci w postaci listy numerowanej bądĨ wypunktowanej ....................................................... 298 Style CSS witryny z hiperáączami ................................................................................................... 299 Atrybut title ..................................................................................................................................... 300 Odsyáacze do róĪnych typów plików .............................................................................................. 300 Odsyáacze wskazujące strony w internecie ..................................................................................... 301 Odsyáacze wewnĊtrzne .................................................................................................................... 301 Obrazy jako odsyáacze .................................................................................................................... 303 Style CSS odsyáaczy ....................................................................................................................... 304 Otwieranie nowych okien ................................................................................................................ 305 Mapa odsyáaczy ............................................................................................................................... 306 Rozdziaä 29. Pozostaäe elementy XHTML .........................................................................309 Oznaczanie zmian w dokumencie ................................................................................................... 309 Element object ................................................................................................................................. 310 Osadzanie na stronie WWW filmów z serwisu YouTube ......................................................... 311 Osadzanie na stronie WWW apletów pisanych w jĊzyku Java ................................................. 313 Bazowy adres URL ......................................................................................................................... 314 Rozdziaä 30. Projekty .....................................................................................................317 CzöĈè V Täa ................................................................................ 339 Rozdziaä 31. WäaĈciwoĈci CSS dotyczñce täa ...................................................................341 Rozdziaä 32. FIR — wymiana obrazów na teksty ..............................................................351 Efekt FIR wykonany przy uĪyciu display: none .............................................................................. 353 Efekt FIR wykonany przy uĪyciu text-indent .................................................................................. 353 Efekt FIR wykorzystujący kolejnoĞü warstw .................................................................................. 354 Rozdziaä 33. Udawane kolumny ......................................................................................359 Rozdziaä 34. Przyciski rollover w CSS .............................................................................367 Wymiana obrazu táa ........................................................................................................................ 367 Przycisk z etykietą tekstową ............................................................................................................ 368 Przyciski pozycjonowane kontekstowo ........................................................................................... 369 Rozdziaä 35. Kafelkowanie ..............................................................................................381 Etap pierwszy: pokrojenie szablonu na oddzielne pliki ............................................................ 388 Etap drugi: sklejenie oddzielnych plików w jeden plik sprite.png ............................................ 389 Rozdziaä 36. Projekty .....................................................................................................393 CzöĈè VI Zagadnienia zaawansowane ......................................... 405 Rozdziaä 37. Struktura funkcjonalna witryny ....................................................................407 Rozdziaä 38. Uzupeänienie wiadomoĈci na temat CSS ......................................................411 Selektory ......................................................................................................................................... 411 Pseudoklasy ..................................................................................................................................... 414 Importowanie stylów ....................................................................................................................... 418 Dziedziczenie .................................................................................................................................. 419 Style do druku ................................................................................................................................. 419 Style alternatywne ........................................................................................................................... 422 8 Spis treĈci Rozdziaä 39. KolejnoĈè elementów w kodzie XHTML ........................................................423 Zmiana kolejnoĞci kolumn pionowych ........................................................................................... 424 Zmiana kolejnoĞci poziomych pasów ............................................................................................. 427 Zmiana kolejnoĞci kolumn oraz poziomych pasów ......................................................................... 428 Rozdziaä 40. Atrybuty XHTML .........................................................................................431 Atrybuty zasadnicze ........................................................................................................................ 431 Atrybuty jĊzykowe .......................................................................................................................... 431 Zdarzenia ......................................................................................................................................... 432 Atrybuty ogólne .............................................................................................................................. 433 Atrybuty dotyczące aktywnego punktu ........................................................................................... 433 Rozdziaä 41. Formularze .................................................................................................435 Atrybuty formularza ........................................................................................................................ 436 Kontrolki formularza ....................................................................................................................... 437 Atrybuty ogólne kontrolek formularza ............................................................................................ 438 Zdarzenia dotyczące kontrolek ........................................................................................................ 439 Elementy input ................................................................................................................................ 439 Przyciski zatwierdzające i resetujące formularz .............................................................................. 440 Wiersz wprowadzania danych ......................................................................................................... 441 Pole hasáa ........................................................................................................................................ 441 Pola wyboru .................................................................................................................................... 441 Wykluczające pola wyboru ............................................................................................................. 442 Kontrolki ukryte .............................................................................................................................. 443 Przyciski .......................................................................................................................................... 443 Kontrolka wyboru pliku .................................................................................................................. 443 Obraz ............................................................................................................................................... 444 Element button ................................................................................................................................ 444 Listy ................................................................................................................................................ 445 Pole tekstowe .................................................................................................................................. 447 Grupowanie i podpisywanie kontrolek formularza ......................................................................... 447 Podsumowanie ................................................................................................................................ 448 Rozdziaä 42. Powiñzania dokumentów .............................................................................449 Element link .................................................................................................................................... 449 Kanaáy RSS i Atom ......................................................................................................................... 451 NastĊpny, poprzedni oraz spis treĞci ............................................................................................... 455 Ikona witryny WWW ...................................................................................................................... 457 Twórcy witryny WWW ................................................................................................................... 460 Plik robots.txt .................................................................................................................................. 460 Plik sitemap.xml .............................................................................................................................. 461 Rozdziaä 43. Element meta — dodatkowe informacje na temat strony WWW ...................463 Skáadnia elementu meta .................................................................................................................. 464 Znaczenie elementu meta ................................................................................................................ 464 Dwa rodzaje elementów meta ......................................................................................................... 464 Jakie metainformacje umieszczaü w witrynach? ............................................................................. 465 Kodowanie znaków ................................................................................................................... 465 JĊzyki, w jakich przygotowano dokument ................................................................................ 465 Autor, prawa autorskie i firma .................................................................................................. 466 Sáowa kluczowe i opis ............................................................................................................... 466 Roboty ....................................................................................................................................... 467 Data powstania i waĪnoĞci dokumentu ..................................................................................... 467 Przechowywanie stron WWW przez poĞredników ................................................................... 468 Skrypty i style — domyĞlny jĊzyk ............................................................................................ 468 Metainformacje w kilku jĊzykach ............................................................................................. 468 Przekierowania .......................................................................................................................... 469 RóĪnoĞci ................................................................................................................................... 469 Spis treĈci 9 Rozdziaä 44. DostöpnoĈè strony WWW ............................................................................471 Kilka prostych zasad ....................................................................................................................... 471 TreĞü umieszczaj jako pierwszą ................................................................................................ 471 Etykietuj kontrolki formularzy .................................................................................................. 472 PamiĊtaj o atrybutach alt ........................................................................................................... 472 Definiuj tytuáy hiperáączy ......................................................................................................... 472 Twórz czytelne tabele ............................................................................................................... 472 Nie otwieraj nowych okien ....................................................................................................... 473 Nie uĪywaj przekierowaĔ meta refresh ..................................................................................... 473 Definiuj powiązania miĊdzy poszczególnymi podstronami witryny ......................................... 473 Stosuj atrybut lang .................................................................................................................... 473 Definiuj skróty i skrótowce ....................................................................................................... 473 Rozdziaä 45. HTML czy XHTML? ......................................................................................475 XHTML zgodny z HTML ............................................................................................................... 475 WielkoĞü liter ............................................................................................................................ 475 Elementy puste i niepuste ......................................................................................................... 476 Znaczniki opcjonalne ................................................................................................................ 477 Cudzysáów otaczający wartoĞci atrybutów ............................................................................... 477 Minimalizacja atrybutów logicznych ........................................................................................ 478 Identyfikator fragmentu ............................................................................................................ 478 Style i skrypty ........................................................................................................................... 478 Encje ......................................................................................................................................... 479 Dokumenty HTML/XHTML w sieci WWW .................................................................................. 479 Content-type .............................................................................................................................. 479 Czy to HTML, czy XHTML? ................................................................................................... 481 Jak przeglądarka traktuje dokument HTML, a jak XHTML? ................................................... 481 Po czym przeglądarka rozpoznaje jĊzyk dokumentu? ............................................................... 482 Nagáówek Content-type dokumentu HTML oraz XHTML ....................................................... 482 Problemy z Internet Explorerem ............................................................................................... 482 Strona XHTML wysyáana jako application/xhtml+xml .................................................................. 483 Zmiana nagáówków wysyáanych przez serwer Apache ............................................................. 483 Wysyáanie nagáówka HTTP w PHP .......................................................................................... 483 Cztery proste zasady ....................................................................................................................... 483 HTML czy XHTML? ...................................................................................................................... 484 Rozdziaä 46. Semantyczny XHTML ..................................................................................485 Witryna WWW widziana oczami czáowieka i robota ..................................................................... 485 Semantyczna sieü ............................................................................................................................ 486 Semantyka kodu XHTML ............................................................................................................... 486 Semantyka przez maáe s .................................................................................................................. 487 Kto ma racjĊ, czyli o braku specyfikacji semantyki XHTML ......................................................... 488 Praktyczne rozwiązania popularnych problemów ........................................................................... 488 Menu witryny ............................................................................................................................ 488 Nawigacja: jesteĞ tutaj .............................................................................................................. 488 Ilustracja ................................................................................................................................... 489 Listing ....................................................................................................................................... 489 ZáoĪenia ........................................................................................................................................... 489 ZáoĪenie: dialog ........................................................................................................................ 490 Bibliografia ............................................................................................................................... 490 Problemy semantyczne XHTML i CSS ........................................................................................... 491 Czy strong jest bardziej semantyczny niĪ b? ................................................................................... 494 Elementy em oraz span ................................................................................................................... 495 Drzewo elementów .......................................................................................................................... 496 Element czysto prezentacyjny ......................................................................................................... 497 10 Spis treĈci Czy wszystkie elementy tekstowe są równowaĪne? ........................................................................ 497 Czy klasa wzbogaca semantykĊ elementu? ..................................................................................... 498 Czy XHTML jest bardziej semantyczny niĪ HTML? ..................................................................... 499 Praktyczne porady dotyczące semantyki ......................................................................................... 499 Skorowidz ......................................................................................................................501 Rozdziaä 7. i Kaskadowe arkusze stylów 91 Rozdziaä 7. Kaskadowe arkusze stylów Struktura a wyglñd dokumentów HTML Wygląd witryn WWW zaleĪy od dwóch czynników: kodu strony napisanego w jĊzyku XHTML oraz for- matu nadawanego przez przeglądarkĊ róĪnym elementom XHTML. StrukturĊ i zawartoĞü dokumentu opisujemy, korzystając z elementów XHTML: m.in. akapitów (p), nagáówków (h1, h2), tabel (table, tr, td, th), sekcji (div) itd. Natomiast format elementów definiujemy w jĊzyku CSS (ang. Cascading Style Sheets — kaskadowe arkusze stylów). Tworząc witrynĊ WWW, musimy wiĊc opisaü:  strukturĊ i zawartoĞü strony (jĊzyk XHTML),  format elementów (jĊzyk CSS). W przypadku braku stylów przeglądarka zastosuje style domyĞlne, które zazwyczaj są doĞü ubogie. Oddzielając definicjĊ formatu elementów od samej zawartoĞci strony, otrzymamy dokument, którego format jest niezaleĪny od zawartoĞci. Gáówną korzyĞcią takiego rozwiązania jest to, Īe wygląd dokumentu mo- Īemy modyfikowaü, nie zmieniając jego treĞci (czyli kodu XHTML). Doäñczanie stylów do dokumentu Style CSS moĪemy doáączyü do dokumentu XHTML na trzy sposoby:  jako style zewnĊtrzne,  jako style wewnĊtrzne,  stosując atrybut style. W pierwszym przypadku style są zapisane w osobnym pliku. W drugim przypadku style znajdują siĊ w nagáówku strony WWW, a wiĊc pomiĊdzy znacznikami head oraz /head . W trzecim przypadku style pojawiają siĊ przy konkretnych elementach XHTML w treĞci strony, czyli pomiĊdzy znacznikami body oraz /body . Style zewnötrzne W pierwszej metodzie style zapisujemy w osobnym pliku. Plik ze stylami ma zazwyczaj rozszerzenie .css. Tak zdefiniowane style doáączamy do dokumentu XHTML, umieszczając w nagáówku strony ele- ment link: link rel= stylesheet href= style.css type= text/css / 92 CzöĈè I i Elementarz NOTH Style zewnötrzne link .../ — Ctrl+B+Z, Ctrl+B+S Po aktywacji skrótu Ctrl+B+Z naciĈnij przycisk F8. Uäatwi Ci on wstawienie nazwy pliku CSS. Witryna skáada siĊ wiĊc z dwóch plików: dokumentu XHTML oraz dokumentu CSS. Listing 7.1 przed- stawia przykáadowy plik index.html, zaĞ listing 7.2 ilustruje zawartoĞü pliku style.css. W kodzie XHTML pojawia siĊ element link z atrybutem href. WartoĞcią atrybutu href jest nazwa pliku ze stylami (w przy- káadzie: style.css). Listing 7.1. Kod XHTML strony WWW stosującej style zewnĊtrzne (plik index.html) !DOCTYPE ... html ... head title Style zewnútrzne /title meta http-equiv= Content-Type content= text/html; charset=utf-8 / link rel= stylesheet type= text/css href= style.css / /head body h1 WITAJ /h1 /body /html Listing 7.2. Style CSS (plik style.css) h1 { margin: 20px; background: blue; color: white; border: 4px solid black; text-align: center; } Zaletą takiego rozwiązania jest to, Īe w jednym miejscu moĪesz modyfikowaü wygląd wszystkich pod- stron witryny. Co wiĊcej, tak wykonana witryna bĊdzie zajmowaáa mniej miejsca i zuĪyje mniej transfe- ru. Style zostaną pobrane z serwera jeden jedyny raz. Kosztem doáączenia stylów do witryny jest jedynie element link dodany na kaĪdej podstronie. Ponadto style zawarte w zewnĊtrznym pliku mogą zawieraü dowolne znaki, takĪe , czy , nie powodując Īadnych komplikacji1. Jest to najlepsza metoda formatowania wyglądu witryny. NaleĪy ją stosowaü w odniesieniu do wiĊkszoĞci witryn przeznaczonych do publikacji w internecie. Style wewnötrzne Style wewnĊtrzne umieszczamy w nagáówku strony WWW, wykorzystując element style: style type= text/css ... tutaj definicja stylów ... /style NOTH Style wewnötrzne style ... ... /style — Ctrl+B+W 1 Specyfikacja XHTML 1.0. punkt C.4. Rozdziaä 7. i Kaskadowe arkusze stylów 93 Listing 7.3 przedstawia kod przykáadowej strony WWW, która stosuje style wewnĊtrzne. W nagáówku witry- ny pojawia siĊ element style, zawierający definicjĊ stylu nagáówka h1. W treĞci witryny, pomiĊdzy znacz- nikami body oraz /body , wystĊpuje element h1, którego wygląd zostanie zmieniony zgodnie ze sty- lami podanymi wewnątrz elementu style. Przykáad ten skáada siĊ z jednego pliku: index.html. Listing 7.3. Style wewnĊtrzne !DOCTYPE ... html ... head title Style wewnútrzne /title meta http-equiv= Content-Type content= text/html; charset=utf-8 / style type= text/css h1 { margin: 20px; background: blue; color: white; border: 4px solid black; text-align: center; } /style /head body h1 WITAJ /h1 /body /html Zaletą tego rozwiązania jest to, Īe w jednym miejscu pojawiają siĊ style i kod XHTML. JeĞli wykonasz na ta- kiej witrynie operacjĊ podglądu Ĩródáa2, to ujrzysz i kod XHTML, i style CSS3. Ponadto tak wykonana witry- na bĊdzie poprawnie wyglądaáa (tj. bĊdzie ozdobiona stylami), gdy zostanie otworzona wewnątrz aplikacji. Na przykáad jeĞli spakujesz kilka tak wykonanych stron, po czym otworzysz spakowane archi- wum programem archiwizującym, to witryna bĊdzie poprawnie wyglądaáa po otworzeniu z wnĊtrza archiwum (bez wypakowywania). Wadą tego rozwiązania jest jego rozmiar: kaĪda podstrona projektu bĊdzie zawieraáa komplet stylów. Ponadto jeĞli zechcesz wykonaü zmianĊ, która obejmie wszystkie podstrony witryny, to bĊdziesz musiaá zmieniü style w kaĪdym pliku z osobna. W praktyce style wewnĊtrzne stosujĊ w odniesieniu do dokumentów, które są pojedynczymi plikami (np. opisy programów umieszczane w spakowanych archiwach). Atrybut style Trzecia metoda definiowania stylów wykorzystuje atrybut style. Atrybut ten moĪe towarzyszyü nie- mal kaĪdemu elementowi XHTML. Zmiana formatu akapitu ma postaü: p style= width: 300px; margin: 20px; background: blue; Witaj /p Atrybut style moĪe byü przydatny w specyficznych okolicznoĞciach. Na przykáad wtedy, gdy nie masz uprawnieĔ do modyfikowania plików CSS na serwerze, a moĪesz modyfikowaü fragment pliku XHTML. Sy- tuacja taka moĪe pojawiü siĊ na przykáad w systemie CMS. UĪytkownik nie ma prawa modyfikowaü Īadnych plików (ani XHTML, ani CSS), ale moĪe w systemie umieszczaü wpisy zawierające — oprócz kodu XHTML — takĪe atrybut style. 2 Opcja Widok/ħródáo w przeglądarce. 3 Usprawnia to m.in. prowadzenie üwiczeĔ z jĊzyków XHTML oraz CSS. Nauczyciel przygotowuje przykáad i umieszcza go w sieci. Uczniowie po wykonaniu operacji podglądu Ĩródáa ujrzą kompletny kod XHTML oraz CSS. 94 CzöĈè I i Elementarz W przypadku, kiedy masz dostĊp do pliku CSS witryny, rozwiązanie takie nie ma sensu. Niektórzy twierdzą nawet, Īe atrybut style jest porównywalny z dawno wycofanym elementem font4. UĪycie atrybutu style w odniesieniu do elementu h1 pokazuje listing 7.4. Listing 7.4. Atrybut style !DOCTYPE ... html ... head title Atrybut style /title meta http-equiv= Content-Type content= text/html; charset=utf-8 / /head body h1 style= margin: 20px; background: blue; color: white; border: 4px solid black; text-align: center; WITAJ /h1 /body /html Rysunek 7.1 przedstawia wygląd opisanej witryny. Trzy podane przykáady, pierwszy ze stylami zewnĊtrz- nymi, drugi stosujący style wewnĊtrzne i trzeci wykorzystujący atrybut style, mają identyczny wygląd. Rysunek 7.1. Wygląd witryny, której kod jest widoczny na listingach 7.1, 7.2, 7.3 i 7.4 DomyĈlny jözyk stylów W chwili obecnej style dokumentów XHTML są opisywane wyáącznie w jĊzyku CSS. Jest to jĊzyk do- myĞlny stosowany przez wszystkie przeglądarki. O jĊzyku stylów mówi atrybut type= text/css zawarty w elementach link (style zewnĊtrzne): link rel= stylesheet href= style.css type= text/css / oraz style (style wewnĊtrzne): style type= text/css ... /style WartoĞü text/css ustala, Īe style są zapisane w jĊzyku CSS. Korzystając z atrybutu style, nie wskazujemy w Īaden sposób, w jakim jĊzyku opisano style: p style= ... Witaj /p 4 Henri Sivonen nazywa atrybut style znacznikiem font w przebraniu (ang. The style attribute is font in disguise.). Por. HTML Syntax Checker in PHP, http://hsivonen.iki.fi/html-syntax-checker/. Rozdziaä 7. i Kaskadowe arkusze stylów 95 Specyfikacja jĊzyka HTML zawiera informacjĊ5 o tym, Īe domyĞlny jĊzyk stylów moĪemy ustaliü nastĊpującym elementem meta: meta http-equiv= Content-Style-Type content= text/css / Jest to jednak zupeánie zbĊdne, gdyĪ jedynym dostĊpnym jĊzykiem opisu stylów jest CSS. Umieszcze- nie powyĪszego elementu meta w kodzie strony nie przynosi Īadnych korzyĞci. Ujmowanie stylów wewnötrznych w komentarz W okresie, gdy implementacja stylów CSS zaczynaáa siĊ pojawiaü w przeglądarkach, tj. w latach 1995 – 2000, element style sprawiaá pewien káopot. JeĞli przeglądarka go nie rozumiaáa, to mogáa podaną w nim zawartoĞü wyĞwietliü na stronie wraz z tekstem. Zabezpieczeniem przed takim niepoĪądanym dziaáa- niem byáo stosowanie komentarzy w kodzie HTML. Caáą zawartoĞü elementu style umieszczano w ko- mentarzu: PRZYKàAD NIEPOPRAWNY style type= text/css !-- p { font-family: Georgia, serif; } -- /style Obecnie takie postĊpowanie nie tylko nie przynosi Īadnej korzyĞci, ale takĪe moĪe powodowaü, Īe style nie bĊdą dziaáaáy6. PowyĪszy przykáad naleĪy zapisywaü jako: style type= text/css p { font-family: Georgia, serif; } /style çwiczenie 7.1 Wykonaj stronĊ WWW zawierającą jeden akapit z tekstem Lorem ipsum. Stosując style zewnĊtrzne, sformatuj akapit tak, by miaá duĪy margines oraz niebieską, wytáuszczoną czcionkĊ Georgia po- dwójnej wielkoĞci. Wykorzystaj style z listingu 7.5. Listing 7.5. Style do üwiczenia 7.1 p { margin: 100px; font-family: Georgia, serif; font-size: 200 ; font-weight: bold; color: blue; } çwiczenie 7.2 Wykonaj stronĊ WWW zawierającą jeden akapit z tekstem Lorem ipsum. Stosując style wewnĊtrzne, sfor- matuj akapit tak, by miaá duĪy margines oraz niebieską, wytáuszczoną czcionkĊ Georgia podwójnej wiel- koĞci. Wykorzystaj style z listingu 7.5. 5 Specyfikacja HTML 4.01, punkt 14.2.1. 6 Specyfikacja XHTML 1.0, rozdziaá C.4. 96 CzöĈè I i Elementarz çwiczenie 7.3 Wykonaj stronĊ WWW zawierającą jeden akapit z tekstem Lorem ipsum. Style podane na listingu 7.5 przypisz do elementu p, wykorzystując atrybut style. NOTH Szablon pustej strony WWW bez stylów CSS — Ctrl+B+1 Szablon pustej strony WWW ze stylami wewnötrznymi — Ctrl+B+2 Szablon pustej strony WWW ze stylami zewnötrznymi — Ctrl+B+3 Skorowidz A absolute-relative, Patrz pozycjonowanie kontekstowe Adobe WebType, 138 adres bazowy, 314 Ajax, 311 akapit, 71, 91, 176, 279 Alpha Geometrique, 131 alternate text, Patrz atrybut alt Andale Mono, 138 animacja, 270 Apache, 57, 483 aplet, 313 apostrof, 29 Arial, 103, 129, 130, 138 arkusz stylów, 17, 61, 78, 87, 97, 139, 418, 419 ASCII, 27 atrybut, 25, 28, 145, 146, 414, 475 abbr, 295 accept, 436, 440 accept-charset, 436 accesskey, 433, 438, 440, 441, 448 action, 436 alt, 28, 32, 264, 306, 440, 472 axis, 295 background, 99 border, 280, 294 cellhalign, 295 cellpadding, 294 cellspacing, 294 cellvalign, 295 checked, 440, 442 class, 30, 111, 112, 115, 412, 431, 433, 498 cols, 447 colspan, 286, 295 coords, 306 dir, 30, 431, 432, 433 disabled, 438, 440, 441 dotyczący aktywnego punktu, 431, 433 enctype, 436, 437 fieldset, 438 font-size, 103 font-style, 103 font-weight, 103 for, 448 frame, 294 headers, 283, 295, 473 height, 266 href, 32, 92, 300, 301, 306 http-equiv, 464 id, 28, 30, 113, 115, 283, 431, 433, 437, 473, 478 ismap, 440 jĊzykowy, 431, 433 kolejnoĞü, 30 label, 438, 446 lang, 30, 34, 41, 52, 412, 431, 432, 433, 465, 468, 473 legend, 438 line-height, 104 link, 468 logiczny, 30, 31, 442, 478 area, 31 button, 31 img, 31 input, 31 object, 31 optgroup, 31 option, 31 script, 31 select, 31 textarea, 31 maxlength, 440, 441 media, 419, 421 method, 31, 436, 438 multiple, 446 name, 436, 438, 440, 441, 442, 464, 466, 478 ogólny, 433, 436, 441 502 Skorowidz atrybut onblur, 434, 440 onchange, 440 onclick, 30, 432, 433 ondblclick, 30, 432, 433 onfocus, 434, 440 onkeydown, 30, 432, 433 onkeypress, 432, 433 onkeyup, 30, 432, 433 onmousedown, 30, 432, 433 onmousemove, 432, 433 onmouseout, 30, 432, 433 onmouseover, 30 onmousepress, 30 onmouseup, 30, 432, 433 onreset, 436, 437 onselect, 440 onsubmit, 436, 437 readonly, 438, 440, 441 rel, 422, 450, 455 rows, 447 rowspan, 286, 295 rules, 294 scope, 283, 295, 473 shape, 306 size, 440, 441, 446 span, 295 src, 17, 28, 264, 440 style, 30, 91, 93, 94, 431, 433, 468 summary, 285, 294, 473 tabindex, 433, 438, 440, 441 target, 305, 473 title, 30, 251, 300, 303, 422, 431, 433, 472, 473 type, 94, 439, 440, 444 usemap, 440 value, 438, 440, 441 wartoĞü, 477 width, 266, 294 wyliczeniowy, 30, 31, 475 align, 32 dir, 32 frame, 32 method, 32 rules, 32 scope, 32 type, 32 valign, 32 valuetype, 32 xml:lang, 34, 41, 52, 431, 432, 433, 473 zasadniczy, 431, 433 zdarzenie, 431, 432 attrs, Patrz atrybut ogólny B BackCompat, 63 biaáe znaki, 24, 28, 72, 85, 99, 100, 103, 111, 139 interpretacja, 150 bieĪąca pozycja, 488 Bitstream Vera Mono, 138 Bitstream Vera Sans, 138 blok, 97, 175 blok deklaracji, 97 border, Patrz obramowanie box, 175 box model, 175 C Carefree, 135, 136 Çelik Tantek, 487, 489 character references, Patrz znaki specjalne Charcoal, 138 Chess Kingdom, 131 Chicago, 138 Chrome, 14, 17, 62, 77 classitis, 115 Comic Sans MS, 131, 138 content, Patrz zawartoĞü core attribute, Patrz atrybut zasadniczy Core fonts for the Web, 138, 139, 146 Core Fonts for the Web, 103 Courier, 138 Courier New, 103, 130, 138 Critter, 131 CSS Color Module Level 3, 106 CSS1Compat, 63 cudzysáów, 29, 32, 80, 103, 252 cursive, Patrz czcionka odrĊczna cyrylica, 45 cytat, 252 blockquote, 249, 490 cite, 490 q, 249 czcionka, 80, 103, 129, 135, 146 bezszeryfowa, 103, 129, 138, 139 fantazyjna, 131, 139 gruboĞü, 148 nieproporcjonalna, 85, 130, 138, 139 o staáej szerokoĞci, Patrz czcionka nieproporcjonalna odrĊczna, 131, 139 ornamentowa, 131 osadzanie, 141, 145 pochylona, 131 proporcjonalna, 130 specjalna, 131, 138 szeryfowa, 103, 129, 138, 139 czyszczenie, 193, 224, 359, 361 Skorowidz 503 D data powstania, 467 data waĪnoĞci, 467 declaration, Patrz deklaracja declaration block, Patrz blok deklaracji definicja dd, 256 definicja typu dokumentu, 33 definition list, Patrz lista definicji deklaracja, 97, 100 DOCTYPE, 33, 61, 481, 482 dialekt XHTML, 33 Diavlo, 135, 136 dingbat, Patrz czcionka ornamentowa doctype sniffing, 65 doctype switching, 65 dopeánienie, 175, 176, 177 druk, 419 drzewo dokumentu DOM, 289 drzewo elementów, 496 Dublin C
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML, XHTML i CSS. Praktyczne projekty. Wydanie II
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: