Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00294 005957 14496959 na godz. na dobę w sumie
HTML5. Ćwiczenia praktyczne - książka
HTML5. Ćwiczenia praktyczne - książka
Autor: Liczba stron: 192
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3791-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Czas wreszcie poznać HTML... teraz w nowej odsłonie!

HTML5 jest obecnie jednym z najpopularniejszych języków pozwalających zbudować działającą bez zarzutu witrynę internetową - nawet jeśli nie ma się zbyt dużej wiedzy o programowaniu. Nowy standard zastąpił znacznie mniej funkcjonalny język HTML4, ale jego twórcy zadbali o kompatybilność między obiema wersjami. Wprowadzono tu sporo nowych elementów i znaczników, poprawiono też obsługę błędów podczas parsowania HTML oraz obsługę formularzy. Nowością jest obsługiwanie elementów multimedialnych i graficznych oraz API dla aplikacji internetowych. Wszystko to masz szansę sprawdzić w praktyce podczas wykonywania ćwiczeń zamieszczonych w tej książce.

'HTML5. Ćwiczenia praktyczne' to zbiór przemyślnie skomponowanych zadań dla wszystkich, którzy mają choćby niewielkie pojęcie o pracy z komputerem oraz apetyt na wiedzę. Bartosz Danowski, doświadczony, błyskotliwy i bezpośredni autor tego zbioru, zadbał o to, by kolejne kroki prowadziły adepta zgłębiającego tajniki HTML5 w kierunku samodzielnego zbudowania funkcjonalnego serwisu WWW. Dzięki tej książce poznasz najważniejsze założenia i zasady tego języka, zdobędziesz wiedzę o znacznikach i atrybutach oraz zrozumiesz, jak tworzyć optymalną strukturę dokumentów HTML. Nauczysz się wykorzystywać komentarze, listy, tabele, formularze, elementy blokowe, wstawiane i osadzone. Dowiesz się, jak działają kaskadowe arkusze stylów, a potem połączysz to wszystko w całość w praktycznych projektach!

Aplikacja? Witryna? Przećwicz to z HTML5!


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

Darmowy fragment publikacji:

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Redaktor prowadzący: Ewelina Burska Projekt okładki: Maciej Pasek Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie?cwhtm5 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. ISBN: 978-83-246-3791-1 Copyright © Helion 2012 Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treĂci WstÚp Rozdziaï 1. Wprowadzenie Podstawowe informacje o jÚzyku HTML Znaczniki i atrybuty Najwaĝniejsze róĝnice i zasady NiezbÚdne narzÚdzia i programy Rozdziaï 2. Struktura dokumentu HTML5 Rozdziaï 3. Elementy podstawowe Nagïówek dokumentu Ciaïo dokumentu Elementy jÚzyka HTML5 Komentarze Elementy blokowe Elementy wstawiane Elementy osadzone (grafika, multimedia, aplikacje) HiperïÈcza Tabele Formularze Rozdziaï 4. Kaskadowe arkusze stylów Wprowadzenie Style w praktyce 5 7 8 9 10 14 21 21 24 32 37 37 38 54 62 78 86 99 125 126 137 4 HTML5 • mwiczenia praktyczne Rozdziaï 5. Praktyczne projekty Dodatek Szkielet strony Obstylowanie Walidacja Przydatne adresy Formularz oparty na skrypcie FormMail Podsumowanie 167 167 171 175 181 182 187 2 Struktura dokumentu HTML5 Po nieco przydïugim, ale koniecznym wstÚpie przyszïa naj- wyĝsza pora, aby poznaÊ konkretne znaczniki, ich atrybuty oraz strukturÚ dokumentu, który wykorzystuje propozycje znajdujÈce siÚ w piÈtej specyfikacji jÚzyka HTML. Zanim jednak zaczniesz testo- waÊ opisane poniĝej elementy, upewnij siÚ, ĝe na Twoim komputerze zainstalowano najnowszÈ wersjÚ jednej z wiodÈcych przeglÈdarek. W dalszej czÚĂci bÚdÚ korzystaÊ z róĝnych przeglÈdarek, poniewaĝ musisz mieÊ ĂwiadomoĂÊ, ĝe nie kaĝdy nowy znacznik dziaïa popraw- nie w kaĝdej przeglÈdarce. O ewentualnych róĝnicach i problemach bÚdÚ CiÚ informowaï, gdy zajdzie taka potrzeba. Elementy podstawowe Kaĝdy dokument HTML ma ĂciĂle okreĂlony szkielet, który nie zmie- nia siÚ w zaleĝnoĂci od zawartoĂci strony. OczywiĂcie szkielet dla strony zbudowanej na podstawie HTML5 róĝni siÚ od tego wykorzysty- wanego w stronach bazujÈcych na wczeĂniejszych wersjach jÚzyka HTML czy XHTML. OpierajÈc siÚ na poniĝszym przykïadzie, przepro- wadzÚ analizÚ podstawowej struktury witryny wykonanej w zgodzie z zaleceniami nowej specyfikacji. 22 HTML5 • mwiczenia praktyczne !doctype html html head /head body /body /html Pierwszym wspólnym i obowiÈzkowym elementem szkieletu strony jest wpis okreĂlajÈcy rodzaj jÚzyka uĝytego do jej stworzenia. W przy- padku strony wykorzystujÈ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Ú specyfikacji 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 uĝywane w przypadku stron korzystajÈcych z ramek czy okreĂlajÈce swobodne stosowanie 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. Kolejnym obowiÈzkowym elementem w strukturze dokumentu jest znacznik html /html , który odpowiada za okreĂlenie ram tworzonego dokumentu. Wszystkie elementy 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 podstawo- wych wïaĂciwoĂci strony, takich jak strona kodowa, tytuï, informacje o autorze oraz sïowa kluczowe i opis strony. 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È- Rozdziaï 2. • Struktura dokumentu HTML5 23 darki (np. strona kodowa) lub peïniÈce funkcje czysto informacyjne. Ten element równieĝ zostaï dokïadnie omówiony w dalszej czÚĂci niniejszego rozdziaïu. WïaĂnie poznaïeĂ wszystkie niezbÚdne elementy tworzÈce strukturÚ dokumentu zgodnego 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 dodatkowych znaczników, które poznasz w dalszej czÚĂci tej ksiÈĝki. m W I C Z E N I E 2.1 Podstawowa struktura dokumentu KorzystajÈc z informacji zdobytych podczas lektury niniejszego pod- rozdziaïu oraz z edytora tekstowego (np. systemowego Notatnika), stwórz dokument HTML i umieĂÊ w nim znaczniki odpowiedzialne za definicjÚ podstawowej struktury strony WWW. Jeĝeli napotkasz pro- blemy podczas pracy, skorzystaj z porad zamieszczonych poniĝej. 1. Otwórz systemowy Notatnik. 2. Wprowadě znaczniki widoczne poniĝej. !doctype html html head /head body /body /html 3. Kliknij menu Plik, a nastÚpnie wybierz opcjÚ Zapisz jako. 4. W okienku widocznym na rysunku 2.1 w polu Zapisz jako typ ustaw Wszystkie pliki (*.*). NastÚpnie w polu Nazwa pliku wpisz nazwÚ tworzonego dokumentu. PamiÚtaj o tym, aby po nazwie dodaÊ kropkÚ i koñcówkÚ html — .html. Na koniec w polu Kodowanie ustaw UTF-8 i kliknij przycisk Zapisz. Jeĝeli z jakichĂ powodów miaïeĂ problemy z wykonaniem niniejszego Êwiczenia, gotowy plik moĝesz pobraÊ ze strony http://danowski.pl/html5. 24 HTML5 • mwiczenia praktyczne Rysunek 2.1. Zapisywanie dokumentu HTML w systemowym Notatniku Nagïówek dokumentu PomiÚdzy znacznikami head /head znajduje siÚ kilka elementów waĝnych dla konstrukcji caïej strony. Ze wzglÚdu na wagÚ tych znacz- ników dla caïego dokumentu postanowiïem opisaÊ je w oddzielnym podrozdziale. ZawartoĂÊ znajdujÈca siÚ pomiÚdzy znacznikami head /head jest niewidoczna w oknie przeglÈdarki. WyjÈtkiem od tej zasady jest jedynie tytuï strony, który zobaczysz na górnej belce okna przeglÈdarki. Pozostaïe elementy majÈ znaczenie dla dziaïania strony lub jej poprawnej indeksacji przez wyszukiwarki. Ewentualne pominiÚcie wiÚkszoĂci wpisów nie wpïynie negatywnie na dziaïanie witryny. Strona kodowa ZacznÚ od najwaĝniejszego elementu, który jest odpowiedzialny za stronÚ kodowÈ tworzonego dokumentu. JÚzyk HTML jako ponadsys- temowy noĂnik informacji musi mieÊ moĝliwoĂÊ obsïugi róĝnych jÚzy- ków, a co za tym idzie, róĝnych znaków narodowych. W zwiÈzku z tym zostaïy okreĂlone róĝne strony kodowe dla danych jÚzyków i czÚĂci Rozdziaï 2. • Struktura dokumentu HTML5 25 Ăwiata. Dla naszego kraju odpowiednim standardem jest strona kodowa ISO 8859-2 lub UTF-8. Dziaïa ona na wszystkich platformach syste- mowych: 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ĝ wystarczy 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Ú na to, ĝe tak zakodowane polskie znaki zadziaïajÈ tylko na platformie MS Windows, natomiast pozostaïe systemy bÚdÈ miaïy z takÈ stronÈ kodowÈ problemy. Pomimo ĝe do dyspozycji mamy dwa sposoby zapisywania polskich znaków, standardem staïo siÚ praktyczne i wygodniejsze kodowanie UTF-8. DoskonaïoĂÊ tego rozwiÈzania polega na przypisaniu unika- towego numeru wszystkim znakom charakterystycznym dla róĝnych alfabetów, np. ïaciñskiego czy cyrylicy. Poza tym w Unikodzie uwzglÚ- dniono róĝne symbole, np. ®, ©. By uzyskaÊ poprawnÈ stronÚ kodowÈ, mamy kilka moĝliwoĂci. Pierw- sza 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 konwerto- wanie ich za pomocÈ specjalnych programów — konwerterów, np. Gĝegĝóïka — http://www.gzegzolka.com/. 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 defi- nicjÈ strony kodowej. !doctype html html head meta charset= UTF-8 / /head body /body /html 26 m W I C Z E N I E 2.2 HTML5 • mwiczenia praktyczne Deklaracja strony kodowej KorzystajÈc z informacji zdobytych podczas lektury niniejszego pod- rozdziaïu oraz z edytora tekstowego (np. systemowego Notatnika), otwórz uprzednio przygotowany dokument HTML i umieĂÊ w nim znacznik odpowiedzialny za definicjÚ strony kodowej. Jeĝeli napotkasz problemy podczas pracy, skorzystaj z porad zamieszczonych poniĝej. 1. Za pomocÈ Notatnika otwórz plik przygotowany w poprzednim Êwiczeniu. 2. PomiÚdzy znacznikami head /head dodaj znacznik odpowiedzialny za stronÚ kodowÈ. !doctype html html head meta charset= UTF-8 / /head body /body /html 3. Zapisz plik na dysku. PamiÚtaj o tym, ĝe przy zapisie moĝesz wybraÊ sposób kodowania znaków. Odpowiednia procedura postÚpowania zostaïa opisana w Êwiczeniu 2.1 w punktach 3. i 4. Jeĝeli z jakichĂ powodów miaïeĂ problemy z wykonaniem niniejszego Êwiczenia, gotowy plik moĝesz pobraÊ ze strony http://danowski.pl/html5. Tytuï strony NastÚpnym znacznikiem, który zalicza siÚ do grona staïych elemen- tów strony WWW, jest title /title . Odpowiada on za ustawienie tytuïu strony widocznego na belce tytuïowej w oknie przeglÈdarki. Znacznik ten powinien znajdowaÊ siÚ pomiÚdzy head /head . !doctype html html head meta charset= UTF-8 / title Tytuđ przykđadowej strony /title /head Rozdziaï 2. • Struktura dokumentu HTML5 27 body /body /html Tytuï jest jedynym elementem strony, który znajduje siÚ w nagïówku dokumentu i jest widoczny bez koniecznoĂci analizowania zawartoĂci kodu strony — rysunek 2.2. Rysunek 2.2. Tytuï strony jest widoczny w oknie niektórych przeglÈdarek m W I C Z E N I E 2.3 Deklaracja strony tytuïowej KorzystajÈc z informacji zdobytych podczas lektury niniejszego pod- rozdziaïu oraz z edytora tekstowego (np. systemowego Notatnika), otwórz uprzednio przygotowany dokument HTML i umieĂÊ w nim znacznik odpowiedzialny za tytuï strony. Jeĝeli napotkasz problemy podczas pracy, skorzystaj z porad zamieszczonych poniĝej. 1. Za pomocÈ Notatnika otwórz plik przygotowany w poprzednim Êwiczeniu. 2. PomiÚdzy znacznikami head /head dodaj title /title wraz z tytuïem swojej strony. !doctype html html head meta charset= UTF-8 / title Tytuđ przykđadowej strony /title /head body /body /html 3. Zapisz plik na dysku. PamiÚtaj o tym, ĝe przy zapisie moĝesz wybraÊ sposób kodowania znaków. Odpowiednia procedura postÚpowania zostaïa opisana w Êwiczeniu 2.1 w punktach 3. i 4. Jeĝeli z jakichĂ powodów miaïeĂ problemy z wykonaniem niniejszego Êwiczenia, gotowy plik moĝesz pobraÊ ze strony http://danowski.pl/html5. HTML5 • mwiczenia praktyczne 28 Sïowa kluczowe i opis strony Skoro interesuje CiÚ tworzenie stron WWW, to z caïÈ pewnoĂciÈ mogÚ zaïoĝyÊ, ĝe korzystasz z internetu i sieciowe wyszukiwarki, np. Google, sÈ Ci doskonale znane. W zwiÈzku z tym, ĝe nie mam pewnoĂci, czy wiesz, skÈd w uĝywanej przez Ciebie wyszukiwarce znalazïy siÚ strony, postaram siÚ wprowadziÊ CiÚ w to ciekawe zagadnienie. ZapamiÚtaj, ĝe pozycjonowanie stron to bardzo zïoĝone zadanie, na które skïada siÚ wiele czynnoĂci wykraczajÈcych poza dodanie znaczników z opisem i sïowami kluczowymi. Jeĝeli temat pozycjonowania CiÚ zainteresowaï, to polecam lekturÚ ksiÈĝki Pozycjonowanie i optymalizacja stron WWW. Jak siÚ to robi. Wydanie III — http://helion.pl/rt/pozop3. Otóĝ strony trafiajÈ do serwisów indeksujÈcych w doĂÊ prosty sposób: wyszukiwarka wysyïa specjalnego „robota”, który sprawdza stronÚ i dodaje jÈ do ogromnej bazy danych. To bardzo skrócona i uprosz- czona metoda dziaïania. Robot na TwojÈ stronÚ moĝe trafiÊ na wiele róĝnych sposobów, np. poprzez Twoje zgïoszenie lub dziÚki odnoĂni- kom z innych stron znalezionych w sieci. 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 juĝ wspominaïem. NastÚpnym elementem sÈ sïowa kluczowe (keywords) witryny oraz opis (description) strony. Poniĝej zamieszczam odpowiednie znaczniki zawierajÈce sïowa kluczowe oraz opis strony. 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, którym poĂwiÚ- ciïem nastÚpny podrozdziaï, jednak nigdy nie zawiera elementu zamy- kajÈ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 zawartoĂci strony, które pojawiÈ siÚ jako wynik szukania. Na podstawie tych zdañ internauta najczÚ- Ăciej podejmuje decyzjÚ o odwiedzeniu strony, którÈ znalazï za pomocÈ wyszukiwarki. Dlatego warto przyïoĝyÊ siÚ do stworzenia sensownego opisu. Rozdziaï 2. • Struktura dokumentu HTML5 29 Odpowiednie przygotowanie tytuïu, sïów kluczowych oraz opisu ma znaczenie dla wïaĂciwej indeksacji strony przez wyszukiwarki oraz tego, jakÈ pozycjÚ zajmie ona w bazie danych. Dlatego warto zadbaÊ o to, aby niezbÚdne znaczniki znalazïy siÚ wĂród obowiÈzkowych elementów Twojego kodu HTML. Poniĝej zamieĂciïem fragment kodu pochodzÈcy z mojej strony domowej. DziÚki temu bÚdziesz mógï zobaczyÊ, w jaki sposób przygotowaïem opis strony oraz wybraïem sïowa kluczowe. !doctype html html head meta charset= UTF-8 / title Tytuđ przykđadowej strony /title meta name= keywords content= bartosz danowski, danowski, kurs css, ´kurs html, kurs css2, nagrywanie pđyt, 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 body /body /html m W I C Z E N I E 2.4 Sïowa kluczowe i opis strony KorzystajÈc z informacji zdobytych podczas lektury niniejszego pod- rozdziaïu oraz z edytora tekstowego (np. systemowego Notatnika), otwórz uprzednio przygotowany dokument HTML i umieĂÊ w nim znaczniki odpowiedzialne za definicjÚ opisu strony i sïów kluczowych. Jeĝeli jeszcze nie wiesz, co powinno znaleěÊ siÚ w opisie i jakie sïowa wybraÊ, pozostaw wolne miejsce na wpisanie tych elementów w przy- szïoĂci. W przypadku problemów z wykonaniem tego Êwiczenia pomiÚdzy znacznikami head /head dodaj poniĝszy kod. Nie zapomnij doïÈczyÊ opisu i sïów kluczowych. meta name= keywords content= Twoje, sđowa, kluczowe / meta name= description content= Wstaw opis swojej strony / Jeĝeli z jakichĂ powodów miaïeĂ problemy z wykonaniem niniejszego Êwiczenia, gotowy plik moĝesz pobraÊ ze strony http://danowski.pl/html5. 30 HTML5 • mwiczenia praktyczne Inne elementy skïadowe nagïówka strony Nagïówek head /head moĝe zawieraÊ jeszcze kilka innych znacz- ników zwiÈzanych z okreĂleniem wïaĂciwoĂci strony lub speïniajÈ- cych funkcjÚ informacyjnÈ. Tak siÚ skïada, ĝe elementy te sÈ zwiÈzane ze znacznikiem meta / . Poniĝej opisaïem kilka najwaĝniejszych i naj- czÚĂ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. Uwaĝam, ĝe warto korzystaÊ z tego znacznika. meta name= copyright content= Bartosz Danowski / NastÚpny element mogÈcy wchodziÊ w skïad nagïówka zawiera infor- macje o prawach autorskich. Równieĝ w tym przypadku wpisy te nie sÈ widoczne na zewnÈtrz i majÈ charakter typowo informacyjny. meta name= generator content= Notatnik / WewnÈtrz strony moĝemy równieĝ zamieĂciÊ informacje na temat narzÚdzia, za pomocÈ którego zostaï wykonany dany dokument. Z tego znacznika bardzo chÚtnie korzystajÈ autorzy edytorów i w ten sposób reklamujÈ swój produkt. Podobnie jak poprzednio opisane elementy ten wpis ma charakter informacyjny i nie jest widoczny na stronie. 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. Pole- cenie to jest szczegó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È na dysku w plikach tymczasowych przeglÈdarki. Polecenie to moĝe równieĝ przybraÊ formÚ: meta http-equiv= refresh content= x; url=http://www.adres.pl / Rozdziaï 2. • Struktura dokumentu HTML5 31 Spowoduje ono automatyczne przeniesienie odwiedzajÈcego po upïy- wie x sekund pod nowy adres zadeklarowany w sekcji url. O przydatnoĂci tego polecenia nie muszÚ chyba nikogo przekonywaÊ. Wiersz ten rozwiÈzuje problem ze zmianÈ adresu i utratÈ odwiedza- jÈ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 stary adres, zostanie automatycznie przekierowany do aktualnej wersji witryny. Warto wiedzieÊ, ĝe czÚĂÊ serwisów indeksujÈcych korzysta z meta name= robots / , który okreĂla, czy dana strona powinna byÊ indekso- wana oraz czy linki na niej zawarte równieĝ majÈ byÊ dodane do bazy serwisu katalogujÈcego. Przy zastosowaniu polecenia robots atrybut content zawiera nastÚpujÈce dyrektywy informujÈce o dopuszczonych operacjach dla naszej strony: T index — strona powinna byÊ zaindeksowana; T noindex — strona nie powinna byÊ zaindeksowana; T follow — linki z tej strony powinny byÊ zaindeksowane; T nofollow — linki z tej strony nie powinny byÊ zaindeksowane; T all równa siÚ index, follow — wartoĂÊ domyĂlna; T 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Ăni- kami prowadzÈcymi do podstron. Warto, abyĂ zapamiÚtaï, ĝe dla wiÚkszoĂci witryn takie rozwiÈzanie jest zdecydowanie 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 dokumen- tów do innych katalogów. Jak siÚ póěniej dowiemy, odsyïacze majÈ róĝne formy, dlatego przy takiej operacji nietrudno o zerwanie odnoĂni- ków, a pamiÚtanie przy przenoszeniu o zmianie kaĝdego z nich jest kïopotliwe. 32 HTML5 • mwiczenia praktyczne Ostatnim poleceniem wchodzÈcym w skïad nagïówka dokumentu jest link / , który w naszym przypadku bÚdzie odpowiedzialny za doïÈ- czanie zewnÚtrznego arkusza stylów. Element link / ma nastÚpujÈcÈ konstrukcjÚ: link rel= stylesheet href= arkusz.css type= text/css / m W I C Z E N I E 2.5 Uzupeïnianie szablonu dokumentu o dodatkowe elementy KorzystajÈc z informacji zdobytych podczas lektury niniejszego podroz- dziaïu, otwórz uprzednio przygotowany dokument HTML i umieĂÊ w nim znaczniki, które uwaĝasz za potrzebne. Jeĝeli jeszcze nie wiesz, które znaczniki bÚdÈ potrzebne, skorzystaj z mojej propozycji widocz- nej poniĝej. meta name= author content= Bartosz Danowski / meta name= robots content= index,follow / link rel= stylesheet href= arkusz.css type= text/css / Zapisz zmodyfikowany plik HTML. Jeĝeli korzystasz z Notatnika, pamiÚtaj o tym, aby ustawiÊ kodowanie na UTF-8. Jeĝeli z jakichĂ powodów miaïeĂ problemy z wykonaniem niniejszego Êwiczenia, gotowy plik moĝesz pobraÊ ze strony http://danowski.pl/html5. Ciaïo dokumentu Wiesz juĝ, ĝe dokument HTML ma swoje okreĂlone ramy oraz nagïó- wek. Elementy te majÈ znaczenie czysto konfiguracyjne lub informa- cyjne i poza tytuïem nie sÈ widoczne na zewnÈtrz. Teraz przyszïa pora, by poznaÊ kolejne elementy strony WWW. Najwaĝniejszym znacznikiem odpowiedzialnym za wydzielenie gïów- nej sekcji dokumentu HTML jest body /body . Wszystkie informa- cje, 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 stosunku do pozostaïych znaczników. Rozdziaï 2. • Struktura dokumentu HTML5 33 !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.3 widaÊ podglÈd strony, jaka powstaïa po wprowadze- niu kodu z przykïadu zamieszczonego wczeĂniej, zawierajÈcego nie- zbÚdne elementy kaĝdej strony WWW. Rysunek 2.3. Efekt dziaïania kodu z listingu zamieszczonego powyĝej Jak widzisz, nie jest to nic specjalnego — czarny tekst na domyĂlnym biaïym lub szarym 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 elementów. Niemniej jednak to juĝ Twoja pierwsza strona! m W I C Z E N I E 2.6 Ciaïo dokumentu KorzystajÈc z informacji zdobytych podczas lektury niniejszego podroz- dziaïu, otwórz uprzednio przygotowany dokument HTML i sprawdě, czy w strukturze dokumentu uwzglÚdniono znacznik body /body , a jeĝeli zajdzie taka potrzeba, dopisz go. NastÚpnie pomiÚdzy znaczni- kami body /body umieĂÊ dowolny tekst. Zapisz zmodyfikowany plik HTML. Jeĝeli korzystasz z Notatnika, pamiÚ- taj o tym, aby ustawiÊ kodowanie na UTF-8. NastÚpnie spróbuj otworzyÊ swojÈ pierwszÈ stronÚ WWW w przeglÈdarce i sprawdě efekt koñcowy. 34 HTML5 • mwiczenia praktyczne Jeĝeli z jakichĂ powodów miaïeĂ problemy z wykonaniem niniejszego Êwiczenia, gotowy plik moĝesz pobraÊ ze strony http://danowski.pl/html5. Twórcy piÈtej specyfikacji jÚzyka HTML dokonali analizy struktury witryny i wyróĝnili w niej kilka dodatkowych sekcji, a nastÚpnie przy- pisali 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. T header /header — pomiÚdzy znacznikami powinna byÊ zamieszczona czÚĂÊ strony, która ma charakter nagïówka i rozpoczyna TwojÈ stronÚ. T nav /nav — pomiÚdzy znacznikami powinny byÊ zamieszczone elementy odpowiedzialne za gïówne menu nawigacyjne witryny. T article /article — pomiÚdzy znacznikami zamieszczamy zestaw elementów tworzÈcych spójny artykuï (np. nagïówek i blok tekstu). T section /section — pomiÚdzy znacznikami zamieszczamy wybranÈ zawartoĂÊ czÚĂci witryny tworzÈcÈ spójnÈ sekcjÚ, np. tytuï i wstÚp artykuïu widoczny na stronie gïównej. T aside /aside — pomiÚdzy znacznikami powinna byÊ zamieszczona czÚĂÊ strony, która jest elementem uzupeïniajÈcym gïównÈ strukturÚ strony. T footer /footer — pomiÚdzy znacznikami powinna byÊ zamieszczona czÚĂÊ strony, która ma charakter stopki i zamyka TwojÈ stronÚ. Na rysunku 2.4 przedstawiïem schemat ukïadu strony WWW wyko- rzystujÈcej nowe znaczniki. Natomiast poniĝej znajduje siÚ prosty przykïadowy listing kodu, który odpowiada za stworzenie ukïadu strony z rysunku 2.4. PragnÚ w tym miejscu zauwaĝyÊ, ĝe w dalszej czÚĂci niniejszej ksiÈĝki bÚdziemy pró- bowaÊ wspólnie stworzyÊ stronÚ o ukïadzie podobnym do tego z powyĝ- szego rysunku. OczywiĂcie do realizacji tego zadania wykorzystamy nowe znaczniki strukturalne. Rozdziaï 2. • Struktura dokumentu HTML5 35 Rysunek 2.4. Schemat ukïadu strony z wykorzystaniem nowych znaczników !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 m W I C Z E N I E 2.7 Struktura dokumentu KorzystajÈc z informacji zdobytych podczas lektury niniejszego pod- rozdziaïu, otwórz uprzednio przygotowany dokument HTML i pomiÚ- dzy body /body wstaw nowe znaczniki odpowiedzialne za stworzenie struktury strony WWW. Zmodyfikowana struktura dokumentu powinna wyglÈdaÊ mniej wiÚcej tak: !doctype html html head meta charset= UTF-8 / title Tytuđ przykđadowej strony 36 HTML5 • mwiczenia praktyczne /title meta name= keywords content= Twoje, sđowa, kluczowe, / meta name= description content= Wstaw opis swojej strony / meta name= author content= Bartosz Danowski / meta name= robots content= index,follow / link rel= stylesheet href= arkusz.css type= text/css / /head body header /header nav /nav article section /section /article aside /aside footer /footer /body /html Zapisz zmodyfikowany plik HTML. Jeĝeli korzystasz z Notatnika, pamiÚtaj o tym, aby ustawiÊ kodowanie na UTF-8. Jeĝeli z jakichĂ powodów miaïeĂ problemy z wykonaniem niniejszego Êwiczenia, gotowy plik moĝesz pobraÊ ze strony http://danowski.pl/html5.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Ćwiczenia praktyczne
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ą: