Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00075 009782 10452369 na godz. na dobę w sumie
Head First HTML with CSS & XHTML. Edycja polska (Rusz głową!) - książka
Head First HTML with CSS & XHTML. Edycja polska (Rusz głową!) - książka
Autor: , Liczba stron: 684
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-0427-8 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Poznaj w niekonwencjonalny sposób zasady tworzenia stron WWW

Język HTML stale ewoluuje. Od momentu swojego powstania przeszedł długą drogę. Początkowo był to zestaw kilku znaczników służących do formatowania tekstów naukowych, publikowanych w sieci będącej zalążkiem internetu. Obecnie technologia ta pozwala na niemal dowolne układanie elementów tekstowych i graficznych na stronach WWW wyświetlanych w przeglądarkach internetowych. Współczesny HTML to nie tylko znaczniki, ale także style -- uniwersalne rozwiązanie umożliwiające kontrolowanie wyglądu strony. Zbudowanie nowoczesnej i szybko ładującej się witryny WWW wymaga opanowania tych elementów. Przeraża Cię to? Widzisz już w myślach setki linii przykładowego kodu, dziesiątki definicji i diagramów? Niepotrzebnie.

Dzięki książce 'Head First HTML with CSS & XHTML. Edycja polska' poznasz najnowsze standardy tworzenia witryn WWW w sposób gwarantujący szybkie i bezstresowe przyswojenie wiedzy. Jej autorzy, wykorzystując najnowsze osiągnięcia teorii uczenia, przedstawiają wszystkie zagadnienia niezbędne do rozpoczęcia projektowania i tworzenia serwisów WWW z wykorzystaniem języka HTML oraz kaskadowych arkuszy stylów CSS. Poznasz znaczniki HTML, zasady umieszczania na stronach WWW elementów graficznych oraz sposoby formatowania tekstów za pomocą stylów. Jednak, co najważniejsze, nauczysz się stosować tę wiedzę w praktyce.

Przekonaj się, że nawet przy poznawaniu skomplikowanych technologii można się świetnie bawić.

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

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREœCI SPIS TREœCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOœCIACH O NOWOœCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Koœciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Head First HTML with CSS XHTML. Edycja polska Autorzy: Eric Freeman, Elisabeth Freeman T³umaczenie: Piotr Rajca ISBN: 83-246-0427-8 Tytu³ orygina³u: Head First HTML with CSS XHTML Format: 200×234, stron: 684 Poznaj w niekonwencjonalny sposób zasady tworzenia stron WWW (cid:129) Wykorzystaj najnowsze standardy jêzyka HTML (cid:129) Zastosuj style do zdefiniowania wygl¹du strony (cid:129) Opracuj formularze i mechanizmy nawigacyjne Jêzyk HTML stale ewoluuje. Od momentu swojego powstania przeszed³ d³ug¹ drogê. Pocz¹tkowo by³ to zestaw kilku znaczników s³u¿¹cych do formatowania tekstów naukowych, publikowanych w sieci bêd¹cej zal¹¿kiem internetu. Obecnie technologia ta pozwala na niemal dowolne uk³adanie elementów tekstowych i graficznych na stronach WWW wyœwietlanych w przegl¹darkach internetowych. Wspó³czesny HTML to nie tylko znaczniki, ale tak¿e style — uniwersalne rozwi¹zanie umo¿liwiaj¹ce kontrolowanie wygl¹du strony. Zbudowanie nowoczesnej i szybko ³aduj¹cej siê witryny WWW wymaga opanowania tych elementów. Przera¿a Ciê to? Widzisz ju¿ w myœlach setki linii przyk³adowego kodu, dziesi¹tki definicji i diagramów? Niepotrzebnie. Dziêki ksi¹¿ce „Head First HTML with CSS XHTML. Edycja polska” poznasz najnowsze standardy tworzenia witryn WWW w sposób gwarantuj¹cy szybkie i bezstresowe przyswojenie wiedzy. Jej autorzy, wykorzystuj¹c najnowsze osi¹gniêcia teorii uczenia, przedstawiaj¹ wszystkie zagadnienia niezbêdne do rozpoczêcia projektowania i tworzenia serwisów WWW z wykorzystaniem jêzyka HTML oraz kaskadowych arkuszy stylów CSS. Poznasz znaczniki HTML, zasady umieszczania na stronach WWW elementów graficznych oraz sposoby formatowania tekstów za pomoc¹ stylów. Jednak, co najwa¿niejsze, nauczysz siê stosowaæ tê wiedzê w praktyce. (cid:129) Struktura dokumentu HTML (cid:129) Znaczniki formatuj¹ce (cid:129) £¹cza do innych stron WWW (cid:129) Wstawianie elementów graficznych (cid:129) Zgodnoœæ ze standardami (cid:129) Formatowanie za pomoc¹ stylów CSS (cid:129) Tworzenie formularzy Przekonaj siê, ¿e nawet przy poznawaniu skomplikowanych technologii mo¿na siê œwietnie bawiæ. Spis treści (skrócony) Wprowadzenie Język Sieci. Poznajemy HTML Poznajemy „HT” z nazwy języka HTML. Dokładniejsze poznanie hipertekstu Poznajemy media. Umieszczanie obrazów na stronach WWW Poważny HTML. Standardy, zgodność z nimi i cały ten kram 1 2 3 Konstrukcja stron WWW. Elementy konstrukcyjne 4 Wycieczka do Webowic. Nawiązujemy połączenie 5 6 7 Dodanie „X” do HTML. Zaczynamy stosować XHTML 8 Delikatna stylizacja. Poznajemy CSS 9 10 11 Zaawansowane sposoby konstruowania stron WWW. Elementy div i span 12 Rozmieszczanie elementów. Układ i pozycjonowanie 13 Mania tabel. Tabele i listy 14 W stronę interaktywności. Formularze XHTML Dodatek. Dziesięć najważniejszych zagadnień (których nie opisaliśmy) Poszerzamy swoje słownictwo. Style czcionek i kolorów Bliskie kontakty z elementami. Model blokowy 21 33 73 107 153 193 249 291 311 365 407 449 507 567 607 655 Spis treści (na serio) Wprowadzenie Twój mózg koncentruje się na kodzie HTML i CSS. Podczas gdy Ty starasz się czegoś nauczyć, Twój mózg robi Ci przysługę i dba o to, abyś przez przypadek nie zapamiętał zdobywanych informacji. Twój mózg myśli sobie: „Lepiej zostawić trochę miejsca na bardziej istotne informacje, na przykład: jakich zwierząt unikać albo czy jeżdżenie na snowboardzie nago jest dobrym pomysłem”. A zatem, w jaki sposób możesz oszukać swój mózg i przekonać go, że Twoje życie zależy od znajomości HTML-a i CSS? Dla kogo jest ta książka? Wiemy, co sobie myśli Twój mózg Metapoznanie Zmuś swój mózg do posłuszeństwa Zespół recenzentów Podziękowania 22 23 25 27 30 31 5 Spis treści 1 Poznajemy HTML Język Sieci Jedyną przeszkodą na drodze do zaznaczenia Twojej obecności w Sieci jest konieczność poznania nowego żargonu: HTML-a (to skrót od słów: HyperText Markup Language — język znaczników hipertekstu). A zatem przygotuj się na kilka lekcji nowego języka. Po przeczytaniu tego rozdziału nie tylko będziesz rozróżniać niektóre proste elementy HTML, lecz także nabędziesz odpowiedniego stylu. W końcu, po przeczytaniu całej książki, będziesz posługiwać się tym językiem w taki sposób, jakbyś całe życie spędził w Webowicach. 34 35 36 37 41 43 44 47 49 50 55 59 60 62 64 66 69 WWW zabiła radio Co robi serwer? Oto co piszesz (kod HTML)… Co tworzy przeglądarka Twoja długa przerwa w kafeterii Świat Kaw Tworzenie strony kafeterii Tworzenie plików HTML (Widnows) W międzyczasie w kafeterii Świat Kaw Otwieranie strony w przeglądarce Testowanie strony WWW Znaczniki bez tajemnic Poznajemy element style Nadawanie stylu stronie kafeterii Kto co robi? Pogawędki przy kominku Kluczowe zagadnienia Rozwiązania ćwiczeń » s alon.html«” „Potrzeb uję p li k html head title My Playlist /title head body h1 Kick(cid:146)n Tunes /h1 p BT - Satellite: nice downbeat tune. /p p ... „Znalazłem go, trzymaj” html head title My Playlist /title head body h1 Kick(cid:146)n Tunes /h1 p BT - Satellite: nice downbeat tune. /p p ... html head title My Playlist /title head body h1 Kick(cid:146)n Tunes /h1 p BT - Satellite: nice downbeat tune. /p p ... html head title My Playlist /title head body h1 Kick(cid:146)n Tunes /h1 p BT - Satellite: nice downbeat tune. /p p ... Serwer WWW Bez stresu, ale kiedy skończysz, naszą stronę będą odwiedzać tysiące osób. Dlatego nie tylko musi ona być poprawna, lecz także koniecznie musi świetnie wyglądać! 6 Poznajemy „HT” z nazwy języka HTML 2 Dokładniejsze poznanie hipertekstu Czy ktoś powiedział „hipertekst”? A co to takiego? Ech… to jedynie podstawa całej WWW. W rozdziale 1. przyjrzeliśmy się nieco językowi HTML i przekonaliśmy się, że jest to język wykorzystujący znaczniki („ML” z nazwy HTML) do opisywania struktury stron WWW. Teraz zajmiemy się możliwościami związanymi z pierwszą częścią nazwy „HTML” — „HT”, czyli hipertekstem, który pozwoli nam uwolnić się od ograniczeń jednej strony i tworzyć połączenia z innymi stronami WWW. Jednocześnie poznamy nowy, bardzo potężny element — a — i dowiemy się, że bycie „względnym” jest całkiem fajne. A zatem zapnij pasy — właśnie zaczynamy poznawać hipertekst. Salon Head First — nowy i poprawiony Tworzenie nowej strony salonu Co zrobiliśmy? Co robi przeglądarka? Atrybuty Problemy techniczne Planowanie ścieżek Poprawianie błędnych adresów obrazów… Rozwiązania ćwiczeń 74 76 78 79 83 88 90 96 102 7 Spis treści Konstrukcja stron WWW 3 Elementy konstrukcyjne Czy powiedziano mi, że ta książka dotyczy tworzenia stron WWW? Bez wątpienia nauczyłeś się już całkiem sporo; poznałeś: znaczniki, elementy, łącza, ścieżki. Niemniej jednak cała ta wiedza będzie całkowicie nieprzydatna, jeśli nie wykorzystasz jej do tworzenia jakichś oszałamiających stron WWW. W tym rozdziale mamy zamiar przedstawić Ci proces tworzenia stron WWW: od pomysłu, poprzez projekt, stworzenie podstaw, wpisanie zawartości strony, aż do ostatecznych, drobnych modyfikacji związanych z dopracowywaniem jej wyglądu. Będzie Ci przy tym potrzebny jedynie kask oraz pas na narzędzia, gdyż pokażemy Ci nowe narzędzia, które bez wątpienia stałyby się chlubą każdego majsterkowicza. Z dziennika na stronę WWW z prędkością 20 km na godzinę Orientacyjny szkic projektu Od szkicu do układu Od układu do strony WWW Testowanie strony WWW Antka Poznajemy element q Dłuuuuugie cytaty Dodawanie elementu blockquote Prawdziwe znaczenie zagadki związanej z elementami blockquote i q Oczywiście można utworzyć listę, posługując się elementami p … Tworzenie list HTML w dwóch prostych krokach Umieszczanie jednego elementu wewnątrz innego nazywamy „zagnieżdżaniem” Aby zrozumieć związki wynikające z zagnieżdżania elementów, narysuj odpowiedni szkic Wykorzystanie zagnieżdżania dla zapewnienia poprawności znaczników elementu Wewnątrzwierszowy czy blokowy? Rozwiązania ćwiczeń 109 110 111 112 114 116 120 121 124 133 134 139 140 141 143 149 h1 p p p p h2 img h2 h2 img 8 Wycieczka do Webowic 4 Nawiązujemy połączenie Do serwowania stron WWW zdecydowanie najlepiej nadaje się Internet. Do tej pory tworzyłeś strony WWW, które były przechowywane na Twoim lokalnym komputerze. Podobnie tworzone łącza także wskazywały na strony znajdujące się na Twoim komputerze. Jednak teraz zmienimy tę sytuację. W tym rozdziale spróbujemy Cię zachęcić, abyś umieścił swoje strony w Internecie, tak by Twoi przyjaciele, fani i klienci mogli je zobaczyć. Ujawnimy także tajemnice tworzenia łączy do innych stron, łamiąc kod: h, t, t, p, :, /, /, w, w, w. A zatem spakuj swoje rzeczy — następnym przystankiem są Webowice. Umieszczanie stron kafeterii Świat Kaw (lub Twoich własnych) na WWW Znajdowanie firmy hostingowej W jaki sposób możesz zdobyć własną nazwę domeny? Wprowadzamy się Umieszczanie plików w katalogu głównym Wszystkie informacje o FTP, jakie można zmieścić na dwóch stronach Wracamy do pracy… Ulica Główna, URL Czym jest protokół HTTP? Czym są ścieżki bezwzględne? Sposób działania stron domyślnych W jaki sposób tworzymy łącza do innych witryn WWW? Łącze do strony o kofeinie Dopracowanie i wykończenie strony Łącza do konkretnych miejsc strony Użycie elementu a do tworzenia punktów docelowych Tworzenie łączy do odnośników Wyświetlanie łącza w nowym oknie Otwieranie nowych okien przy wykorzystaniu atrybutu target Rozwiązania ćwiczeń 154 155 156 158 159 160 163 164 165 166 169 172 173 177 179 180 181 185 186 191 9 Spis treści Poznajemy media 5 Umieszczanie obrazów na stronach WWW Teraz prosimy o uśmiech. A w zasadzie uśmiechnij się i powiedz: „gif”, „jpg” lub „png” — bo to właśnie będą Twoje ulubione formaty graficzne, przynajmniej jeśli chodzi o robienie obrazów na potrzeby stron WWW. W tym rozdziale dowiesz się wszystkiego na temat umieszczania na stronach najczęściej spotykanego typu plików multimedialnych — obrazów. Czy masz jakieś zdjęcia cyfrowe, które musisz umieścić na swojej stronie? Nie ma problemu. Masz swoje logo, które też chciałbyś umieścić na stronie? Skonwertowałeś je do odpowiedniego formatu. Jednak zanim poznasz te wszystkie informacje, powinniśmy Ci chyba oficjalnie przedstawić element img , nieprawdaż? Zatem przepraszamy, zachowaliśmy się niegrzecznie, ale nigdy nie pokazano nam, jak należy się właściwie zachować w takiej sytuacji. Aby naprawić nasz błąd, zamieścimy w niniejszej książce cały rozdział poświęcony wyłącznie elementowi img . Gdy skończysz go czytać, będziesz znać wszelkie tajniki stosowania zarówno tego elementu, jak i wszystkich jego atrybutów. Dodatkowo zobaczysz, jak ten niewielki element potrafi zmusić przeglądarkę do wykonania dodatkowej pracy i wyświetlania obrazów. Jak przeglądarki obsługują obrazy Sposób działania obrazów A teraz oficjalna prezentacja: Panie i Panowie, oto element img Zawsze podawaj tekst alternatywny Tworzenie świetnej rozrywkowej witryny: mój iPod O rany! Obraz jest o wiele za duży Poprawa kodu HTML stron „mój iPod” Przystosowanie strony do wykorzystania miniatur Zmiana obrazów w łącza A zatem w jaki sposób mogę stworzyć łącza będące obrazami? Jakiego formatu powinniśmy użyć? Być przezroczystym czy nie być przezroczystym? Oto jest pytanie… Chwila, ale jaki jest kolor tła strony? Sprawdzenie logo po utworzeniu otoczki Umieszczenie logo na stronie głównej witryny Rozwiązania ćwiczeń 194 197 201 204 206 209 219 223 227 229 234 235 237 238 239 243 A to jest pojedynczy piksel. Tu widać wiele pikseli, które razem tworzą górną część prawego skrzydła motyla. Obraz wyświetlany na ekranie komputera składa się z tysięcy pikseli. 10 Poważny HTML 6 Standardy, zgodność z nimi i cały ten kram Co jeszcze należy wiedzieć o języku HTML? Przebyłeś już całkiem spory odcinek drogi wiodącej do biegłego poznania języka HTML. Czy nie nadszedł już czas, by zająć się CSS i dowiedzieć się, jak sprawić, by cały ten mdły kod zmienił się w bajeczną stronę? Zanim to jednak zrobimy, musimy się upewnić, że Twój kod HTML jest dobry (no wiesz, wymuskany, dopracowany, perfekcyjny); a zrobimy to, podchodząc bardzo poważnie do jego postaci i sposobu, w jaki go piszesz. Nie zrozum nas źle — cały czas pisałeś doskonały kod HTML, niemniej jednak istnieje jeszcze kilka rzeczy, które możesz zrobić, aby pomóc przeglądarce w wyświetlaniu stron oraz aby zabezpieczyć się przed drobnymi błędami, które mogą wkraść się do Twego kodu. A po co to wszystko? Otóż chodzi o strony, które w bardziej jednolity sposób będą wyświetlane w wielu różnych przeglądarkach (a nawet będą poprawnie wyświetlane na urządzeniach przenośnych i odczytywane przez przeglądarki głosowe używane przez osoby mające problemy ze wzrokiem), strony, które będą szybciej wczytywane i które zapewniają poprawną współpracę ze stylami CSS. Przygotuj się, gdyż w tym rozdziale zmienisz się z HTML-owego majsterkowicza w prawdziwego profesjonalistę. 1 I n f o r m a t o r o H T M L 4 . 0 1 r o H T M L 4 . 0 t o W e b o w i c e o w i c b o W e M i a s o e o f n I t s r m a M i a t Krótka historia języka HTML Nie możemy pozwolić, by przeglądarka pracowała w trybie „quirks”! Dodawanie definicji typu dokumentu Poznajemy analizator poprawności W3C Weryfikacja stron salonu Head First Houston, mamy problem… Dodanie znacznika meta do określenia typu zawartości strony Uszczęśliwienie analizatora W3C dzięki użyciu znacznika meta … Houston, mamy kolejny problem… Do trzech razy sztuka? Zmiana definicji na ścisłą Czy weryfikacja strony zakończyła się pomyślnie? Rozwiązanie problemu z zagnieżdżaniem Jeszcze jedna próba: czy jesteśmy dostatecznie ściśli… Ścisła wersja HTML-a 4.01 — sięgnij po informator Pogawędki przy kominku Archeologia HTML Rozwiązania ćwiczeń B e z p ł a t n y 252 255 257 260 261 262 264 265 267 269 273 274 276 277 279 283 286 289 11 Spis treści Dodanie „X” do HTML 7 Zaczynamy stosować XHTML Mamy jeden straszny sekret, którego jeszcze Ci nie wyjawiliśmy. Wiemy, że myślałeś, iż kupujesz książkę dotyczącą języka HTML, jednak tak naprawdę jest to książka o zamaskowanym języku XHTML. W rzeczywistości prawie cały czas uczyliśmy Cię właśnie XHTML-a. Zapewne zastanawiasz się, czym właściwie jest ten XHTML. Cóż, przedstawiamy zatem rozszerzalny HTML (ang. eXtensible HTML), który znany jest także jako XHTML — kolejne wcielenie języka HTML. Jest lepszy, fajniejszy, a nawet lepiej dostosowany do zachowania zgodności z przeglądarkami działającymi na bardzo różnych urządzeniach. W tym krótkim rozdziale mamy zamiar przeprowadzić Cię od HTML-a do XHTML-a w trzech prostych etapach. A zatem obróć stronę i już znacząco zbliżysz się do celu… (a tym samym także do CSS). Czym jest XML? Co to wszystko ma wspólnego z HTML-em? Dlaczego więc mógłbyś chcieć używać XHTML-a? Stosowanie XHTML-a 1.0 w wersji Strict Trzy etapy przejścia ze ścisłej wersji języka HTML 4.01 do XHTML-a 1.0 Stara szkoła ścisłej wersji języka HTML 4.01 Nowy, poprawiony zapis stosowany w XHTML 1.0 Weryfikacja — nie tylko dla HTML-a Pogawędki przy kominku HTML czy XHTML? Oto jest pytanie… Rozwiązania ćwiczeń 293 294 296 298 300 301 301 303 306 308 309 Lubię być na bieżąco z najnowszymi trendami i technologiami. nowszej i lepszej technologii? XHTML to przyszłość, a ponieważ jest niezwykle podobny do HTML-a, to dlaczego nie miałabym skorzystać z tej Prowadzi własny blog. 12 Delikatna stylizacja 8 Poznajemy CSS Mówiono mi, że to będzie książka o CSS. Jak do tej pory koncentrowałeś się na poznawaniu języka XHTML używanego do tworzenia struktury stron WWW. Jednak, jak sam się mogłeś przekonać, pojęcie stylu i gustu, jaki mają przeglądarki, pozostawia wiele do życzenia. Oczywiście moglibyśmy wezwać policję do spraw mody, ale nie musimy tego robić. Dzięki zastosowaniu CSS będziemy mieli całkowitą kontrolę nad sposobem prezentacji strony, a niejednokrotnie nie będziemy nawet musieli wprowadzać w tym celu jakichkolwiek zmian w naszym kodzie XHTML. Czy to naprawdę może być aż tak proste? Cóż, będziesz musiał nauczyć się zupełnie nowego języka; w końcu Webowice to miasto, w którym obowiązują dwa języki urzędowe. Po przeczytaniu zamieszczonego w tym rozdziale samouczka do nauki języka CSS będziesz mógł stanąć po dowolnej stronie ulicy Głównej i swobodnie prowadzić konwersację. Zagadka na pięć minut Już nie jesteś w Kansas… Zasłyszane na targu w Webowicach Stosowanie CSS z językiem XHTML Dodatkowo wyświetlmy linię pod nagłówkiem strony Określanie drugiej reguły, dotyczącej wyłącznie elementu h1 Dodanie salonowego stylu do strony o drinkach oraz sposobie dojazdu Łączenie pliku salon.html z zewnętrznym arkuszem stylów Czas porozmawiać o dziedziczeniu… Co się stanie, jeśli przeniesiemy określenie czcionki do jakiegoś elementu na wyższym poziomie hierarchii? Przesłanianie dziedziczenia Tworzenie selektora klasy Więcej informacji o selektorach klas Najmniejszy i najszybszy przewodnik dotyczący stosowania stylów dostępny na świecie Kto dziedziczy? Zapewnienie poprawności kodu CSS salonu Head First Rozwiązania ćwiczeń html head meta title style h1 body p a p img h2 em p a 312 314 315 321 322 329 331 337 338 340 344 346 348 352 355 362 13 Spis treści Poszerzamy swoje słownictwo 9 Style czcionek i kolorów Twoje lekcje CSS przebiegają sprawnie i miło. Opanowałeś już podstawy CSS, wiesz, jak tworzyć reguły i określać style elementów. Nadszedł czas, abyś rozszerzył swoje słownictwo, a to oznacza poznanie nowych właściwości i dowiedzenie się, do czego można ich użyć. W tym rozdziale poznasz niektóre spośród najczęściej używanych właściwości określających sposób prezentacji tekstu. Do tego jednak będzie Ci potrzebna znajomość kilku zagadnień związanych z czcionkami i kolorami. Dowiesz się, że Twoje możliwości nie ograniczają się do czcionek, które wszyscy powszechnie wykorzystują, ani domyślnych wielkości i kolorów znaków, jakie przeglądarki używają do prezentowania tekstu akapitów i nagłówków. Oprócz tego przekonasz się, że o kolorach można się dowiedzieć znacznie więcej, niż mogłoby się zdawać na pierwszy rzut oka. Tekst i czcionki z wysokości 10 km Ale czym tak w zasadzie są „rodziny czcionek”? Określanie rodziny czcionek w CSS Odkurzamy dziennik Antka W jaki sposób radzić sobie z faktem, że każdy może mieć inne czcionki? Czyli w jaki sposób powinienem określać wielkości czcionek? Wprowadźmy zatem zmiany wielkości czcionek na stronie dziennika Antka Modyfikacja grubości czcionki Nadawanie czcionkom odrobiny stylu Zmiana postaci cytatów poprzez zastosowanie kursywy W jaki sposób tworzone są kolory na stronach WWW? W jaki sposób można określać kolory na stronach WWW? Ile jest tych sposobów… Dwuminutowy przewodnik po kodach szesnastkowych W jaki sposób można określać wartości kolorów? Wróćmy do strony Antka… Wszystko, co chciałbyś wiedzieć o właściwości text-decoration Usuwamy podkreślenie… Rozwiązania ćwiczeń 366 368 371 372 375 378 380 383 385 386 388 391 394 396 399 401 402 404 5 6 4 A B 10 11 9 7 8 C 12 D 13 14 15 E F 3 2 1 0 14 10 Model blokowy Bliskie kontakty z elementami Aby konstruować strony WWW na zaawansowanym poziomie, musisz bardzo dobrze poznać materiały konstrukcyjne, jakimi dysponujesz. W tym rozdziale dokładnie przyjrzymy się naszym materiałom konstrukcyjnym, czyli elementom XHTML. Dokładnie zbadamy elementy blokowe oraz wewnątrzwierszowe pod mikroskopem i sprawdzimy, z czego się one składają. Przekonasz się także, w jaki sposób przy wykorzystaniu CSS można kontrolować niemal wszystkie aspekty wyglądu elementów. Ale to jeszcze nie wszystko — dowiesz się także, w jaki sposób można przydzielać elementom unikalną tożsamość. A jeśli i to Ci nie wystarczy, to dowiesz się, w jakich sytuacjach i dlaczego mógłbyś używać kilku różnych arkuszy stylów. Obróć więc stronę i zacznij poznawać najskrytsze tajemnice elementów. Aktualizacja strony salonu Head First Zacznijmy od kilku prostych zmian Sprawdzanie nowej wysokości wierszy Przygotowania do gruntownych modyfikacji Dokładniejsza analiza modelu blokowego Jak można konfigurować bloki elementów? Tworzenie stylu określającego postać akapitu gwarancji Wypełnienie, obramowanie oraz marginesy akapitu gwarancji Dodanie wypełnienia A teraz dodajmy marginesy Dodawanie obrazu tła Poprawa obrazu tła Jak dodać wypełnienie z lewej strony elementu? Jak powiększyć margines z prawej strony elementu? Dwuminutowy przewodnik po obramowaniach Określenie postaci obramowania i zakończenie prac Wywiad z klasą HTML Atrybut id Zastosowanie identyfikatora na stronie salonu Miksowanie arkuszy stylów Stosowanie wielu różnych arkuszy stylów Rozwiązania ćwiczeń 408 410 412 413 414 416 421 423 423 424 426 429 430 431 432 434 436 438 440 442 443 448 15 11 Elementy div i span Zaawansowane sposoby konstruowania stron WWW Czas przygotować się do tworzenia poważnych konstrukcji. W tym rozdziale przedstawimy dwa nowe elementy języka XHTML — div oraz span . Jednak nie są to zwykłe „kątowniki”, to „stalowe dźwigary” z prawdziwego zdarzenia. Posługując się tymi dwoma elementami, będziesz tworzył poważne konstrukcje wspomagające, a kiedy już je umieścisz na stronie, to będziesz mógł określać ich postać przy użyciu stylów na wiele sposobów dających bardzo duże możliwości. Wcześniej nie mogliśmy raczej nic wymyślić, jednak zauważ, że Twój pas na narzędzia CSS powoli zaczyna się wypełniać, a zatem nadszedł czas, by pokazać nowe rozwiązania, które znacznie uproszczą określanie tych wszystkich właściwości. Oprócz tego zaprosiliśmy do niniejszego rozdziału kilkoro ciekawych gości, tak zwane pseudoklasy, które pozwolą Ci na tworzenie bardzo interesujących selektorów. (Jeśli uważasz, że słowo „pseudoklasa” mogłoby być doskonałą nazwą dla Twojej następnej kapeli, to wiedz, że się spóźniłeś — wyprzedziliśmy Cię). Dokładniejsza analiza kodu XHTML listy napojów Zobaczmy, jak można podzielić stronę na logiczne sekcje Dodawanie obramowania Sprawdzenie obramowania Dodawanie faktycznych stylów do sekcji napojów tygodnia Plan gry Określanie szerokości sekcji napojów Dodawanie podstawowych stylów do sekcji napojów Potrzebujemy sposobu wybierania elementów podrzędnych Zmiana kolorów nagłówków w sekcji napojów Zmiana wysokości wierszy Czas, by pójść na skróty Trzy proste kroki dodawania elementów span Element a oraz wszystkie jego osobowości W jaki sposób można określać styl elementów na podstawie ich stanu? Stosowanie pseudoklas Czy wzmianka o „kaskadzie” nie byłaby na czasie? Kaskada Zapraszamy do gry: „Jaki jest mój poziom precyzji?” Składanie wszystkich elementów w jedną całość Rozwiązania ćwiczeń 451 453 460 460 461 462 462 467 473 475 476 478 484 488 489 491 493 495 496 497 504 Spis treści 16 Rozmieszczanie elementów 12 Układ i pozycjonowanie Odświeżające, stałe układy CSS Czas nauczyć Twoje elementy XHTML nowych sztuczek. Już ani chwili dłużej nie pozwolimy elementom XHTML siedzieć na miejscu i lenić się — nadszedł czas, by w końcu się ruszyły i pomogły nam w tworzeniu stron, które mają jakiś prawdziwy układ. Ale jak? No cóż… już dosyć dobrze poznałeś strukturalne elementy div oraz span i wiesz już wszystko na temat modelu blokowego, nieprawdaż? Nadszedł zatem czas, by wykorzystać tę całą wiedzę do tworzenia układów stron. Nie obawiaj się… nie będziemy już więcej pisać o tłach i kolorach czcionek, skoncentrujemy się na tworzeniu profesjonalnych, wielokolumnowych układów stron. W tym rozdziale cała wiedza, jaką do tej pory zdobyłeś, zacznie się układać w jedną logiczną całość. h1 h2 h2 p p p tekst tekst tekst tekst span em em span tekst p id=”zdumiewające” tekst tekst tekst tekst tekst tekst img img img img Czy wykonałeś ćwiczenie „Supermoc umysłu”? Użyj rozkładu, Luke… A co z elementami wewnątrzwierszowymi? Jak to wszystko działa? Jak stworzyć „pływający” element? Za kulisami na stronie salonu Nowa wersja strony kafeterii Świat Kaw Przenieś pasek boczny tuż poniżej nagłówka strony Określ szerokość paska i zmień go na element pływający Rozwiązanie problemu dwóch kolumn Określanie szerokości marginesu głównej sekcji strony Wracamy do rozwiązania problemu przesłaniających się elementów Z prawej mocno, z lewej swobodnie… Układy elastyczne i stałe Jak działa pozycjonowanie bezwzględne Stosowanie pozycjonowania bezwzględnego Dobry kompromis pozwala na rozwiązanie problemu stopki Pozycjonowanie obrazu pucharu Jak działa pozycjonowanie ustalone? Zastosowanie ujemnej wartości właściwości left Pozycjonowanie względne Dążymy w kierunku trzech kolumn, a może nawet dalej… Rozwiązania ćwiczeń 508 509 511 512 515 517 519 524 524 527 528 531 534 537 540 543 547 549 555 557 559 561 564 17 Spis treści 13 Tabele i listy Mania tabel Jeśli to wygląda jak tabela i mówi jak tabela… Wcześniej czy później nadejdzie ten moment, kiedy człowiek musi się zmierzyć z przerażającymi danymi tabelarycznymi. Niezależnie od tego, czy będzie to strona przedstawiająca zapasy magazynowe firmy, czy też najnowszy katalog chińskich podróbek lalki Barbie (nie obawiaj się, nie zadenuncjujemy Cię), to musisz być świadom, iż trzeba ją sporządzić w XHTML-u. Ale jak to zrobić? Cóż, mamy dla Ciebie propozycję: złóż zamówienie już teraz, a my w jednym rozdziale ujawnimy wszystkie sekrety, które pozwolą Ci umieścić Twoje dane bezpośrednio w ślicznej tabeli XHTML. Ale to jeszcze nie wszystko: do każdego zamówienia dodajemy unikalny, a co ważniejsze, darmowy poradnik dotyczący określania postaci tabel XHTML przy wykorzystaniu kaskadowych arkuszy stylów. A jeśli zamówienie złożysz natychmiast, to w ramach specjalnej nagrody otrzymasz podobny poradnik dotyczący określania postaci list XHTML. A zatem nie wahaj się ani chwili! Zadzwoń już teraz! Jak tworzy się tabele w języku XHTML? Tworzenie tabeli przy użyciu języka XHTML Jak to wyświetla przeglądarka Analiza tabel Dodawanie tytułu i podsumowania Zanim zaczniemy określać style, umieśćmy kod tabeli na stronie Antka Łączenie podwójnych obramowań komórek A może by tak dodać trochę koloru? Antek dokonał bardzo interesującego odkrycia… Kolejny rzut oka na tabelę Antka Jak stworzyć komórkę rozciągającą się na kilka wierszy? Nowa, poprawiona tabela Kłopoty w raju? Przesłanianie stylów dla nagłówków zagnieżdżonej tabeli Ostatnie poprawki strony Antka Rozwiązania ćwiczeń 569 570 571 572 575 577 582 584 585 586 587 589 590 594 595 600 18 W stronę interaktywności 14 Formularze XHTML Jak do tej pory cała komunikacja pomiędzy tworzonymi witrynami a osobami, które je odwiedzały, odbywała się w jednym kierunku: z serwera do użytkownika. Jejku, czy nie byłoby fajnie, gdyby użytkownik też mógł nam coś powiedzieć? Właśnie taką możliwość dają nam formularze XHTML: kiedy już umieścisz je na stronach WWW (dodatkowo będzie potrzebna także pomoc ze strony serwera), to zapewnią one możliwość zbierania opinii od użytkowników oglądających witrynę rejestrowania zamówień przez Internet, wykonania kolejnego ruchu w internetowej grze czy też gromadzenia głosów w ankiecie „czaderski czy lamerski?”. W tym rozdziale poznasz całą drużynę elementów XHTML, które służą do tworzenia formularzy. Oprócz tego dowiesz się nieco o tym, co w niewidoczny dla użytkownika sposób musi robić serwer, by obsługiwać formularze. W końcu poświęcimy także nieco uwagi określaniu postaci formularzy przy użyciu stylów (choć jest to nieco kontrowersyjne zagadnienie; przeczytaj, a dowiesz się dlaczego). Jak działają formularze? Sposób działania formularzy w przeglądarce Jaki jest kod XHTML formularza? Co tworzy przeglądarka Jak działa element form ? Przygotowania do stworzenia formularza Ziarnotronu Dodawanie elementu form Jak działają nazwy elementów formularzy? Wróćmy do dodawania elementów input do kodu XHTML strony Dodawanie kolejnych pól do formularza Dodawanie elementu select Dajemy klientom możliwość wyboru postaci dostarczonej kawy Naciskanie przycisków opcji Dokańczanie formularza Dodawanie pól wyboru oraz obszaru tekstowego Przedstawienie działania metody GET Z tabelami czy bez tabel? Oto jest pytanie… Umieszczanie elementów formularza w tabeli Dopracowanie wyglądu formularza i tabel przy użyciu stylów Rozwiązania ćwiczeń 608 609 610 611 612 620 621 622 624 625 626 628 629 630 631 637 642 643 646 652 19 Dodatek. Pozostałości Dziesięć najważniejszych zagadnień (których nie opisaliśmy) Opisaliśmy bardzo wiele zagadnień i już niemal dotarliśmy do końca niniejszej książki. Będziemy za Tobą tęsknić, jednak zanim pozwolimy Ci odejść, chcielibyśmy mieć poczucie, że nie wypuszczamy Cię na szerokie wody WWW bez dodatkowego przygotowania. Bez wątpienia nie możemy umieścić w tym, stosunkowo niewielkim, rozdziale wszystkiego, co mogłoby Ci się przydać. Tak naprawdę to początkowo umieściliśmy tu wszystko, co powinieneś wiedzieć o językach XHTML i CSS (i o czym nie pisaliśmy w poprzednich rozdziałach), jednak musieliśmy zmniejszyć czcionkę do wielkości 0,00004 punktu. Wszystko się zmieściło, ale nikt nie byłby tego w stanie przeczytać. Dlatego odrzuciliśmy większość z tych zagadnień i pozostawiliśmy tu jedynie dziesięć najważniejszych. Więcej informacji o selektorach Ramki Multimedia i Flash Narzędzia do tworzenia stron WWW Skrypty wykonywane w przeglądarce Skrypty wykonywane na serwerze Modyfikacje pod kątem mechanizmów wyszukiwawczych Więcej informacji na temat arkuszy stylów używanych do drukowania stron Strony przeznaczone dla urządzeń przenośnych Blogi Skorowidz 656 658 659 660 661 662 663 665 665 666 667 Spis treści 15 20 Rozdział 2. Dokładniejsze poznanie hipertekstu Poznajemy „HT” z nazwy języka HTML Tak, to właśnie ja. Nazywają mnie Hiper Tadek. Nie słuchasz mnie. Przyszłam tu spotkać się z HiperTEXTem. Czy ktoś powiedział „hipertekst”? A co to takiego? Ech…to jedynie podstawa całej WWW. W rozdziale 1. przyjrzeliśmy się nieco językowi HTML i przekonaliśmy się, że jest to język wykorzystujący znaczniki („ML” z nazwy HTML) do opisywania struktury stron WWW. Teraz zajmiemy się możliwościami związanymi z pozostałą częścią nazwy HTML-a — „HT” — czyli hipertekstem, który pozwoli nam uwolnić się z ograniczeń jednej strony i tworzyć połączenia z innymi stronami WWW. Jednocześnie poznamy nowy, bardzo potężny element — a — i dowiemy się, że bycie „względnym” jest całkiem fajne. A zatem zapnij pasy — właśnie zaczynamy poznawać hipertekst. to jest nowy rozdział 73 Poprawa strony salonu Head First Salon Head First — nowy i poprawiony Czy pamiętasz jeszcze stronę salonu Head First? Świetna strona, ale czy nie byłoby jeszcze lepiej, gdyby użytkownicy mogli przejrzeć listę serwowanych napojów? Co więcej, powinniśmy zamieścić informacje o sposobie dojazdu, tak by klienci mogli do nas trafić. Oto nowa i poprawiona strona. Dodaliśmy łącza do dwóch nowych stron — jednej z informacjami o napojach, a drugiej z opisem dojazdu. Ł ą c z e „ d r i n k i ” d a j e m o ż l iw o ś ć p r z e j ś c i a n a s t r o n ę p r e z e n t u j ą c ą p e ł n ą l i s t ę o f e r ow a n y c h n a p o j ów . Łącze z „opisem dojazdu” prowadzi na stronę zawierającą szczegółowy opis dojazdu. jakdojechac.html 74 Rozdział 2 Dokładniejsze poznanie hipertekstu Strona zawiera listę orzeźwiających i zdrowych napojów. Może się skusisz na jednego przed dalszą lekturą? Tworzenie nowej, poprawionej strony salonu Head First składa się z trzech etapów… Spróbujmy przerobić oryginalną stronę salonu Head First i umieścić na niej łącza do dwóch nowych stron. 1 2 3 Pierwszy etap jest łatwy, gdyż sami stworzyliśmy dla Ciebie pliki jakdojechac. html oraz drinki. html. Znajdziesz je w przykładach do książki, w witrynie ftp.helion.pl/przyklady/hfhtcs.zip. Gotowe CSS W ramach drugiego etapu zmodyfikujesz plik salon.html, dodając do niego łącza do plików jakdojechac.html oraz drinki.html. W końcu sprawdzisz strony, aby przekonać się, czy łącza działają zgodnie z oczekiwaniami. Kiedy skończysz, przyjrzymy się dokładniej, jak to wszystko działa. A teraz przewróć stronę i zaczynamy… jesteś tutaj! 75 drinki.html Jak wyglądają pliki źródłowe Tworzenie nowej strony salonu 1 Pobierz pliki źródłowe Pobierz pliki źródłowe przykładów z witryny ftp://ftp.helion.pl/przyklady/hfhtcs.zip. Kiedy już je pobierzesz i rozpakujesz, zajrzyj do katalogu rozdzial2salon; znajdziesz w nim pliki salon.html, drinki.html oraz jakdojechac.html (oraz kilka plików z obrazami). Oto strona salonu Head First w swojej obecnej postaci — bez łączy. Tutaj znajdziesz katalog salon z plikami źródłowymi. W tym katalogu znajdują się wszystkie pliki związane ze stronami salonu Head First. rozdzial2 salon html . . . /html salon.html html . . . /html drinki.html html . . . /html jakdojechac.html Dwa nowe pliki, które już za Ciebie utworzyliśmy. Nie zwlekaj — zajrzyj do nich; wiesz już wszystko, co będzie Ci potrzebne do zrozumienia ich zawartości. zielony. jpg niebieski. jpg drinki.gif Dodatkowo w katalogu znajdują się wszystkie obrazy, jakie będą nam potrzebne na nowej, poprawionej stronie salonu Head First. jasnoniebieski. jpg czerwony. jpg Wytęż umysł Strona salonu Head First powoli się rozrasta. Czy uważasz, że przechowywanie wszystkich plików w jednym katalogu jest dobrym pomysłem na zapewnienie właściwej organizacji witryny? Co byś zmodyfikował? 76 Rozdział 2 Dokładniejsze poznanie hipertekstu 2 Wprowadź modyfikacje w pliku salon.html Otwórz plik salon.html w swoim ulubionym edytorze. Dodaj do niego tekst oraz kod HTML, który na poniższym przykładzie został wyróżniony szarym tłem. Dalej — wpisz wyróżnione fragmenty; na następnej stronie sprawdzimy, jak to wszystko działa. W tych miejscach dodaliśmy kod HTML tworzący łącze ze stroną o naszych napojach. Tu musimy dodać fragment tekstu, który skieruje czytelnika na stronę z opisem dojazdu. Do nagłówka dodajmy tekst „nowym i poprawionym”. html head title Salon Head First /title /head body h1 Witamy w nowym i poprawionym salonie Head First /h1 img src=(cid:148)drinki.gif(cid:148) p Zaglądaj do nas każdego wieczoru, by rozkoszować się orzeźwiającymi a href=(cid:148)drinki.html(cid:148) drinkami /a , miłą rozmową lub jedną bądź dwoma partyjkami gry em Dance Dance Revolution /em . Zawsze zapewniamy bezprzewodowy dostęp do Internetu - ale pamiętaj! obowiązuje zasada PSWSW (przynieś sw(cid:243)j własny serwer WWW). /p h2 Jak do nas trafić /h2 p Znajdziesz nas w samym centrum Webowic. Zapraszamy! Jeśli potrzebujesz pomocy, aby nas znaleźć, to zajrzyj na stronę ze szczeg(cid:243)łowym a href=(cid:148)jakdojechac.html(cid:148) opisem dojazdu /a . /p /body /html Do tworzenia łączy używany jest element a ; już zaraz szczegółowo opiszemy, jak on działa… A tu umieściliśmy łącze do strony z opisem dojazdu; także w tym przypadku użyliśmy elementu a . 3 Zapisz plik salon.html i sprawdź, jak działa. Kiedy skończysz wprowadzanie modyfikacji zapisz plik salon.html i otwórz go w przeglądarce. Poniżej wymieniliśmy, co powinieneś sprawdzić… 1 2 3 Kliknij łącze „drinkami” — powinna się pojawić strona poświęcona naszym drinkom. Kliknij przycisk „Wstecz” w oknie przeglądarki, a ponownie zostanie wyświetlona główna strona salonu Head First. Kliknij łącze „opisem dojazdu” — powinna zostać wyświetlona strona z informacjami, jak nas znaleźć. jesteś tutaj! 77 Jak tworzyć łącza No dobrze. Zajrzałem na nową stronę salonu Head First, sprawdziłem łącza i wszystko świetnie działa. Niemniej jednak chciałbym mieć pewność, że rozumiem, jak działa ten nowy kod HTML. Co zrobiliśmy? 1 Przeanalizujmy dokładnie proces tworzenia łączy w języku HTML. W pierwszej kolejności tekst, który ma być łączem, należy umieścić w elemencie a w następujący sposób: a drinkami /a a opisem dojazdu /a Do tworzenia łącza do innej strony potrzebny jest element a . Zawartość elementu a służy jako etykieta łącza. W przeglądarce etykieta ta jest wyróżniana podkreśleniem, co informuje użytkownika o tym, iż można ją kliknąć. 2 Po utworzeniu etykiet dla obu łączy musimy dodać do strony kod HTML, który poinformuje przeglądarkę o ich stronach docelowych: W przypadku tego łącza przeglądarka wyświetli etykietę „drinkami”, której kliknięcie spowoduje wyświetlenie strony drinki.html. Z kolei w przypadku tego łącza przeglądarka wyświetli etykietę „opisem dojazdu”, której kliknięcie spowoduje wyświetlenie strony jakdojechac.html. a href=(cid:148)drinki.html(cid:148) drinkami /a To właśnie przy użyciu atrybutu href określana jest strona docelowa. a href=(cid:148)jakdojechac.html(cid:148) opisem dojazdu /a 78 Rozdział 2 Dokładniejsze poznanie hipertekstu Co robi przeglądarka? 1 Przede wszystkim jeśli podczas wyświetlania strony przeglądarka napotka element a , wyświetli jego zawartość jako etykietę, którą użytkownik będzie mógł kliknąć. a href=(cid:148)drinki.html(cid:148) drinkami /a Słowa „drinkami” i „opisem dojazdu” są umieszczone pomiędzy znacznikami elementu a , a zatem zostaną przez przeglądarkę wyświetlone jako etykiety, które użytkownik może kliknąć. a href=(cid:148)jakdojechac.html(cid:148) opisem dojazdu /a Użyj elementu a , aby utworzyć hipertekstowe łącze do innej strony WWW. Zawartość elementu zostanie wyświetlona na stronie, a użytkownik będzie mógł ją kliknąć i przejść do strony docelowej. Strona docelowa łącza jest określana przy użyciu atrybutu href. jesteś tutaj! 79 Jak działają łącza 2 Później, kiedy użytkownik kliknie łącze, przeglądarka określi jego stronę docelową na podstawie wartości atrybutu „href”. Użytkownik klika łącze „drinkami” lub… … łącze „opisem dojazdu”. Kiedy użytkownik kliknie łącze „opisem dojazdu”, przeglądarka pobiera wartość jego atrybutu href, którą w tym przypadku jest jakdojechac.html… a href=(cid:148)drinki.html(cid:148) drinkami /a Jeśli użytkownik kliknął łącze „drinkami”, to przeglądarka pobierze wartość jego atrybutu href, którą jest drinki.html… … i ładuje stronę drinki.html. a href=(cid:148)jakdojechac.html(cid:148) opisem dojazdu /a … i ładuje stronę jakdojechac.html. 80 Rozdział 2 Dokładniejsze poznanie hipertekstu Atrybuty Atrybuty pozwalają na podawanie dodatkowych informacji o elementach. Choć jeszcze nie opisaliśmy ich dokładnie, to jednak miałeś już okazję poznać kilka z nich: style type=(cid:148)text/css(cid:148) a href=(cid:148)irule.html(cid:148) img src=(cid:148)sweetphoto.gif(cid:148) Atrybut type określa używany język arkuszy stylów, w tym przypadku jest to CSS. Atrybut href wskazuje stronę docelową łącza. Atrybut src określa nazwę pliku, który ma zostać wyświetlony przez znacznik img. Przeanalizujmy hipotetyczny przykład, który jeszcze lepiej uzmysłowi Ci, jak działają atrybuty: A co by było, gdyby istniał element samoch(cid:243)d : Otóż, gdyby istniał element samoch(cid:243)d , to na pewno chciałbyś napisać następujący fragment kodu: samoch(cid:243)d M(cid:243)j mały mini /samoch(cid:243)d W przypadku braku atrybutów jedyną informacją, jaką możemy podać, jest opisowa nazwa samochodu. Jednak znacznik samoch(cid:243)d w takiej postaci daje nam jedynie możliwość określenia opisowej nazwy samochodu — nie zawiera natomiast żadnych informacji na temat marki, modelu, także tego, czy auto jest kabrioletem, ani setek innych szczegółowych informacji, które mogą nas interesować. Gdyby więc faktycznie istniał element samoch(cid:243)d , to moglibyśmy zastosować następujące przykładowe atrybuty: Jednak dzięki zastosowaniu atrybutów możemy dostosować element i umieścić w nim wiele różnych informacji. samoch(cid:243)d marka=(cid:148)BMW(cid:148) model=(cid:148)Mini Cooper(cid:148) kabriolet=(cid:148)Nie(cid:148) M(cid:243)j mały mini /samoch(cid:243)d To wygląda znacznie lepiej, nieprawdaż? Powyższy kod przekazuje nam znacznie więcej informacji zapisanych w wygodnej i przejrzystej postaci. Pisz tak (postać poprawna) a href=(cid:148)top10.html(cid:148) Najlepsze filmy /a znak równości cudzysłów wartość atrybutu nazwa atrybutu cudzysłów Atrybuty są zawsze zapisywane w taki sam sposób: w pierwszej kolejności podaje się nazwę atrybutu, następnie znak równości, a następnie wartość atrybutu zapisaną pomiędzy znakami cudzysłowu. Czasami można się spotkać z dokumentami HTML, w których cudzysłowy wokół wartości atrybutów są pomijane, jednak warto zdobyć się na tę odrobinę wysiłku i je zapisywać. Okazuje się bowiem, że takie niemądre lenistwo może Ci potem przysporzyć wielu problemów (o czym przekonasz się w dalszej części książki). A nie tak (postać błędna) a href=top10.html Najlepsze filmy /a BŁĄD — wartość atrybutu nie została zapisana pomiędzy znakami cudzysłowu. jesteś tutaj! 81 Atrybuty i elementy Atrybut href wymawiany jako „ha-ref”… … rymuje się z „marchew”. 82 Rozdział 2 Nie ma niemądrych pytań P. Czy mogę sam tworzyć nowe atrybuty dla istniejących elementów HTML? O. Nie, gdyż przeglądarki WWW rozpoznają jedynie predefiniowany zbiór atrybutów dla poszczególnych elementów HTML. Gdybyś sam wymyślił jakiś atrybut, to przeglądarka i tak nie wiedziałaby, co należy z nim zrobić; co więcej, jak się wkrótce przekonasz, takie postępowanie bardzo łatwo może wpędzić Cię w tarapaty. Kiedy przeglądarka jest w stanie rozpoznać element lub atrybut, to mówimy, iż jest on „obsługiwany” bądź też, że przeglądarka go „obsługuje”. Powinieneś używać wyłącznie obsługiwanych elementów i atrybutów. P. A kto decyduje, jakie atrybuty są „obsługiwane”? O. Istnieją komisje zajmujące się standardami i to one określają elementy i atrybuty HTML. Komisje te składają się z osób, które nie mają nic lepszego do roboty które wspaniałomyślnie ofiarowują swój czas i wysiłek, by zadbać o istnienie jednej „mapy drogowej” języka HTML, implementowanej później we wszystkich przeglądarkach. P. Skąd mogę dowiedzieć się, jakie elementy i atrybuty są obsługiwane? Ewentualnie, czy wszystkie atrybuty można stosować we wszystkich elementach? O. W każdym elemencie można używać jedynie określonego zbioru atrybutów. Wyobraź to sobie w następujący sposób: czy użyłbyś atrybutu „kabriolet” w elemencie toster ? Zapewne nie! A zatem będziesz chciał używać jedynie atrybutów, które mają sens w kontekście konkretnego elementu i które są obsługiwane. Podczas dalszej lektury niniejszej książki oraz omawiania kolejnych zagadnień będziesz się uczyć, jakie atrybuty są obsługiwane przez poszczególne elementy. Natomiast kiedy już zakończysz lekturę, będziesz mógł sobie odświeżyć pamięć, korzystając z wielu doskonałych publikacji, takich jak książka HTML i XHTML. Przewodnik encyklopedyczny (wydana przez Wydawnictwo Helion). Dokładniejsze poznanie hipertekstu W tym tygodniu: Wyznania atrybutu href HeadFirst: Witamy, href. Bez wątpienia to wielka przyjemność prowadzić wywiad z tak znaczącym atrybutem jak ty. href: Dziękuję. Dobrze być tu i choć na chwilę oderwać się od tego całego łączenia. Ono naprawdę może doprowadzić atrybut na skraj wyczerpania. Zgadnij, kto mówi przeglądarce, co ma zrobić za każdym razem, gdy ktoś kliknie łącze. To właśnie ja. HeadFirst: Jesteśmy wdzięczni, że znalazłeś dla nas trochę czasu w swoim niezwykle napiętym terminarzu. Ale dlaczego nie zaczniesz opowiadać od samego początku? Jak to jest być atrybutem? href: No tak. Jasne. Otóż atrybuty służą do dostosowywania działania elementów. Nie ma nic trudnego w umieszczeniu fragmentu zawartości strony, na przykład „Zapisz się natychmiast!”, pomiędzy znacznikami elementu, choćby takiego jak a . Wystarczy zapisać coś takiego a Zapisz się natychmiast! /a . Jednak beze mnie, atrybutu href, nie masz żadnej możliwości przekazania elementowi a informacji o stronie docelowej. HeadFirst: Jak na razie wszystko jasne… href: …jednak dzięki atrybutom można określać dodatkowe informacje dotyczące elementów. W moim przypadku informacja ta dotyczy adresu strony docelowej: a href=(cid:148)rejestracja.html(cid:148) Zapisz się natychmiast! /a . Ten kod oznacza, że element a o etykiecie „Zapisz się natychmiast!” jest połączony ze stroną rejestracja. html. Oczywiście istnieje bardzo wiele innych atrybutów, jednak ja jestem używany w elementach a w celu określenia strony docelowej łącza. HeadFirst: Świetnie. Teraz muszę zadać to pytanie i mam tylko nadzieję, że nie poczujesz się urażony; ale co w zasadzie oznacza twoja nazwa? href? Co to w ogóle jest? href: To jedna z najstarszych nazw w Internecie. Oznacza ona „odwołanie hipertekstowe” (ang. hypertext reference). Jednak znajomi używają skróconej nazwy — href. HeadFirst: Czyli? href: Odwołanie hipertekstowe to po prostu inne określenie zasobu znajdującego się na lokalnym komputerze lub gdzieś w Internecie. Zazwyczaj zasobem tym jest strona WWW, jednak nic nie stoi na przeszkodzie by był to klip dźwiękowy, wideo lub cokolwiek innego. HeadFirst: To bardzo ciekawe. Nasi czytelnicy widzieli do tej pory jedynie łącza wskazujące na inne stworzone przez nich strony; w jaki sposób tworzy się łącza do innych stron lub plików znajdujących się na WWW? href: Ech… chyba muszę już wracać do roboty — Sieć jest taka bezsensowna beze mnie. Poza tym uczenie czytelników HTML-a to chyba wasze zadanie, nieprawdaż? HeadFirst: Już dobrze, dobrze. Tak, zajmiemy się tym zaraz. Dziękujemy, że nas odwiedziłeś, href. jesteś tutaj! 83 Tworzenie łącza do strony głównej Wcześniej utworzyłeś łącza ze strony salon.html do stron drinki.html oraz jakdojechac.html. Teraz stworzysz łącza prowadzące w odwrotnym kierunku. Poniżej przedstawiony został kod HTML strony drinki.html. Na dole tej strony dodaj łącze o etykiecie „Powrót na stronę salonu”, które będzie prowadzić na stronę salon.html. Ćwiczenia html head title Firmowe napoje salonu Head First /title /head body h1 Nasze napoje firmowe /h1 h2 Zielona herbata orzeźwiająca /h2 p img src=(cid:148)zielony.jpg(cid:148) Szklanica pełna witamin i minerał(cid:243)w. Ten nap(cid:243)j to źr(cid:243)dło zdrowia, jakie zapewnia zielona herbata oraz mieszanka płatk(cid:243)w rumianku i korzenia imbiru. /p h2 Koncentracja malinowej ochłody /h2 p img src=(cid:148)jasnoniebieski.jpg(cid:148) Ten orzeźwiający nap(cid:243)j, stanowiący połączenie soku malinowego z trawą cytrynową, sk(cid:243)rką cytrynową oraz owocami głogu, sprawi, że Tw(cid:243)j umysł stanie się bystry i chłonny. /p h2 Niebiańska bor(cid:243)wka /h2 p img src=(cid:148)niebieski.jpg(cid:148) Wstrząśnięta esencja jag(cid:243)d i wiśni, zmieszana z herbatą z czarnego bzu błyskawicznie, sprawi, że poczujesz błogą rozkosz. /p h2 Eksplozja żurawinowego antyutleniacza /h2 p img src=(cid:148)czerwony.jpg(cid:148) Otrzeźwiej, wdychając aromaty żurawin i hibiskusa zawarte w lekkim napoju pełnym witaminy C. /p Tutaj powinieneś umieścić nowy fragment kodu. /body /html 84 Rozdział 2 Kiedy skończysz, podobnie zmodyfikuj plik jakdojechac.html. Dokładniejsze poznanie hipertekstu P L AC B U D OW Y P O C Z Ą T E K Potrzebujemy pomocy przy tworzeniu i analizie elementów a . Zważywszy na Twoją nową wiedzę dotyczącą tego elementu, mamy nadzieję, że będziesz nam w stanie pomóc. W każdym wierszu przedstawionej poniżej tabeli znajdziesz pewną kombinację etykiety, strony docelowej oraz elementu a . Uzupełnij je o wszelkie brakujące informacje. Pierwszy wiersz uzupełniliśmy sami. Etykieta Strona docelowa Kod HTML Gorący czy nie? goracy.html a href=(cid:148)goracy.html(cid:148) Gorący czy nie? /a Życiorys cv.html cukiereczek.html a href=(cid:148) (cid:148) Cukiereczek /a Oto ja w moim mini mini-cooper.html Zagrajmy a href=(cid:148)szczesciarz.html(cid:148) /a Nie ma niemądrych pytań P. Widziałem wiele stron, na których łącza miały postać graficzną, a nie tekstową. Czy także w takich przypadkach można zastosować element a ? O. Owszem, jeśli umieścisz element img pomiędzy znacznikami elementu a , to obraz stanie się łączem i będzie go można kliknąć, analogicznie jak dzieje się to w przypadku tekstu. O obrazkach będziemy pisali dopiero w dalszej części książki, jednak powinieneś wiedzieć, że z powodzeniem można ich używać jako łączy. P. Czy to oznacza, że wewnątrz elementu a można umieszczać dowolną zawartość, która w ten sposób stanie się łączem? Czy w elemencie a można umieścić na przykład akapit tekstu? O. Poczekaj. Nie tak szybko. Wewnątrz elementu a nie można umieszczać dowolnych innych elementów. Ogólnie rzecz biorąc, umieszcza się w nim wyłącznie tekst oraz obrazy (jak również dowolne ich kombinacje). Problem możliwości wzajemnego zagnieżdżania znaczników, czyli umieszczania jednych elementów wewnątrz innych, jest całkowicie odrębnym zagadnieniem. Ale nie przejmuj się, już wkrótce się nim zajmiemy. jesteś tutaj! 85 Zastosowanie katalogów do organizacji witryny Twoja praca nad witryną salonu Head First naprawdę się opłaciła. Dzięki tym kuszącym napojom i dokładnemu opisowi dojazdu do lokalu wiele osób zaczęło regularnie nas odwiedzać i zaglądać na naszą witrynę WWW. Teraz pojawiły się plany znacznego rozszerzenia zawartości naszej witryny. Organizowanie zawartości witryny Zanim zaczniesz tworzyć kolejne strony WWW, zadbaj o ich odpowiednie zorganizowanie. Do tej pory umieszczaliśmy wszystkie nasze pliki, zarówno strony, jak i obrazy, w jednym katalogu. Bardzo szybko sam dojdziesz do wniosku, iż nawet w przypadku witryny WWW średniej wielkości, rozmieszczenie plików HTML, obrazów oraz wszelkich innych zasobów w kilku odrębnych katalogach znacznie ułatwia zarządzanie nimi. Oto, jak obecnie wygląda zawartość naszej witryny. Stworzyliśmy główny katalog o nazwie salon, w którym umieszczaliśmy wszystkie pliki wchodzące w skład witryny. salon Bardzo często taki katalog jest określany jak „główny katalog witryny”, co oznacza, że jest to najwyższy katalog w hierarchii, zawierający wszystkie zasoby wchodzące w skład witryny. Dysponujemy już trzema plikami HTML, odpowiadającymi odpowiednio: głównej stronie salonu, stronie z napojami oraz stronie z opisem dojazdu. html . . . /html salon.html html . . . /html drinki.html html . . . /html jakdojechac.html A to są wszystkie obrazy używane w naszych stronach. Jak widać, w naszym katalogu powoli zaczyna się robić bałagan, a mamy jedynie trzy dokumenty HTML i kilka obrazków. Zróbmy coś z tym problemem. drinki.gif zielony. jpg niebieski. jpg jasnoniebieski. jpg czerwony. jpg 86 Rozdział 2 Dokładniejsze poznanie hipertekstu Organizacja salonu… Spróbujmy zatem stworzyć jakiś sensowny sposób organizacji salonu Head First. Powinieneś przy tym pamiętać, że każdą witrynę można zorganizować na wiele różnych sposobów. Zaczniemy od prostego rozwiązania i stworzymy kilka katalogów dla stron WWW. Oprócz tego wszystkie obrazy umieścimy w jednym miejscu. Nasz katalog główny wciąż będzie nosił nazwę salon. W katalogu salon pozostawimy jedynie plik salon.html. salon html . . . /html salon.html onas html . . . /html jakdojechac.html napoje html . . . /html drinki.html obrazy Stwórzmy nowy katalog, w którym będą przechowywane strony dotyczące salonu, takie jak plan dojazdu. W przyszłości będziemy mogli umieścić w nim inne strony, dotyczące na przykład kierownictwa salonu, planowanych imprez itp. Stworzymy także odrębny katalog przeznaczony do przechowywania stron o napojach serwowanych w salonie. Jak na razie umieścimy w nim tylko stronę zawierającą listę dostępnych napojów, jednak już wkrótce pojawią się kolejne. Oprócz tego w odrębnym katalogu umieścimy wszystkie obrazy. zielony. jpg niebieski. jpg drinki.gif czerwony. jpg jasnoniebieski. jpg P. Skoro tworzyliśmy jeden katalog przeznaczony do przechowywania obrazów, to dlaczego nie można by stworzyć katalogu o nazwie „html”, w którym byłyby umieszczane dokumenty HTML? O. Oczywiście można by. Nie ma żadnych „jedynie słusznych” sposobów określania organizacji witryn WWW. Zazwyczaj będziesz się starał stosować taki sposób organizacji, który najbardziej odpowiada Tobie oraz Twoim użytkownikom. Podobnie jak w przypadku wszelkich innych decyzji projektowych będziesz się zapewne starał zastosować schemat organizacji, który jest prosty, a jednocześnie na tyle elastyczny, by pozwolić na rozbudowę witryny. Nie ma niemądrych pytań P. A może by tak umieścić katalog służący do przechowywania obrazów we wszystkich pozostałych katalogach, takich jak napoje lub onas? O. Także w tym przypadku można by tak zrobić. Można się jednak spodziewać, że niektóre spośród obrazów będą używane na kilku stronach i dlatego umieściliśmy je wszystkie w jednym katalogu. Jeśli jednak tworzysz witrynę, w której do poszczególnych części przypisanych jest wiele obrazów, to możesz zdecydować się na stworzenie katalogu na obrazy w każdej z „gałęzi”. P. „W każdej z gałęzi”? O. Sposób organizacji katalogów można najprościej zrozumieć, wyobrażając je sobie jako drzewo odwrócone korzeniem do góry. Na samej górze znajduje się katalog główny, a każda ścieżka prowadząca w dół, do pliku lub katalogu, stanowi „gałąź”. jesteś tutaj! 87 Reorganizacja i zerwane łącza Ćwiczenia Twoim aktualnym zadaniem jest stworzenie struktury plików i katalogów przedstawionej na poprzedniej stronie. Poniżej dokładnie opisaliśmy, co musisz zrobić: 1 2 3 4 5 Odszukaj katalog salon i utwórz w nim nowe podkatalogi o nazwach onas, napoje oraz obrazy. Przenieś plik jakdojechac.html do katalogu onas. Przenieś plik drinki.html do katalogu napoje. Przenieś wszystkie pliki obrazów do katalogu obrazy. W końcu wyświetl w przeglądarce stronę salon.html i sprawdź, czy działają umieszczone na niej łącza. Porównaj bieżące wyniki z tymi uzyskanymi wcześniej. Problemy techniczne Wygląda na to, że po przeniesieniu stron do podkatalogów pojawiły się nowe problemy techniczne. Jak się okazuje, obecnie na stronie nie wyświetla się jeden z umieszczonych na niej obrazów. Jest to przykład tak zwanego „zerwanego łącza”. Co więcej, okazuje się, że znacznie gorsze rzeczy dzieją się, gdy klikniesz łącze do strony napojów firmowych (lub opisu dojazdu) — na ekranie pokazuje się okno dialogowe informujące, że nie można znaleźć strony. Niektóre przeglądarki wyświetlają ten komunikat w postaci strony WWW, a nie okna dialogowego. 88 Rozdział 2 Dokładniejsze poznanie hipertekstu Jak sądzę problem polega na tym, iż przeglądarka uważa, że wszystkie pliki wciąż znajdują się w tym samym katalogu co strona salon.html. Musimy zatem zmienić łącza, by wskazywały na pliki przeniesione do nowych katalogów. Bardzo słusznie. Musimy poinformować przeglądarkę o nowym położeniu plików. Do tej pory wartości podane w atrybutach href wskazywały na strony znajdujące się w tym samym katalogu. Jednak zazwyczaj witryny są nieco bardziej złożone, więc musi istnieć możliwość odwoływania się do stron umieszczonych w innych katalogach. W tym celu należy określić ścieżkę prowadzącą z danej strony do strony docelowej. Może to oznaczać konieczność przejścia jeden lub dwa poziomy niżej w hierarchii katalogów bądź wyjścia na któryś z wyższych poziomów. W obu tych przypadkach możemy się posłużyć ścieżką względną, którą podamy jako wartość atrybutu href. jesteś tutaj! 89 Stosowanie ścieżek Planowanie ścieżek… Zastanów się, co robisz, gdy planujesz wakacje w rodzinnym wozie kempingowym? Bierzesz mapę, znajdujesz swoje bieżące położenie, a następnie zaznaczasz trasę do miejsca docelowego. Opis trasy oraz instrukcje, jak należy jechać, są zatem określane względem bieżącego położenia. Czyli gdybyś przebywał w innym mieście, instrukcje te wyglądałyby zupełnie inaczej, nieprawdaż? Określając względną ścieżkę na potrzeby tworzonych łączy, powinieneś postępować dokładnie w taki sam sposób: zacząć od strony, na jakiej chcesz umieścić łącze, a następnie przejść przez wszystkie katalogi znajdujące się na drodze do strony docelowej. Przeanalizujemy teraz kilka ścieżek względnych (a jednocześnie poprawimy łącza umieszczone na stronie salonu Head First): No dobra, tak naprawdę to pewnie zajrzałbyś do serwisu Google Maps, ale tym razem możesz nam chyba pójść na rękę. Istnieją także inne rodzaje ścieżek. Przedstawimy je w następnych rozdziałach. Łącza do zasobów znajdujących się w katalogach podrzędnych 1 Określanie łącza ze strony salon.html do drinki.html. Musimy poprawić łącze prowadzące ze strony salon.html na stronę drinki.html. Oto, jak aktualnie wygląda element a umieszczony w kodzie strony: a href=(cid:148)drinki.html(cid:148) drinkami /a Aktualnie używamy jedynie nazwy pliku drinki.html, co informuje przeglądarkę, iż strony docelowej należy szukać w tym samym katalogu, w którym znajduje się bieżąca strona salon.html. 2 Określenie strony początkowej oraz docelowej. Podczas reorganizacji stron salonu Head First stronę salon.html pozostawiliśmy w katalogu głównym — salon — natomiast stronę drinki.html przenieśliśmy do podkatalogu o nazwie napoje. Zacznij stąd… salon html . . . /html salon.html onas html . . . /html napoje html . . . /html obrazy jakdojechac.html drinki.html zielony. jpg niebieski. jpg drinki.gif …i określ ścieżkę do tego pliku. czerwony. jpg jasnoniebieski. jpg 90 Rozdział 2 Dokładniejsze poznanie hipertekstu 3 Wyznacz ścieżkę ze strony początkowej do strony docelowej. A teraz wyznaczmy ścieżkę. Aby dotrzeć ze strony salon.html do strony drinki.html, musimy w pierwszej kolejności wejść do katalogu napoje, a następnie odszukać w nim plik drinki.html. W pierwszej kolejności musimy wejść do katalogu podrzędnego napoje. salon html . . . /html salon.html onas html . . . /html napoje html . . . /html obrazy jakdojechac.html drinki.html To właśnie w tym katalogu znajduje się plik drinki.html. zielony. jpg niebieski. jpg drinki.gif czerwony. jpg jasnoniebieski. jpg 4 Utwórz atrybut href, w którym podasz wyznaczoną ścieżkę. Kiedy już określiliśmy ścieżkę, musimy ją zapisać w postaci zrozumiałej dla przeglądarki. Sposób zapisu tej ścieżki przedstawia się następująco: W pierwszej kolejności przechodzimy do katalogu napoje. Wszystkie fragmenty ścieżki oddzielamy od siebie znakiem ukośnika (/). I w końcu podajemy nazwę pliku docelowego. napoje / drinki.html Łącząc to wszystko w jedną całość, otrzymujemy… a href=(cid:148)napoje/drinki.html(cid:148) drinkami /a Wyznaczoną ścieżkę względną zapisaliśmy jako wartość atrybutu href. Gdy klikniemy teraz łącze, przeglądarka spróbuje znaleźć plik drinki.html, który powinien się znajdować w katalogu napoje. jesteś tutaj! 91 Trochę praktyki w określaniu ścieżek Zaostrz ołówek Teraz Twoja kolej: określ względną ścieżkę od pliku salon.html do pliku jakdojechac.html. Kiedy już to zrobisz, uzupełnij podany poniżej element a . Sprawdź poprawność swoich odpowiedzi, porównując je z odpowiedziami podanymi na końcu rozdziału, a następnie zmodyfikuj oba elementy a umieszczone w pliku salon.html. salon html . . . /html salon.html onas html . . . /html jakdojechac.html napoje html . . . /html drinki.html obrazy zielony. jpg niebieski. jpg drinki.gif czerwony. jpg jasnoniebieski. jpg a href=(cid:148) (cid:148) opisem dojazdu /a TU WPISZ SWOJĄ ODPOWIEDŹ 92 Rozdział 2 Podróż w przeciwnym kierunku — łącze do katalogu nadrzędnego Dokładniejsze poznanie hipertekstu Tworzenie łącza ze strony jakdojechac.html do strony salon.html. Pozostaje nam poprawić łącza „Powrót na stronę salonu”. Oto aktualna postać elementu a znajdującego się w kodzie strony jakdojechac.html: a href=(cid:148)salon.html(cid:148) Powr(cid:243)t na stronę salonu /a Aktualnie używamy jedynie nazwy strony salon.html, co sprawia, że przeglądarka poszukuje strony docelowej w tym samym katalogu, w którym znajduje się plik jakdojechac.html. Takie łącze nie może zatem działać poprawnie. 1 2 3 salon Określ stronę początkową oraz docelową. Przyjrzyj się położeniu strony początkowej i docelowej. W tym przypadku stroną początkową jest plik jakdojechac.html umieszczony w katalogu onas. Z kolei stroną docelową jest plik salon.html umieszczony w katalogu salon, czyli nadrzędnym względem katalogu, w jakim j
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Head First HTML with CSS & XHTML. Edycja polska (Rusz głową!)
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


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