Danowski B. - Wstęp do HTML5 i CSS3.pdf

dareks_ EBooki Infornatyka

Użytkownik dareks_ wgrał ten materiał 6 lata temu.

Komentarze i opinie (0)

Transkrypt ( 25 z dostępnych 292 stron)

STRONA 2

Spis treści Wstęp .............................................................................................. 7 Rozdział 1. Podstawowe informacje .................................................................... 9 Czym jest internet .............................................................................................................9 Czego potrzebujemy do tworzenia stron WWW ............................................................ 10 Rozdział 2. Wprowadzenie do HTML5 ............................................................... 15 Podstawowe różnice pomiędzy HTML5 a HTML4 ........................................................ 15 Elementy języka HTML5 ............................................................................................... 16 Znaczniki i atrybuty ................................................................................................. 16 Podstawowa struktura dokumentu ............................................................................ 17 Nagłówek dokumentu ............................................................................................... 18 Ciało i sekcje dokumentu HTML ............................................................................. 24 Elementy blokowe .................................................................................................... 26 Elementy wstawiane ................................................................................................. 36 Elementy osadzone (grafika, multimedia, aplikacje) ................................................ 44 Hiperłącza ................................................................................................................ 56 Tabele ....................................................................................................................... 66 Formularze ............................................................................................................... 74 Komentarze .............................................................................................................. 91 Rozdział 3. Wprowadzenie do CSS3 .................................................................. 93 Podstawowe pojęcia ....................................................................................................... 94 Budowa stylu ............................................................................................................ 94 Osadzanie stylów na stronie ..................................................................................... 95 Jednostki miar stosowane w CSS ............................................................................. 99 Nazewnictwo kolorów używane w CSS ................................................................. 101 Moduły ................................................................................................................... 103 Selektory ....................................................................................................................... 105 Selektory proste ...................................................................................................... 105 Selektory uniwersalne ............................................................................................ 105 Selektory „potomka” .............................................................................................. 107 Selektory „dziecka” ................................................................................................ 108 Selektory „rodzeństwa” .......................................................................................... 109 Selektor ogólnego rodzeństwa ................................................................................ 109 Selektor atrybutu .................................................................................................... 110 Selektor atrybutu z możliwością dopasowania ciągu znaków ................................ 111 Identyfikatory ......................................................................................................... 113 Klasy ...................................................................................................................... 114

STRONA 3

4 Wstęp do HTML5 i CSS3 Pseudoklasy ............................................................................................................ 115 Pseudoelementy ...................................................................................................... 136 Grupowanie selektorów .......................................................................................... 139 Dziedziczenie ............................................................................................................... 140 Kaskadowość ................................................................................................................ 143 Właściwości tekstu ....................................................................................................... 145 Wyrównanie tekstu ................................................................................................. 145 Pionowe wyrównanie ............................................................................................. 146 Wcięcie pierwszego wiersza akapitu ...................................................................... 147 Odstępy pomiędzy literami ..................................................................................... 148 Odstępy pomiędzy wyrazami ................................................................................. 149 Odstępy między liniami .......................................................................................... 150 Łamanie długiego ciągu znaków ............................................................................ 151 Dekoracja tekstu ..................................................................................................... 152 Przekształcanie — małe i duże litery ..................................................................... 152 Kontrola pustej przestrzeni ..................................................................................... 153 Cieniowanie tekstu ................................................................................................. 154 Właściwości czcionki ................................................................................................... 155 Rodzina czcionek ................................................................................................... 155 Rozmiar czcionki .................................................................................................... 158 Waga czcionki ........................................................................................................ 158 Style czcionki ......................................................................................................... 160 Wariant czcionki .................................................................................................... 161 Osadzanie czcionki na stronie ................................................................................ 161 Zbiorczy zapis właściwości czcionki ..................................................................... 162 Właściwości list ............................................................................................................ 163 Typ listy ................................................................................................................. 163 Dowolny obraz jako wypunktowanie listy ............................................................. 166 Zawijanie tekstu ..................................................................................................... 167 Zbiorczy zapis właściwości list .............................................................................. 167 Kolor, tło i przezroczystość .......................................................................................... 168 Nowe modele barw i przeźroczystości w CSS3 ..................................................... 168 Kolor elementu ....................................................................................................... 172 Kolor tła ................................................................................................................. 172 Element graficzny jako tło ..................................................................................... 174 Rozmiar tła ............................................................................................................. 175 Zatrzymanie tła ....................................................................................................... 176 Kontrola powielania tła .......................................................................................... 176 Pozycjonowanie tła ................................................................................................ 178 Wieloelementowe tło .............................................................................................. 180 Kontrola styku tła i obramowania .......................................................................... 181 Zbiorczy zapis właściwości tła ............................................................................... 182 Marginesy, obramowanie i dopełnienia ........................................................................ 182 Pudełkowy model formatowania elementów .......................................................... 182 Marginesy ............................................................................................................... 183 Dopełnienie ............................................................................................................ 186 Obramowanie ......................................................................................................... 188 Wymiary ................................................................................................................. 193 Tabele ........................................................................................................................... 194 Odstępy we wnętrzu tabeli ..................................................................................... 197 Pojedyncze obramowanie ....................................................................................... 197 Kontrola pustych komórek ..................................................................................... 198 Generowanie tabeli ................................................................................................. 199 Podpis tabeli ........................................................................................................... 200

STRONA 4

Spis treści 5 Pozycjonowanie elementów ......................................................................................... 200 Rodzaje pozycjonowania ........................................................................................ 201 Określanie pozycji .................................................................................................. 204 Warstwy ................................................................................................................. 204 Pływanie i tamowanie elementów ................................................................................ 206 Pływanie elementów .............................................................................................. 206 Tamowanie elementów ........................................................................................... 208 Efekty wizualne ............................................................................................................ 209 Kadrowanie ............................................................................................................ 209 Ukrywanie elementów ............................................................................................ 210 Sterowanie wymiarowanymi elementami ............................................................... 211 Interfejs użytkownika ................................................................................................... 213 Kursory ................................................................................................................... 213 Kontury elementów ................................................................................................ 213 Zawartość generowana i liczniki .................................................................................. 215 Zawartość generowana ........................................................................................... 215 Liczniki .................................................................................................................. 216 Cytaty ........................................................................................................................... 219 Rozdział 4. Poznaj możliwości HTML5 i CSS3 na konkretnym przykładzie ......... 221 Szkielet strony .............................................................................................................. 221 Obstylowanie ................................................................................................................ 224 Walidacja ...................................................................................................................... 228 Dodatek ....................................................................................... 233 Zestawienie znaczników HTML5 ................................................................................. 233 Standardowe atrybuty języka HTML5 .......................................................................... 251 Zestawienie właściwości stylów CSS3 ......................................................................... 253 Właściwości tekstu ................................................................................................. 253 Właściwości czcionki ............................................................................................. 257 Właściwości list ..................................................................................................... 258 Kolor i tło ............................................................................................................... 259 Marginesy ............................................................................................................... 261 Dopełnienie ............................................................................................................ 263 Obramowanie ......................................................................................................... 264 Wymiary ................................................................................................................. 270 Tabele ..................................................................................................................... 272 Pozycjonowanie elementów ................................................................................... 273 Efekty wizualne ...................................................................................................... 275 Drukowanie ............................................................................................................ 276 Interfejs użytkownika ............................................................................................. 278 Zawartość generowana i liczniki ............................................................................ 279 Podsumowanie ............................................................................. 281 Skorowidz .................................................................................... 283

STRONA 5

6 Wstęp do HTML5 i CSS3

STRONA 6

Wstęp W ostatnich latach nastąpił prawdziwy rozkwit internetu, który z sieci przeznaczonej dla prostych usług (strony WWW, poczta e-mail, grupy dyskusyjne, IRC) przeobraził się w najważniejsze medium współczesności, które pozwala na udostępnianie rozbudo- wanych aplikacji sieciowych o różnorakim przeznaczeniu, transmisję obrazu i dźwię- ku czy wymianę plików. Dynamiczny rozwój internetu wynika z wielu rzeczy, ale do najważniejszych czynników należy zaliczyć: popularyzację szybkiego dostępu do internetu w gospodarstwach domowych oraz wzrost przepustowości i szybkości całego internetu, nowe rozwiązania programistyczne, które pozwalają na tworzenie bardziej rozbudowanych i skomplikowanych usług sieciowych. Dzisiaj do tworzenia całych platform internetowych nie wystarczy znajomość podstaw starszej wersji języka HTML czy kaskadowych arkuszy stylów. Bardzo często niezbęd- ne są JavaScript, języki PHP czy ASP, znajomość baz danych, Adobe Flash czy róż- nych mniej lub bardziej oryginalnych połączeń innych technologii. Każde z wymienionych i niewymienionych rozwiązań ma swoje wady i zalety, dzięki którym w jednych zastosowaniach sprawdza się lepiej, a w innych gorzej. Prawdę mó- wiąc, nie ma technologii idealnych i uniwersalnych, ale są takie, które lepiej lub gorzej nadają się do realizacji konkretnych zadań. Na szczęście twórcy różnych rozwiązań wykorzystywanych we współczesnym internecie mają świadomość ułomności swoich produktów i ciągle dążą do ich udoskonalania. Tym sposobem po HTML4 mieliśmy HTML4.01, po CSS1 był CSS2, a później wszyscy zachwycali się językiem XHTML. Teraz przyszła pora na następne zmiany i w światku webmasterskim zaczyna być gło- śno o nowych odsłonach HTML i CSS. Mam tutaj na myśli HTML5 oraz CSS3. HTML5 to efekt zaprzestania rozwijania języka XHTML2, powrotu do korzeni i po- dążania drogą, której kierunek wytyczył HTML4. Kolejna odsłona języka HTML jest kompatybilna wstecz z jego poprzednią wersją, ale wprowadza również nowe elementy, odpowiedzialne m.in. za usprawnianie tworzenia rozbudowanych stron WWW i aplikacji internetowych. Wyjaśnia też większość niejasności, które są wynikiem błędów i prze- oczeń w specyfikacji HTML4. Najważniejsze nowości HTML5 wymieniłem poniżej:

STRONA 7

8 Wstęp do HTML5 i CSS3 Zawiera nowe elementy i znaczniki. Usunięto z niego przestarzałe elementy, np. i . Usprawnia obsługę błędów podczas parsowania HTML. Usprawnia obsługę formularzy, dodaje m.in. możliwość sprawdzania wprowadzanych danych oraz daje możliwość deklarowania obowiązkowych pól. Wprowadza obsługę elementów multimedialnych i graficznych, np.

STRONA 8

Rozdział 1. Podstawowe informacje Zanim zajmiemy się tworzeniem stron w oparciu o język HTML5 i CSS3, niezbędne jest krótkie wprowadzenie, które pozwoli Ci odpowiednio przygotować się do tego, co czeka Cię w kolejnych rozdziałach niniejszej książki. Czym jest internet Ocena i jakakolwiek charakterystyka internetu jest dość trudna. Dlatego spróbuję opi- sać, czym jest internet w moim odczuciu. Otóż kilkanaście lat temu, gdy stawiałem swoje pierwsze kroki na „cybernetycznej drodze”, uważałem, że to kolejna chwilowa moda i kwestią czasu jest, by pomysł umarł i zniknął z naszego globu. Dzisiaj, gdy po- myślę, jaki byłby świat bez dostępu do sieci i oferowanych przez nią możliwości, nie potrafię w nim znaleźć miejsca dla siebie. Dzięki internetowi mogę na bieżąco śledzić notowania giełdowe, czytać poranne gazety, zarządzać swoimi pieniędzmi, a w końcu pracować i pisać książki. Nie wyobrażam sobie chwili, w której ktoś wyjmie wtyczkę i sieć zgaśnie — straciłbym pracę, błyskawiczny dostęp do informacji, a nawet wielu przyjaciół. Czasem zastanawiam się, czy już nie jestem uzależniony i nie powinienem się leczyć w specjalistycznych poradniach, ale mam nadzieję, że tak nie jest — bo prze- cież straciłbym wtedy dostęp do sieci. W moim odczuciu internet to jedno z największych osiągnięć współczesnej cywilizacji. Potrafię sobie wyobrazić świat bez ciepłej wody, restauracji czy samochodu, ale nie widzę możliwości jego istnienia bez sieci. Oczywiście opisane zalety nie wyczerpują zagadnienia i zupełnie pomijają drugi aspekt sprawy. Mam tutaj na myśli fakt, że internet pozwala nam również aktywnie w nim zaistnieć i pozostawić cząstkę siebie. Jeżeli poznamy język HTML i przyswoimy sobie podstawy korzystania z sieci, to możemy brać aktywny udział w jej tworzeniu, rozra- staniu się — nasza praca będzie jak tlen niezbędny do życia.

STRONA 9

10 Wstęp do HTML5 i CSS3 Łatwość dostępu do sieci i prostota korzystania z niej umożliwiają każdemu prowadzenie własnej strony domowej zawierającej informacje o jego zainteresowaniach czy rodzi- nie, a nawet stworzenie prawdziwej elektronicznej gazety. W sieci nie mamy żadnych ograniczeń i jeżeli tylko chcemy, to możemy zrobić wszystko. Prowadzenie poczytne- go portalu czy strony o hodowli rybek akwariowych to tylko dwie z wielu możliwo- ści. Wszystko ogranicza się do języka HTML, a bardzo często prowadzi do spełnienia marzeń. Wielu autorów doskonałych serwisów zarobiło dzięki nim spore pieniądze lub otrzymało ciekawe propozycje pracy. Znasz już moje zdanie na temat sieci. Zakładam, że skoro kupiłeś tę książkę, to miałeś bądź masz styczność z internetem i zainteresowało Cię tworzenie własnych, dobrze wyglądających i działających stron WWW, a do tego interesują Cię najnowsze trendy i specyfikacje. Czego potrzebujemy do tworzenia stron WWW Dokument wykorzystujący język HTML5 oraz CSS3 jest zwykłym plikiem tekstowym, czyli do wykonania strony nie jest nam potrzebny żaden specjalny program ani środo- wisko programistyczne — wystarczy zwykły edytor tekstu, np. Notatnik, będący czę- ścią składową każdego systemu MS Windows. Niestety, Notatnik jest niezwykle prostym edytorem tekstowym i nie oferuje wsparcia dla języka HTML czy CSS, więc wymaga szczególnej dbałości o wpisywany kod. Przy tworzeniu strony w Notatniku nietrudno o liczne błędy oraz przeoczenia, dlatego pod- czas regularnej pracy nad stroną WWW warto sięgnąć po wyspecjalizowane narzędzia. Najważniejsze cechy, jakimi powinien charakteryzować się dobry edytor tekstowy, to: domykanie znaczników, kolorowanie składni, kodowanie polskich znaków w standardzie UTF, kreatory ułatwiające generowanie części kodu, sprawdzanie poprawności wygenerowanego kodu. Na rynku możemy znaleźć wiele bardzo dobrych i godnych polecenia edytorów tek- stowych. Dlatego ostatecznie zdecydowałem się nie proponować konkretnego, a jedy- nie przedstawić wykaz kilku ciekawych rozwiązań, które, moim zdaniem, zasługują na uwagę. Pragnę nadmienić, że wszystkie wybrane edytory są aplikacjami darmowymi. First Page 2006 — bardzo rozbudowany edytor stron WWW, który pozwala na pracę nad stroną w trybie tekstowym oraz graficznym. Warto zwrócić uwagę na to, że posiada on mechanizm domykania znaczników, kolorowania składni oraz wygodne podpowiedzi. Duży plus należy się autorowi za dodanie

STRONA 10

Rozdział 1. ♦ Podstawowe informacje 11 dziesiątek kreatorów, ułatwiających stworzenie bardziej skomplikowanego elementu na stronie. Prezentowane narzędzie wspiera pracę z kodem XHTML i HTML. Strona domowa edytora to http://www.evrsoft.com/. Minusem jest brak polskiej wersji językowej. PSPad — zaawansowany edytor programistyczny, obsługujący wiele języków programowania, w tym HTML (także HTML5), XHTML i CSS. Posiada on wszystkie niezbędne udogodnienia ułatwiające pracę, został też wyposażony przez autora w moduł sprawdzania pisowni — również polskiej. Zaletami są polskojęzyczny interfejs i wygoda obsługi. Warto również wspomnieć o sprawdzaniu poprawności kodu i obsłudze wielu dodatków, które można pobrać ze strony domowej — http://www.pspad.com/en/. Nowoczesna strona nie może obejść się już dzisiaj bez elementów graficznych. Dlatego myśląc poważnie o przygotowaniu swojej pierwszej strony, powinieneś zaopatrzyć się w odpowiednie narzędzie (lub narzędzia) graficzne. Musisz wiedzieć, że na rynku istnieje wiele bardzo dobrych i profesjonalnych programów do obróbki grafiki, np. Adobe Photoshop, ale niestety wszystkie mają jedną podstawową wadę — wysoką cenę. Na szczęście można znaleźć darmowe lub tanie zamienniki wymienionych powyżej aplikacji. Poniżej wymieniłem kilka darmowych rozwiązań, które powinny Cię zainteresować ze względu na oferowane możliwości. Paint.NET — jest bardzo rozbudowanym edytorem grafiki rastrowej. Program jest rozwijany przez studentów Uniwersytetu Waszyngtona, a dodatkowo wspierany przez firmę Microsoft. Pozwala on na obrabianie różnego rodzaju grafiki rastrowej. Wspiera korzystanie z warstw, wielopoziomową opcję cofania zmian oraz efekty specjalne. Do wymienionych zalet należy doliczyć przejrzysty interfejs oraz możliwość instalacji innych wersji językowych. Niestety, polska wersja programu nie jest jeszcze dostępna. Strona domowa programu to http://www.getpaint.net/. GIMP — jest darmowym narzędziem do obróbki grafiki rastrowej. Za pomocą tego programu możesz edytować zawartość zdjęć lub tworzyć własne grafiki, na przykład na potrzeby projektowanej strony WWW. GIMP oferuje wiele zaawansowanych funkcji, a do najważniejszych można zaliczyć: obsługę warstw, wykorzystanie ogromnej liczby wtyczek, możliwość tworzenia własnych makr oraz wiele innych. Warto również wspomnieć o rozbudowanej selekcji, pracy z kanałami alfa, obsłudze antyaliasingu, skalowaniu i przekształcaniu obrazów, wsparciu dla animowanych gifów, tworzeniu map odnośników czy łączeniu tekstu z grafiką. Wśród obsługiwanych formatów graficznych znajdują się m.in. JPEG, BMP, PNG, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, GIF. Program dostępny jest m.in. w polskiej wersji językowej, a w połączeniu z nakładką GIMPShop — http://www.gimpshop.com/ — obsługa aplikacji jest zbliżona do Adobe Photoshop, ponieważ układ menu i skróty klawiszowe są identyczne. Warto również wspomnieć o tym, że GIMP dostępny jest w wersjach dla różnych systemów operacyjnych. Można go pobrać ze strony http://www.gimp.org. DrawPlus 4 — to bardzo funkcjonalne narzędzie do tworzenia grafiki wektorowej. Program posiada wiele rozwiązań niezbędnych podczas pracy

STRONA 11

12 Wstęp do HTML5 i CSS3 z tego typu grafiką, a do tego ma bardzo przyjazny interfejs. Należy wspomnieć o tym, że aplikacja pozwala na pracę z wykorzystaniem warstw, grupowanie elementów oraz zamianę tekstu na krzywe. Ciekawostką jest również, że dzięki niej możemy przygotować animacje, a wyniki pracy wyeksportować do kilku popularnych formatów rastrowych. Program można pobrać ze strony http://www.freeserifsoftware.com. Niestety, polska wersja językowa nie jest dostępna. Ostatnim ważnym elementem niezbędnym podczas tworzenia stron WWW jest prze- glądarka. Po wielu latach posuchy i braku konkurencji na rynku możemy cieszyć się sporym wyborem różnych przeglądarek stron WWW. Lista widoczna poniżej jest spo- ra, ale musisz mieć świadomość, że nie wszystkie przeglądarki (nawet w najnowszych wersjach) wspierają robocze wersje specyfikacji HTML5 i CSS3. Google Chrome — http://www.google.com/chrome/?hl=pl Mozilla Firefox — http://www.mozilla.com/pl/ Opera — http://www.opera.com/portal/choice/?language=pl Safari — http://www.apple.com/pl/safari/ Internet Explorer — http://www.microsoft.com/poland/windows/products/ winfamily/ie/ Na rysunku 1.1 przestawiłem wykres udziału przeglądarek w rynku. Prezentowany po- dział odbył się na podstawie silników przeglądarek, dlatego należy Ci się wyjaśnienie odnośnie tego, które przeglądarki używają konkretnych silników. Rysunek 1.1. Wykres popularności przeglądarek — podział według silników. Opracowane na podstawie danych witryny GemiusRanking http://ranking.pl

STRONA 12

Rozdział 1. ♦ Podstawowe informacje 13 Gecko — silnik używany przez przeglądarki z rodziny Mozilla Firefox, MSIE — przeglądarka Microsoft Internet Explorer, Opera — silnik przeglądarki Opera, WebKit/KHTML — silnik stosowany m.in. w przeglądarkach Google Chrome i Apple Safari. Aktualny stan obsługi języków HTML5 i CSS3 przez przeglądarki z rozbiciem na konkretne wersje można sprawdzić na stronie http://www.findmebyip.com/litmus/ #target-selector. Na dzień dzisiejszy sytuacja wygląda tak, że najlepsze wsparcie dla nowych standardów oferują przeglądarki wykorzystujące silnik WebKit/KHTML oraz Opera i Mozilla Firefox. Jednak musisz mieć świadomość, że pojawienie się kolejnych wersji przeglądarek może tutaj sporo zmienić. Taki stan rzeczy może trwać jeszcze wiele lat i ukończenie specyfikacji obu języków nie musi go zmienić.

STRONA 13

14 Wstęp do HTML5 i CSS3

STRONA 14

Rozdział 2. Wprowadzenie do HTML5 Niniejszy rozdział ma na celu zapoznanie się z historią języka HTML, jego strukturą, najważniejszymi elementami oraz nowościami wprowadzonymi w propozycji piątej wersji specyfikacji. Innymi słowy, po zakończeniu lektury będziesz umiał zbudować szkielet swojej własnej strony, którą następnie upiększysz za pomocą kaskadowych arkuszy stylów. Aby nie przedłużać wstępu, proponuję, abyś zaopatrzył się w edytor, przeglądarkę i możemy zabierać się za poznawanie piątej wersji języka HTML. Podstawowe różnice pomiędzy HTML5 a HTML4 Nowa odsłona języka HTML5 wprowadza szereg zmian i różnic w stosunku do po- przednich wersji HTML4. Wszystkie istotne zmiany i nowości opisałem w dalszej części niniejszego podrozdziału. Wydaje mi się, że znajomość najważniejszych różnic i nowości jest kluczem do swobodnego poznawania samego języka HTML5. Kompatybilność — język HTML5 jest zgodny z poprzednią wersją specyfikacji oznaczoną numerem 4. W praktyce oznacza to, że strona WWW napisana w oparciu o nową wersję HTML będzie działać na przeglądarkach, które nie potrafią obsługiwać tego języka. Oczywiście nowe znaczniki i elementy zostaną zignorowane, ale główny szkielet witryny oraz znaczniki znane z poprzednich specyfikacji zadziałają poprawnie. Brak przestarzałych znaczników — propozycja nowej wersji specyfikacji języka HTML usuwa wiele zbędnych i przestarzałych znaczników. W dużym uproszczeniu możemy przyjąć, że wszelkie znaczniki odpowiedzialne za formatowanie wyglądu witryny oraz mające negatywny wpływ na jej funkcjonalność zostały usunięte, ponieważ ich funkcję przejęły kaskadowe arkusze stylów. Usunięte znaczniki to m.in.: , ,

,, , , , , , , .</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 15</label></header><p class="padding-10">16 Wstęp do HTML5 i CSS3 Uproszczenie zapisu — nowa odsłona specyfikacji wprowadza liczne uproszczenia w zapisie znaczników oraz ich atrybutów. Na przykład w tej chwili określenie strony kodowej wygląda następująco: <meta charset="UTF-8" />. Dla porównania ten sam zapis w poprzedniej wersji specyfikacji miał postać<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />. Uproszczeń jest oczywiście więcej i szczegółowe informacje na ich temat znajdziesz w kolejnych podrozdziałach. Nowe znaczniki i atrybuty — jak łatwo się domyślić, nowa specyfikacja języka HTML to również propozycje nowych znaczników, które mają uprościć i zwiększyć kontrolę nad szkieletem strony. Wśród nowych znaczników warto wspomnieć m.in. o: <section>, <article>, <header>, <footer>, <nav>, <dialog>,<aside>, <figure>. Znaczników i atrybutów jest więcej i szczegółowe informacje na ich temat znajdziesz w kolejnych podrozdziałach. API — rozwiązanie to pozwala na uproszczenie tworzenia rozbudowanych aplikacji internetowych (przykładem takiej aplikacji jest np. Google Docs). Teraz już możemy spokojnie zająć się poznawaniem języka HTML5. Elementy języka HTML5 Pora poznać konkretne znaczniki, ich atrybuty oraz strukturę dokumentu, który wyko- rzystuje propozycje znajdujące się w piątej specyfikacji języka HTML. Zanim zaczniesz testować opisane poniżej elementy, upewnij się, że na Twoim komputerze zainstalowa- no najnowszą wersję jednej z wiodących przeglądarek. W dalszej części będę korzy- stać z różnych przeglądarek, ponieważ musisz mieć świadomość, że nie każdy nowy znacznik działa poprawnie w każdej przeglądarce. O ewentualnych różnicach i proble- mach będę Cię informował, gdy zajdzie taka potrzeba. Znaczniki i atrybuty Każdy dokument HTML składa się ze znaczników, które są zapisywane w nawiasach kątowych i wyglądają mniej więcej tak: <znacznik>. Znaczniki pojawiają się prawie zawsze parami, tzn. występuje znacznik otwierający oraz znacznik zamykający:<znacznik otwierający></znacznik zamykający>W praktyce może to wyglądać mniej więcej tak:<p>Przykład akapitu.</p>Jak widać, znacznik zamykający po nawiasie kątowym zawiera jeszcze „/”. Każdy znacznik otwierający może mieć szereg dodatkowych elementów — atrybutów — określających jego właściwości, np. formatowanie wyglądu za pomocą CSS. Właści- wości atrybutów obowiązkowo powinny zostać zapisane w cudzysłowie " ".<p class="cytat">Przykład akapitu.</p></p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 16</label></header><p class="padding-10">Rozdział 2. ♦ Wprowadzenie do HTML5 17 Znaczniki zamykające nigdy nie zawierają dodatkowych parametrów. Wspomniałem już o tym, że znaczniki prawie zawsze występują w parach: znacznik otwierający i znacznik zamykający. Jest jednak kilka wyjątków od tej zasady. Typowe przykłady, z którymi się spotkasz, to: <br />, <hr />, <img />, <meta />, <link />, <base />. Zwróć uwagę na to, że w przypadku gdy znacznik nie posiada swojej domykającej pary, znak „/” pojawia się przed domykającym nawiasem kątowym. W przypadku starszych specyfikacji języka HTML znaczniki i atrybuty możemy wpisy- wać, używając zarówno dużych, jak i małych liter. Wyjątkiem są te elementy, które zawierają odwołania do innych plików; tu nazwa pliku musi być pisana dokładnie tak samo, jak wygląda w rzeczywistości. W nowej odsłonie zaleca się stosowanie zapisu opartego wyłącznie o małe litery. W przypadku atrybutów wartości występujące po znaku równości należy zawsze za- pisywać, używając cudzysłowu. Podstawowa struktura dokumentu Każdy dokument HTML ma ściśle określony szkielet, który nie zmienia się w zależ- ności od zawartości strony. Oczywiście szkielet dla strony zbudowanej na podstawie HTML5 różni się od tego wykorzystywanego w stronach korzystających z wcześniej- szych wersji języka HTML czy XHTML. Opierając się na poniższym przykładzie, przeprowadzę analizę podstawowej struktury witryny wykonanej w zgodzie z zalece- niami nowej specyfikacji.<!doctype html><html><head></head><body></body></html>Pierwszym wspólnym i obowiązkowym elementem szkieletu strony jest wpis określa- jący rodzaj języka wykorzystanego do jej stworzenia. W przypadku strony wykorzy- stującej język HTML5 pierwszy wpis przybiera następującą postać:<!doctype html>W poprzedniej wersji języka HTML, oznaczonej numerem 4.01, zapis miał znacznie bardziej skomplikowaną i rozbudowaną postać. Listing widoczny poniżej pokazuje przykład zapisu stosowanego w przypadku strony dokładnie trzymającej się specyfi- kacji HTML 4.01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Warto w tym miejscu nadmienić, że równolegle istniały jeszcze inne zapisy, stosowane w przypadku stron korzystających z ramek czy określające swobodne wykorzystanie wytycznych HTML 4.01. Na szczęście wraz z propozycją nowej wersji specyfikacji uproszczono zapis, dzięki czemu łatwiej go zapamiętać i jest on dużo czytelniejszy.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 17</label></header><p class="padding-10">18 Wstęp do HTML5 i CSS3 Kolejnym obowiązkowym elementem w strukturze dokumentu jest znacznik <html></html>, który odpowiada za określenie ram tworzonego dokument. Wszystkie ele- menty umieszczone pomiędzy <html></html> to właściwa zawartość strony WWW. Następnym w kolejności znacznikiem tworzącym strukturę dokumentu jest <head></head>. Jest on odpowiedzialny za określenie podstawowych właściwości strony, takich jak strona kodowa, tytuł, informacje o autorze oraz słowa kluczowe i opis stro- ny. Dokładne informacje na temat zawartości znajdziesz w dalszej części niniejszego rozdziału. Bezpośrednio po znaczniku zamykającym </head> znajduje się <body></body>, we wnętrzu którego zamieszczamy całą widoczną treść strony. Mówiąc jeszcze prościej, tylko to, co jest umieszczone pomiędzy znacznikami <body></body>, jest wyświetlane w oknie przeglądarki. Pozostałe elementy to polecenia wpływające na zachowanie przeglądarki (np. strona kodowa) lub pełniące funkcje czysto informacyjne. Właśnie poznałeś wszystkie niezbędne elementy tworzące strukturę dokumentu zgod- nego z piątą specyfikacją języka HTML. Zapamiętaj jednak, że to dopiero początek i zarówno struktura dokumentu, jak i sposób organizacji treści wymagają szeregu do- datkowych znaczników, które poznasz w dalszej części tej książki. Nagłówek dokumentu Nagłówek dokumentu to zestaw poleceń umieszczonych pomiędzy znacznikami <head></head>. Ze względu na wagę tych znaczników dla całego dokumentu postanowiłem opisać je w oddzielnym podrozdziale. Strona kodowa Zacznę od najważniejszego elementu, który jest odpowiedzialny za stronę kodową tworzonego dokumentu. Język HTML jako ponadsystemowy nośnik informacji musi mieć możliwość obsługi różnych języków, a co za tym idzie, różnych znaków narodo- wych. W związku z tym zostały określone różne strony kodowe dla danych języków i części świata. Dla naszego kraju odpowiednim standardem jest strona kodowa ISO 8859-2 lub UTF-8. Działa ona na wszystkich platformach systemowych: MS Windows, Unix, Linux, Mac OS, iPhone, iPad i wielu innych, dlatego jako świadomy projektant stron musisz stosować się do tej normy. Ktoś może jednak stwierdzić, że przecież wy- starczy wpisać polskie znaki w Notatniku, a i tak wszystko zadziała. Oczywiście, nie można odrzucić takiego pomysłu, ale należy zwrócić uwagę, że tak zakodowane pol- skie znaki zadziałają tylko na platformie MS Windows, natomiast pozostałe systemy będą miały z taką stroną kodową problemy. By uzyskać poprawną stronę kodową, mamy kilka możliwości. Pierwsza to edytor z wbudowanym odpowiednim modułem do konwersji znaków, np. PSPad. Druga to wstawianie polskich znaków w sposób tradycyjny, czyli w formacie Windows-1250, a następnie konwertowanie ich za pomocą specjalnych programów — konwerterów, np. Gżegżółka — http://www.gzegzolka.com/.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 18</label></header><p class="padding-10">Rozdział 2. ♦ Wprowadzenie do HTML5 19 Pomimo że do dyspozycji mamy dwa sposoby zapisywania polskich znaków, stan- dardem stało się praktyczne i wygodniejsze kodowanie UTF-8. Doskonałość tego rozwiązania polega na przypisaniu unikatowego numeru wszystkim znakom charak- terystycznym dla różnych alfabetów, np. łacińskiego czy cyrylicy. Poza tym w Uniko- dzie uwzględniono różne symbole, np. ®, ©. Deklaracja strony kodowej znajduje się bezpośrednio w nagłówku <head></head> i ma następującą postać:<meta charset="UTF-8" />Poniżej zamieściłem przykładowy listing struktury strony wraz z definicją strony ko- dowej.<!doctype html><html><head><meta charset="UTF-8" /></head><body></body></html>W ramach przypomnienia zamieściłem przykładowy kod odpowiedzialny za określenie strony kodowej w dokumencie wykorzystującym poprzednie wersje języka HTML. Jak zapewne już zauważyłeś, również w tym aspekcie twórcy nowej specyfikacji uprościli i skrócili zapis.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />Tytuł strony Następnym znacznikiem, który zalicza się do stałych elementów strony WWW, jest<title></title>. Odpowiada on za ustawienie tytułu strony, widocznego na belce ty- tułowej w oknie przeglądarki. Znacznik ten powinien znajdować się pomiędzy <head></head>.<html><head><title>Bartosz Danowski — strona domowa</title></head></html>Tytuł jest jedynym elementem strony, który znajduje się w nagłówku dokumentu i jest widoczny bez konieczności analizy zawartości kodu strony (rysunek 2.1). Jeżeli zapomnisz o dodaniu tego znacznika, nic się nie stanie, chociaż podczas promo- cji i pozycjonowania strony możesz mieć problemy z osiągnięciem zadowalających wyników. Pamiętaj również, że za pomocą informacji zawartych między tymi znacz- nikami strona jest opisywana w Ulubionych przeglądarki.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 19</label></header><p class="padding-10">20 Wstęp do HTML5 i CSS3 Rysunek 2.1. Tytuł strony zwykle widoczny jest na górnej belce okna przeglądarki Słowa kluczowe i opis strony Skoro zainteresowałeś się tworzeniem stron WWW, to musiałeś już poszukiwać in- formacji w internecie, dlatego z całą pewnością miałeś kontakt z wszelkiej maści wy- szukiwarkami i katalogami. Wszystkie one funkcjonują dzięki ogromnym bazom da- nych, zawierającym informacje o stronach zamieszczonych w sieci. Oczywiście dane te muszą być w jakiś sposób pogrupowane — w przeciwnym razie nie byłoby możli- we znalezienie poszukiwanych stron WWW. Jeżeli chcesz, by Twoja strona trafiła do bazy wyszukiwarki, musisz zadbać o odpo- wiednią promocję (więcej miejsca temu zagadnieniu poświęciłem w innych moich książkach). Teraz ważne jest, abyś zapamiętał, że zawartość Twojej strony jest indek- sowana przez specjalnego robota, który ją sprawdzi i doda do bazy danych. To bardzo skrócona i uproszczona metoda działania. W zależności od wyszukiwarki robot sprawdza w kodzie strony kilka elementów i na tej podstawie dodaje ją do bazy. Pierwszym elementem jest znacznik <title></title>, o którym wspominałem nieco wcześniej. Następnym są słowa kluczowe (keywords) witryny oraz opis (description) strony. Poniżej zamieszczam odpowiednie znaczniki zawierające słowa kluczowe oraz opis strony. Konstrukcja znacznika jest stosunkowo prosta, mimo że składa się on z kilku elementów.<meta name="keywords" content="słowa, kluczowe, rozdzielone, przecinkami" /><meta name="description" content="Opis zawartości witryny" />Znacznik <meta /> może przybierać przeróżne formy, o których wspomnę na następ- nych stronach, jednak nigdy nie zawiera elementu zamykającego. Zwróć uwagę, że słowa kluczowe zostały oddzielone od siebie za pomocą przecinków i mogą składać się z kilku wyrazów. Opis strony zawiera jedno – dwa zdania na temat jej zawartości, które pojawią się jako wynik szukania. Najczęściej na podstawie tych zdań internauta podejmuje decyzję o odwiedzeniu strony, którą znalazł za pomocą wy- szukiwarki. Odpowiednie przygotowanie tytułu, słów kluczowych oraz opisu ma znaczenie dla od- powiedniej indeksacji strony przez wyszukiwarki oraz pozycji, jaką zajmie ona w ba- zie danych. Dlatego warto zadbać o to, aby niezbędne znaczniki znalazły się wśród obowiązkowych elementów Twojej strony. Poniżej zamieściłem fragment kodu, po- chodzący z mojej strony domowej. Dzięki temu będziesz mógł zobaczyć, w jaki spo- sób przygotowałem opis strony i dokonałem wyboru słów kluczowych.<html><head><meta name="keywords" content="bartosz danowski, kurs css, kurs html, kurs</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 20</label></header><p class="padding-10">Rozdział 2. ♦ Wprowadzenie do HTML5 21 css2, nagrywanie płyt, nagrywanie plyt, instalacja windows, nero, literatura informatyczna" /><meta name="description" content="Bartosz Danowski — strona domowa, znajdziesz tutaj informacje o autorze, książkach, artykułach i uzupełnienia do wydanych już książek." /></head></html>Powyższy listing z mojej prywatnej strony dla potrzeb niniejszego przykładu został skrócony, w rzeczywistości jest on bowiem znacznie bardziej rozbudowany. Zwróć, proszę, uwagę na sposób zapisu słów kluczowych — są one rozdzielone za pomocą przecinków. Poza tym niektóre wpisy są zdublowane, np. nagrywanie płyt i nagrywa- nie plyt. Dzięki temu w bazie znajdą się odpowiednie wersje dla wyszukiwarek obsłu- gujących nasze rodzime „ogonki” oraz tych, które ich nie obsługują. Inne elementy składowe nagłówka strony Nagłówek <head></head> może zawierać jeszcze kilka innych znaczników pomocnych w określeniu właściwości strony lub spełniających funkcję informacyjną. Tak się skła- da, że są one związane ze znacznikiem <meta />. Poniżej opisałem kilka najważniej- szych i najczęściej spotykanych elementów występujących w nagłówku strony.<meta name="author" content="Bartosz Danowski" />Podany wpis ma charakter informacyjny i dzięki niemu możemy w kodzie zamieścić informacje o autorze strony. Dane te nie są widoczne na zewnątrz, ale przydają się do ustalenia praw autorskich dla danej strony. Osobiście uważam, że warto korzystać z te- go znacznika.<meta name="copyright" content="Bartosz Danowski" />Następny element mogący wchodzić w skład nagłówka zawiera informacje o prawach autorskich. Również w tym przypadku wpisy nie są widoczne na zewnątrz i mają cha- rakter typowo informacyjny.<meta name="generator" content="PSPad editor, www.pspad.com" />Wewnątrz strony możemy również zamieścić informacje na temat narzędzia, za po- mocą którego został wykonany dany dokument. Z tego znacznika bardzo chętnie ko- rzystają autorzy edytorów, którzy w ten sposób reklamują swój produkt. Podobnie jak elementy opisane poprzednio, również i tym razem wpis ma charakter informacyjny i nie jest widoczny na stronie.<meta name="language" content="pl" />Kolejny wpis informuje o języku, w jakim została wykonana strona. Opisany powyżej rodzaj znacznika <meta name=" " content=" " /> ma charakter ty- powo informacyjny. Specyfikacja dopuszcza, by autor strony sam tworzył dodatkowe wpisy informacyjne. W związku z tym możemy użyć takiej konstrukcji:<meta name="konwerter" content="Gżegżółka" /></p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 21</label></header><p class="padding-10">22 Wstęp do HTML5 i CSS3 Oczywiście to tylko przykład i jeżeli uznasz, że jest Ci potrzebna jeszcze jakaś infor- macja, możesz wymyślić odpowiednie słowo i wstawić je do odpowiedniego znaczni- ka. Pamiętaj jednak, że bardzo ważne jest, byś zachował ogólną konstrukcję znaczni- ka. Nazwa powinna zostać wpisana do atrybutu name=" ", natomiast wartość musi być umieszczona w atrybucie content=" ". Znacznik <meta /> może występować z jeszcze jednym atrybutem, http-equiv, który zawiera informacje będące nagłówkiem HTTP:<meta http-equiv=" " content=" " />Dla atrybutu http-equiv przewidziano kilka wartości. I tak:<meta http-equiv="refresh" content="x" />spowoduje automatyczne odświeżanie dokumentu co x sekund. Polecenie to jest szcze- gólnie przydatne na stronach, które są bardzo często aktualizowane i autorowi zależy, by odwiedzający zawsze widział aktualne dane, a nie zawartość przechowywaną w pli- kach tymczasowych przeglądarki na dysku. Polecenie to może również przybrać formę:<meta http-equiv="refresh" content="x; url=http://www.adres.pl" />Spowoduje ono automatyczne przeniesienie odwiedzającego po upływie x sekund pod nowy adres zadeklarowany w sekcji url. O przydatności tego polecenia nie muszę chyba nikogo przekonywać. Wiersz ten roz- wiązuje problem ze zmianą adresu i utratą odwiedzających — wystarczy pod starym adresem umieścić plik index.html z deklaracją http-equiv="refresh" i określonym nowym adresem, pod którym umieściliśmy naszą stronę. Każdy, kto wejdzie pod sta- ry adres, zostanie automatycznie przekierowany pod jego aktualną wersję. Polecenie <meta http-equiv=" " /> może jeszcze przybrać następujące formy:<meta http-equiv="reply-to" content="adres e-mail autora" />definiuje adres autora witryny,<meta http-equiv="creation-date" content="data wykonania" />określa, kiedy nasza strona została wykonana. Warto wiedzieć, że część serwisów indeksujących korzysta z <meta name="robots" />, który określa, czy dana strona powinna być indeksowana oraz czy linki na niej za- warte również mają być dodane do bazy serwisu katalogującego. Przy zastosowaniu polecenia robots atrybut content zawiera następujące dyrektywy, informujące o do- puszczonych operacjach dla naszej strony: 'index' — strona powinna być zaindeksowana; 'noindex' — strona nie powinna być zaindeksowana; 'follow' — linki z tej strony powinny być zaindeksowane; 'nofollow' — linki z tej strony nie powinny być zaindeksowane;</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 22</label></header><p class="padding-10">Rozdział 2. ♦ Wprowadzenie do HTML5 23 'all' równa się 'index, follow' — wartość domyślna; 'none' równa się 'noindex, nofollow'. Dalej przedstawiam przykład zastosowania polecenia name="robots" dla strony, która ma być indeksowana wraz ze wszystkimi odnośnikami prowadzącymi do podstron. Warto, abyś zapamiętał, że dla większości witryn takie rozwiązanie jest zdecydowa- nie najlepsze.<meta name="robots" content="index,follow" />Kolejnym znacznikiem występującym w nagłówku jest polecenie <base />, określające bazowy adres dla dokumentu i wszystkich odnośników znajdujących się w jego treści.<base href="http://www.adres.pl" />Przydatność <base /> doskonale widać przy przenoszeniu dokumentów do innych ka- talogów. Jak się później dowiemy, odsyłacze mają różne formy, dlatego przy takiej operacji nietrudno o zerwanie odnośników, a pamiętanie przy przenoszeniu o zmia- nie każdego z nich jest kłopotliwe. Należy jednak pamiętać o tym, że w kodzie strony<base /> może wystąpić tylko jeden raz. Ostatnim poleceniem wchodzącym w skład nagłówka dokumentu jest <link />, które w naszym przypadku będzie odpowiedzialne za dołączanie zewnętrznego arkusza sty- lów. Element <link /> ma następującą konstrukcję:<link rel="stylesheet" href="style.css" type="text/css" />Do znacznika <link /> jeszcze wrócimy w kolejnym rozdziale, poświęconym kaska- dowym arkuszom stylów. Wtedy dowiesz się m.in., że do jednego dokumentu można podłączyć kilka różnych arkuszy stylów. Aby utrwalić wiedzę na temat znaczników opisanych w niniejszym podrozdziale, za- poznaj się z poniższym listingiem, który pokazuje, jak może wyglądać szkielet strony uzupełniony o omówione do tej pory znaczniki.<!doctype html><html><head><meta name="keywords" content="bartosz danowski, kurs css, kurs html, kurs css2, nagrywanie płyt, nagrywanie plyt, instalacja windows, nero, literatura informatyczna" /><meta name="description" content="Bartosz Danowski — strona domowa, znajdziesz tutaj informacje o autorze, książkach, artykułach i uzupełnienia do wydanych już książek." /><meta name="author" content="Bartosz Danowski" /><meta name="generator" content="PSPad editor, www.pspad.com" /><meta name="robots" content="index,follow" /><meta charset="UTF-8" /><title>Przykładowy tytuł</title></head><body></body></html></p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 23</label></header><p class="padding-10">24 Wstęp do HTML5 i CSS3 Ciało i sekcje dokumentu HTML Wiesz już, że dokument HTML ma swoje określone ramy oraz nagłówek. Elementy te mają znaczenie czysto konfiguracyjne lub informacyjne i poza tytułem nie są wi- doczne na zewnątrz. Teraz przyszła pora, by poznać kolejne element strony WWW — sekcje. Najważniejszym znacznikiem odpowiedzialnym za wydzielenie głównej sekcji do- kumentu HTML jest <body></body>. Wszystkie informacje, które znajdą się pomiędzy tymi znacznikami, są traktowane jako zawartość strony i zostają wyświetlone w oknie przeglądarki. Listing widoczny poniżej przedstawia położenie tego elementu w stosun- ku do pozostałych znaczników.<!doctype html><html><head><meta charset="UTF-8" /><title>Przykładowy tytuł</title></head><body>Tutaj znajduje się widoczna treść strony WWW.</body></html>Na rysunku 2.2 widać podgląd strony, jaka powstała po wprowadzeniu kodu z przykła- du zamieszczonego wcześniej, zawierającego niezbędne elementy każdej strony WWW. Rysunek 2.2. Efekt działania listingu zamieszczonego powyżej Jak widzisz, nie jest to nic specjalnego — czarny tekst na domyślnym białym lub sza- rym tle. To zwyczajna, surowa strona, na której nie użyto jeszcze żadnego znacznika odpowiedzialnego za formatowanie jej układu oraz wyglądu poszczególnych elemen- tów. Niemniej jednak to już Twoja pierwsza strona! Twórcy piątej specyfikacji języka HTML dokonali analizy struktury witryny i wyróż- nili w niej kilka dodatkowych sekcji, a następnie przypisali do nich nowe znaczniki, za pomocą których będziemy mogli precyzyjniej kontrolować finalny wygląd strony. Nowe znaczniki nie wpływają bezpośrednio na wygląd zawartych w nich danych, ale pozwalają zgrupować szereg innych elementów i łatwiej nimi zarządzać. Lista nowych znaczników wraz z wyjaśnieniami znajduje się poniżej.<header></header> — pomiędzy znacznikami powinna być zamieszcza część strony, która ma charakter nagłówka i rozpoczyna Twoją stronę.<nav></nav> — pomiędzy znacznikami powinny być zamieszczone elementy odpowiedzialne za menu nawigacyjne witryny.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 24</label></header><p class="padding-10">Rozdział 2. ♦ Wprowadzenie do HTML5 25<article></article> — pomiędzy znacznikami zamieszczamy zestaw elementów tworzących spójny artykuł (np. nagłówek i blok tekstu).<section></section> — pomiędzy znacznikami zamieszczamy zawartość głównej części witryny.<aside></aside> — pomiędzy znacznikami powinna być zamieszczona część strony, która jest elementem uzupełniającym główną strukturę strony.<footer></footer> — pomiędzy znacznikami powinna być zamieszczona część strony, która ma charakter stopki i zamyka Twoją stronę. Na rysunku 2.3 przedstawiłem fragment strony WWW, na której naniosłem oznacze- nia numeryczne. Rysunek 2.3. Struktura strony</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 25</label></header><p class="padding-10">26 Wstęp do HTML5 i CSS3 1. odpowiada nagłówkowi strony — znacznik <header> </header>; 2. odpowiada menu nawigacyjnemu — znacznik <nav></nav>; 3. odpowiada głównej części strony — znacznik <section></section>; 4. odpowiada dodatkowym elementom strony — znacznik <aside></aside>; 5. odpowiada pojedynczemu artykułowi — znacznik <article></article>; 6. odpowiada stopce strony — znacznik <footer></footer>. Przykład wykorzystania znaczników zawiera kolejny listing. Dodatkowo w dalszej części książki w kolejnych przykładach będę starał się wplatać nowe elementy, tak by pokazać ich przydatność oraz sposób wykorzystania.<!doctype html><html><head><meta charset="UTF-8" /><title>Przykładowy tytuł</title></head><body><header> </header><nav> </nav><article><section></section></article><aside> </aside><footer> </footer></body></html>Elementy blokowe Język HTML 5 wykorzystuje kilka znaczników, które służą do określenia i wstęp- nego formatowania większych partii treści witryny. Do elementów blokowych mo- żemy zaliczyć akapity, nagłówki, cytaty, poziome linie, listy, znaczniki <div></div>,<figcaption> </figcaption>, <pre></pre> oraz <figure></figure>. Cechą charakte- rystyczną każdego z elementów blokowych jest to, że tworzy on zupełnie nowy ele- ment, który jest oddzielony od pozostałych wyraźną przerwą. Dalej przyjrzymy się konstrukcji każdego z tych elementów. Pamiętaj, że wszystkie one muszą się znajdować wewnątrz znacznika <body></body>. Zgodnie ze specyfikacją HTML 5 znaczniki opisane poniżej służą jedynie do nada- nia poszczególnym elementom określonej formy. Natomiast dokładne określenie struktury takiego elementu, np. koloru, wyrównania czy czcionki, zostało oddzielo- ne od języka HTML i weszło w skład kaskadowych arkuszy stylów.</p></article></section></section></div></div></div><script type="text/javascript">var _qasp = _qasp || []; _qasp.push('go'); _qasp.push(['setFastPAID', 'sadDoci']);</script><script type="text/javascript">(function (d, x, a) { var z = d.createElement(x); z.type = 'text/javascript'; z.src = a; var s = d.getElementsByTagName(x)[0]; s.parentNode.insertBefore(z, s); })(document, 'script', '//a.spolecznosci.net/core/45e90454f0fad720f5b56a8634cc7f07/main.js');</script><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-2" name="doublebillboard_doci_11590" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-2" name="square_doci_10456" scrolling="no" frameborder=0 width=0 height=0></iframe></div></div></div><div class="footer contentpage"><footer><div class="socialallthethings">Made in Warsaw · Copyright 2016 · All rights reserved -<a class="Grupa Webshark.pl" href="http://webshark.pl">webshark.pl</a><a class="" href="/regulations-pl">Regulamin</a><a class="" href="/privacy">Polityka Prywatności</a><a class="" href="/contact">Kontakt</a></div></footer><div class="banner"></div></div><script>function mouseMovedOrMouseCLicked(e) { var mainEl = document.getElementById("html"); mainEl.removeEventListener("mousemove", mouseMovedOrMouseCLicked); mainEl.removeEventListener("touchstart", mouseMovedOrMouseCLicked); mainEl.removeEventListener("touchmove", mouseMovedOrMouseCLicked); mainEl.removeEventListener("mousedown", mouseMovedOrMouseCLicked); mainEl.removeEventListener("scroll", mouseMovedOrMouseCLicked); /* var element = document.getElementById('square-1'); var element2 = document.getElementById('doublebillboard-1'); */ var element3 = document.getElementById('adrino-a1'); /* element.classList.remove('logg'); */ /* element.style.maxHeight = null; element2.style.maxHeight = null; */ if(element3!==null){ element3.style.maxHeight = null; element3.style.display = 'block'; } } var html = document.getElementById("html"); html.addEventListener("mousemove", mouseMovedOrMouseCLicked, false); html.addEventListener("touchstart", mouseMovedOrMouseCLicked, false); html.addEventListener("touchmove", mouseMovedOrMouseCLicked, false); html.addEventListener("mousedown", mouseMovedOrMouseCLicked, false); html.addEventListener("scroll", mouseMovedOrMouseCLicked, false);</script><script id="container-header-template" type="x-handlebars-template"></script><script id="search-container-template" type="x-handlebars-template"><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-4" name="doublebillboard_doci_9037" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-4" name="square_doci_13306" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="span8"><div class="content" ><section><h3 class="w-100-p overflow-a"><div class="float-l">Lista plików <span id="search_files_count_1"></span></div><div class="float-r" id="search_pages_1"></div></h3></section><section class="padding-0 margin-0" id="search_files_result"><div class="w-100-p extra centered"><i class="icon-spinner icon-spin"></i> Proszę czekać, szukam...</div></section><section><h3 class="w-100-p overflow-a"><div class="float-l padding-5">Lista plików <span id="search_files_count_2"></span></div><div class="float-r" id="search_pages_2"></div></h3></section></div></div><div class="span4"><div class="content"><section><h3>Lista użytkowników <span id="search_users_count"></span></h3></section><section id="search_users_result" class="comments-thread padding-l-r-0 margin-l-r-0"><div class="padding-0 margin-0 w-100-p centered"><i class="icon-spinner icon-spin"></i> Proszę czekać, szukam...</div></section></div></div><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-3" name="doublebillboard_doci_3346" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-3" name="square_doci_2369" scrolling="no" frameborder=0 width=0 height=0></iframe></div></script><script id="search-files-content-template" type="x-handlebars-template">{{#each data_files_render}}<article class="elem"><header><img height="45" width="45" id="thumbnail-{{id}}" src="/static/img/loader/thumb-loader.gif" data-src="https://img.doci.pl/i/{{id_url}}/7/2/thumb.png"><p class="margin-0 padding-0" id="file_name_{{id}}" style="padding-bottom: 1px !important;"><span ><div class="text-ellipsis elipsis-file"><a href="/{{user_data.url}}/{{name_url}}+f{{id_url}}" title="{{name_display}}">{{name}}</a></div><span class="float-r size-11">• {{date_add_format}}</span></span></p><label class="muted"><span class="float-r size-11 padding-l-10">dodał: <a href="/{{user_data.url}}" title="{{user_data.display}}">{{user_data.display}}</a></span>{{#unless in_trash}}<span class="fileSystemMenu d-block float-r">{{#if is_admin}}<span class="{{#if abused}} red {{else}} green {{/if}} padding-l-10 pointer change-abused"> <i class="fa fa-ban"></i></span>{{/if}}</span>{{/unless}}</label></header><div class="margin-0 padding-0 size-11">Rozmiar: {{size_format}} - <span class="uppercase" style="color:#15935c">{{extension}}</span></div></article>{{/each}}</script><script id="search-users-content-template" type="x-handlebars-template">{{#each data_users_render}}<article class="comment"><header><p>{{#if user_data.avatar}}<img height="45" width="45" style="margin-left:10px;margin-right:15px;position:relative;float:left;" src="https://img.doci.pl/avatar/{{user_data.userID}}/2.png">{{else}}<img height="45" width="45" style="margin-left:10px;margin-right:15px;position:relative;float:left;" src="{{../../config.streaming_url}}static/img/avatar/avatar.png">{{/if}}<a class="portrait_wrapper" href="/{{user_data.url}}">{{user_data.display}}</a>• {{user_data.files_count_format}} plików<br/>{{user_data.register_date}}</p></header></article>{{/each}}</script><script id="search-files-empty-content-template" type="x-handlebars-template"><div class='extra w-100-p hover centered' >Brak wyników wyszukiwania dla frazy: "{{search_phrase}}"</div></script><script id="search-users-empty-content-template" type="x-handlebars-template"><div class='extra w-100-p hover centered'>Brak wyników</div></script><script id="search-pagination-template" type="x-handlebars-template">{{#if is_next_page}}<span class="link2 pointer search-next-page-click" data-href="{{next_page}}"><div class="float-r padding-5 padding-l-10 padding-r-10 hover" style="font-size:14px;"> Następna strona <i class="fa fa-chevron-right"></i></div></span>{{/if}} {{#if is_previous_page}}<span class="link2 pointer search-previous-page-click" data-href="{{previous_page}}"><div class="float-r padding-5 padding-l-10 padding-r-10 hover"style="font-size:14px;"><i class="fa fa-chevron-left"></i> Poprzednia strona </div></span>{{/if}}</script><script id="search-advanced-template" type="x-handlebars-template">{{#if show_search_saved_filter}}<div class="float-l centered pointer hover padding-5 {{#if search_saved}} modulo green {{/if}} action-search-saved" style="width: 200px; border-right: 1px solid #dfe0df;"><i class="icon-anchor"></i> Szukaj zachowane</div>{{/if}}<div class="float-l" style="border-right: 1px solid #dfe0df;"><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_all}} modulo green {{/if}} action-search-type" data-type="all"><i class="icon-copy"></i> Wszystkie</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_movie}} modulo green {{/if}} action-search-type" data-type="movies"><i class="icon-film"></i> Filmy</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_music}} modulo green {{/if}} action-search-type" data-type="music"><i class="icon-headphones"></i> Muzyka</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_photo}} modulo green {{/if}} action-search-type" data-type="photos"><i class="icon-picture"></i> Zdjęcia</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_other}} modulo green {{/if}} action-search-type" data-type="other"><i class="icon-paper-clip"></i> Inne</div>{{#if show_search_directory_filter}}<div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_directory}} modulo green {{/if}} action-search-type" data-type="directory"><i class="icon-folder-open-alt"></i> Katalogi</div>{{/if}}</div></script><script id="search-directories-content-template" type="x-handlebars-template">{{#each data_directories_render}}<div id="d-{{id}}" class='search-element-container margin-0 w-100-p hover {{#if modulo}}modulo {{/if}} ' style="padding-top: 8px; padding-left: 15px; "><div class='search-icon'><img src="/img/icons/big_dir.png"></div><div class="search-name" style="margin-top: 7px;"><div style=" width: 515px ; height: 28px; "><div class="text-ellipsis" style="max-width: 515px;"><a title="{{name}}" href="/{{user_data.url}},d-{{id}},{{name_url}}">{{name}}</a></div><div class="search-desc" style="margin-top:5px;"><span>Katalogów:: {{dir_count}} / plików: {{file_count}}</span><span class="search-desc float-r size-11" style="min-width:100px;text-align:right;margin-top:-4px;">{{#if saved}}<i class="icon-anchor green" title="Plik zachowany" style="margin-left: 10px;"></i>{{/if}}<i class="{{icon}}" style="margin-left: 10px;"></i></span></div></div><span class="search-desc float-l text-ellipsis" style="max-width:400px;margin-top:7px;">Dodał: <a class="link search-link" href="/{{user_data.url}}">{{user_data.display}}</a><span> w katalogu: <a class="link search-link" href="/{{user_data.url}},d-{{dir_data.id}},{{dir_data.name_url}}">{{dir_data.name}}</a></span></span><span class="search-desc float-r" style="min-width:100px;text-align:right;margin-top:5px;">{{date_add_format}}</span></div></div>{{/each}}</script><script id="comments-comment-list-each-template" type="x-handlebars-template">{{#each file_comments}}<section class="comments padding-b-5" ><article class="comment"><header><p>{{#if user_data.avatar}}<img height="45" width="45" src="https://img.doci.pl/avatar/{{user_data.userID}}/2.png">{{else}}<img height="45" width="45" src="{{../../config.streaming_url}}static/img/avatar/avatar.png">{{/if}} {{#unless is_guest}}<a class="portrait_wrapper" href="/{{user_data.url}}">{{/unless}} {{user_data.display}} {{#unless is_guest}}</a>{{/unless}} • {{date_format}}</p><label class="muted">{{#if can_edit}}<span data-comment-id={{ID}} style="cursor:pointer;margin-right:8px; margin-left: 8px; margin-top: -4px;" type="button" class="close comment_remove_btn" data-dismiss="modal" aria-hidden="true" title="{{lang.file_comment_remove}}">×</span>{{/if}} {{#if show_file_data}}<a title="{{file_data.name}}" style="float:right; margin-left: 8px; margin-right:8px; font-size:11px;" href="/{{owner_data.url}}/{{file_data.name_url}}+f{{file_data.id_url}}"><i class="fa fa-link"></i></a>{{/if}}</label></header><p>{{{comment}}}</p></article></section>{{/each}}</script><div class="modal-container"></div><script src="//ovh.webshark.pl/adsrv/10/main.js" rel="javascript" type="text/javascript" ></script><script>var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement); addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles);</script></body></html>

Rozmiar :	6.5 MB
Rozszerzenie:	pdf

dareks_