HTML5. Ćwiczenia praktyczne [PDF]
Czas wreszcie poznać HTML… teraz w nowej odsłonie! Poznaj strukturę, nowe możliwości oraz elementy języka HTML5 Dowiedz
143 83 4MB
Polish Pages 190 Year 2012
Papiere empfehlen
![HTML5. Ćwiczenia praktyczne [PDF]](https://vdoc.tips/img/200x200/html5-wiczenia-praktyczne.jpg)
- Author / Uploaded
- Bartosz Danowski
Datei wird geladen, bitte warten...
Zitiervorschau
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: [email protected] 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_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. ISBN: 978-83-246-4705-7 Copyright © Helion 2012 Printed in Poland. • Poleć książkę na Facebook.com • Kup w wersji papierowej • 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 Elementy podstawowe Nagłówek dokumentu Ciało dokumentu
Rozdział 3. 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 • Ćwiczenia praktyczne
Rozdział 5. Praktyczne projekty
167
Szkielet strony Obstylowanie Walidacja
167 171 175
Dodatek
181
Przydatne adresy Formularz oparty na skrypcie FormMail
181 182
Podsumowanie
187
Wstęp Nie będę ukrywał, że pisanie jest moją pasją! Pierwszą książkę opublikowałem dwanaście lat temu i były to ćwiczenia praktyczne poświęcone językowi HTML4. Książka okazała się wielkim bestsellerem i sprzedała się jak przysłowiowe ciepłe bułeczki. Przez ostatnich dwanaście lat napisałem kilkadziesiąt różnych książek poświęconych m.in. tworzeniu stron WWW, ich pozycjonowaniu i optymalizacji oraz obsłudze popularnych programów. W 2006 roku historia pierwszy raz zatoczyła koło i ponownie napisałem ćwiczenia praktyczne poświęcone językowi XHTML. Natomiast dzisiaj, po dwunastu latach, znowu miałem okazję napisać ćwiczenia dotyczące języka HTML, a dokładniej jego najnowszej wersji HTML5. Taki obrót spraw cieszy mnie niezmiernie i mam nadzieję, że nowe ćwiczenia powtórzą sukces tych, którymi debiutowałem dwanaście lat temu! Język HTML5 to efekt zaprzestania rozwijania języka XHTML2, powrotu do korzeni i podąż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 przeoczeń w specyfikacji HTML4. Najważniejsze nowości HTML5 to: T Wprowadzono nowe elementy i znaczniki. T Usunięto przestarzałe elementy, np. i . T Usprawniono obsługę błędów podczas parsowania HTML.
6
HTML5 • Ćwiczenia praktyczne T Usprawniono obsługę formularzy, dodając m.in. możliwość
sprawdzania wprowadzanych danych oraz deklarowania obowiązkowych pól. T Wprowadzono obsługę elementów multimedialnych i graficznych, np. i . T Wprowadzono wiele API dla aplikacji internetowych, np. obsługę drag & drop. Dzięki niniejszym ćwiczeniom poznasz strukturę, nowe możliwości oraz elementy języka HTML5. Dodatkowo dowiesz się, w jaki sposób korzystać z popularnych właściwości oferowanych przez kaskadowe arkusze stylów. Całość materiału została dobrana w taki sposób, że po przeczytaniu poszczególnych rozdziałów i wykonaniu ćwiczeń będziesz umiał samodzielnie zbudować swoją własną stronę WWW wykorzystującą zalety nowego języka. Nie obawiaj się, że materiał omówiony w niniejszej książce jest dla Ciebie zbyt trudny i nie dasz sobie rady z budową własnej witryny. Wbrew pozorom poznanie języka HTML5 czy kaskadowych arkuszy stylów nie jest niczym skomplikowanym i przy odrobinie dobrej woli sprostasz temu zadaniu. Uwaga, na potrzeby niniejszej książki poczyniłem pewne założenia. Otóż musisz umieć obsługiwać komputer w stopniu podstawowym, a przygotowanie dokumentu tekstowego za pomocą systemowego Notatnika lub innego tekstowego edytora nie powinno być dla Ciebie problemem. Jeżeli nie spełniasz powyższych wymagań, zacznij od lektury innych książek Wydawnictwa Helion. Zdaję sobie sprawę, że temat tworzenia własnej strony WWW oraz magiczne znaczniki i atrybuty mogą na początku sprawić Ci kłopot. Dlatego jeżeli w trakcie lektury lub po jej zakończeniu napotkasz problemy albo będziesz mieć wątpliwości, napisz do mnie. Możesz liczyć na szybką pomoc oraz sprawne rozwiązanie swojego problemu. Niezbędne dane kontaktowe znajdziesz poniżej. Na koniec pragnę podziękować za zaufanie, jakim mnie obdarzyłeś, kupując moją książkę. Mam nadzieję, że po skończonej lekturze będziesz zadowolony z efektów mojej pracy i z zainteresowaniem sięgniesz po inne książki, których jestem autorem. Bartosz Danowski [email protected] http://danowski.pl/
1 Wprowadzenie Zanim zaczniesz przygodę z HTML5, musisz sobie uświadomić, że język HTML5 jest dopiero w fazie tworzenia. Mówiąc prościej, konsorcjum W3C — http://www.w3.org/, które odpowiada za jego kształt i rozwój, dopiero opracowuje poszczególne elementy specyfikacji. Z tego powodu podczas prac nad książką, którą trzymasz w ręku, musiałem poczynić kilka istotnych założeń. T Skupiłem się wyłącznie na tych elementach HTML5, które mają realne kształty i są obsługiwane przynajmniej przez jedną przeglądarkę wiodącą. T Książka ze względu na swoją formę nie zawiera opisu nowych API wprowadzonych w piątej specyfikacji języka HTML. Musiałem również zrezygnować z opisu funkcji canvas. Elementy te nie są potrzebne do tworzenia prostych stron WWW. Jeżeli jednak po poznaniu podstaw HTML5 uznasz, że chcesz poznać ten język dokładnie, polecam lekturę bardziej zaawansowanych książek o HTML5. T Musisz liczyć się z tym, że niektóre opisane elementy mogą ulec zmianie w przyszłości, ponieważ specyfikacja nie jest jeszcze oficjalnie ukończona i twórcy cały czas wprowadzają zmiany. Dodatkowo przeglądarki stron WWW w różny sposób interpretują działanie znaczników wprowadzonych w propozycji nowych wersji HTML5. T W niniejszej książce używałem tylko najnowszych wersji przeglądarek stron WWW. Fakt ten jest bardzo ważny, ponieważ każda nowa wersja przeglądarki wprowadza liczne usprawnienia w obsłudze HTML5.
8
HTML5 • Ćwiczenia praktyczne
Dodatkowo z uwagi na charakter książki i niewielką liczbę stron skupiłem się na najważniejszych znacznikach wykorzystywanych podczas tworzenia typowych stron. Uzupełnieniem całości jest rozdział poświęcony kaskadowym arkuszom stylów, bez których trudno dzisiaj mówić o projektowaniu stron WWW. Połączenie wszystkich opisanych elementów pozwoli Ci na szybkie i sprawne stworzenie strony zgodnej ze wstępną wersją specyfikacji HTML5. Musisz jednak mieć świadomość, że niniejsze ćwiczenia to wstęp do nauki HTML5 oraz kaskadowych arkuszy stylów. Dlatego po lekturze ćwiczeń możesz zainteresować się innymi, bardziej rozbudowanymi publikacjami poświęconymi HTML5.
Podstawowe informacje o języku HTML Zacznijmy od krótkiego przedstawienia genezy języków HTML oraz CSS, które odpowiadają za budowę strony i kontrolę jej wyglądu. Musisz wiedzieć, że język HTML jest elementem niezbędnym do budowy własnej strony. Natomiast CSS to zestaw funkcji, za pomocą których możesz kontrolować wygląd poszczególnych elementów na stronie. W skrócie można powiedzieć, że kaskadowe arkusze stylów to pewnego rodzaju uzupełnienie, bez którego można się obejść, wykorzystując rozwiązania dostępne np. w czystym języku HTML. Zapamiętaj jednak, że nowoczesna strona WWW to — w dużym uproszczeniu — połączenie języka HTML i CSS. Konstrukcja języków HTML i CSS jest standaryzowana i określona przez odpowiednią specyfikację. Jest to konieczne w celu zachowania porządku oraz uniezależnienia języków od platform sprzętowych i rozwiązań programowych poszczególnych twórców przeglądarek. Standaryzacją zajmuje się W3C — http://www.w3.org/. Poniżej zamieściłem adresy pełnych wersji specyfikacji HTML4, CSS2 oraz projektów HTML5 i CSS3. T HTML4 — http://www.w3.org/TR/html4/, T HTML5 — http://www.w3.org/TR/html5/, T CSS2 — http://www.w3.org/TR/CSS21/, T CSS3 — http://www.w3.org/TR/CSS/.
Rozdział 1. • Wprowadzenie
9
Niezależnie od tego, z jakiej specyfikacji korzystasz, musisz pamiętać, że pliki zawierające odpowiednie znaczniki HTML i CSS są dokumentami tekstowymi, a co za tym idzie, mogą być tworzone i przeglądane za pomocą dowolnego edytora tekstu, np. systemowego Notatnika. W zależności od zawartości rozszerzenie pliku może się różnić, jednak nadal mamy do czynienia z dokumentem tekstowym. Poniżej zamieściłem wykaz najpopularniejszych typów plików wraz z opisem ich zawartości. T htm — plik tekstowy zawierający kod HTML, CSS, czasami też kod JavaScript; T html — plik tekstowy zawierający kod HTML, CSS, czasami też kod JavaScript; T shtml — plik tekstowy zawierający kod HTML, CSS oraz instrukcje SSI — pliki takie są przetwarzane przez serwer przed wysłaniem do przeglądarki; T php — pliki tekstowe zawierające kod HTML, CSS połączony ze skryptami PHP; T cgi — pliki tekstowe zawierające skrypty napisane w Perlu bądź Shellu — często połączone z kodem HTML; T pl — pliki tekstowe zawierające skrypty napisane w Perlu — często połączone z kodem HTML; T js — pliki tekstowe zawierające skrypty napisane w języku JavaScript; T css — pliki tekstowe zawierające zewnętrzne arkusze stylów. W dalszych rozważaniach będziemy korzystać z plików html oraz css.
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: . Znaczniki pojawiają się prawie zawsze parami, tzn. występuje znacznik otwierający oraz znacznik zamykający:
W praktyce może to wyglądać mniej więcej tak:
Przykład akapitu.
10
HTML5 • Ćwiczenia praktyczne
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ściwości atrybutów obowiązkowo powinny zostać zapisane w cudzysłowie " ".
Przykład akapitu.
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. A zatem, jak łatwo się domyślić, od tej zasady są wyjątki. Jest ich niewiele, ale są. Typowe przykłady, z którymi się spotkasz, to:
, , , , , . W przypadku najnowszej specyfikacji języka HTML znaczniki i atrybuty musimy wpisywać, 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 przypadku atrybutów wartości występujące po znaku równości należy zawsze zapisywać, używając cudzysłowu.
Najważniejsze różnice i zasady Bezpośrednim poprzednikiem języka HTML5 jest HTML4, a dokładnie jego odsłona oznaczona numerem 4.01. Język ten był rozwijany do pewnego czasu. Następnie twórcy wybrali inną drogę i zaczęli rozwijać XHTML, który doczekał się dwóch głównych specyfikacji. Po wstępnym zachwycie XHTML zdecydowano o zaniechaniu jego dalszego rozwijania i powrocie do prac nad kolejną wersją czystego HTML-a. Nowa odsłona języka HTML5 wprowadza szereg zmian i różnic w stosunku do poprzednich wersji HTML4. Najważniejsze zmiany wypunktowałem poniżej. T Kompatybilność — język HTML5 jest zgodny z poprzednią wersją specyfikacji oznaczoną numerem 4. W praktyce oznacza to, że strona WWW napisana na bazie nowej wersji HTML będzie działać w przeglądarkach, które nie potrafią obsługiwać tego języka. Oczywiście nowe znaczniki i elementy zostaną
Rozdział 1. • Wprowadzenie
T
T
T
T
11
zignorowane, ale główny szkielet witryny oraz znaczniki znane z poprzednich specyfikacji zadziałają poprawnie. Takie podejście przeważyło o popularności wstępnej wersji języka, która z powodzeniem jest używana w wielu projektach. Brak przestarzałych znaczników — propozycja nowej wersji specyfikacji języka HTML5 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.: , , , , , , , , , , . 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: . Dla porównania ten sam zapis w poprzedniej wersji specyfikacji miał postać . 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: , , , , , , , . 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 Google Docs).
Praca z językiem HTML5 to również kilka żelaznych zasad, których bezwzględnie musisz przestrzegać. Część z tych zasad obowiązywała już w przypadku HTML4 lub XHTML. Pozostałe to nowe wymagania i obostrzenia wprowadzone w najnowszej odsłonie języka.
12
HTML5 • Ćwiczenia praktyczne
Zasada 1. Nigdy nie krzyżuj znaczników Pierwszą i jedną z najważniejszych zasad obowiązujących podczas tworzenia stron WWW jest odpowiednie zagnieżdżanie znaczników. Innymi słowy, chodzi o to, aby unikać krzyżowania znaczników w kodzie strony. Przyjrzyj się poniższemu przykładowi, który prezentuje skrzyżowane znaczniki.
Przykład bloku tekstu ze skrzyżowanymi znacznikami
Teraz przykład, w którym znaczniki zostały prawidłowo zagnieżdżone.
Przykład bloku tekstu ze skrzyżowanymi znacznikami
Zasada 2. Zawsze zamykaj wszystkie znaczniki Język XHTML wprowadził regułę, w myśl której wszystkie znaczniki powinny być bezwzględnie zamykane. Sprawa jest prosta i oczywista w przypadku większości znaczników, gdyż znaczniki zawsze występują w parze: znacznik otwierający i znacznik zamykający.
Przykład bloku tekstu
Problemy mogą się pojawić w przypadku tych elementów, które w specyfikacji nie mają przewidzianych znaczników zamykających. Mam tutaj na myśli następujące znaczniki: T
, T , T , T . Twórcy XHTML znaleźli rozwiązanie tego problemu. Wystarczy, że na końcu znacznika przed znakiem > dodamy /. Oto przykład: T
, T , T , T . Ważne jest, aby bezpośrednio przed znakiem / dodać spację. Brak spacji może powodować nieprawidłowe działanie strony WWW w niektórych przeglądarkach.
Rozdział 1. • Wprowadzenie
13
HTML5 odchodzi od zasady obowiązkowego zamykania znaczników. Oznacza to, że poniższy kod możemy uznać za poprawny.
| komórka | komórka |
| komórka | komórka |
tabeli tabeli tabeli tabeli
Takie rozwiązanie w moim odczuciu jest błędem, ponieważ w przypadku osób początkujących może prowadzić do licznych problemów z poprawnością kodu. Oszczędności w rozmiarze kodu strony (mniej znaczników to mniejszy rozmiar pliku) są symboliczne i w zestawieniu z ewentualnymi problemami nie są wiele warte. Na szczęście twórcy HTML5 nie zabronili nam zamykania znaczników. Dlatego w niniejszej książce będę konsekwentnie zachęcał do zamykania wszystkich znaczników, tak jak to robiliśmy w przypadku specyfikacji XHTML. Poniżej zamieściłem przykładowy kod wraz z domykającymi znacznikami.
| komórka | komórka |
| komórka | komórka |
tabeli tabeli tabeli tabeli
Zasada 3. Wpisując znaczniki i atrybuty, zawsze używaj małych liter Piąta specyfikacja języka HTML porządkuje wiele spraw. Jedną z istotniejszych kwestii jest wprowadzenie obowiązku stosowania wyłącznie małych liter do zapisu nazw znaczników oraz ich atrybutów i wartości. Poprawny zapis ma więc postać:
Przykładowy blok tekstu z własną klasą
14
HTML5 • Ćwiczenia praktyczne
Natomiast forma widoczna poniżej uznawana jest za błędną i należy jej unikać.
Przykładowy blok tekstu z własną klasą
Zasada 4. Używaj cudzysłowów dla wszystkich atrybutów Większość znaczników występujących w języku HTML5 może mieć przypisane dodatkowe atrybuty wraz z określonymi wartościami. Tworząc strony na bazie najnowszej odsłony języka HTML5, należy pamiętać o tym, że podczas określania atrybutów wraz z ich wartościami zawsze używamy cudzysłowów. Odpowiedni przykład znajduje się poniżej.
Mam nadzieję, że zrozumiałeś, o co chodzi. Pamiętaj jednak, że zbyt dużo zagnieżdżonych tabel na stronie może spowodować spore zamieszanie oraz znaczne zwiększenie objętości pliku. Starsze przeglądarki
Rozdział 3. • Elementy języka HTML5
95
Rysunek 3.27. Przykład zagnieżdżonych tabel
charakteryzowały się ciekawym podejściem do tabel: otóż wczytywały one strony i w chwili, gdy napotkały znacznik
3.21
Zagnieżdżanie tabel
Stwórz prostą stronę i umieść w niej zagnieżdżoną tabelę. Aby wykonać to ćwiczenie, postępuj zgodnie z instrukcjami zamieszczonymi w kolejnych podpunktach. 1. Otwórz plik przygotowany w ćwiczeniu 2.6. 2. Pomiędzy znacznikami umieść w pliku zagnieżdżone tabele. Proponuję, abyś do testów wybrał tabelę widoczną na rysunku 3.27. W tym celu skorzystaj ze znaczników
96
HTML5 • Ćwiczenia praktyczne
Dodatkowe elementy tabeli Opisywana specyfikacja języka HTML wprowadza trzy nowe znaczniki związane z tabelami. Mam tutaj na myśli: , ´ oraz . Znaczniki te służą do wyodrębnienia nagłówka, ciała i stopki tabeli i są bardzo przydatne przy formatowaniu za pomocą kaskadowych arkuszy stylów. Poniżej przedstawiłem prosty listing, na którym widać przykład użycia wspomnianych znaczników. Nie przewidziałem użycia obrazka ani ćwiczenia, ponieważ na tym etapie nie są one konieczne, gdyż opisywane znaczniki nie mają na razie żadnego wpływu na wygląd strony WWW.
| nagłówek tabeli |
| ciało tabeli |
| stopka tabeli |
Podpis tabeli Każda tabela może zawierać podpis, który możemy stworzyć na kilka sposobów, wykorzystując do tego różne znaczniki dostępne we wstępnej wersji piątej specyfikacji języka HTML. Najprostszym sposobem uzyskania podpisu jest element , który powinien znaleźć się pomiędzy znacznikami
| 1 | 2 |
| 3 | |
Drugim sposobem uzyskania podpisu tabeli jest wykorzystanie omawianego już znacznika oraz . Przykład takiego działania znajduje się poniżej. Natomiast na rysunku 3.28 zamieściłem efekt działania obu metod.
Tabela 1.1. Każda tabela może zawierać podpis
| 1 | 2 |
| 3 | |
Rysunek 3.28. Na górze tabela z podpisem uzyskanym za pomocą znacznika . Na dole ta sama tabela z podpisem stworzonym przy użyciu znacznika i
Różnice pomiędzy oboma sposobami dodawania podpisu do tabeli są niewielkie, ale można je zauważyć na rysunku 3.28. Mam tutaj na myśli to, że w przypadku znacznika podpis jest domyślnie wyśrodkowany. Aby uzyskać taki sam efekt w drugim przypadku, niezbędne jest wykorzystanie kaskadowych arkuszy stylów.
98
HTML5 • Ćwiczenia praktyczne
Poza tym warto zapamiętać, że w drugim przypadku umieszczenie elementu bezpośrednio po otwierającym znaczniku spowoduje wyświetlenie podpisu nad tabelą. Natomiast umieszczenie tego samego elementu przed zamykającym znacznikiem wymusi pojawienie się podpisu pod tabelą. W przypadku pierwszej metody zmiana położenia podpisu musi się odbyć przy wykorzystaniu kaskadowych arkuszy stylów. Znaczniki oraz możemy wykorzystać również do dodania podpisu pod innymi elementami strony WWW, np. pod rysunkiem, filmem albo listingiem kodu programistycznego. Ć W I C Z E N I E
3.22
Podpis tabeli
Stwórz prostą stronę i umieść na niej tabelę z podpisem. Aby wykonać to ćwiczenie, postępuj zgodnie z instrukcjami zamieszczonymi w kolejnych podpunktach. 1. Otwórz plik przygotowany w ćwiczeniu 3.19. 2. Odszukaj w kodzie strony znaczniki odpowiedzialne za tabelę. Następnie korzystając z jednej z opisanych w niniejszym podrozdziale metod, dodaj podpis tabeli. 3. Jeżeli masz ochotę, możesz spróbować skopiować kod tabeli i wstawić go ponownie w tym samym dokumencie HTML, a następnie dodać podpis, wykorzystując drugą metodę. 4. Zapisz dokument i otwórz go w przeglądarce. Spróbuj przetestować działanie podpisu. Pamiętaj, że w tej chwili Twoja tabela nie będzie miała widocznych krawędzi. Nad tym popracujemy w dalszej części niniejszej książki. Jeżeli z jakichś powodów miałeś problemy z wykonaniem niniejszego ćwiczenia, gotowy plik możesz pobrać ze strony http://danowski.pl/html5.
Rozdział 3. • Elementy języka HTML5
99
Formularze W naszym życiu wypełniamy dziesiątki, jeśli nie tysiące formularzy. Wynika to stąd, że jest to najprostsza forma zdobywania ściśle określonych informacji. Formularz jest używany w bardzo wielu przypadkach. Za jego pomocą zdobywamy informacje o odwiedzających stronę, tworzymy ankiety, książki gości, a nawet zgłaszamy zapytanie do internetowych serwisów katalogujących czy dokonujemy zakupów w sieciowych centrach handlowych. Język HTML posiada zestaw znaczników odpowiedzialnych za generowanie elektronicznych formularzy. Dodatkowo piąta odsłona specyfikacji HTML wprowadza kilka bardzo przydatnych elementów, które znacznie upraszczają budowę własnych formularzy. Jedną z najważniejszych i długo oczekiwanych nowości jest funkcja sprawdzania zawartości danych wprowadzonych do formularza.
Ramy formularza Ramy formularzy na stronie definiuje znacznik . Zdążyłeś już poznać budowę znaczników, więc możesz się spodziewać, że posiada szereg atrybutów — oczywiście, nie mylisz się. Pierwszym atrybutem tego znacznika jest action=" ", który określa rodzaj akcji, jaka ma zostać wykonana po naciśnięciu przycisku OK. Jako wartość action=" " można podać adres odpowiedniego skryptu bądź adres e-mail. Dalej mamy atrybut method=" ", gdzie określa się metodę, która zostanie użyta do wykonania formularza. Do wyboru mamy dwie metody: post i get. Pierwsza z nich, post, służy do zgłaszania długich żądań do serwera, natomiast get zgłasza krótkie żądania. Jest to dość ogólnikowe wyjaśnienie, ale uznałem, że zupełnie wystarczy dla Twoich potrzeb. Jeśli zajmiesz się pisaniem skryptów, wtedy będziesz musiał poszerzyć wiadomości z tego zakresu. Pora na przykład definicji ram formularza:
...
Tak ustawiony formularz wyśle na adres e-mail zawartość wszystkich pól, jakie wstawimy w dalszej części niniejszej publikacji.
100
HTML5 • Ćwiczenia praktyczne
Piąta specyfikacja języka HTML wprowadza dodatkowe atrybuty znacznika . Każda współczesna przeglądarka posiada mechanizmy pozwalające na automatyczne zapamiętywanie danych wprowadzonych do formularzy, a następnie wykorzystanie ich w przyszłości do automatycznego wypełniania innych formularzy. Rozwiązanie to jest bardzo wygodne, ale niestety często może być przyczyną poważnych problemów z wyciekiem ważnych danych. Dlatego w propozycji piątej specyfikacji języka HTML dodano nowy atrybut o nazwie autocomplete=" ", który może przybierać wartości on lub off. Element ten pozwala na kontrolowanie mechanizmu autouzupełniania formularzy. Dokładniej mówiąc, określa on, czy przeglądarka może zapisać dane wprowadzone do formularza do swojej „pamięci”. Domyślnym ustawieniem każdego formularza jest wartość on. Innymi słowy, jeżeli do formularza nie dodasz atrybutu autocomplete="on", to i tak funkcja ta będzie włączona. Ustawienie wartości off spowoduje, że przeglądarka nie będzie zapamiętywać danych wprowadzonych do formularza. Atrybut autocomplete=" " może występować również w odniesieniu do konkretnego pola. Dzięki temu możesz np. zablokować zapamiętywanie haseł lub numerów kart kredytowych, pozwalając jednocześnie na pamiętanie adresu czy nazwiska. Listing widoczny poniżej wyłącza automatyczne wypełnianie pól formularza danymi przechowywanymi w pamięci przeglądarki:
...
Drugi nowy atrybut nosi nazwę novalidate=" " i przybiera tylko jedną wartość, novalidate. Ten element pozwala wyłączyć domyślne sprawdzanie zawartości wysyłanego formularza.
...
Mówiąc prościej, jeżeli w kodzie strony w znaczniku znajdzie się atrybut novalidate="novalidate", formularz zostanie wysłany bez sprawdzania zawartości. W praktyce oznacza to, że wysłany zostanie również formularz z błędnymi danymi lub z pustymi polami.
Rozdział 3. • Elementy języka HTML5
101
Pola typu input Formularz elektroniczny tak jak jego papierowy odpowiednik składa się z odpowiednich pól służących do różnych celów. Pierwsza grupa pól formularza to input — czyli pola pozwalające wprowadzić określone typy danych. Oto przykład ogólnej definicji:
Przyjrzyjmy się bliżej poszczególnym atrybutom znacznika . Pierwszy z nich nosi nazwę type=" " i określa rodzaj pola formularza. Do wyboru mamy następujące typy pól: T type="text" — wstawia zwykłe pole tekstowe. T type="search" — zwykłe pole tekstowe wykorzystywane podczas budowy wyszukiwarki osadzonej na stronie WWW. Cechą charakterystyczną pola typu search jest to, że po wprowadzeniu treści pojawia się znak x, za pomocą którego możemy sprawnie usunąć wpisany tekst (rysunek 3.29). Rysunek 3.29. Przykład wykorzystania pola typu search. Na pierwszym rysunku pole jest puste. Drugie pole pokazuje znak x, który pozwala na szybkie wyczyszczenie jego zawartości T type="tel" — pole tekstowe służące do zbierania informacji
na temat numeru telefonu. T type="url" — pole tekstowe wykorzystywane do wprowadzania adresu strony WWW w formacie http://www.adresstrony.pl. T type="email" — pole tekstowe wykorzystywane do wprowadzania adresu e-mail. T type="datetime" — pole do wprowadzania liczb oznaczających datę i czas dla strefy UTC w formacie rrrr-mm-ddThh:mmZ. Jeżeli przeglądarka poprawnie obsługuje ten element, to po kliknięciu
102
HTML5 • Ćwiczenia praktyczne
tego pola kursorem myszy powinien się pojawić wygodny kalendarz, z którego możemy wybrać odpowiednią datę (rysunek 3.30). Rysunek 3.30. Przykład poprawnej obsługi pola
w przeglądarce Opera
T type="date" — pole do wprowadzania liczb oznaczających datę
w formacie rrrr-mm-dd (np. 2010-12-16). Jeżeli przeglądarka poprawnie obsługuje ten element, to po kliknięciu tego pola kursorem myszy powinien się pojawić wygodny kalendarz, z którego możemy wybrać odpowiednią datę. Kalendarz jest podobny do tego z rysunku 3.30. T type="month" — pole do wprowadzania liczb oznaczających datę w formacie rrrr-mm (np. 2010-12). Jeżeli przeglądarka poprawnie obsługuje ten element, to po kliknięciu tego pola kursorem myszy powinien się pojawić wygodny kalendarz, z którego możemy wybrać odpowiednią datę. Kalendarz jest podobny do tego z rysunku 3.30. T type="week" — pole do wprowadzania liczb oznaczających datę w formacie rrrr-numer tygodnia (np. 2010-W50). Jeżeli przeglądarka poprawnie obsługuje ten element, to po kliknięciu tego pola kursorem myszy powinien się pojawić wygodny kalendarz, z którego możemy wybrać odpowiednią datę. Kalendarz jest podobny do tego z rysunku 3.30. T type="time" — pole do wprowadzania liczb oznaczających czas w formacie hh:mm:ss (np. 23:59:59). Jeżeli przeglądarka poprawnie obsługuje ten element, to obok pola powinny pojawić się dodatkowe przyciski, za pomocą których możemy ustawić odpowiednią godzinę (rysunek 3.31).
Rozdział 3. • Elementy języka HTML5
103
Rysunek 3.31. Przykład poprawnej obsługi pola w przeglądarce Opera T type="datetime-local" — pole do wprowadzania liczb
oznaczających datę i czas w formacie rrrr-mm-ddThh:mm (np. 2010-12-16T14:55). Jeżeli przeglądarka poprawnie obsługuje ten element, to po kliknięciu tego pola kursorem myszy powinien się pojawić wygodny kalendarz, z którego możemy wybrać odpowiednią datę (rysunek 3.30). T type="number" — pole wykorzystywane do wprowadzania liczb. Jeżeli przeglądarka poprawnie obsługuje ten element, to obok pola powinny się pojawić dodatkowe przyciski, za pomocą których możemy ustawić odpowiednią wartość liczbową (rysunek 3.31). T type="range" — specjalny suwak (rysunek 3.32) do oznaczania wartości liczbowej o znaczeniu czysto semantycznym. Suwak można wykorzystać do zbierania danych na temat stopnia zadowolenia klienta. Warto pamiętać o tym, że element ten możemy uzupełnić o kilka dodatkowych atrybutów, przez co pobrane dane będziemy w stanie przeliczyć na konkretne wartości. Więcej na ten temat znajdziesz przy okazji opisu atrybutów min=" ", max=" " oraz step=" ". Rysunek 3.32. Przykład wykorzystania nowego rodzaju pola T type="color" — pole do wprowadzania informacji na temat koloru
w formacie sRGB. W przeglądarce, która poprawnie obsługuje ten element, po kliknięciu pola powinna się pojawić paleta wyboru kolorów podobna do tej, jaką przedstawia rysunek 3.33. T type="image" — pole wykorzystywane jako przycisk graficzny z własnym elementem graficznym w postaci obrazka. Warto zapamiętać, że w parze z przyciskiem graficznym występuje
104
HTML5 • Ćwiczenia praktyczne
Rysunek 3.33. Paleta kolorów widoczna w oknie przeglądarki Opera
T
T
T T
T T T T
atrybut alt=" ", w którym podajemy tekst alternatywny, na wypadek gdyby z jakichś powodów obrazek się nie pojawił. Drugim obowiązkowym atrybutem jest src=" ", który służy do określenia ścieżki dostępu i nazwy pliku obrazka mającego pełnić funkcję przycisku. type="checkbox" — wstawia małe okienka, które możemy dowolnie zaznaczać. To pole daje nam możliwość zaznaczenia więcej niż jednej odpowiedzi. type="radio" — pole podobne w działaniu do checkbox, z tym że możemy wybrać zaledwie jedną z wielu odpowiedzi. Pamiętaj, że wszystkie pola tego typu muszą mieć identyczną wartość atrybutu name. type="password" — pole odpowiedzialne za podanie hasła. Wpisywany tekst jest zamieniany na gwiazdki. type="file" — pozwala dołączyć dowolny plik tekstowy do formularza. W parze z tym polem formularza może występować jeszcze atrybut multiple="multiple" pozwalający użytkownikowi na wskazanie więcej niż jednego pliku, który planuje załączyć do formularza. type="hidden" — wstawia zwykłe pole tekstowe niewidoczne na stronie. type="submit" — wstawia przycisk do formularza; odpowiada za wykonanie action zdefiniowanego dla formularza. type="reset" — przycisk, który czyści wszystkie pola formularza. type="button" — określa przycisk dowolnego przeznaczenia.
W praktyce dodanie klasycznego pola tekstowego wymaga kodu HTML widocznego poniżej. Oczywiście przykładowy kod może być uzupełniony o szereg dodatkowych atrybutów, które opisałem w dalszej części niniejszego podrozdziału.
Rozdział 3. • Elementy języka HTML5
105
Na rysunku 3.34 zamieściłem przykład wszystkich pól typu input wraz z przykładowymi treściami.
Rysunek 3.34. Przykład wykorzystania pól typu input
Kolejny atrybut, name=" ", określa nazwę dla danego pola. Pole jest dość przydatne przy analizowaniu przesłanych danych bądź przy konfiguracji skryptów. Dla wszystkich dostępnych pól wartość tego atrybutu musi być różna. Pamiętaj o jedynym wyjątku, jakim jest pole typu radio — w tym przypadku wszystkie pola wchodzące w skład jednej grupy muszą mieć identyczną nazwę. Oczywiście na stronie może być kilka grup pól i każda grupa powinna mieć inną nazwę.
Przykład definicji pola typu radio z identyczną wartością atrybutu name=" " widać poniżej. W kolejnych podrozdziałach znajdziesz wyjaśnienie znaczenia nowych znaczników.
Rozmiar pizzy
Mała
Średnia
106
HTML5 • Ćwiczenia praktyczne
Duża
Trzecim ważnym atrybutem jest value=" ", który wstawia w dane pole zadeklarowaną wartość. Atrybutu tego można użyć do opisania pól formularza bądź zadeklarowania jakiejś domyślnej wartości dla danego pola. W przykładzie widocznym poniżej dopasowano odpowiednie wartości do konkretnych pól, które zostaną przekazane dalej po wysłaniu formularza.
Rozmiar pizzy
Mała
Średnia
Duża
Jeżeli atrybutu value=" " użyjemy z klasycznym polem tekstowym, to za jego pomocą możemy zasugerować jakiś domyślny tekst, który pojawi się w określonym miejscu. W ten sposób możemy wskazać pewne dane, które powinny się znaleźć w formularzu. Oczywiście użytkownik będzie mógł wprowadzić niezbędne zmiany. Rysunek 3.35 przedstawia efekt działania poniższego kodu.
Rysunek 3.35. Przykład pola tekstowego z domyślnie podaną wartością
Atrybut size=" " służy do określenia liczby znaków mieszczących się w widocznej części pola tekstowego. Wpisanie dłuższego ciągu znaków w takie pole spowoduje przewinięcie jego zawartości; zawartość będzie pokazywana jedynie w małej części.
Rozdział 3. • Elementy języka HTML5
107
Opcja maxlength=" " ogranicza liczbę znaków, jakie można wpisać do zwykłego pola tekstowego, dla którego została zadeklarowana. Oznacza to, że do pola o pojemności dwudziestu znaków nie wpiszesz ich więcej.
Następnym atrybutem, o którym wspomniałem już przy okazji omawiania znacznika , jest autocomplete=" ". Element ten może przybierać wartości on/off i ma takie samo znaczenie jak we wcześniejszym opisie. Użycie atrybutu autocomplete="" w odniesieniu do konkretnego znacznika pozwoli na sterowanie wyłącznie jego właściwościami. Mówiąc prościej, możesz na przykład włączyć zapamiętywanie danych wprowadzanych do całego formularza i jednocześnie wyłączyć je w odniesieniu do wybranego pola. Poniżej przykład, w którym przeglądarka będzie mogła zapamiętać wszystkie pola formularza z wyjątkiem hasła.
Login
Hasło
Kolejnym atrybutem wprowadzonym przez piątą specyfikację języka HTML jest autofocus="autofocus". Element ten pozwala zaznaczyć zawartość pola, do którego został przypisany. Zaznaczenie pojawia się już w chwili wczytania strony do przeglądarki. Na rysunku 3.36 widać efekt działania poniższego kodu.
Rysunek 3.36. Efekt działania atrybutu autofocus="autofocus"
W przypadku pól typu radio lub checkbox może zajść potrzeba oznaczenia któregoś z nich jako naszej propozycji. W ten sposób możemy użytkownikowi strony zasugerować jakieś rozwiązanie (np. wysyłkę za pośrednictwem firmy kurierskiej). Do zaznaczania danego pola służy atrybut checked="checked". Rysunek 3.37 przedstawia efekt działania poniższego kodu.
108
HTML5 • Ćwiczenia praktyczne
Rysunek 3.37. Efekt działania atrybutów: checked= ´"checked" — druga opcja
Opcje wysyłki
Poczta ´Polska
Kurier
Paczkomat
Korzystając z atrybutu disabled="disabled", możemy czasowo wyłączyć wybrane pola (z wyjątkiem pola type="hidden"). Rozwiązanie to przydaje się w sytuacji, gdy zależy nam na czasowym wyłączeniu wybranego pola, ale nie chcemy go usuwać ze strony. Po dodaniu atrybutu disabled="disabled" pole nadal będzie widoczne, ale nie będzie można do niego niczego wpisać. W poniższym przykładzie czasowo wyłączyłem opcję dostawy za pośrednictwem paczkomatów.
Opcje wysyłki
Poczta ´Polska
Kurier
Paczkomat
Jeżeli za pomocą znacznika chcesz stworzyć przycisk z wykorzystaniem własnego obrazka, możesz dodatkowo przy użyciu atrybutów height=" " oraz width=" " określić wysokość i szerokość elementu. Jako wartość każdego z atrybutów możesz podać wymiary liczone w pikselach lub procentach.
Rozdział 3. • Elementy języka HTML5
109
Dzięki kolejnym atrybutom możesz przypisać domyślne wartości dla wybranych pól przeznaczonych do prezentacji cyfr oraz pola typu range. Dzięki temu użytkownik wypełniający formularz będzie mógł udzielić precyzyjniejszych odpowiedzi. Tym razem wyjątkowo zaczniemy od konkretnego przykładu, a dopiero później omówię nowe atrybuty.
Dzięki atrybutom min=" " oraz max=" " możemy określić minimalną i maksymalną wartość, która występuje w danym polu. Następnie za pomocą atrybutu step=" " określamy skok, o jaki zmieniana będzie wartość. W powyższym przykładzie wyświetlone zostanie pole numeryczne ze zdefiniowanymi wartościami od 0 do 10. Zmiana wartości będzie możliwa ze skokiem co 2. Dodatkowo atrybut value="6" ustawia domyślną wartość pola na 6. Na rysunku 3.38 widać przykład wykorzystania omawianego atrybutu. Rysunek 3.38. Przykład wykorzystania atrybutów min=" ", max=" " oraz step=" "
W piątej specyfikacji języka HTML znajdziemy również atrybut list=" ". W połączeniu z dodatkowymi znacznikami ´ oraz pozwala on przypisać do pola tekstowego wartości, które będzie można łatwo wybrać z przygotowanej listy. Wynikiem takiego działania będzie coś w rodzaju klasycznej listy rozwijanej. Kliknięcie pola formularza spowoduje otwarcie listy, na której zobaczymy propozycje przygotowane przez autora formularza. Oczywiście wybór opcji nie jest obowiązkowy i użytkownik będzie mógł wprowadzić inną wartość. Spróbujmy przeanalizować przykład widoczny poniżej:
polski angielski
110
HTML5 • Ćwiczenia praktyczne niemiecki
Zwróć uwagę, że atrybut list=" " znacznika zawiera taką samą wartość jak atrybut id=" " znacznika . Taki stan rzeczy jest bardzo ważny i pozwala na połączenie pola formularza z danymi podanymi pomiędzy znacznikami . Na rysunku 3.39 widać listę rozwijaną przygotowaną na podstawie listingu widocznego powyżej. Rysunek 3.39. Przykład listy rozwijanej ze zdefiniowanymi wartościami
Wspomniałem już o tym, że wstępna wersja piątej specyfikacji języka HTML wprowadza sprawdzanie zawartości pól formularza oraz pozwala określać, które z pól są obowiązkowe. Oznaczanie obowiązkowych pól odbywa się za pomocą atrybutu required="required":
Jeżeli użytkownik strony podczas wypełniania formularza przeoczy pole z nadanym atrybutem required="required" i spróbuje wysłać taki formularz, jego oczom ukaże się stosowny komunikat (rysunek 3.40).
Rysunek 3.40. Komunikat informujący o tym, że wymagane pole nie zostało wypełnione
Kolejną ciekawostką wprowadzoną przez piątą wersję języka HTML jest atrybut placeholder=" ", za pomocą którego możemy wprowadzić wartość, jaka domyślnie pojawi się w polu formularza, ale zniknie natychmiast po kliknięciu go kursorem myszy. Rozwiązanie takie przydaje się bardzo często do tego, aby powiadomić użytkownika o tym, co ma wpisać w dane pole. Poniżej znajduje się przykład wykorzystania atrybutu:
111
Rozdział 3. • Elementy języka HTML5
Przykład działania atrybutu placeholder=" " był widoczny już na rysunkach 3.29 i 3.35, dlatego zrezygnowałem w tym miejscu z zamieszczania wizualizacji. Język HTML w odniesieniu do pól formularza pozwala również na umieszczenie jakiejś treści lub określenie stanu pola formularza, a następnie zablokowanie możliwości jego zmiany. Przyjrzyj się przykładowi widocznemu poniżej:
Atrybut value=" " odpowiada za wyświetlenie w polu domyślnej treści. Natomiast za pomocą readonly="readonly" możemy zablokować edycję zawartości pola. Zapamiętaj, że większość elementów omówionych w niniejszym podrozdziale możesz ze sobą łączyć. Innymi słowy, dla tego samego pola możesz na przykład ustawić atrybuty placeholder=" ", name=" " i list=" ". Zanim jednak puścisz wodze fantazji, zapoznaj się z tabelą 3.4 i sprawdź, które atrybuty mogą występować z danymi typami pól formularza.
hidden
text, search, url, tel
password
datetime, time, date, month, week, time
datetime-local, number
range
color
checkbox, radio
file
submit
image
reset
accept
-
-
-
-
-
-
-
-
-
Tak
-
-
-
alt
-
-
-
-
-
-
-
-
-
-
-
Tak
-
autocomplete
Tabela 3.4. Zestawienie atrybutów znaczników odpowiedzialnych za tworzenie formularzy
-
Tak
Tak
Tak
Tak
Tak
Tak
Tak
-
-
-
-
-
112
HTML5 • Ćwiczenia praktyczne
hidden
text, search, url, tel
password
datetime, time, date, month, week, time
datetime-local, number
range
color
checkbox, radio
file
submit
image
reset
formaction checked
-
-
-
-
-
-
-
-
Tak
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Tak
Tak
-
formenctype
-
-
-
-
-
-
-
-
-
-
Tak
Tak
-
formmethod
-
-
-
-
-
-
-
-
-
-
Tak
Tak
-
formtarget formnovalidate
-
-
-
-
-
-
-
-
-
-
Tak
Tak
-
-
-
-
-
-
-
-
-
-
-
Tak
Tak
-
height
Tabela 3.4. Zestawienie atrybutów znaczników odpowiedzialnych za tworzenie formularzy — ciąg dalszy
-
-
-
-
-
-
-
-
-
-
-
Tak
-
113
Rozdział 3. • Elementy języka HTML5
hidden
text, search, url, tel
password
datetime, time, date, month, week, time
datetime-local, number
range
color
checkbox, radio
file
submit
image
reset
list
-
Tak
Tak
-
Tak
Tak
Tak
Tak
-
-
-
-
-
max
-
-
-
-
Tak
Tak
Tak
-
-
-
-
-
-
min maxlength
-
Tak
Tak
Tak
-
-
-
-
-
-
-
-
-
-
-
-
-
Tak
Tak
Tak
-
-
-
-
-
-
multiple
-
-
Tak
-
-
-
-
-
-
Tak
-
-
-
placeholder pattern
-
Tak
Tak
Tak
-
-
-
-
-
-
-
-
-
-
Tak
Tak
Tak
-
-
-
-
-
-
-
-
-
readonly
-
Tak
Tak
Tak
Tak
Tak
-
-
-
-
-
-
-
required
-
Tak
Tak
Tak
Tak
Tak
-
-
Tak
Tak
-
-
-
size
Tabela 3.4. Zestawienie atrybutów znaczników odpowiedzialnych za tworzenie formularzy — ciąg dalszy
-
Tak
Tak
Tak
-
-
-
-
-
-
-
-
-
114
HTML5 • Ćwiczenia praktyczne
hidden
text, search, url, tel
password
datetime, time, date, month, week, time
datetime-local, number
range
color
checkbox, radio
file
submit
image
reset
src
-
-
-
-
-
-
-
-
-
-
-
Tak
-
step
-
-
-
-
Tak
Tak
Tak
-
-
-
-
-
-
width
Tabela 3.4. Zestawienie atrybutów znaczników odpowiedzialnych za tworzenie formularzy — ciąg dalszy
-
-
-
-
-
-
-
-
-
-
-
Tak
-
Pole typu select Kolejną grupą pól formularza jest select. Pole tego typu pozwala na wybranie jednej lub kilku pozycji z listy. Jego konstrukcja wygląda następująco:
pierwsza pozycja druga pozycja trzecia pozycja
W przypadku select podobnie jak przy polach typu input możemy określić jego nazwę — atrybut name=" ". Znacznik definiuje jedną pozycję z listy. Taka definicja pola typu select pozwala na wybranie tylko jednej pozycji z naszej listy. Aby dać możliwość wyboru kilku, definicję musisz uzupełnić o atrybut multiple="multiple", zgodnie z tym, co prezentuje podany przykład.
pierwsza pozycja druga pozycja trzecia pozycja
Rozdział 3. • Elementy języka HTML5
115
W przypadku bardziej rozbudowanych pól typu select, w których zebrano wiele różnych opcji, możemy zastosować dodatkowy podział na kategorie. Podział jest jedną z kolejnych nowości wprowadzonych przez piątą odsłonę języka HTML i jest możliwy dzięki znacznikowi .
Wybierz utwór z listy
1. Wspaniała nowina 2. Zabierz mu wszystko 3. Krew Boga 4. Mędracy
1. "Break On Through (To the Other ´Side)" 2. "Soul Kitchen" 3. "The Crystal Ship" 4. "Twentieth Century Fox"
Na rysunku 3.41 widać efekt działania przykładowego kodu. Zwróć uwagę, że wartości podane przy użyciu znacznika domyślnie są wyświetlone za pomocą pogrubionej czcionki i nie da się ich zaznaczyć na liście. Rysunek 3.41. Przykład podziału zawartości pola typu select na kilka sekcji
Pola typu select mogą posiadać dodatkowo kilka zdefiniowanych atrybutów, które pozwalają na uzyskanie jeszcze większej elastyczności podczas tworzenia formularzy na stronach WWW. Zacznijmy od atrybutu size=" ", który określa, ile pozycji z listy ma być widocznych na ekranie. Podanie zmiennej jako większej lub równej liczbie pozycji zdefiniowanych w ramach pola pozwoli nam wyeliminować pasek przewijania pojawiający się z boku pola.
116
HTML5 • Ćwiczenia praktyczne
pierwsza pozycja druga pozycja trzecia pozycja czwarta pozycja piąta pozycja
Na rysunku 3.42 widać przykład pola typu select w różnych wariantach. Rysunek 3.42. Przykład różnych zastosowań pola select
Kolejnymi atrybutami, których możemy używać razem z polami typu select, są omówione już wcześniej elementy autofocus=" ", disabled=" " oraz reguired=" ". Poniżej w skrócie przypominam, do czego możemy je wykorzystać. Natomiast ich pełny opis wraz z obszernymi przykładami znajdziesz w poprzednim podrozdziale. T autofocus=" " — pozwala oznaczyć pole w chwili wczytywania strony przez przeglądarkę. T disabled=" " — pozwala czasowo wyłączyć możliwość edycji zawartości pola. T required=" " — określa, że dane pole jest wymagane do wysłania formularza. Jeżeli użytkownik nie wypełni pola, formularz nie zostanie wysłany.
Pole typu textarea Twórcy języka HTML oddali do naszej dyspozycji jeszcze jeden rodzaj pola, a mianowicie textarea. Służy ono do wprowadzania większej ilości danych. Znacznik ma następującą konstrukcję: napisz coś do ´mnie
Umieszczając tekst pomiędzy znacznikami , możemy zasugerować coś potencjalnemu użytkownikowi formularza. Rozwiązanie to jest podobne w działaniu do atrybutu value=" " oma-
Rozdział 3. • Elementy języka HTML5
117
wianego przy poprzednich znacznikach typu input. Poprzez dodanie atrybutów rows=" " i cols=" " możesz regulować wielkość pola. Rysunek 3.43 przedstawia przykład wykorzystania pola typu textarea. Pod obrazkiem znajdziesz również przykładowy listing odpowiedzialny za stworzenie formularza.
Rysunek 3.43. Przykład wykorzystania pola typu textarea
Zostaw swój komentarz
Imię:
E-mail:
118
HTML5 • Ćwiczenia praktyczne
Komentarz:
Pola typu textarea wykorzystują jeszcze kilka dodatkowych atrybutów, które zwiększają ich funkcjonalność. Poszczególne elementy pojawiły się w opisach zamieszczonych na poprzednich kartach niniejszej strony. Dlatego teraz pozwoliłem sobie tylko je przypomnieć i opatrzyć jedynie krótkimi wyjaśnieniami. T autofocus=" " — pozwala oznaczyć pole w chwili wczytywania strony przez przeglądarkę. T disabled=" " — pozwala czasowo wyłączyć możliwość edycji zawartości pola. T required=" " — określa, że dane pole jest wymagane do wysłania formularza. Jeżeli użytkownik nie wypełni pola, formularz nie zostanie wysłany. T maxlength=" " — ogranicza liczbę znaków, jakie można wpisać do pola textarea, dla którego została zadeklarowana. Oznacza to, że do pola o pojemności dwustu znaków nie wpiszesz ich więcej. T placeholder=" " — za pomocą tego elementu możemy wprowadzić tekst, który domyślnie pojawi się w polu formularza, ale zniknie natychmiast po kliknięciu tego pola kursorem myszy. Rozwiązanie takie przydaje się bardzo często do tego, aby powiadomić użytkownika o tym, co ma wpisać w danym polu. T readonly=" " — za pomocą tego elementu możemy zablokować możliwość edycji pola. Rozwiązanie to może się przydać na przykład w sytuacji, gdy pomiędzy znacznikami umieścimy regulamin, z którym każdy musi się zapoznać przed wysłaniem formularza. Rzeczą oczywistą jest, że taki regulamin nie powinien dać się edytować i zmieniać, ale jednocześnie musi być widoczny i przesyłany razem z formularzem. T wrap=" " — odpowiada za określenie podziału treści wpisanych do pola podczas wysyłania formularza. Wartość hard wymusza dodanie podziału wierszy. Natomiast wartość soft pozostawia tekst bez zmian.
Rozdział 3. • Elementy języka HTML5
119
Przesyłanie treści formularza Na samym początku przy określaniu ram formularza skorzystałem z możliwości wysłania go e-mailem. Jest to najłatwiejsze rozwiązanie w zakresie obsługi formularza, ale efekt, jaki uzyskamy, pozostawia wiele do życzenia. Dalej zamieszczam przykład wysłania formularza o następującej treści: Imię: BARTEK Płeć: Mężczyzna Wiek: Ponad 25 lat Treść: Zrobiliśmy niezłą stronę…
A oto wynik, jaki trafił na podany adres e-mail: imie=Bartek&plec=M%EA%BFczyzna&wiek=wiecej_25&tresc=Zrobili%9Cmy+ ´niez%B3%B9+stron%EA+…
Dokładnie tak będzie wyglądała poczta, którą otrzymamy. Forma jest raczej mało zadowalająca. Istnieją specjalne programy, które są w stanie przetworzyć całość na zrozumiałą postać, ale ich stosowanie mija się z celem i jest pracochłonne. Dlatego do obsługi zaleca się stosowanie odpowiednich skryptów, np. popularnego FormMail, które przetworzą odpowiednio wynik działania formularza, a otrzymana poczta będzie czytelna. Prawie każdy z rodzimych dostawców usług internetowych oferuje swoim klientom odpowiednie skrypty do obsługi formularzy. Bardzo wiele firm udostępnia takie skrypty bezpłatnie. Wystarczy ich poszukać, np. za pomocą Google (http://google.pl/).
Znaczniki porządkowe Pod pojęciem „znaczniki porządkowe” ująłem trzy znaczniki, za pomocą których możemy zgrupować kilka pól formularza, dodać podpis oraz opisy poszczególnych pól. Znacznik te nie są nowe, ale w piątej specyfikacji znacznie poszerzono ich możliwości, przez co korzystanie z nich nabrało dodatkowego sensu. Mam tutaj na myśli znaczniki , oraz . Zacznijmy od konkretnego przykładu. Na rysunku 3.44 widać efekt działania poniższego kodu:
120
HTML5 • Ćwiczenia praktyczne
Oceń nas
PrzeciętnieIdealnie
Rysunek 3.44. Efekt działania przykładowego kodu. Formularz ma własną ramkę i opis
Para znaczników odpowiada za dodanie obramowania grupującego jakąś część formularza. Natomiast znacznik służy do dołączania podpisu zlokalizowanego w ramce. Znacznik należy umieścić bezpośrednio po otwierającym znaczniku , przez co unikniemy problemów z prawidłowym wyświetlaniem etykiety. Dzięki obu znacznikom możemy sprawnie uporządkować rozbudowane formularze i pogrupować szereg pól tematycznie ze sobą powiązanych. Na przykład w dużym formularzu rejestracyjnym możemy zbierać m.in. dane adresowe, dane o wieku i płci oraz dane o preferencjach osoby korzystającej ze strony. Za pomocą omawianych znaczników możemy sprawnie pogrupować wszystkie pola w trzy grupy, przez co praca z formularzem będzie dużo przyjemniejsza dla osoby, która ma go wypełnić. Trzecim znacznikiem, który znalazł się w tym rozdziale, jest ´ służący do oznaczania tekstu będącego opisem pola formularza. Znacznik możemy stosować na dwa sposoby. Pierwsze rozwiązanie ma postać znaną z dotychczasowych przykładów. Pole formularza wraz z opisem znalazło się pomiędzy znacznikami . PrzeciętnieIdealnie
Natomiast drugi sposób nie był do tej pory prezentowany w niniejszej książce i wygląda następująco: Imię:
Rozdział 3. • Elementy języka HTML5
121
Zwróć uwagę na to, że do znacznika dodałem atrybut for=" " wraz z wartością, która bezpośrednio odnosi się do id=" " przypisanego do pola formularza. W obu przypadkach uzyskany efekt będzie podobny. Warto jednak pamiętać o tym, że jeżeli będziemy chcieli użyć kaskadowych arkuszy stylów do formatowania opisu pola, to wybór rozwiązania ma istotne znaczenie. W pierwszym przypadku przypisany styl obejmie swoim działaniem również samo pole, ponieważ zachodzi tutaj zjawisko dziedziczenia. Pole formularza będzie dziedziczyć style przypisane do elementu nadrzędnego, czyli do znacznika .
Pozostałe elementy Piąta specyfikacja języka HTML wprowadza jeszcze kilka nowych znaczników luźno związanych z formularzami. Na naszą uwagę zasługują trzy nowości: , oraz . Zacznijmy od znacznika , który pozwala umieścić na stronie graficzny wskaźnik pokazujący jakąś wartość liczbową. Poniżej znajduje się prosty przykład wykorzystania nowego znacznika, a pod nim na rysunku 3.45 widać efekt jego użycia:
Wyniki ankiety
Opcja 1:
Opcja 2:
Rysunek 3.45. Przykład wykorzystania znacznika
´
Za pomocą atrybutów min=" " oraz max=" " określamy przedział liczbowy, w którym będziemy się poruszać. Następnie korzystając z atrybutu value=" ", deklarujemy wartość z uprzednio określonego przedziału. Resztą zajmie się przeglądarka, która wyświetli odpowiedni element na stronie.
122
HTML5 • Ćwiczenia praktyczne
Drugi ze znaczników, o którym chciałem napisać, to ´. Ta nowość służy do graficznego obrazowania postępu wykonania jakiejś czynności. Znacznik jest tylko graficznym interpretatorem funkcji JavaScript odpowiedzialnych za obsługę m.in. upływu czasu.
Postęp: 0%
Ostatnim elementem, o którym chciałem wspomnieć przy okazji prezentacji formularzy, jest pole typu . Element ten pozwala zwrócić wyniki obliczeń. Listing widoczny poniżej to tylko prosty przykład użycia tego typu pola pochodzący ze specyfikacji języka HTML5, ale nic nie stoi na przeszkodzie, aby pole to wykorzystać w inny sposób. Rysunek 3.46 przedstawia efekt działania przykładowego kodu.
+ =
Rysunek 3.46. Przykład wykorzystania pola output
Zbiorcze ćwiczenie dla formularzy Z uwagi na to, że poszczególne pola formularza zwykle występują w parach oraz wymagają wykorzystania dodatkowych elementów, uznałem, iż w tym miejscu dodam zbiorcze ćwiczenie, które dotyczy wszystkich opisanych do tej pory pól. Celem ćwiczenia będzie stworzenie strony kontaktowej zawierającej prosty formularz kontaktowy. Ć W I C Z E N I E
3.23
Formularz kontaktowy
Stwórz prostą stronę i umieść na niej formularz kontaktowy. Aby wykonać to ćwiczenie, postępuj zgodnie z instrukcjami zamieszczonymi w kolejnych podpunktach.
Rozdział 3. • Elementy języka HTML5
123
1. Otwórz plik przygotowany w ćwiczeniu 2.6. 2. Pomiędzy znacznikami umieść swój formularz. 3. W pierwszej kolejności dodaj ramy formularza oraz określ sposób
wysyłki i ukryte pola niezbędne do tego, aby wysłać formularz. Wystarczy, że w kodzie swojej strony umieścisz poniższy listing.
4. Dodaj dwa pola typu input. Pierwsze z nich opisz jako Imię, 5. 6.
7. 8.
a drugie jako e-mail. Dodaj pole typu textarea. W tym miejscu będzie można wprowadzić treść wiadomości. Skorzystaj ze znaczników oraz , aby zgrupować pola formularza tak, by wyglądał podobnie do tego z rysunku 3.43. Zapisz dokument i otwórz go w przeglądarce. Spróbuj uzupełnić dostępne pola i wysłać formularz. Jeżeli masz ochotę, spróbuj dodać kolejne pola formularza. Możesz przetestować działanie funkcji sprawdzania poprawności danych wpisanych do formularza. Jeżeli z jakichś powodów miałeś problemy z wykonaniem niniejszego ćwiczenia, gotowy plik możesz pobrać ze strony http://danowski.pl/html5.
124
HTML5 • Ćwiczenia praktyczne
4 Kaskadowe arkusze stylów Pisząc o języku HTML5, nie sposób pominąć kaskadowych arkuszy stylów. Właściwie bez CSS nie da się obecnie zrobić ciekawie wyglądającej strony, która byłaby przy tym zgodna ze specyfikacją tych języków. Na początku wyjaśnijmy, co to są te kaskadowe arkusze stylów. Pojęcie to przewijało się w poprzednim rozdziale prawie na każdej stronie, ale nie było dokładnie omawiane. Od wersji HTML 3.2 wprowadzono pewne innowacje w strukturze języka i zaczęto zastępować część znaczników innymi. Nowe znaczniki nazwano kaskadowymi arkuszami stylów i sukcesywnie je rozbudowywano. Oficjalna specyfikacja CSS ma numer 2.1. Prowadzone są również prace nad trzecią odsłoną specyfikacji i na stronach konsorcjum W3C dostępna jest jej wstępna wersja. Dzięki stylom możemy mieć pełną kontrolę nad formatowaniem dokumentu. Żadne z poleceń języka HTML nie pozwalało na regulowanie odstępów pomiędzy blokami oraz nakładanie bloków na siebie. Warto wspomnieć o tym, że style umożliwiają kontrolę tła poszczególnych części dokumentu, właściwości czcionek zastosowanych na stronie, tabel, formularzy i wielu innych elementów. Kaskadowe arkusze stylów, w skrócie CSS, możemy określić jako narzędzie do formatowania wyglądu dokumentów. Natomiast za pomocą samych stylów nie możemy stworzyć strony. Podobnie jak języki HTML kaskadowe arkusze stylów są standaryzowane przez W3C i tam należy szukać odpowiedniej specyfikacji.
126
HTML5 • Ćwiczenia praktyczne Pisząc niniejszą książkę, musiałem skupić się tylko na wybranych właściwościach kaskadowych arkuszy stylów. Opis wszystkich możliwości po prostu nie zmieściłby się w tej publikacji. Mam jednak nadzieję, że na podstawie tego, co przedstawiłem na kolejnych kartach książki, dasz radę zbudować własną stronę WWW oraz bez problemu będziesz mógł sięgnąć po pełną specyfikację CSS.
Wprowadzenie Aby świadomie i sprawnie korzystać z ogromnych możliwości, jakie oferują kaskadowe arkusze stylów, konieczne jest krótkie wprowadzenie. Zanim jednak zaczniesz czytać niniejszy podrozdział, chciałbym, abyś zapamiętał, że to, co dalej opisałem, to jedynie wybrana przeze mnie część zagadnień. Niestety ograniczone łamy niniejszej książki zmusiły mnie do ostrej selekcji. Niniejszy podrozdział, ze względu na to, jakie informacje przekazuje, jest niemal całkowicie pozbawiony ćwiczeń. Nie zmienia to faktu, że jego zawartość jest kluczowa dla poznania działania CSS. Wszystkie informacje zawarte poniżej będę wykorzystywać w kolejnych podrozdziałach. Dlatego musisz być przygotowany do dalszej pracy.
Budowa stylu Konstrukcja stylu nie należy do zbyt skomplikowanych, co widać w poniższym przykładzie. selektor {cecha:wartość; cecha:wartość; etc.;}
Selektor jest odpowiednikiem znacznika występującego w języku HTML, może to być np.
lub . Drugi człon stylu jest ujęty w nawias klamrowy { } i zawiera polecenia formatujące. Polecenie formatujące — cecha — jest określane przez specyfikację, natomiast wartość jest zmienną definiowaną przez nas w zależności od aktualnych
potrzeb. Przykładowy prosty styl definiujący kolor bloku tekstu jako czerwony, o wysokości czcionki równej 14 punktów, wygląda tak: p { color:red;
Rozdział 4. • Kaskadowe arkusze stylów
127
font-size:14pt; }
Należy zwrócić uwagę na to, że cecha jest oddzielona od wartości za pomocą dwukropka, a po wartości zawsze występuje średnik. Stosowanie średnika po ostatniej parze cechy i wartości nie jest wymagane, ale oszczędzi wielu niespodzianek. Zapis stylu może przybrać inną postać, jednak jego działanie pozostaje niezmienne. p {color:red; font-size:14pt;}
Jeżeli zapomnimy rozdzielić poszczególnych par cech i wartości za pomocą średników, to styl nie będzie działał poprawnie. body { background-color:white; color:green font-size:20pt; }
Zwróć uwagę na powyższy przykład, w którym chcemy określić biały kolor tła dokumentu oraz kolor czcionki jako zielony. Dodatkowo tekst powinien zostać wyświetlony za pomocą czcionki o wielkości 20pt. Niestety „zapomniałem” wstawić średnik przy definicji koloru tekstu na końcu linii. W większym arkuszu błąd jest praktycznie niemożliwy do wychwycenia, jednak strona zostanie błędnie wyświetlona. Z trzech definicji stylów zadziała tylko pierwsza linijka odpowiedzialna za przypisanie białego koloru tła. Pozostałe dwa elementy zostaną błędnie rozpoznane przez przeglądarkę i nie zadziałają.
Metody osadzania stylów na stronie Kaskadowe arkusze stylów mogą być osadzone w dokumencie HTML na kilka sposobów. Specyfikacja przewiduje następujące rozwiązania: T Style wewnętrzne: T lokalne, T zagnieżdżone. T Style zewnętrzne: T dołączone, T importowane.
128
HTML5 • Ćwiczenia praktyczne
Pierwszym rozwiązaniem jest umieszczenie deklaracji stylu bezpośrednio w formatowanym znaczniku. Rozwiązanie takie nosi nazwę stylu lokalnego, gdyż wpływa wyłącznie na zawartość znacznika, w którym się znajduje.
Treść dokumentu
Treść dokumentu
Wadą powyższego rozwiązania jest spore utrudnienie w przypadku zmiany sposobu formatowania jakiegoś elementu oraz niepotrzebne powiększanie objętości kodu. Weźmy na przykład dokument, w którym umieszczono czterdzieści bloków tekstu i każdy z nich ma wyglądać identycznie. Aby to osiągnąć, do każdego z nich należy wpisać odpowiednie style. Wiąże się to z wykonaniem dodatkowej pracy, stratą czasu oraz zwiększeniem objętości kodu. Sytuację taką przewidzieli twórcy kaskadowych arkuszy stylów, dzięki czemu mamy inne możliwości umieszczania CSS bezpośrednio w nagłówku strony. Rozwiązanie to nazywane jest stylem zagnieżdżonym.
Tytuł przykładowej strony
Przykładowy blok tekstu.
Style wewnętrzne — zarówno lokalne, jak i zagnieżdżone — poza zaletami mają również dość poważne wady. Weźmy jako przykład rozbudowany serwis, np. portal Onet.pl, na który składają się setki lub tysiące podstron. Każda z podstron jest formatowana w podobny
Rozdział 4. • Kaskadowe arkusze stylów
129
sposób i wykorzystuje ten sam zestaw stylów. W takim przypadku style lokalne odpadają, a zagnieżdżanie definicji w nagłówkach również nie jest najlepszym pomysłem. Na szczęście istnieje jeszcze trzecia możliwość, styl zewnętrzny, która opiera się na znaczniku umieszczanym bezpośrednio w nagłówku strony, dzięki czemu taki arkusz również działa w całym dokumencie. Znacznik ten pozwala na podłączenie zewnętrznego arkusza stylów. Odpowiedni wpis ma następującą postać:
Tytuł przykładowej strony
Przykładowy blok tekstu
Atrybut href="" odpowiada za określenie nazwy oraz lokalizacji wybranego arkusza. Następny element, rel="", definiuje relacje, które w przypadku CSS zawsze mają wartość stylesheet. Ostatni element, type="", zawsze ma wartość text/css. Dzięki temu przeglądarka „wie”, z jakim arkuszem ma do czynienia. Działanie tego elementu docenimy w przyszłości, gdy powstaną inne arkusze i będzie trzeba z nich skorzystać. Zewnętrzny arkusz jest zwyczajnym plikiem tekstowym, a jego zawartość może wyglądać tak jak w poniższym przykładzie. /* To jest przykład zewnętrznego arkusza stylów*/ p { color:green; font-family:Arial; }
Zewnętrzny arkusz powinien być zapisany w pliku o dowolnej nazwie, która nie zawiera polskich znaków. Bezwzględnie taki dokument musi mieć rozszerzenie zgodne ze wzorem nazwa-pliku.css.
130
HTML5 • Ćwiczenia praktyczne Specyfikacja CSS daje nam jeszcze możliwość zaimportowania arkusza z innej strony oraz zdefiniowania kilku zewnętrznych arkuszy dla tej samej strony. Jednak na tym etapie te rozwiązania nie są Ci potrzebne. Dlatego zdecydowałem się o nich wspomnieć jedynie w formie uwagi.
Ć W I C Z E N I E
4.1
Osadzanie stylów na stronie
Stwórz prostą stronę i umieść na niej dwa bloki tekstu, a następnie podłącz zewnętrzny arkusz stylów. Korzystając z CSS, przypisz czerwony kolor dla dodanego tekstu. Aby wykonać to ćwiczenie, postępuj zgodnie z instrukcjami zamieszczonymi w kolejnych podpunktach. 1. Otwórz plik przygotowany w ćwiczeniu 2.6. 2. Pomiędzy znacznikami dodaj dwa bloki tekstu. W tym celu skorzystaj ze znacznika . 3. Sprawdź, czy w nagłówku strony znajduje się deklaracja odpowiedzialna za podłączenie zewnętrznego arkusza stylów. Przypomnę, że odpowiedni zapis powinien mieć postać:
4. Zapisz dokument HTML. Nadaj mu nazwę szablon.html. 5. Za pomocą edytora tekstowego utwórz plik o nazwie style.css.
W związku z tym, że jeszcze nie znasz CSS, spróbuj przepisać poniższą deklarację. p { color:red; }
6. Otwórz dokument HTML i sprawdź, czy tekst ma kolor czerwony. Jeżeli z jakichś powodów miałeś problemy z wykonaniem niniejszego ćwiczenia, gotowy plik możesz pobrać ze strony http://danowski.pl/html5.
Najważniejsze jednostki miar i definicje kolorów Kaskadowe arkusze stylów pozwalają nam na określenie wielkości wielu elementów, dopuszczając przy tym różne jednostki miar względnych i bezwzględnych. Dodatkowo w drugiej specyfikacji możemy się spotkać z jednostkami czasu, częstotliwości oraz jednostkami kątowymi.
Rozdział 4. • Kaskadowe arkusze stylów
131
Na początek kilka najważniejszych i najczęściej używanych jednostek względnych. T px — piksele p {margin-left:20px;}
Jednostka ta opiera się na pojedynczych punktach widocznych na ekranie monitora — pikselach. Jeżeli dokładniej przyjrzymy się ekranowi monitora, zdołamy dostrzec drobne punkty. W zależności od ustawionej rozdzielczości liczba tych punktów może być różna, np. 800×600. Pierwsza wartość oznacza liczbę punktów w poziomie, natomiast druga określa, ile pikseli mieści się w pionie. Oczywiście rozdzielczości mogą być bardzo różne, np. 1024×768 czy 1600×1200, a do tego mogą się różnić w zależności od systemu operacyjnego czy typu monitora. Dlatego też stosowanie takiej jednostki nie zawsze daje dobre rezultaty w innych warunkach niż te wykorzystane podczas tworzenia witryny. T em — proporcje wysokości do czcionki danego elementu p {margin-left:2em;}
Zasada działania tej jednostki jest stosunkowo prosta i polega na określaniu zależności pomiędzy poszczególnymi wielkościami. Jeżeli zdefiniujemy domyślną czcionkę o wielkości 12 pt, to będzie ona równa 1em. Przyjrzyjmy się poniższemu przykładowi: p { font-size:12pt; margin-left:2em; }
Powyżej zdefiniowałem wielkość czcionki 12pt dla bloku tekstu. Następnie za pomocą kolejnego polecenia ustawiłem lewy margines jako 2em. W tym przypadku lewy margines będzie się równał 24pt. T % — procenty p {font-size:10%;}
Procenty służą do określania wielkości względem wartości domyślnej. Przykładowa definicja spowoduje ustawienie wielkości czcionki na poziomie 1/10 domyślnego rozmiaru, jaki został ustalony w przeglądarce. Teraz kolej na najpopularniejsze jednostki bezwzględne.
132
HTML5 • Ćwiczenia praktyczne
T pt — punkty p {font-size:12pt;}
Punkty wywodzą się z typografii, gdzie są standardową jednostką miary. W praktyce 72 punkty odpowiadają jednemu calowi, a ten równa się 2,54 cm. T cm — centymetry p {font-size:1cm;}
Centymetr jest miarą stosowaną w większości krajów na świecie. Jeden centymetr odpowiada 0,39 cala. T mm — milimetry p {font-size:12mm;}
Milimetry są jednostką mniejszą niż centymetr. Występują w systemie metrycznym, więc na jeden centymetr składa się 10 mm. Inną ważną cechą kaskadowych arkuszy stylów jest możliwość określania kolorów. Do określania kolorów podobnie jak w języku HTML możemy użyć nazw kolorów, np. red, green czy blue. div {color:red;}
Niestety nazwy zostały przypisane jedynie kilkunastu podstawowym kolorom (patrz tabela 4.1) i jeżeli chcesz użyć innego koloru, musisz skorzystać z innej formy jego identyfikacji. Zapis w postaci RGB może wyglądać następująco: div {color:rgb(255,0,0);}
W zapisie kolorów opartym na modelu RGB liczby całkowite z przedziału od 0 do 255 zostają przypisane dla każdej z wartości składowych palety RGB (red, green, blue), stąd liczb może być aż dziewięć. Oczywiście możemy jeszcze zapisać kolor w postaci RGB, określając procent nasycenia danej barwy. div {color:rgb(100%,0%,0%);}
Kolejnym sposobem zapisu kolorów jest metoda szesnastkowa będąca tym samym co zapis szesnastkowy, doskonale znany wszystkim, którzy mieli do czynienia z komputerami. div {color:#FF0000;}
We wszystkich podanych przeze mnie przykładach określany był kolor czerwony.
Rozdział 4. • Kaskadowe arkusze stylów
133
Tabela 4.1. Wybrane kolory z przypisanymi nazwami wchodzące w skład bezpiecznej palety 216 kolorów Nazwa koloru
Zapis szesnastkowy
Black
#000000
Silver
#C0C0C0
Gray
#808080
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#00FFFF
Selektory Selektor jest kluczem do pracy ze stylami. Bez tego elementu nie moglibyśmy przypisać stylów do wybranych znaczników strony oraz kontrolować jej wyglądu. Selektory wykorzystywane podczas tworzenia własnych arkuszy stylów mogą przybierać różne formy. Specyfikacja przewiduje stosowanie następujących rodzajów selektorów: prostych, uniwersalnych, potomka, dziecka, rodzeństwa, identyfikatorów, klas, pseudoklas oraz pseudoelementów. Oczywiście nie wszystkie rodzaje selektorów są używane w każdym projekcie, dlatego poniżej w skrócie omówiłem tylko te najważniejsze.
134
HTML5 • Ćwiczenia praktyczne
Konstrukcja stylu wykorzystującego selektor prosty nie należy do zbyt skomplikowanych i wygląda tak jak w poniższym przykładzie. p { color:red; font-size:14pt; }
Jak widzisz, selektorem jest znacznik języka XHTML lub HTML przypisany do elementu, który chcesz w danym momencie formatować. Styl zdefiniowany dla przykładowego selektora P będzie odnosił się wyłącznie do akapitów zamkniętych w znaczniku i nie będzie wpływał na pozostałe elementy strony WWW. Styl zaprezentowany poniżej jest przykładem selektora prostego i odnosi się tylko do elementów zamkniętych pomiędzy znacznikami . W związku z tym wszystkie inne elementy, np. nagłówki czy tabele, nadal będą formatowane w sposób domyślny. Oczywiście sytuacja taka jest zupełnie poprawna i dzięki temu praca z CSS jest bardzo łatwa i przyjemna. Jeden wpis i mamy załatwione wszystkie akapity — to jest to! Zdarza się, że zachodzi potrzeba zdefiniowania jakiegoś typu formatowania w ten sposób, aby zadziałał na cały dokument. Bardzo dobrym przykładem takiej sytuacji może być tło, które zazwyczaj powinno być identyczne dla całego dokumentu. Odpowiedni styl może przyjąć następującą postać: * { background-color:white; }
Gwiazdka w miejscu selektora wymusza na przeglądarce zastosowanie stylów do wszystkich elementów strony. Innym selektorem uniwersalnym jest body. body { color:red; }
Uniwersalność selektora body wynika z jego roli w hierarchii dokumentu. Dokładniej, chodzi o funkcję dziedziczenia pewnych wartości po znacznikach stojących wyżej w hierarchii.
Rozdział 4. • Kaskadowe arkusze stylów
135
Dotychczas opisane selektory pozwalały na przypisanie danego formatowania wszystkim elementom odpowiadającym użytemu selektorowi. Twórcy kaskadowych arkuszy stylów od samego początku dostrzegali konieczność zróżnicowania podobnych elementów, więc wprowadzili identyfikator — id. Zasada działania identyfikatora, co widać na poniższym przykładzie, jest stosunkowo prosta. p { color:green; font-size:14pt; } p#pochyly { font-style:italic; font-size:20pt; }
Odpowiedni wpis składa się z selektora, do którego planujemy przypisać identyfikator, oraz nazwy poprzedzonej znakiem #. Wywołanie tak przygotowanego identyfikatora ma następującą postać:
Blok tekstu o kolorze zielonym i czcionce 14pt
Blok tekstu o kolorze zielonym i czcionce 20pt
Oczywiście w razie potrzeby raz zdefiniowany identyfikator możemy bez problemu wykorzystać w innych akapitach. Jeżeli chcemy przygotować identyfikator uniwersalny, którego użycie będzie możliwe w dowolnym elemencie strony, to powinien on przybrać następującą postać: #czerwony { color:red; }
Wywołanie takiego identyfikatora wygląda dokładnie tak samo jak poprzednio, z tą drobną różnicą, że może nastąpić w dowolnym znaczniku.
Treść akapitu
Treść nagłówka stopnia pierwszegoKlasy są kolejnym podstawowym pojęciem w kaskadowych arkuszach stylów. Budowa klasy jest następująca:
136
HTML5 • Ćwiczenia praktyczne selektor.nazwaklasy { font-size:12 pt; color:green; }
Zwróć uwagę na kropkę po selektorze lub przed nazwą klasy. Jest to element obowiązkowy i bez tego dalsza praca nie miałaby większego sensu. Podobnie jak w przypadku identyfikatora tak zdefiniowana klasa może zostać użyta tylko w tym selektorze, do którego została przypisana, np.: p.moja { color:green; font-size:14pt; }
Klasa ta powinna zostać wywołana w znaczniku w następujący sposób:
Treść akapitu
Jak widać na powyższym przykładzie, klasa jest wywoływana w dokumencie za pomocą atrybutu class, który może zostać umieszczony niemal w dowolnym znaczniku. Specyfikacja CSS przewiduje możliwość zdefiniowana takiej klasy, której użycie będzie możliwe w różnych znacznikach. Odpowiednia konstrukcja może mieć następującą postać: .moja { color:red; font-size:12pt; font-style:italic; }
Tak określona klasa również jest wywoływana za pomocą atrybutu class.
Przykład akapitu z określoną klasą
Przykład nagłówka z określoną klasą
Specyfikacja CSS przewiduje kilka ściśle określonych klas pozwalających na formatowanie niektórych elementów dokumentu. Do najpopularniejszych z całą pewnością zaliczają się pseudoklasy odsyłaczy.
Rozdział 4. • Kaskadowe arkusze stylów
137
a:link { color:red; } a:visited { color:green; } a:hover { color:yellow; }
Szalenie istotnym elementem w tej konstrukcji jest dwukropek pomiędzy selektorem a nazwą klasy. Pierwsza z prezentowanych pseudoklas, a:link, odpowiada za wygląd hiperłącza, jeżeli nie zostało jeszcze odwiedzone. Przykładowa definicja sformatuje odnośnik za pomocą koloru czerwonego. Element a:visited odpowiada za formatowanie już odwiedzonego hiperłącza i w naszym przypadku taki odnośnik będzie miał kolor zielony. Oczywiście zdefiniowane pseudoklasy nie kończą się na tych dwóch zaprezentowanych powyżej i specyfikacja przewiduje jeszcze kilka dodatkowych pseudoklas. Dzięki pseudoklasie a:hover możliwe jest takie ustawienie pewnych elementów, aby zmieniały się po najechaniu na nie kursorem urządzenia wskazującego (np. myszy). Na pewno każdy widział strony WWW, na których odnośniki tekstowe zmieniały kolor po najechaniu na nie kursorem myszy — to właśnie dzięki tej pseudoklasie.
Style w praktyce Niestety ze względu na ograniczenia narzucone przez serię ćwiczeń musiałem wybrać tylko kilkanaście najważniejszych stylów. Dlatego jeśli chcesz dokładniej poznać możliwości wszystkich stylów, zajrzyj na moją stronę internetową, http://danowski.pl/, na której znajdziesz informacje na temat innych moich książek o tworzeniu stron, kaskadowych arkuszach stylów oraz kursach internetowych.
138
HTML5 • Ćwiczenia praktyczne
Opisywane style są prezentowane w formie zwartej tabeli, w której znajdziesz wszystkie niezbędne informacje. Mam tutaj na myśli nazwę stylu, wszelkie dostępne wartości, domyślną wartość dla danego stylu, konkretny przykład zastosowania oraz informacje na temat dziedziczenia i obsługi stylów w wiodących przeglądarkach. Dodatkowo opis każdego stylu uzupełnia kilka słów objaśniających przeznaczenie danego elementu oraz ćwiczenie, dzięki któremu zastosujesz dany styl w praktyce. Niemal we wszystkich stylach wśród wartości pojawia się tajemnicza opcja inherit. Ustawienie to odpowiada za przejęcie wartości z elementu stojącego wyżej w hierarchii znaczników. Przyjrzyjmy się konkretnemu przykładowi:
Pierwszy blok tekstu
Drugi blok tekstu
Jeżeli w arkuszu stylów ustawisz czerwony kolor tekstu dla sektora div, a dla sektora p niebieski, to w przykładowym listingu pierwszy blok tekstu będzie czerwony, a drugi niebieski.
Wybrane właściwości tekstu Tekst (a dokładniej blok tekstu) na naszej stronie może być formatowany przez kaskadowe arkusze stylów. Już pierwsza specyfikacja CSS zawierała bogaty zestaw poleceń związanych z wyglądem bloków tekstu na stronie. Między innymi mamy możliwość określenia: T wyrównania tekstu, T odstępów pomiędzy wyrazami i literami, T wcięcia tekstu, T dekoracji tekstu, T odstępu pomiędzy wierszami.
Poziome wyrównanie tekstu Styl ten pozwala na wyrównanie tekstu do lewej i prawej strony oraz jego wyśrodkowanie lub rozciągnięcie do obu marginesów. Dokładne właściwości stylu znajdują się w tabeli 4.2.
Rozdział 4. • Kaskadowe arkusze stylów
139
Tabela 4.2. Właściwości stylu text-align text-align Dostępne wartości:
left | right | center | justify | inherit
Wartość domyślna:
left
Przykład:
p {text-align:left;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.2
Wyrównanie tekstu w poziomie
Zastosuj styl odpowiedzialny za wyrównanie tekstu w poziomie. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz plik przygotowany w ćwiczeniu 4.1 i dodaj w nim cztery bloki tekstu — każdy powinien zajmować dwa lub trzy wiersze. Każdy akapit powinien zawierać odwołania do identyfikatorów, np. pierwszy, drugi, trzeci i czwarty.
Pierwszy blok tekstu...
2. Następnie otwórz wcześniej utworzony plik style.css i korzystając
z identyfikatorów użytych w poprzednim podpunkcie, dodaj definicje stylu wyrównującego tekst. Użyj wszystkich wartości i zapisz plik na dysku. p#pierwszy {text-align:left;}
3. Otwórz dokument HTML i sprawdź, czy nowe style działają
poprawnie. Jeżeli z jakichś powodów miałeś problemy z wykonaniem niniejszego ćwiczenia, gotowy plik możesz pobrać ze strony http://danowski.pl/html5.
Pionowe wyrównanie tekstu Prezentowany styl pozwala na wyrównanie tekstu w pionie wewnątrz tabeli lub znacznika o określonym rozmiarze. Dokładne właściwości stylu znajdują się w tabeli 4.3.
140
HTML5 • Ćwiczenia praktyczne
Tabela 4.3. Właściwości stylu vertical-align vertical-align
Dostępne wartości:
baseline | sub | super | bottom | text-bottom | middle | top | text-top | wartość liczbowa | wartość procentowa | inherit
Wartość domyślna:
baseline
Przykład:
p {vertical-align:super;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.3
Wyrównanie tekstu w pionie
Zastosuj styl odpowiedzialny za wyrównanie tekstu w pionie. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz plik będący wynikiem ćwiczenia 4.1 i dodaj w nim tabelę składającą się z jednego wiersza i dwóch komórek. Do każdej z komórek wpisz krótki tekst.
| helion.pl | danowski.pl |
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za wyrównanie tekstu w pionie. Dodatkowo uzupełnij swój arkusz o wpisy widoczne w poniższym przykładzie (bez nich nie zobaczysz efektu działania wyrównania tekstu). Zapisz zmodyfikowany plik na dysku. td { vertical-align:top; width:150pt; height:150pt; border:1px solid black; }
Rozdział 4. • Kaskadowe arkusze stylów
141
3. Uruchom przeglądarkę i otwórz swój plik, by sprawdzić efekt
działania wyrównania. 4. Wróć do pliku style.css i zmień wartość stylu vertical-align na inną. Użyj wartości wymienionych w powyższej tabeli w sekcji Dostępne wartości. Zapisz zmiany i ponownie sprawdź efekt działania. W ten sposób przetestuj wszystkie dostępne wartości dla omawianego stylu. Jeżeli z jakichś powodów miałeś problemy z wykonaniem niniejszego ćwiczenia, gotowy plik możesz pobrać ze strony http://danowski.pl/html5.
Wcięcie tekstu Pozwala na ustawienie wielkości wcięcia pierwszej linii bloku tekstu. Dokładne właściwości stylu znajdują się w tabeli 4.4. Tabela 4.4. Właściwości stylu text-indent text-indent
Dostępne wartości:
wartość liczbowa | wartość procentowa | inherit
Wartość domyślna:
0
Przykład:
p {text-indent:3pt;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.4
Wcięcie pierwszej linii bloku tekstu
Zastosuj styl odpowiedzialny za wcięcie pierwszej linii bloku tekstu. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz plik będący wynikiem ćwiczenia 4.1 i dodaj w nim dwa bloki tekstu. Postaraj się, aby każdy akapit zajmował przynajmniej dwie lub trzy linie.
Przykładowy blok tekstu, który zajmuje przynajmniej dwie lub ´trzy linie...
142
HTML5 • Ćwiczenia praktyczne
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za wcięcie pierwszego wiersza. Nie zapomnij określić rozmiaru wcięcia. Możesz do tego użyć wartości względnych lub bezwzględnych, które opisałem na początku niniejszego rozdziału. Zapisz zmodyfikowany plik na dysku. p { text-indent:1cm; }
3. Uruchom swoją przeglądarkę i otwórz plik, by sprawdzić efekt
działania prezentowanego stylu. Jeżeli z jakichś powodów miałeś problemy z wykonaniem niniejszego ćwiczenia, gotowy plik możesz pobrać ze strony http://danowski.pl/html5.
Dekoracja tekstu Dekoracja tekstu to jego podkreślanie, przekreślanie czy nadkreślanie. Dokładne właściwości stylu znajdują się w tabeli 4.5. Tabela 4.5. Właściwości stylu text-decoration text-decoration
Dostępne wartości:
none | underline | overline | line-through | blink | inherit
Wartość domyślna:
none
Przykład:
p {text-decoration:underline;}
Dziedziczenie:
nie
Obsługa:
Pełna obsługa: Opera, Mozilla Firefox Częściowa obsługa: Internet Explorer, Chrome i Safari (nie działa blink)
Ć W I C Z E N I E
4.5
Dekoracja tekstu
Zastosuj styl odpowiedzialny za dekorację tekstu. Postępuj zgodnie z poniższymi poleceniami.
Rozdział 4. • Kaskadowe arkusze stylów
143
1. Otwórz uprzednio przygotowany plik szablon.html i dodaj w nim
prosty i niezbyt rozbudowany blok tekstu.
Przykładowy blok tekstu
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za dekorację tekstu. Zapisz zmodyfikowany plik na dysku. p { text-decoration:underline; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu. 4. Sprawdź kolejne wartości przewidziane dla opisywanego stylu.
Wybrane właściwości czcionki Jedną z najważniejszych funkcji oferowanych przez kaskadowe arkusze stylów jest możliwość formatowania wyglądu czcionki użytej do skomponowania strony. Za pomocą CSS możemy między innymi określić: T rodzaj czcionki, T wielkość czcionki, T styl czcionki, T wagę czcionki.
Rodzaj czcionki Prezentowany styl pozwala na określenie rodzaju czcionki. Możesz skorzystać z nazwy własnej czcionki lub nazw rodzajowych widocznych w tabeli 4.6. Ć W I C Z E N I E
4.6
Rodzaj czcionki
Zastosuj styl odpowiedzialny za określenie rodzaju użytej czcionki. Postępuj zgodnie z poniższymi poleceniami.
144
HTML5 • Ćwiczenia praktyczne
Tabela 4.6. Właściwości stylu font-family font-family
Dostępne wartości:
nazwa czcionki | serif | sans-serif | monospace | fantasy | cursive | inherit
Wartość domyślna:
domyślne ustawienie przeglądarki oglądającego witrynę
Przykład:
p{font-family:arial, helvetica, verdana, sans-serif;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
1. Otwórz uprzednio przygotowany plik szablon.html i dodaj w nim
dwa proste i niezbyt rozbudowane bloki tekstu. Do każdego bloku przypisz oddzielne identyfikatory. Zapisz plik na dysku.
Przykładowy blok tekstu
Przykładowy blok tekstu
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie rodzaju czcionki. Utwórz dwa wpisy wykorzystujące uprzednio zdefiniowane identyfikatory. Zadbaj o to, aby każdy styl używał innej czcionki. Zapisz plik na dysku. p#pierwszy { font-family:Verdana; } p#drugi { font-family:monospace; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu.
Rozmiar czcionki To jeden z najczęściej używanych stylów. Pozwala na określenie rozmiaru użytej czcionki. Możesz skorzystać z rozmiaru określonego za pomocą jednostek względnych i bezwzględnych oraz specjalnych wartości określonych przez specyfikację, widocznych w tabeli 4.7.
Rozdział 4. • Kaskadowe arkusze stylów
145
Tabela 4.7. Właściwości stylu font-size font-size
Dostępne wartości:
rozmiar absolutny | rozmiar względny | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit
Wartość domyślna:
medium
Przykład:
p{font-size:20pt;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.7
Rozmiar czcionki
Zastosuj styl odpowiedzialny za określenie rozmiaru użytej czcionki. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i dodaj w nim trzy bloki tekstu. Dla każdego bloku określ unikalny identyfikator. Zapisz plik na dysku.
Prosty blok tekstu
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie rozmiaru czcionki użytej w blokach. Utwórz oddzielne wpisy dla każdego identyfikatora. Zadbaj o to, aby każdy z nagłówków używał innego rozmiaru czcionki. Zapisz plik na dysku. p#pierwszy { font-size:10pt; } p#drugi { font-size:xx-large; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu.
146
HTML5 • Ćwiczenia praktyczne
Waga czcionki Prezentowany styl pozwala na określenie pogrubienia czcionki użytej w tekście. Dokładne właściwości stylu znajdują się w tabeli 4.8. Tabela 4.8. Właściwości stylu font-weight font-weight
Dostępne wartości:
normal | bold |100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bolder | lighter | inherit
Wartość domyślna:
normal
Przykład:
p{font-weight:bold;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.8
Pogrubienie
Zastosuj styl odpowiedzialny za pogrubienie użytej czcionki. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i dodaj w nim blok tekstu. Zapisz plik na dysku.
Prosty blok tekstu
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za pogrubienie tekstu w blokach. Skorzystaj z wartości przedstawionych w tabeli powyżej. Zapisz plik na dysku. p { font-weight:bold; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu.
Rozdział 4. • Kaskadowe arkusze stylów
147
Styl czcionki Styl czcionki pozwala m.in. na uzyskanie czcionki pochyłej — kursywy. Dokładne właściwości stylu znajdują się w tabeli 4.9. Tabela 4.9. Właściwości stylu font-style font-style
Dostępne wartości:
normal | italic | oblique | inherit
Wartość domyślna:
normal
Przykład:
p{font-style:italic;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.9
Kursywa
Zastosuj styl odpowiedzialny za wyróżnienie tekstu za pomocą czcionki pochyłej — kursywy. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i dodaj w nim blok tekstu. Zapisz plik na dysku.
Prosty blok tekstu
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za wyróżnienie zawartości za pomocą kursywy. Zapisz plik na dysku. p { font-style:italic; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu.
Wybrane właściwości list Za pomocą kaskadowych arkuszy stylów można kontrolować następujące właściwości list:
148
HTML5 • Ćwiczenia praktyczne
T typ listy, T sposób wypunktowania, T pozycję listy względem wypunktowania.
Typ listy Typ listy to sposób, w jaki lista jest wypunktowana. Po lekturze poprzedniego rozdziału wiesz, że mamy do czynienia z kilkoma rodzajami list, m.in. z listami wypunktowanymi i numerowanymi. Dzięki prezentowanemu stylowi możesz określić, w jaki sposób lista będzie numerowana lub jaki znaczek pojawi się w liście wypunktowanej. Dokładne właściwości stylu znajdują się w tabeli 4.10. Tabela 4.10. Właściwości stylu list-style-type list-style-type
Dostępne wartości:
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Wartość domyślna:
disc
Przykład:
ul {list-style-type:circle;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.10
Kontrola właściwości list
Zastosuj styl odpowiedzialny za kontrolę wyglądu listy. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i w sekcji dodaj dwie listy: wypunktowaną i numerowaną. Każda lista powinna zawierać min. trzy pozycje. Zapisz plik na dysku.
- Pierwsza pozycja listy wypunktowanej
- Druga pozycja listy wypunktowanej
- Trzecia pozycja listy wypunktowanej
Rozdział 4. • Kaskadowe arkusze stylów
149
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie sposobu wypunktowania lub numerowania listy. Skorzystaj z wartości wymienionych w tabeli powyżej. Zapamiętaj, że wartości disc, circle oraz square są przeznaczone do wykorzystania w listach wypunktowanych. Zapisz plik na dysku. ol
ul
{ list-style-type:upper-roman; } { list-style-type:circle; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu. 4. W ramach testu sprawdź wszystkie dostępne wartości dla stylu list-style-type. Zwróć również uwagę na wartość none, która pozwala na zachowanie wartości listy, ale wyłącza numerację lub wypunktowanie.
Wybrane właściwości koloru i tła Za pomocą CSS możemy określić wygląd tła i kolor dla wybranych elementów. W zależności od potrzeb możemy zdefiniować tło będące wartością koloru lub obrazkiem.
Kolor elementu Za pomocą tego stylu możesz określić kolor elementów tekstowych — bloki tekstu, listy, odsyłacze czy nagłówki. Dokładne właściwości stylu znajdują się w tabeli 4.11.
150
HTML5 • Ćwiczenia praktyczne
Tabela 4.11. Właściwości stylu color color
Dostępne wartości:
nazwa lub wartość koloru | inherit
Wartość domyślna:
Zależy od domyślnych ustawień przeglądarki
Przykład:
p {color:#FF0000;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.11
Ustalanie koloru elementów
Zastosuj styl odpowiedzialny za kontrolę koloru elementów tekstowych. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i w sekcji dodaj blok tekstu, nagłówek, hiperłącze oraz listę. Zapisz plik na dysku.
Przykładowy blok tekstu
Nagłówek stopnia drugiego Bartosz Danowski- Pierwsza pozycja listy wypunktowanej
- Druga pozycja listy wypunktowanej
- Trzecia pozycja listy wypunktowanej
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie koloru elementów tekstowych. Postaraj się nadać różne kolory elementom, które znajdują się w pliku szablon.html. Zapisz plik na dysku. p { color:green; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu.
Rozdział 4. • Kaskadowe arkusze stylów
151
Kolor tła Korzystając z omawianego stylu, możesz ustawić kolor tła dla elementów widocznych na stronie. Własne tło mogą mieć m.in. bloki tekstu, nagłówki, listy czy tabele. Dokładne właściwości stylu znajdują się w tabeli 4.12. Tabela 4.12. Właściwości stylu background-color background-color
Dostępne wartości:
nazwa lub wartość koloru | transparent | inherit
Wartość domyślna:
transparent
Przykład:
p {background-color:#FF0000;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.12
Ustalanie koloru tła
Zastosuj styl odpowiedzialny za kontrolę koloru tła elementów widocznych na stronie. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i w sekcji dodaj blok tekstu, nagłówek, hiperłącze oraz listę. Zapisz plik na dysku.
Przykładowy blok tekstu
Nagłówek stopnia drugiego Bartosz Danowski- Pierwsza pozycja listy wypunktowanej
- Druga pozycja listy wypunktowanej
- Trzecia pozycja listy wypunktowanej
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie koloru tła poszczególnych elementów. Postaraj się nadać różne kolory elementom, które znajdują się w pliku szablon.html. Zapisz plik na dysku.
152
HTML5 • Ćwiczenia praktyczne p { background-color:silver; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu.
Element graficzny jako tło Kaskadowe arkusze stylów umożliwiają ustawienie dowolnego obrazka jako tła dla elementów widocznych na stronie. Dokładne właściwości stylu znajdują się w tabeli 4.13. Tabela 4.13. Właściwości stylu background-image background-image
Dostępne wartości:
url | none | inherit
Wartość domyślna:
none
Przykład:
body {background-image:url(tlo.jpg);}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.13
Ustalanie obrazka w tle
Zastosuj styl odpowiedzialny za kontrolę obrazka w tle elementów widocznych na stronie. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i w sekcji dodaj blok tekstu. Zapisz plik na dysku.
Przykładowy blok tekstu
2. W programie graficznym przygotuj obrazek będący tłem.
Proponuję, abyś stworzył nowy obrazek o rozmiarach 50×1200 pikseli. Tworząc swoje tło, postaraj się wzorować na zawartości rysunku 4.1. Gotowy projekt zapisz na dysku pod nazwą tlo.jpg.
Rozdział 4. • Kaskadowe arkusze stylów
153
Rysunek 4.1. Przykładowe tło — obrazek ten zostanie wykorzystany również w następnych ćwiczeniach 3. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie obrazka będącego tłem całej strony. W sekcji wartość podaj nazwę obrazka przygotowanego w punkcie drugim niniejszego ćwiczenia. Zapisz plik na dysku. body { background-image:url(tlo.jpg); }
4. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu. 5. Zwróć uwagę na to, w jaki sposób tło się powieliło. Właściwość, którą dostrzegłeś na swoim przykładzie, nosi nazwę powielanie tła i może być bardzo przydatna podczas tworzenia różnych projektów.
Wybrane właściwości marginesów i dopełnienia Margines to obszar po zewnętrznej stronie obramowania elementu obecny w każdym elemencie wykorzystanym na stronie WWW. Za pomocą CSS można kontrolować lewy, prawy, górny i dolny margines albo wszystkie naraz. Dokładne właściwości stylu znajdują się w tabeli 4.14. Ć W I C Z E N I E
4.14
Kontrola marginesów
Zastosuj styl odpowiedzialny za kontrolę marginesów. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i w sekcji dodaj dwa bloki tekstu. Dla każdego akapitu ustal unikalny identyfikator. Zapisz plik na dysku.
Przykładowy blok tekstu
154
HTML5 • Ćwiczenia praktyczne
Tabela 4.14. Właściwości stylu margin margin margin-left margin-right margin-top margin-bottom
Dostępne wartości:
wartość liczbowa | wartość procentowa | auto | inherit
Wartość domyślna:
0
Przykład:
p {margin-left:1cm;} h1 {margin-right:1cm;} table {margin-top:1cm;} div {margin-bottom:1cm;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie marginesów. Pierwszy blok tekstu powinien mieć ustawiony wyłącznie lewy margines. Natomiast dla drugiego ustaw górny margines. Zapisz plik na dysku. p#pierwszy { margin-left:2cm; } p#drugi { margin-top:10%; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu. 4. Zapamiętaj, że w przypadku gdy dla pierwszego bloku ustawisz
dolny, a dla drugiego górny margines, to ich wartość zostanie zsumowana. Możesz to sprawdzić, modyfikując w odpowiedni sposób style dla obu bloków tekstu. Dopełnienie to obszar po wewnętrznej stronie obramowania elementu, obecny w każdym elemencie wykorzystanym na stronie WWW. Za pomocą CSS można kontrolować lewe, prawe, górne i dolne dopełnienie albo wszystkie naraz.
Rozdział 4. • Kaskadowe arkusze stylów
155
padding padding-left padding-right padding-top padding-bottom
Dostępne wartości:
wartość liczbowa | wartość procentowa | auto | inherit
Wartość domyślna:
0
Przykład:
p {padding-left:1cm;} h1 {padding-right:1cm;} table {padding-top:1cm;} div {padding-bottom:1cm;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Jeżeli masz ochotę, możesz spróbować w ćwiczeniu 4.14 zastąpić marginesy dopełnieniami i sprawdzić, jaki to da efekt.
Wybrane właściwości obramowania Typowe obramowanie przybiera formę pojedynczej lub podwójnej linii o ciągłej lub przerywanej strukturze i dowolnym kolorze. Za pomocą kaskadowych arkuszy stylów można kontrolować następujące właściwości obramowania: T styl, T grubość, T kolor. Ze względu na specyfikację nadawania obramowania stosowne ćwiczenie znajdziesz dopiero w opisie ostatniego prezentowanego stylu. Natomiast podrozdziały o stylu, kolorze i grubości wyjątkowo nie zawierają ćwiczenia.
Styl obramowania Pozwala określić rodzaj linii użytej do obramowania formatowanego elementu. Możemy korzystać z linii pojedynczych, podwójnych, przerywanych itp. Zwróć uwagę, że możesz kontrolować obramowanie
156
HTML5 • Ćwiczenia praktyczne
całego elementu lub wybranej strony. Dokładne właściwości stylu znajdują się w tabeli 4.15. Tabela 4.15. Właściwości stylu border-style border-style border-top-style border-right-style border-bottom-style border-left-style
Dostępne wartości:
none | hidden | dotted | dashed | solid | double | dot-dash | dot-dot-dash | wave | groove | ridge | inset | outset | inherit
Wartość domyślna:
none
Przykład:
p {border-style:dotted;} p {border-left-style:solid;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Grubość obramowania Pozwala na określenie grubości linii obramowania. Podobnie jak w przypadku stylu możemy określić grubość całego obramowania lub każdej strony z osobna. Dokładne właściwości stylu znajdują się w tabeli 4.16.
Kolor obramowania Dzięki odpowiedniemu stylowi obramowanie może mieć swój kolor. Również tym razem kolor może być przypisany dla całego obramowania lub dla wybranej strony. Dokładne właściwości stylu znajdują się w tabeli 4.17. Ć W I C Z E N I E
4.15
Kontrola obramowania
Zastosuj styl odpowiedzialny za kontrolę obramowania. Postępuj zgodnie z poniższymi poleceniami.
Rozdział 4. • Kaskadowe arkusze stylów
157
Tabela 4.16. Właściwości stylu border-width border-width border-top-width border-right-width border-bottom-width border-left-width
Dostępne wartości:
none | wartości liczbowe | wartości procentowe | thin | medium | thick | inherit
Wartość domyślna:
none
Przykład:
p {border-top-width:5px;} div {border-width:2pt;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Tabela 4.17. Właściwości stylu border-color border-color border-top-color border-right-color border-bottom-color border-left-color
Dostępne wartości:
nazwa lub wartość koloru | transparent | inherit
Wartość domyślna:
wg ustawień domyślnego koloru dla dokumentu
Przykład:
p {border-top-color:red;}
Dziedziczenie:
tak
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
1. Otwórz uprzednio przygotowany plik szablon.html i w sekcji dodaj tabelę z tabliczką mnożenia przygotowaną
w ćwiczeniu 3.19. 2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl odpowiedzialny za określenie obramowania i jego wyglądu. Dla tabeli ustaw podwójne obramowanie w kolorze czarnym. Dla komórek będących nagłówkiem wybierz pojedyncze cienkie
158
HTML5 • Ćwiczenia praktyczne
obramowanie w kolorze zielonym. Natomiast dla pozostałych komórek ustaw pojedyncze cienkie obramowanie w kolorze czerwonym. Zapisz plik na dysku. table { border-color:black; border-style:double; border-width:5pt; } td { border-color:red; border-style:solid; border-width:2pt; text-align:center; } th { border-color:green; border-style:solid; border-width:2px; background:green; color:white; text-align:center; font-weight:bolder; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu. 4. W ramach ćwiczeń indywidualnych sprawdź wszystkie wartości przewidziane dla stylu obramowania. Przy okazji zapamiętaj, że styl obramowania może być odmiennie interpretowany przez różne przeglądarki.
Wymiarowanie elementów Jeżeli korzystasz z języka XHTML, musisz pamiętać o tym, że w wielu przypadkach zaleca on lub wręcz wymusza stosowanie kaskadowych arkuszy stylów do wymiarowania różnych elementów widocznych na stronie, np. tabel. Za pomocą CSS możesz m.in. określić wysokość oraz szerokość elementów.
Rozdział 4. • Kaskadowe arkusze stylów
159
Dla utrwalenia sposobu określania wysokości i szerokości elementów zostało opracowane wspólne ćwiczenie, które znajduje się pod opisem procedury określania wysokości elementów.
Szerokość Prezentowany styl pozwala na określenie szerokości formatowanego elementu. Dokładne właściwości stylu znajdują się w tabeli 4.18. Tabela 4.18. Właściwości stylu width width
Dostępne wartości:
wartość liczbowa | wartość procentowa | auto | inherit
Wartość domyślna:
auto
Przykład:
p {width:30%;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Wysokość Prezentowany styl pozwala na określenie wysokości formatowanego elementu. Dokładne właściwości stylu znajdują się w tabeli 4.19. Tabela 4.19. Właściwości stylu height height
Dostępne wartości:
wartość liczbowa | wartość procentowa | auto | inherit
Wartość domyślna:
auto
Przykład:
p {height:30%;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
160
HTML5 • Ćwiczenia praktyczne
Ć W I C Z E N I E
4.16
Kontrola wysokości i szerokości elementu
Zastosuj style odpowiedzialne za kontrolę wysokości i szerokości. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i w sekcji dodaj tabelę, która będzie miała dwa wiersze po dwie komórki każdy. W każdej komórce wprowadź krótki tekst — najlepiej jedno słowo. Zapisz plik na dysku.
| Pierwsza komórka | Druga komórka |
| Trzecia komórka | Czwarta komórka |
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie szerokości i wysokości komórki tabeli. Odpowiednie wymiary dobierz indywidualnie. Koniecznie dodaj styl formatujący obramowanie tabeli. Zapisz plik na dysku. table, td { border:solid 2px black; } td { width:150px; height:150px; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu. 4. W ramach ćwiczeń indywidualnych spróbuj na stronie dodać blok tekstu (powinien zawierać większą ilość tekstu). Następnie określ jego szerokość, np. na 200 – 300 pikseli.
Rozdział 4. • Kaskadowe arkusze stylów
161
Wybrane właściwości pozycjonowania elementów Pozycjonowanie elementów za pomocą CSS to jedno z najważniejszych narzędzi, jakie trafiły w ręce webmastera. Za pomocą odpowiednich stylów możesz stworzyć nowoczesną stronę pozbawioną tabel i wolną od wielu ograniczeń. Niniejszy podrozdział nie zawiera ćwiczeń, ponieważ uznałem, że działanie pozycjonowania elementów na stronie zademonstruję w praktyce w rozdziale 5.
Rodzaj pozycjonowania Za pomocą prezentowanego stylu określamy sposób, w jaki przeglądarka będzie określać położenie danego elementu na stronie. Dokładne właściwości stylu znajdują się w tabeli 4.20. Tabela 4.20. Właściwości stylu position position
Dostępne wartości:
static | relative | absolute | fixed | inherit
Wartość domyślna:
static
Przykład:
p {position:absolute;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer (bez fixed), Chrome, Safari
Specyfikacja CSS rozróżnia następujące metody pozycjonowania: T static (statyczne) — każdy element umieszczony na stronie ma nadane pozycjonowanie statyczne; jest to jego domyślne położenie. T relative (względne) — punktem odniesienia przy określaniu względnego położenia elementu jest jego domyślna lokalizacja na stronie. Pozycjonowanie względne jest powiązane bezpośrednio z konkretnym znacznikiem lub może zostać rozciągnięte za pomocą .
162
HTML5 • Ćwiczenia praktyczne p { position:relative; top:1cm; left:1cm; }
T absolute (bezwzględne) — pozycjonowanie bezwzględne polega
na określeniu dokładnego położenia elementu względem lewego górnego narożnika okna przeglądarki. Punkt ten przyjmuje współrzędne (0;0), a ustawianie elementów polega na wyznaczaniu, w wirtualnym układzie, współrzędnych lewego górnego rogu pozycjonowanego elementu. p { position:absolute; left:80px; top:80px; }
T fixed (ustalone) — pozycjonowanie ustalone jest odmianą
pozycjonowania bezwzględnego, jednak element, którego dotyczy, zawsze pozostaje w widocznej części okna przeglądarki. W praktyce wygląda to tak, jakby na stronie została zastosowana ramka. div.lewa { position:fixed; top:10px; width:180px; }
Określanie pozycji Niezależnie od metody pozycjonowania elementów na stronie, ich pozycja jest określana za pomocą poleceń left, right, top oraz bottom uzupełnionych o wartość liczbową lub procentową. Dokładne właściwości stylu znajdują się w tabeli 4.21.
Kolejność nałożonych elementów Jeżeli przy wykorzystaniu pozycjonowania elementów nałożymy je na siebie, to przeglądarka domyślnie określi ich kolejność. Kolejność jest ustalana na podstawie występowania elementów w kodzie strony.
Rozdział 4. • Kaskadowe arkusze stylów
163
Tabela 4.21. Właściwości stylów odpowiedzialnych za określanie pozycji top right bottom left
Dostępne wartości:
auto | wartość liczbowa | wartość procentowa | inherit
Wartość domyślna:
auto
Przykład:
p {position:absolute; top:10px;} p {position:absolute; right:10px;} p {position:absolute; bottom:10px;} p {position:absolute; left:10px;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Dzięki prezentowanemu stylowi możemy dowolnie sterować kolejnością elementów w stosie. Dokładne właściwości stylu znajdują się w tabeli 4.22. Tabela 4.22. Właściwości stylu z-index z-index
Dostępne wartości:
auto | wartość liczbowa określająca pozycję w stosie | inherit
Wartość domyślna:
auto
Przykład:
p {z-index:2;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Pływanie i tamowanie elementów Zapewne miałeś w ręku gazetę i widziałeś w niej, że zdjęcia oblane są większymi partiami tekstu. Takie rozwiązanie możesz uzyskać również za pomocą CSS i nosi ono nazwę pływania.
164
HTML5 • Ćwiczenia praktyczne
Pływanie elementów Kaskadowe arkusze stylów pozwalają kontrolować oblewanie przez tekst pozostałych elementów. Ciekawostką jest to, że oblewać możemy praktycznie każdy element. Dokładne właściwości stylu znajdują się w tabeli 4.23. Tabela 4.23. Właściwości stylu float float
Dostępne wartości:
left | right | none | inherit
Wartość domyślna:
none
Przykład:
img {float:right;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Ć W I C Z E N I E
4.17
Pływanie elementów
Zastosuj style, za pomocą których uda Ci się obrazek oblać tekstem. Postępuj zgodnie z poniższymi poleceniami. 1. Otwórz uprzednio przygotowany plik szablon.html i w sekcji dodaj obrazek oraz większy blok tekstu. Zapisz plik na dysku.
Lorem ipsum dolor sit amet,
2. Następnie otwórz wcześniej utworzony plik style.css i dodaj styl
odpowiedzialny za określenie sposobu oblania obrazka. Zapisz plik na dysku. img { float:right; }
3. Uruchom swoją przeglądarkę i otwórz plik szablon.html,
by sprawdzić efekt działania prezentowanego stylu. 4. W ramach ćwiczeń indywidualnych spróbuj sprawdzić inne sposoby oblewania obrazka tekstem.
Rozdział 4. • Kaskadowe arkusze stylów
165
Tamowanie elementów Podczas tworzenia stron WWW czasem chcemy, by jakiś element nie był oblany. Stosowne rozwiązanie również dostępne jest w CSS. Dokładne właściwości stylu znajdują się w tabeli 4.24. Tabela 4.24. Właściwości stylu clear clear
Dostępne wartości:
left | right | none | both | inherit
Wartość domyślna:
none
Przykład:
img {clear:right;}
Dziedziczenie:
nie
Obsługa:
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
Zmiana sposobu wyświetlania elementu Podczas pracy nad stroną zdarza się, że idealnym rozwiązaniem będzie wykorzystanie jednego elementu języka HTML, a następnie przekształcenie go na inny za pomocą CSS. Kaskadowe arkusze stylów są na to przygotowane i do takich zadań specjalnych mają odpowiednie polecenie. Dokładne właściwości stylu znajdują się w tabeli 4.25. Tabela 4.25. Właściwości stylu display display
Dostępne wartości:
inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Wartość domyślna:
inline
Przykład:
p{display:block;}
Dziedziczenie:
nie
Obsługa:
MS Internet Explorer (częściowo), Mozilla Firefox, Opera
166
HTML5 • Ćwiczenia praktyczne
Poniżej opisałem wybrane ustawienia, które są najczęściej używane podczas pracy nad stroną. Natomiast konkretny przykład wykorzystania tego stylu znajdziesz w następnym rozdziale. T inline — wymusza traktowanie danego elementu tak samo jak elementu wstawianego; T block — wymusza traktowanie danego elementu tak samo jak elementu blokowego; T list-item — wymusza traktowanie danego elementu tak samo jak listy; T table-cell — wymusza traktowanie danego elementu tak samo jak tabeli.
5 Praktyczne projekty W poprzednich rozdziałach omówiłem najważniejsze elementy języka HTML5 oraz kaskadowych arkuszy stylów. Całość została zobrazowana krótkimi przykładami. Z e-maili, które trafiają do mnie od czytelników, wiem, że wielu z nich ma problemy z praktycznym zastosowaniem zdobytej wiedzy. Dlatego uznałem, że doskonałym uzupełnieniem niniejszych ćwiczeń będzie rozdział, w którym zademonstruję, jak wykorzystać zdobytą wiedzę w praktyce. Właściwie od chwili, gdy usiadłem do pisania ćwiczeń, które masz w ręku, myślałem nad tym, jakie praktyczne przykłady wybrać, aby pokazać Ci zasadę tworzenia stron WWW. Ostatecznie uznałem, że wspólnie stworzymy miniwitrynę z witrażami autorstwa Anny Danowskiej. Niniejszy podrozdział w całości będzie mieć formę jednego dużego ćwiczenia. W każdej chwili podczas wspólnej pracy możesz odwołać się do strony http://annadanowska.pl/, na której znajdziesz gotowy projekt.
Szkielet strony Na wstępie założyłem sobie, że na stronie znajdą się następujące elementy:
168
HTML5 • Ćwiczenia praktyczne
T nagłówek, T menu nawigacyjne, T dwie kolumny w głównej części, T stopka.
W związku z takimi planami potrzebuję ogólnego szkieletu strony, który zapewni mi możliwość stworzenia planowanej witryny. Listing szkieletu zamieściłem poniżej. Myślę, że jego omawianie nie jest konieczne, ponieważ każdy z elementów powinien być Ci znany.