HTML, XHTML i CSS. Biblia

Wydawnictwo Helion

ul. Chopina 6

44-100 Gliwice

tel. (32)230-98-63

e-mail: [email protected]

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIA

FRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TRE�CISPIS TRE�CI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

HTML, XHTML i CSS. BibliaAutorzy: Bryan Pfaffenberger, Steven M. Schafer,

Chuck White, Bill Karow

T³umaczenie: Piotr Cie�lak (rozdz. 33 – 34, dod. A, B),

W³odzimierz Gajda (rozdz. 8, 10), Marcin Jagodziñski

(rozdz. 25, 29), Marek Pa³czyñski (rozdz. 6, 7, 9, 11 – 15),

Piotr Rajca (rozdz. 26 – 28), Marcin Samodulski (rozdz. 30 – 32),

Joanna Sugiero (wprowadzenie, rozdz. 1 – 5, 16 – 24)

ISBN: 83-7361-725-6

Tytu³ orygina³u: HTML, XHTML, and CSS Bible

Format: B5, stron: 816

Poznaj tajniki projektowania nowoczesnych stron WWW

• Napisz kod strony zgodny z najnowszymi standardami og³aszanymi przez W3C

• Wykorzystaj na stronach technologie skryptowe, Dynamiczny HTML

oraz mechanizmy jêzyka XML

• Zastosuj nowoczesne narzêdzia do tworzenia i testowania witryny

Sieæ WWW, od swojego powstania do czasów obecnych, bardzo zmieni³a swoje oblicze.

Ilo�æ w³¹czonych w ni¹ komputerów powiêksza siê w ogromnym tempie. Zmieniaj¹ siê

mo¿liwo�ci przegl¹darek i sposoby przesy³ania informacji. Stale ewoluuje równie¿ jeden

z podstawowych „budulców” sieci WWW — jêzyk HTML. Jego mo¿liwo�ci musz¹ nad¹¿aæ

za coraz wiêkszymi oczekiwaniami u¿ytkowników sieci i funkcjami oferowanymi przez

urz¹dzenia wykorzystywane do jej przegl¹dania. Organizacja koordynuj¹ca jego rozwój —

konsorcjum W3C — co pewien czas og³asza nowy standard jêzyka. Ewolucja HTML-a

maj¹ca na celu uzyskanie mo¿liwo�ci wy�wietlania witryn WWW nie tylko

na monitorach komputerów, ale tak¿e na wy�wietlaczach telefonów komórkowych

i komputerów przeno�nych oraz edycji tre�ci strony niezale¿nie od jej wygl¹du poci¹gnê³a

za sob¹ powstanie standardu CSS. CSS (Kaskadowe Arkusze Stylów) to technologia

umo¿liwiaj¹ca dowolne formatowanie stron WWW oraz szybkie modyfikacje ich

kolorystyki i uk³adu elementów.

Ksi¹¿ka „HTML, XHTML i CSS. Biblia” to dog³êbny opis najnowszych standardów

zwi¹zanych z tworzeniem stron WWW — obowi¹zuj¹cej obecnie specyfikacji jêzyka HTML,

technologii CSS oraz najnowszego produktu W3C — jêzyka XHTML. Przedstawia

nowoczesne metodologie tworzenia i testowania witryn WWW oraz ich aktualizowania

i modyfikowania. Wprowadza tak¿e w tematykê technologii skryptowych oraz jêzyka XML.

Je�li chcesz zaistnieæ w internecie — stwórz w³asn¹ witrynê WWW. Dziêki wiadomo�ciom

zawartym w tej ksi¹¿ce nie bêdzie to stanowi³o dla Ciebie problemu.

http://helion.pl/view/2547w



http://helion.pl/add/2547w/hxcsbi




mailto:[email protected]

http://helion.pl/view/2547w/hxcsbi.htm

http://www.amazon.com/exec/obidos/ASIN/0764557394/eboinf-20

��

��

��

�� !" ��

Czym jest World Wide Web? ..............................................................................................................31Jak działa sieć WWW?........................................................................................................................32Czym jest hipertekst?...........................................................................................................................33Gdzie mieści się HTML?.....................................................................................................................33

Wynalezienie HTML-a..................................................................................................................33Krótka historia języka HTML .......................................................................................................35Kto zatem ustanawia reguły?.........................................................................................................37

Czym jest CSS? ...................................................................................................................................39Koszmar utrzymania......................................................................................................................39Wstęp do CSS ...............................................................................................................................42Co oznacza słowo „kaskadowe”? .................................................................................................. 42

Czym jest XHTML? ............................................................................................................................43Tworzenie dokumentu HTML.............................................................................................................44

Pisanie w języku HTML................................................................................................................44Nadawanie plikom rozszerzenia kojarzącego się z siecią WWW..................................................44Formatowanie tekstu .....................................................................................................................45Nadawanie dokumentowi struktury...............................................................................................45

Czy nie potrzebuję serwera WWW?....................................................................................................46Podsumowanie.....................................................................................................................................46

��#��$��%��&'

Definiowanie typu dokumentu ............................................................................................................48Ogólna struktura — znaczniki HTML, Head oraz Body .....................................................................48

Znacznik <html> ...........................................................................................................................48Znacznik <head>...........................................................................................................................48

Style.....................................................................................................................................................50Elementy blokowe — znaczniki dla akapitów.....................................................................................52

Sformatowane akapity...................................................................................................................52Nagłówki .......................................................................................................................................53Wydzielony blok tekstu.................................................................................................................54Listy ..............................................................................................................................................55Zachowanie pierwotnego formatowania tekstu .............................................................................57Grupowanie elementów.................................................................................................................57

� � !"(�)� !"��*++��,�-.��

Elementy wstawiane — znaczniki formatujące znaki..........................................................................58Podstawowe znaczniki wstawiane................................................................................................. 58Elementy span ...............................................................................................................................59

Znaki specjalne (encje) ........................................................................................................................59Elementy organizacyjne.......................................................................................................................60

Tabele............................................................................................................................................61Formularze ....................................................................................................................................62

Łącza do innych stron..........................................................................................................................64Obrazy .................................................................................................................................................65Komentarze..........................................................................................................................................66Skrypty ................................................................................................................................................66Wszystko razem...................................................................................................................................67Podsumowanie.....................................................................................................................................68

�� /��01

Podstawowe zasady dotyczące kodu HTML .......................................................................................69Używanie swobodnych białych znaków........................................................................................70Używanie poprawnej formy języka HTML...................................................................................70Wstawianie w kodzie komentarzy ................................................................................................. 71

Tworzenie podstawowej struktury.......................................................................................................72Deklarowanie typu dokumentu............................................................................................................72Definiowanie tytułu dokumentu ..........................................................................................................73Dostarczanie informacji wyszukiwarkom............................................................................................73Definiowanie domyślnej ścieżki ..........................................................................................................74Definiowanie automatycznego odświeżania i przekierowania.............................................................75Kolor tła strony i obrazy w tle .............................................................................................................76

Definiowanie koloru tła.................................................................................................................76Definiowanie obrazu w tle dokumentu..........................................................................................77

Podsumowanie.....................................................................................................................................78

�� !�� "�

��&��(��2�

Podziały wierszy..................................................................................................................................81Akapity..........................................................................................................................................83Ręczne wstawianie podziałów wierszy .........................................................................................85

Twarde spacje......................................................................................................................................87Łączniki opcjonalne.............................................................................................................................87Zachowanie formatowania — element <pre>......................................................................................88Wcięcia................................................................................................................................................90Nagłówki .............................................................................................................................................92Linie poziome......................................................................................................................................93Grupowanie za pomocą elementu <div> .............................................................................................94Podsumowanie.....................................................................................................................................97

��"�� 11

Omówienie list.....................................................................................................................................99Listy uporządkowane (numerowane).................................................................................................100Listy nieuporządkowane (punktowane) .............................................................................................105Listy definicji ....................................................................................................................................108Listy zagnieżdżone ............................................................................................................................110Podsumowanie...................................................................................................................................111

+��3� �

��0��

Formaty graficzne stosowane w dokumentach WWW......................................................................113Kompresja obrazu .......................................................................................................................114Opcje kompresji ..........................................................................................................................114Głębia kolorów............................................................................................................................116Zwiększanie szybkości pobierania stron .....................................................................................117

Przygotowanie plików graficznych....................................................................................................118Najważniejsze funkcje.................................................................................................................119Darmowe oprogramowanie alternatywne....................................................................................120Progresywne obrazy JPEG i rysunki GIF z przeplotem ..............................................................120

Wstawianie rysunków........................................................................................................................122Rozmieszczanie rysunków.................................................................................................................123Opis wyświetlany w przeglądarkach tekstowych ..............................................................................125Wymiary i skalowanie rysunków ......................................................................................................126Obramowanie rysunków....................................................................................................................128Mapy obrazu......................................................................................................................................128

Definiowanie mapy obrazu .........................................................................................................130Definiowanie obszarów aktywnych.............................................................................................130Połączenie poszczególnych rozwiązań ........................................................................................132

Animacje ...........................................................................................................................................133Podsumowanie...................................................................................................................................134

��'��4/��

Czym są łącza? ..................................................................................................................................136Łącza do stron WWW .......................................................................................................................137Łącza względne i bezwzględne..........................................................................................................138Docelowe okna łączy.........................................................................................................................140Tekst podpowiedzi łącza....................................................................................................................141Skróty klawiaturowe i kolejność uaktywniania łączy ........................................................................142

Skróty klawiaturowe....................................................................................................................142Kolejność uaktywniania łączy .....................................................................................................142

Tworzenie kotwic ..............................................................................................................................143Dobór kolorów łączy .........................................................................................................................144Parametry dokumentu docelowego....................................................................................................145Znacznik <link> ................................................................................................................................147Podsumowanie...................................................................................................................................147

��2�� &1

Metody formatowania tekstu .............................................................................................................149Znacznik <font> ..........................................................................................................................150Akcentowanie i inne znaczniki dotyczące tekstu.........................................................................150Formatowanie tekstu przy użyciu CSS........................................................................................151

Pogrubienie i kursywa .......................................................................................................................152Czcionka o stałej szerokości ..............................................................................................................153Indeksy — górny i dolny ...................................................................................................................153Skróty ................................................................................................................................................154Oznaczanie zmian w dokumencie — wstawianie i usuwanie tekstu..................................................154Grupowanie elementów tekstowych znacznikiem <span> ................................................................154Podsumowanie...................................................................................................................................155

�� !"(�)� !"��*++��,�-.��

��1��#��.�� '

Kodowanie znaków ...........................................................................................................................158Znaki specjalne..................................................................................................................................158Znaki spacji i myślników...................................................................................................................159Symbol praw autorskich i znaku towarowego ...................................................................................160Symbole walut ...................................................................................................................................161Rzeczywiste znaki cudzysłowu .........................................................................................................161Strzałki ..............................................................................................................................................162Znaki zawierające symbole akcentu ..................................................................................................162Litery alfabetu greckiego i symbole matematyczne...........................................................................165Inne użyteczne symbole.....................................................................................................................168Podsumowanie...................................................................................................................................170

��5�� -�.� ��'�

Części składowe tabeli HTML ..........................................................................................................171Szerokość i wyrównanie tabeli ..........................................................................................................173Odstępy i otaczanie komórek.............................................................................................................176Obramowanie i krawędzie .................................................................................................................177

Obramowanie tabeli ....................................................................................................................177Krawędzie tabeli..........................................................................................................................178

Wiersze..............................................................................................................................................179Komórki.............................................................................................................................................180Podpis tabeli ......................................................................................................................................181Grupowanie wierszy — nagłówek, treść i stopka tabeli ....................................................................183Kolor tła.............................................................................................................................................185Komórki rozciągające się na kilka wierszy lub kolumn ....................................................................186Grupowanie kolumn ..........................................................................................................................189Podsumowanie...................................................................................................................................190

��6��.�6��7��6�/��-�.��1�

Podstawy formatowania z wykorzystaniem tabel ..............................................................................191Przykłady stron dostępnych w internecie...........................................................................................194Strony pływające ...............................................................................................................................197Niestandardowe połączenie grafiki i tekstu .......................................................................................199Menu nawigacyjne i bloki dokumentów............................................................................................ 202Dokumenty wielokolumnowe............................................................................................................203Podsumowanie...................................................................................................................................204

��6�� 5�

Omówienie ramek..............................................................................................................................205Zbiory ramek i zawartość ramek .......................................................................................................208

Tworzenie zbioru ramek..............................................................................................................208Marginesy, obramowania i paski przewijania ramek...................................................................210Modyfikacja rozmiaru ramek ......................................................................................................211

Odsyłacze do ramek...........................................................................................................................213Zagnieżdżone zbiory ramek...............................................................................................................215Ramki pływające ...............................................................................................................................217Podsumowanie...................................................................................................................................220

+��3� ��

�� 8��6�.��

Podstawowe informacje o formularzach............................................................................................222Wstawianie formularzy......................................................................................................................224

Metoda GET................................................................................................................................225Metoda POST..............................................................................................................................225Dodatkowe atrybuty znacznika <form> ......................................................................................226

Etykiety pól .......................................................................................................................................226Pola tekstowe.....................................................................................................................................227Pola haseł...........................................................................................................................................227Przyciski opcji ...................................................................................................................................227Pola wyboru.......................................................................................................................................228Listy wyboru......................................................................................................................................229Obszary tekstowe...............................................................................................................................231Pola ukryte.........................................................................................................................................232Przyciski ............................................................................................................................................232Rysunki..............................................................................................................................................233Pola plików........................................................................................................................................233Przyciski przesyłania danych i czyszczenia pól................................................................................. 234Kolejność uaktywniania kontrolek i skróty klawiaturowe .................................................................235Uniemożliwienie wprowadzania zmian............................................................................................. 236Grupy pól i ich opis ...........................................................................................................................237Skrypty formularzy i usługi skryptowe..............................................................................................238

Pobranie programu obsługi formularza .......................................................................................239Wykorzystanie usług skryptowych..............................................................................................239

Podsumowanie...................................................................................................................................240

��&��-��6�.��6��.�� &�

Wykorzystanie obiektów multimedialnych .......................................................................................241Rodzaje obiektów multimedialnych ............................................................................................243Umieszczanie obiektów multimedialnych na stronie WWW ......................................................243

Multimedialne pluginy i odtwarzacze................................................................................................247Flash............................................................................................................................................247RealOne.......................................................................................................................................247Windows Media Player ...............................................................................................................248QuickTime...................................................................................................................................249

Animacje ...........................................................................................................................................249Tworzenie animowanych plików GIF .........................................................................................249Zachowanie niewielkich rozmiarów plików................................................................................252Tworzenie plików Flash ..............................................................................................................252

Wideoklipy ........................................................................................................................................253Pliki dźwiękowe ................................................................................................................................254Pokazy slajdów..................................................................................................................................255

Eksport prezentacji przygotowanej w programie PowerPoint .....................................................255Eksportowanie prezentacji przygotowanej w środowisku OpenOffice .......................................261

Język SMIL .......................................................................................................................................263Podsumowanie...................................................................................................................................267

�� !"(�)� !"��*++��,�-.��

��+�� 01

Skrypty serwerowe i skrypty klienckie..............................................................................................269Skrypty klienckie.........................................................................................................................269Skrypty serwerowe......................................................................................................................270

Określanie domyślnego języka skryptowego.....................................................................................270Dołączanie skryptów .........................................................................................................................271Wywoływanie zewnętrznych skryptów .............................................................................................272Wywoływanie skryptów za pomocą zdarzeń.....................................................................................272Ukrywanie skryptów przed starszymi przeglądarkami ......................................................................276Podsumowanie...................................................................................................................................276

��#�� $�� % � ��&��%��&'��(( �� ""

��0��.7� ��'1

Co to jest CSS?..................................................................................................................................279Reguły stylów....................................................................................................................................280Określanie reguł stylu........................................................................................................................281

Korzystanie z elementu <style> ..................................................................................................281Zewnętrzne arkusze stylów .........................................................................................................281Definicje stylów w poszczególnych znacznikach........................................................................282

Omówienie kaskadowych właściwości arkuszy stylów.....................................................................283Model formatowania obiektów w CSS.............................................................................................. 284

Rozmiary pojemnika ...................................................................................................................284Odstęp .........................................................................................................................................285Ramka .........................................................................................................................................286Marginesy....................................................................................................................................287

1., 2. i 3. poziom CSS........................................................................................................................287Podsumowanie...................................................................................................................................287

��'�� $��.7��21

Omówienie selektorów ......................................................................................................................289Dopasowywanie elementów według nazwy ................................................................................290Korzystanie z selektora uniwersalnego .......................................................................................290Dopasowywanie elementów według klasy ..................................................................................291Dopasowywanie elementów przy użyciu identyfikatora .............................................................291Dopasowywanie elementów, które zawierają określony atrybut .................................................291Korzystanie z elementów dzieci, potomków oraz elementów przystających ..............................292

Omówienie dziedziczenia..................................................................................................................294Pseudoklasy .......................................................................................................................................295

Definiowanie stylów łączy ..........................................................................................................295Pseudoklasa :first-child ...............................................................................................................296Pseudoklasa :lang ........................................................................................................................296

Pseudoelementy.................................................................................................................................297Stosowanie stylów dla pierwszego wiersza tekstu w elemencie..................................................297Stosowanie stylów dla pierwszej litery elementu ........................................................................298Definiowanie przed danym tekstem i po nim ..............................................................................299

Wyrażenia skrótowe ..........................................................................................................................300Metryki wartości właściwości ...........................................................................................................302Podsumowanie...................................................................................................................................304

+��3� ��

��2��*�� 5�

Podstawy typografii w sieci WWW...................................................................................................305Zła metoda opisywania czcionek................................................................................................. 306Dobra metoda opisywania czcionek ............................................................................................308

Praca z atrybutami stylów czcionek...................................................................................................310Określanie rodzajów czcionek przy użyciu CSS .........................................................................310Omówienie zagadnienia rodziny czcionek ..................................................................................311Omówienie czcionek oraz ich dostępności..................................................................................312Praca ze stylami czcionek............................................................................................................312Określanie rozmiarów czcionek .................................................................................................. 313Używanie (lub brak użycia) wariantów czcionek........................................................................314Pogrubianie czcionek poprzez zmianę ich wagi ..........................................................................314Poszerzanie i zwężanie czcionek za pomocą właściwości font-stretch .......................................315Wysokość wiersza oraz odstępy między wierszami ....................................................................315

Automatyczne ładowanie czcionek....................................................................................................315Standardy oraz opcje dynamicznych czcionek ............................................................................316Licencjonowanie .........................................................................................................................316Używać wbudowanych czcionek czy raczej arkuszy stylów? .....................................................317Jak dodawać do strony WWW czcionki, które będzie można załadować?..................................317Składnia.......................................................................................................................................317

Podsumowanie...................................................................................................................................318

��1��8��6�� 1Wyrównywanie tekstu .......................................................................................................................319

Kontrolowanie wyrównania poziomego......................................................................................319Kontrolowanie wyrównania pionowego......................................................................................321

Tworzenie wcięcia w tekście .............................................................................................................324Kontrolowanie znaków niewidocznych w tekście .............................................................................324

Obiekty przestawne .....................................................................................................................325Właściwość white-space..............................................................................................................327

Kontrolowanie odstępów między literami i słowami.........................................................................327Definiowanie wielkich liter ...............................................................................................................329Dekorowanie tekstu ...........................................................................................................................330Formatowanie list ..............................................................................................................................331

Ogólne informacje na temat list...................................................................................................331CSS — każdy element pasuje......................................................................................................331Właściwość list-style-type...........................................................................................................332Pozycjonowanie markerów .........................................................................................................334Punktory rysunkowe....................................................................................................................335

Tekst generowany automatycznie......................................................................................................335Definiowanie znaków cudzysłowu..............................................................................................335Automatyczne numerowanie elementów.....................................................................................336

Podsumowanie...................................................................................................................................340

��5��6��(��6��$�� &�Omówienie modelu formatowania pojemnika ...................................................................................341Definiowanie marginesów elementu..................................................................................................343Dodawanie odstępu do elementu .......................................................................................................345Dodawanie ramki...............................................................................................................................345

Styl ramki ....................................................................................................................................345Kolor ramki .................................................................................................................................346Szerokość ramki ..........................................................................................................................347

�� !"(�)� !"��*++��,�-.��

Największy skrót: właściwość border .........................................................................................348Dodatkowe właściwości ramki.................................................................................................... 348

Wykorzystywanie dynamicznego obramowania................................................................................348Podsumowanie...................................................................................................................................349

��9�.�� Kolor pierwszoplanowy.....................................................................................................................351Kolor tła.............................................................................................................................................352Rozmiar tła elementu.........................................................................................................................354Obrazy w tle ......................................................................................................................................354Powtarzanie i przewijanie obrazów tła ..............................................................................................355Określanie pozycji obrazów tła..........................................................................................................358Podsumowanie...................................................................................................................................360

�� -�.� �� 0�Definiowanie stylów tabeli ................................................................................................................361Kontrolowanie atrybutów tabeli ........................................................................................................362

Ramki tabeli ................................................................................................................................362Odstępy w ramce tabeli ...............................................................................................................364Pojedyncze obramowanie............................................................................................................365Ramki wokół pustych komórek...................................................................................................365

Układ graficzny tabeli .......................................................................................................................366Wyrównywanie i pozycjonowanie podpisów ....................................................................................367Podsumowanie...................................................................................................................................368

�� :��.�6��7�� 01

Omówienie pozycjonowania elementów ...........................................................................................369Pozycjonowanie statyczne...........................................................................................................369Pozycjonowanie względne ..........................................................................................................370Pozycjonowanie bezwzględne..................................................................................................... 371Pozycjonowanie stałe ..................................................................................................................372

Określanie pozycji elementu..............................................................................................................372Elementy dryfujące do lewej lub prawej strony.................................................................................375Definiowanie szerokości i wysokości elementu ................................................................................376

Dokładne definiowanie rozmiarów..............................................................................................377Definiowanie rozmiaru maksymalnego oraz minimalnego .........................................................377Kontrolowanie przepełnienia elementu .......................................................................................378

Układanie elementów na stosie..........................................................................................................379Kontrolowanie widoczności elementu...............................................................................................383Podsumowanie...................................................................................................................................383

��&��;�<�� 2�

Model formatowania pojemnika strony .............................................................................................386Definiowanie rozmiaru strony ...........................................................................................................387

Definiowanie rozmiaru strony za pomocą właściwości size........................................................388Definiowanie marginesów za pomocą właściwości margin ........................................................388

Kontrolowanie podziałów stron.........................................................................................................389Właściwości page-break ....................................................................................................................390

Korzystanie z właściwości page-break-before oraz page-break-after..........................................390Właściwość page-break-inside ....................................................................................................394

Zarządzanie wdowami i sierotami .....................................................................................................395Przygotowanie dokumentu do drukowania dwustronnego ................................................................395Podsumowanie...................................................................................................................................396

+��3� ��

��)�*�� &+�� ,�"

��=�>�+�� 11

Podstawy języka JavaScript...............................................................................................................399Pisanie programów w JavaScripcie ...................................................................................................401

Typy danych i zmienne ...............................................................................................................401Obliczenia i operatory .................................................................................................................402Operacje na łańcuchach...............................................................................................................402Konstrukcje sterujące ..................................................................................................................403Funkcje........................................................................................................................................405Użycie obiektów..........................................................................................................................407

Obsługa zdarzeń w języku JavaScript................................................................................................408Stosowanie języka JavaScript w dokumentach HTML......................................................................408

Dodawanie skryptów za pomocą elementu script........................................................................408Uruchamianie programów w JavaScripcie ..................................................................................410

Praktyczne przykłady ........................................................................................................................411Identyfikacja przeglądarki i zgodność z przeglądarkami.............................................................411Data ostatniej modyfikacji...........................................................................................................413Aktywne przyciski.......................................................................................................................413Umieszczanie grafiki w pamięci podręcznej ...............................................................................415Weryfikacja formularzy...............................................................................................................416Określanie wielkości i położenia okna przeglądarki ...................................................................419Ramki ..........................................................................................................................................422Wykorzystanie cookies................................................................................................................422

Podsumowanie...................................................................................................................................424

��0��;��6�� !" ��&��

Czemu służy dynamiczny HTML? ....................................................................................................425Jak działa DHTML? ..........................................................................................................................426DHTML a obiektowy model dokumentu...........................................................................................426

Stosowanie procedur obsługi zdarzeń .........................................................................................427Chodzi o obiekty .........................................................................................................................428

Zagadnienia zgodności z różnymi przeglądarkami............................................................................428Wykrywanie używanej przeglądarki ...........................................................................................429Wykrywanie obiektów ................................................................................................................430

Przykłady rozwiązań DHTML...........................................................................................................431Wskaźnik położenia strony..........................................................................................................431Efekty podmieniania ...................................................................................................................436Rozwijane menu..........................................................................................................................441

Podsumowanie...................................................................................................................................443

��'��;��6�� !"��*++ ��&&�

DHTML i właściwości CSS ..............................................................................................................448Określanie właściwości CSS przy użyciu języka JavaScript.......................................................448Stosowanie zachowań w celu tworzenia efektów DHTML.........................................................451

Filtry Internet Explorera ....................................................................................................................452Filtry............................................................................................................................................453Elementy HTML pozwalające na stosowanie filtrów..................................................................453Filtry wizualne ............................................................................................................................454

Podsumowanie...................................................................................................................................462

� � !"(�)� !"��*++��,�-.��

��2��$��?��7�

�� &0�

Sposób działania serwerów WWW ...................................................................................................466Najpopularniejsze serwery WWW ....................................................................................................467

Apache ........................................................................................................................................468IIS................................................................................................................................................468

Zapotrzebowanie na skrypty działające po stronie serwera ...............................................................469Języki służące do tworzenia skryptów działających po stronie serwera ............................................470

CGI..............................................................................................................................................470ASP, .NET oraz technologie firmy Microsoft .............................................................................471PHP .............................................................................................................................................472ColdFusion ..................................................................................................................................474

Podsumowanie...................................................................................................................................474

��1��7�

��-�� &'�

Po co używać baz danych? ................................................................................................................475Jak działa integracja z bazą danych? .................................................................................................476Metody publikowania w oparciu o bazę danych................................................................................477

Generowanie jednorazowe ..........................................................................................................477Generowanie na żądanie..............................................................................................................477

Studium przypadku — magazyn informacyjny .................................................................................478Metoda „ręczna”..........................................................................................................................478Metoda z użyciem bazy danych................................................................................................... 479

Uwierzytelnianie i bezpieczeństwo....................................................................................................486Podsumowanie...................................................................................................................................488

�� 5��,.�$��&21

Pojęcie blogu .....................................................................................................................................489Oprogramowanie i serwisy wspomagające blogowanie ....................................................................491

Oprogramowanie firmy Userland................................................................................................491Oprogramowanie firmy Movable Type .......................................................................................491Blosxom ......................................................................................................................................492

Umieszczanie artykułów w blogu......................................................................................................492Obsługa komentarzy i opinii..............................................................................................................493Stałe łącza do artykułów....................................................................................................................493Łącza zwrotne....................................................................................................................................494Rozprowadzanie treści za pomocą RSS.............................................................................................495

Składnia RSS...............................................................................................................................495Publikowanie elementu RSS .......................................................................................................496

Przyciąganie czytelników ..................................................................................................................497Podsumowanie...................................................................................................................................498

�� )!"��&11

Zapotrzebowanie na XML.................................................................................................................500Związki pomiędzy XML, SGML i HTML ........................................................................................501Jak działa XML?................................................................................................................................502

Rozpocznij od parsera XML .......................................................................................................503Rozpocznij od prologu ................................................................................................................503O kodowaniu ...............................................................................................................................504Poprawna struktura dokumentu XML .........................................................................................505

+��3� �

Definicje typu dokumentu (DTD)......................................................................................................508Użycie elementów w definicji typu dokumentu ..........................................................................510Definiowanie atrybutów w DTD .................................................................................................512Definiowanie i użycie stałych tekstowych w definicji DTD .......................................................513Użycie danych typu PCDATA i CDATA w definicji typu .........................................................513

Schematy XML .................................................................................................................................513Użycie schematów.............................................................................................................................514XML w internecie..............................................................................................................................516Podsumowanie...................................................................................................................................516

�� :��6��7��)!"

��6�.�6��'

Przetwarzanie kodu XML..................................................................................................................517Język XPath.................................................................................................................................518Arkusze stylów kodu XML — XSLT .........................................................................................523

Implementacje XML..........................................................................................................................536XHTML ......................................................................................................................................536Usługi Web Services (SOAP, UDDI itd.) ...................................................................................538XUL ............................................................................................................................................538WML...........................................................................................................................................538

Podsumowanie...................................................................................................................................539

��)�� %!-$��

� �� '�� '�� ./0

�� <��6��7��&

Testowanie w różnych przeglądarkach..............................................................................................543Testowanie w różnych rozdzielczościach ekranu ..............................................................................544Weryfikacja kodu źródłowego...........................................................................................................544

Określanie poprawnego typu dokumentu ....................................................................................545Narzędzia do weryfikacji poprawności kodu ..............................................................................545Jak weryfikować dokumenty? ..................................................................................................... 545

Podsumowanie...................................................................................................................................547

�� &��:��$��6��&1

Edytory tekstowe ...............................................................................................................................550Proste edytory tekstowe...............................................................................................................550Inteligentne edytory tekstowe......................................................................................................550Edytory HTML............................................................................................................................551

Edytory HTML pracujące w trybie WYSIWYG ...............................................................................551FrontPage firmy Microsoft ..........................................................................................................552NetObjects Fusion.......................................................................................................................554Dreamweaver firmy Macromedia................................................................................................556

Inne narzędzia....................................................................................................................................557Programy graficzne .....................................................................................................................558Flash firmy Macromedia .............................................................................................................559

Podsumowanie...................................................................................................................................560

�� !"(�)� !"��*++��,�-.��

�� -7��$��0�

Dostawcy usług internetowych..........................................................................................................562Usługi WWW w ramach opłat za dostęp do internetu.................................................................562Hosting współdzielony ................................................................................................................562Hosting dedykowany...................................................................................................................563Kolokacja ....................................................................................................................................564

Oszacowanie kosztów........................................................................................................................564Usługi i pomoc techniczna.................................................................................................................564Przepustowość i skalowalność...........................................................................................................566Umowy długoterminowe ...................................................................................................................567Nazwy domen....................................................................................................................................567Podsumowanie...................................................................................................................................568

�� 0��@6��.��7��

��6�/��8 :��01

Wprowadzenie do FTP ......................................................................................................................569Programy-klienty FTP .......................................................................................................................570Popularne programy-klienty FTP ......................................................................................................573Podstawowe zasady organizacji plików w obrębie witryny WWW...................................................574Podsumowanie...................................................................................................................................575

�� '��:�-.��$./��.��3��''

Rozpowszechnianie adresu witryny...................................................................................................578Wymiana adresów .......................................................................................................................578Grupy dyskusyjne........................................................................................................................578

Zgłaszanie witryny do wyszukiwarek internetowych ........................................................................579Pozycjonowanie i optymalizacja strony pod kątem wyszukiwarek ...................................................580

Zdobywanie łączy do Twojej witryny na innych stronach WWW..............................................580Zachęcanie do umieszczenia witryny w Ulubionych...................................................................581Częsta aktualizacja strony ...........................................................................................................581Dobór właściwych słów kluczowych i zwiększanie szansy na odnalezienie Twojej witryny .....581

Jak zachęcić użytkowników do przedłużania pobytu na stronie WWW? ..........................................584Udostępnienie zasobów...............................................................................................................584Fora i pogawędki internetowe .....................................................................................................584

Czego na pewno robić nie należy?.....................................................................................................585Niechciana poczta .......................................................................................................................585Wielokrotne zgłaszanie jednego adresu URL..............................................................................585Spam w grupach dyskusyjnych ...................................................................................................585Spam na forach dyskusyjnych i w pogawędkach internetowych.................................................585

Podsumowanie...................................................................................................................................586

�� 2��#��/��/��/��2'

Szacowanie oglądalności witryny za pomocą dzienników serwera ...................................................587Sprawdzanie ruchu na serwerze Apache .....................................................................................587Sprawdzanie ruchu na serwerze IIS.............................................................................................590Wybór właściwego programu do analizowania dzienników serwera ..........................................591

Weryfikacja pod kątem niedziałających łączy...................................................................................592Program sprawdzający W3C Link Checker.................................................................................592Programy sprawdzające w aplikacjach do tworzenia stron WWW .............................................594Inne, niezależne narzędzia...........................................................................................................595Sprawdzanie dzienników działania serwera WWW....................................................................595

+��3� ��

Reakcja na opinie użytkowników ......................................................................................................595Tworzenie kopii zapasowych danych ................................................................................................596Podsumowanie...................................................................................................................................596

��)�� % ��

�� 111�� .�"

�� 1��:��11

Zagadnienia związane z tworzeniem dużych serwisów internetowych .............................................600Podstawy zarządzania projektami......................................................................................................600Konieczność zaprojektowania architektury danych...........................................................................601Ogólny opis procesu tworzenia stron WWW.....................................................................................602

Określenie celów.........................................................................................................................603Określenie docelowej grupy odbiorców ......................................................................................603Przeprowadzenie analizy rynku i konkurencji.............................................................................603Analiza funkcjonalności ..............................................................................................................603Zaprojektowanie struktury witryny .............................................................................................604Określenie zawartości projektu ...................................................................................................606Opracowanie szaty graficznej......................................................................................................607Wykonanie projektu ....................................................................................................................607Testowanie i ocena działania witryny..........................................................................................609Promocja .....................................................................................................................................610Śledzenie liczby odwiedzin i wydajności działania witryny........................................................611Obsługa strony WWW ................................................................................................................612

Podsumowanie...................................................................................................................................612

��&5��:�� 0��

Podstawowe zasady dotyczące analizy odbiorców strony WWW.....................................................616Systematyzowanie informacji............................................................................................................616Dzielenie dokumentów na mniejsze części........................................................................................ 617W jaki sposób internauci czytają strony WWW? ..............................................................................617Stylistyka i formatowanie tekstu........................................................................................................618Opracowanie treści znaczników meta: tytułów i nagłówków oraz sloganów ....................................619

Tytuły ..........................................................................................................................................619Nagłówki .....................................................................................................................................619Slogany........................................................................................................................................620

Cechy doskonałej publikacji internetowej .........................................................................................620Bądź zwięzły ...............................................................................................................................621Twórz łatwe w przeglądaniu strony.............................................................................................621Zachowaj wiarygodność..............................................................................................................621Zachowaj obiektywność ..............................................................................................................622Skup się na określonej tematyce i nie bądź wylewny..................................................................622Od ogółu do szczegółu ................................................................................................................622Umieszczaj podsumowania .........................................................................................................623

Jak pisać na potrzeby internetu? ........................................................................................................623Zastosowanie list wypunktowanych............................................................................................623Rozważne wykorzystanie słów kluczowych................................................................................623Fachowa nomenklatura i slang marketingowy ............................................................................624

Podstawowe składniki strony internetowej........................................................................................624Składamy wszystko w jedną całość ...................................................................................................625Podsumowanie...................................................................................................................................628

�� !"(�)� !"��*++��,�-.��

��&��#��$��6��?��0�1

Metody badania ergonomii ................................................................................................................629W jaki sposób użytkownicy korzystają z serwisów WWW?.............................................................630Podstawowe zasady ergonomii stron WWW.....................................................................................631Ergonomia .........................................................................................................................................631

Ogłoszenia reklamowe ................................................................................................................631Animacje, multimedia i aplety.....................................................................................................632Kolory i łącza ..............................................................................................................................632Zachowanie spójności .................................................................................................................633Treść............................................................................................................................................633Rozwijane menu..........................................................................................................................633Kroje i rozmiary czcionek ...........................................................................................................633Ramki ..........................................................................................................................................634Elementy graficzne......................................................................................................................634Nagłówki .....................................................................................................................................635Przewijanie poziome ...................................................................................................................635JavaScript ....................................................................................................................................636Czytelność ...................................................................................................................................636Wyszukiwanie .............................................................................................................................637Mapa serwisu ..............................................................................................................................637Długość adresu URL ...................................................................................................................637Slogany........................................................................................................................................638Strona kodowa Windows 1252....................................................................................................638

Dlaczego warto projektować ułatwienia dostępu?.............................................................................638Zalecenia dotyczące dostępności .......................................................................................................639

Americans with Disabilities Act..................................................................................................639Rozporządzenia międzynarodowe...............................................................................................640

Inicjatywa Web Content Accessibility (W3C)...................................................................................640Uwzględnienie wad wzroku ........................................................................................................640Uwzględnienie wad słuchu..........................................................................................................641Wsparcie dla użytkowników o ograniczonej sprawności motorycznej........................................641Optymalizacja witryny pod kątem użytkowników mających problemyz przyswajaniem wiedzy i koncentracją ...................................................................................642

Przydatne narzędzia.....................................................................................................................642Formularze i PDF........................................................................................................................642Testowanie dostępności za pomocą narzędzi sprawdzających ....................................................644

Podsumowanie...................................................................................................................................644

��&��:��.��-��7��0&�

Podstawowe zasady lokalizacji serwisów..........................................................................................645Wprowadzenie do projektowania serwisów wielojęzycznych...........................................................646

Tłumaczenie strony internetowej.................................................................................................646Standard Unicode ..............................................................................................................................647

Basic Latin (podstawowy łaciński, U+0000 – U+007F) .............................................................650ISO-8859-1..................................................................................................................................650Dodatek Latin-1 (U+00C0 – U+00FF)........................................................................................654Zestaw łaciński rozszerzony A (U+0100 – U+17F) ....................................................................655Zestaw łaciński rozszerzony B i łaciński rozszerzony dodatkowy ..............................................656Polska norma kodowania znaków ...............................................................................................656

Projektowanie serwisów wielojęzycznych......................................................................................... 656Podsumowanie...................................................................................................................................657

+��3� ��

��& ��,��?�� 0�1

Czyhające niebezpieczeństwa............................................................................................................659Kradzież poufnych informacji .....................................................................................................659Chuligaństwo i wandalizm ..........................................................................................................660Ataki typu DoS (ang. Denial of Service).....................................................................................660Utrata danych ..............................................................................................................................660Straty finansowe..........................................................................................................................661Utrata zaufania i reputacji ...........................................................................................................661Spory i kwestie prawne ...............................................................................................................661

Zagadnienia związane z zabezpieczeniem serwera WWW................................................................662Uprawnienia dostępu do plików.................................................................................................. 662Niewykorzystywane, lecz otwarte porty......................................................................................662Skrypty CGI ................................................................................................................................663Przepełnienie bufora....................................................................................................................663Systemy, które uległy atakowi ....................................................................................................664

Przegląd dostępnych metod zabezpieczeń ......................................................................................... 664Spójna polityka bezpieczeństwa..................................................................................................665Zasoby internetowe dotyczące zabezpieczeń ..............................................................................665Blokada dostępu dla wyszukiwarek.............................................................................................666Serwery o podwyższonym bezpieczeństwie................................................................................666

Podsumowanie...................................................................................................................................667

��&&��:��<��3A��001

Poufność danych................................................................................................................................669Regulacje prawne w USA..................................................................................................................670

Ustawa „The Children’s Online Privacy Protection Act” (COPPA) ...........................................670Ustawa „Electronic Communications Privacy Act” (ECPA).......................................................671Ustawa „Patriot Act” z roku 2001 ............................................................................................... 672Ustawa „Fair Credit Reporting Act”............................................................................................672

Regulacje prawne w Unii Europejskiej..............................................................................................672Ochrona danych osobowych w Polsce...............................................................................................673Dobrowolne rozwiązania na rzecz prywatności................................................................................676

Platform for Privacy Preferences Project (P3P) ..........................................................................676Certyfikaty i programy legalizacyjne ..........................................................................................679

Wzorcowe rozwiązania w zakresie prywatności...............................................................................680Podsumowanie...................................................................................................................................681

2�� 34,

;��#�� !"�&�5��02�

;��,��3��3��.�6��7��*++ ��'�

+�� '2�

��

��

��

��

� Definiowanie typu dokumentu

� Ogólna struktura — znaczniki ��, �� oraz ��

� Style

� Elementy blokowe — znaczniki dla akapitów

� Elementy wstawiane — znaczniki formatujące znaki

� Znaki specjalne (encje)

� Elementy organizacyjne

� Łącza do innych stron

� Obrazy

� Komentarze

� Skrypty

� Wszystko razem

Język HTML przeszedł długą drogę od swoich skromnych początków. Jednak mimo te-

go, że obecne możliwości HTML-a (a także jego pochodnych) znacznie wykraczają po-

za statyczne przedstawianie dokumentów tekstowych, podstawowa struktura dokumentu

HTML nie zmieniła się.

Omawianie elementów HTML-a rozpoczniemy krótkim podsumowaniem, z którego do-

wiesz się, z jakich elementów składa się dokument HTML, do czego służy każdy z nich

i jak wpływa na inne elementy. W kolejnych rozdziałach znajdziesz szczegółowy opis

każdego elementu oraz związanych z nim technologii.

��

��

Jednym z najczęściej pomijanych atrybutów dokumentu HTML jest definicja typu doku-mentu (ang. Document Type Definition, DTD). Definicja ta poprzedza wszystkie umiesz-czone w dokumencie znaczniki i informuje przeglądarkę o formacie danego dokumentu— jakich znaczników można się spodziewać, jakie metody będzie obsługiwać i tak dalej.

Znacznik �� służy do określenia istniejącej definicji typu dokumentu. DTD zawie-ra wszystkie elementy, definicje, zdarzenia i inne rzeczy skojarzone z typem dokumentu.Znacznik �� wygląda mniej więcej tak:

�� !"��#��$%��&�!'(��)�)�*

Znacznik ten zawiera następujące informacje:

� Poziom najwyższego znacznika w dokumencie to HTML (��).

� Dokument jest zgodny ze standardami formalnego identyfikatora publicznego(ang. formal public identifier, w skrócie FPI) „W3C HTML 4.01 Strict English”(�� !"#��$�).

� Cała definicja DTD jest dostępna pod adresem URL http://www.w3.org/TR/html4/strict.dtd.

��

Wszystkie dokumenty HTML na poziomie dokumentu mają trzy identyczne znaczniki.Znaczniki te, ��, �� oraz �%��, określają poszczególne części dokumentu HTML.

��

Znacznik �� otacza cały dokument HTML. Informuje on przeglądarkę o tym, gdziesię rozpoczyna oraz kończy dokument.

��$%*��!+,-) ./$+0�/��$%*

W poprzednich wersjach HTML-a można było deklarować dodatkowe opcje wewnątrzznacznika ��. Opcje te (zwłaszcza ��&' oraz �()) straciły jednak na znaczeniu z chwiląwprowadzenia HTML-a w wersji 4.0. Informacje kierunkowe oraz te, które dotyczą ję-zyka, są standardowo przechowywane w deklaracji typu dokumentu (�� ).

��

Znacznik �� otacza nagłówek dokumentu HTML. Ta część dokumentu zawiera in-formacje dotyczące nagłówków umieszczonych w dokumencie. Jest w niej przechowywa-ny tytuł dokumentu, metainformacje, a w większości przypadków także skrypty dokumen-tów. Typowy element �� wygląda mniej więcej tak:

��

��+1)*�%'0.!+%2�&�3%+&�++��3�+2��+4��(&&��!+52��&�3%+&�(&&�*��'�%+*�3�/6) ./$+0�/��'�%+*�$+�101$+2�)+&(!'��' 0�( 0�+0�2��!73.61) �1&�! 01�*�$+�101$+2�.+3� !)&�( 0�+0�2��!73.61)801"69�+.8&�! 01�*�&(!'��%10"/1"+2�:1;1<(!'��*5/0(�' 0�+��'0) �=/!%>?5'02�'0) �� +0=/!%8��8��')��2@��8�+'"��2A��8&(! %%B1!&23+&8!+&'71B%+23+&�>CD��&(!'��*��+1)*

Większość znaczników poziomu �� omówiono szczegółowo w rozdziale 3. Pisanieskryptów JavaScript zostało dokładnie opisane w rozdziałach 15. oraz 28.

Większość informacji znajdujących się w elemencie �� nie będzie widoczna na stro-nie podczas jej wyświetlania przez przeglądarkę. Element ��(�� określa tekst, któryprzeglądarka wyświetli jako tytuł strony — w systemie Windows tytuł dokumentu pojawiasię w pasku tytułu przeglądarki, tak jak widać to na rysunku 2.1.

�� !"#"W systemie Windowstytuł dokumentu jestwyświetlany na paskutytułu przeglądarki

Główna, wizualna zawartość dokumentu HTML znajduje się wewnątrz znaczników �%��.

Zwróć uwagę na to, że w wersji 4.0 języka HTML większość atrybutów znacznika �%��została pominięta, ponieważ preferuje się definiowanie atrybutów w formie stylów. W po-przednich wersjach HTML-a można było określać mnóstwo opcji dotyczących tła, tekstuczy też kolorów łączy. Wciąż można stosować atrybuty znacznika �%��: &�� oraz&*&�� oraz atrybuty globalne, takie jak +��. Jednak inne atrybuty należy już defi-niować nie wewnątrz znacznika �%��, a w stylach, tak jak pokazano w następującymprzykładzie:

��

��$%*��+1)*��'�%+*�3�/6) ./$+0�/��'�%+*�&�3%+�3�+2��+4��(&&�*B )3?B1(."! /0)�B%1(.C( % !��'�+D1�%'0.?( % !�!+)D1�;'&'�+)?( % !�B%/+D1�1(�';+?( % !�3+%% �D��&�3%+*��+1)*�B )3*...treść dokumentu...

��B )3*��$%*

Szczegółowe omówienie stylów znajdziesz w rozdziałach 16. oraz 24.

��

Style są stosunkowo nowym elementem języka HTML, który zrewolucjonizował sposóbkodowania i wyświetlania dokumentów HTML. To właśnie one nadają językowi charak-ter rozszerzalny (słowo „rozszerzalny” jest jednym z elementów skrótu XHTML). Autorzystron WWW mogą tworzyć nowe style, które umożliwią im odpowiednie zaprezentowa-nie treści dokumentu, nie odchodząc jednocześnie od stałych formatów.

Style są niczym innym, jak atrybutami definiującymi sposób wyświetlania strony w prze-glądarce, połączonymi dla uzyskania określonego efektu. Osoby, które miały już kontaktze stylami podczas pracy na programach edytujących tekst, nie będą miały problemów zezrozumieniem stylów HTML.

Style są z reguły omawiane w kontekście kaskadowania jako standard CSS (kaskadowycharkuszy stylów). Standard CSS definiuje metodę, która sprawia, że w tym samymdokumencie można zastosować kilka arkuszy stylów (czyli list definicji stylów). Jeżelitego samego stylu dotyczy kilka definicji, każda kolejna nadpisuje poprzednią na zasadziekaskadowania. Więcej informacji na temat stylów, arkuszy stylów oraz CSS znajdzieszw rozdziale 16.

Załóżmy na przykład, że chcesz zaznaczyć w dokumencie fragmenty tekstu, które majązostać usunięte. Tekst taki powinien być przekreślony i wyświetlony czerwoną czcionką.Mógłbyś w tym celu otoczyć wybrane fragmenty znacznikami �,&�� oraz ��. Jednakta metoda ma dwie poważne wady:

� HTML 4 dąży do rezygnacji ze stosowania znacznika �,&��, dlatego nie powinieneśgo używać.

� Jeżeli później zmienisz zdanie na temat koloru lub innego sposobu oznaczeniatekstu, będziesz musiał odnaleźć każdy zestaw znaczników i wprowadzić w nimodpowiednie zmiany.

Zamiast tego możesz zdefiniować style dla tych elementów, które zawierają określoneatrybuty tekstu. Oto fragment kodu HTML, który definiuje taki styl, a później wykorzy-stuje go do zaznaczenia wybranego tekstu w dokumencie:

��

��$%*��+1)*�$+�1��+E/';2�� 0�+0��3�+�( 0�+0�2��+4��$%C(�1!&+�2'& �@@FG�H�*�&�3%+*�!+)%'0+?( % !�!+)C�+4��)+( !1�' 0�%'0+��! /"�CD��&�3%+*��+1)*�B )3*��*�(7+,0'+I&73�! I+.��+.%1!1(I'�'+� )%+"6 ,('��*��*�%+.! -�&./�+.B'+"/�3�1).9�. 0'+(703$&'J&�1I+)%1I1.'+" ,01! )/8B37+!�16�'J73� %'�3(70+6K(7K(+" 7'003$01! )+$'71IK6�,!9)� �J"7'+$&.'(� ))7'+%0+'!9�0 !7J)0+&�10 �'&. 8) .�9!+" /� �1L0'1IK" �!1�101�/!3'I+I�9"8� �61,('�3!+&�+.��3$1"181B301!9)�+0� )16� � )38.�9!+7$/&'63" ) )+!�10'1&'J��&�10(%1&&2�!+)%'0+�*��3$) ./$+0('+71)+.%1! �10 �+� � )3��&�10*��*��B )3*��$%*

Efekt zastosowania tego kodu przedstawiono na rysunku 2.2.

�� !"!"Styl „redline” zostałzastosowanyw tekście dziękiużyciu znacznika<span>

W wielu znacznikach HTML style mogą być stosowane bezpośrednio, przy użyciu

atrybutu +��. Aby na przykład zaznaczyć cały akapit czerwoną przekreśloną czcionką,możesz użyć następującego kodu:

��&�3%+2�( % !�!+)C�+4��)+( !1�' 0�%'0+��! /"�C�*�!73.61) �31.1�'��*

Jednak jeśli będziesz używać stylów w ten sposób, pozbawisz się możliwości łatwegoich modyfikowania, a więc jednej z ich największych zalet.

Jeżeli będziesz chciał później zmienić atrybuty tekstu, wystarczy, że odpowiednio zmody-fikujesz definicje zamieszczone w części �+��, a zmiany zostaną wprowadzone w ca-łym dokumencie. A co, jeśli jeden styl wykorzystuje kilka dokumentów? W takiej sytuacjibędziesz musiał dokonać odpowiednich zmian w każdym dokumencie. Na szczęście im-

plementacja stylów HTML umożliwia stosowanie zewnętrznych arkuszy stylów w wielu

dokumentach — wówczas wystarczy tylko zmienić styl w zewnętrznym arkuszu stylów.

Oto kod, który definiuje zewnętrzny arkusz stylów site-styles.css dla bieżącego doku-mentu HTML:

��$%*��+1)*� ��M!+%2�&�3%+&�++��!+52�&'�+�&�3%+&�(&&��3�+2��+4��(&&�*��+1)*�B )3*��

��

Treść dokumentu site-styles.css będą stanowić definicje, które normalnie znalazłyby się

między znacznikami �+��. Dla przykładu z czerwoną przekreśloną czcionką treść tego

dokumentu byłaby następująca:

�!+)%'0+?( % !�!+)C�+4��)+( !1�' 0�%'0+��! /"�CD

Istnieje dużo więcej atrybutów, które można zastosować w tekście, a także w innychobiektach, przy użyciu stylów. Więcej informacji na temat stylów znajdziesz w rozdziale 16.

!��"��

Tak jak w przypadku większości edytorów tekstu, HTML zawiera kilka znaczników, któ-

re określają, a więc formatują poszczególne akapity tekstu. Są to następujące znaczniki:

� �-� — sformatowane akapity;

� ��#� do ��.� — nagłówki;

� �%�/01*�� — wydzielony blok tekstu;

� �-)�� — zachowanie pierwotnego formatowania tekstu;

� �*��, ��, �� — listy nienumerowane, uporządkowane oraz listy definicji;

� �/�&��)� — tekst wyśrodkowany;

� ��(2� — grupowanie elementów.

Zastosowanie dowolnego elementu blokowego powoduje wstawienie podziału wiersza oraz

wyraźnego odstępu po zamykającym znaczniku. Jako takie, elementy blokowe działają tyl-

ko wtedy, gdy użyjesz ich do sformatowania fragmentów tekstu mających charakter akapitu

— nie mogą być stosowane jako style wstawiane.

Kolejne punkty zawierają szczegółowe omówienie każdego z wymienionych wyżej

znaczników.

Więcej szczegółów na temat elementów blokowych oraz ich formatowania znajdzieszw rozdziale 4.

��

Znacznik akapitu (�-�) służy do określania całych akapitów w tekście. Oto przykładowy

kod HTML oraz efekt jego zastosowania przedstawiony na rysunku 2.3:

��*<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1��*��*<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1��*

��

�� !"$"Znaczniki akapitudzielą tekstna oddzielne akapity

Podobnie jak w przypadku większości znaczników, również w znaczniku �-� możesz de-finiować niektóre elementy formatowania, takie jak czcionka, wyrównanie, odstępy i takdalej. Możesz na przykład wyśrodkować akapit, dodając do znacznika �-� atrybut ��('&:

��1%'"02�(+0�+!�*<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1��*

Jednak obecna tendencja zmierza ku rezygnacji z takiego formatowania na rzecz korzy-

stania z arkuszy stylów. Następny przykład pokazuje, jak za pomocą arkuszy stylów osią-gnąć taki sam efekt, jaki daje atrybut ��('&:

��$%*��+1)*�$+�1��+E/';2�� 0�+0��3�+�( 0�+0�2��+4��$%C(�1!&+�2'& �@@FG�H�*�&�3%+�3�+2��+4��(&&�*��(+0�+!?�+4��1%'"0�(+0�+!D��&�3%+*��+1)*�B )3*��(%1&&2�(+0�+!�*<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1��*��B )3*��$%*

Użycie dowolnej z dwóch powyższych metod przynosi taki sam efekt: wyśrodkowanieakapitu w oknie przeglądarki.

��

HTML obsługuje sześć poziomów nagłówków. Wykorzystywane przez nie style forma-towania charakteryzują się dużą, najczęściej pogrubioną czcionką, która wyróżnia je spo-śród innych fragmentów tekstu. Oto przykładowy kod HTML oraz efekt jego zastosowaniaprzedstawiony na rysunku 2.4:

�� !"��#��$%��&�!'(��)�)�*��$%*�B )3*��*�1"69�+.��*��H*�1"69�+.H��H*��*�1"69�+.��*��*�1"69�+.��*��F*�1"69�+.F��F*��A*�1"69�+.A��A*��*N�3.63�+.&�+%+$+0�/B )3�<73B.'B!K7 �3%'&�!7+&. (736%+0'�+" �&1��*��B )3*��$%*

��

�� !"%"HTML obsługujesześć poziomównagłówków

Sześć poziomów nagłówków rozpoczyna poziom 1., najwyższy i najważniejszy, po któ-rym następują kolejne poziomy, aż do poziomu 6., najniższego i najmniej ważnego. Mimo

że istnieje aż sześć predefiniowanych poziomów nagłówków, Ty prawdopodobnie będziesz

używać w swoich dokumentach najwyżej trzech lub czterech. Nie ma żadnych ograniczeń

w korzystaniu z nagłówków — możesz stosować wybrane poziomy niezależnie. Oznacza to,

że nie musisz użyć nagłówków ��#� oraz ��3� po to, aby móc zastosować nagłówek ��.Pamiętaj, że za pomocą stylów możesz zmienić formatowanie narzucone przez każdy po-

ziom nagłówków.

Tematyka wykorzystywania stylów została dokładniej omówiona w rozdziale 16.

��

Znacznik �%�/01*�� służy do określenia wydzielonych bloków tekstu. Oto przykłado-wy kod, który definiuje pierwszy paragraf Deklaracji Niepodległości jako wydzielony blok:

�B )3*��*�+.%1!1(IJ�'+� )%+"6 ,('! 7� (730101&�J�/IK(31.1�'��*�B% (.E/ �+*�%+.! -�&./�+.B'+"/�3�1).9�. 0'+(703$&'J&�1I+)%1I1.'+" ,01! )/8B37+!�16�'J73� %'�3(70+6K(7K(+" 7'003$01! )+$'71IK6�,!9)� �J"7'+$&.'(� ))7'+%0+'!9�0 !7J)0+&�10 �'&. 8) .�9!+" /� �1L0'1IK" �!1�101�/!3'I+I�9"8� �61,('�3!+&�+.��3$1"181B301!9)�+0� )16� � )38.�9!+7$/&'63" ) )+!�10'1&'J��B% (.E/ �+*��B )3*

Znacznik �%�/01*�� powoduje wcięcie akapitu i wyróżnia go w ten sposób spośródinnych fragmentów tekstu (zobacz rysunek 2.5).

��

�� !"&"Znacznik<blockquote>powodujewcięcie akapitu

��

HTML umożliwia określenie trzech różnych rodzajów list:

� listy uporządkowane (zazwyczaj numerowane);

� listy nieuporządkowane (zazwyczaj punktowane);

� listy definicji (elementy listy ze zintegrowanymi definicjami).

Zarówno listy uporządkowane, jak i nieuporządkowane wykorzystują element ��(� dlaokreślenia poszczególnych elementów listy. Lista definicji posiada dwa znaczniki — jeden

określa elementy listy (��), a drugi definicje tych elementów (��).

Oto przykładowy kod HTML oraz efekt jego zastosowania przedstawiony na rysunku 2.6.:

��$%*�B )3*� %*N�3.61%'&�1/� !7K). �101�%'*�'+!�&73+%+$+0�/� !7K). �10+I%'&�3�%'*�!/"'+%+$+0�/� !7K). �10+I%'&�3�%'*�!7+('+%+$+0�/� !7K). �10+I%'&�3�� %*�/%* '&�10'+/� !7K). �101�%'*�'+!�&73+%+$+0�0'+/� !7K). �10+I%'&�3�%'*�!/"'+%+$+0�0'+/� !7K). �10+I%'&�3�%'*�!7+('+%+$+0�0'+/� !7K). �10+I%'&�3��/%*�)%* '&�1)+5'0'(I'�)�*�'+!�&73+%+$+0�)+5'0'(I'�))*�'+!�&71)+5'0'(I1

�)�*�!/"'+%+$+0�)+5'0'(I'�))*�!/"1)+5'0'(I1

�)�*�!7+('+%+$+0�)+5'0'(I'�))*�!7+('1)+5'0'(I1��)%*��B )3*��$%*

� ��

�� !"'"Przykładowa listaw HTML-u

Każdy typ listy można dostosować do własnych potrzeb. Jeśli chcesz, możesz utworzyćwiele stylów dla każdego z typów. Możesz na przykład sprawić, aby kolejne elementy li-

sty uporządkowanej rozpoczynały litery zamiast liczb. Oto kod HTML, który przynosi taki

właśnie efekt (zobacz rysunek 2.7):

��$%*�B )3*� %&�3%+2�%'&��&�3%+�% �+!�1%��1C�*N�3.61%'&�1/� !7K). �101=71� $ (K$163(�%'�+!1%51B+�/>�%'*�'+!�&73+%+$+0�/� !7K). �10+I%'&�3�%'*�!/"'+%+$+0�/� !7K). �10+I%'&�3�%'*�!7+('+%+$+0�/� !7K). �10+I%'&�3�� %*��B )3*��$%*

�� !"("Za pomocą różnychstylów możeszzmienić wyglądkażdej listy w Twoimdokumencie.Lista pokazanana tym rysunkukorzysta ze stylulisty lower-alpha

Starsze wersje HTML-a umożliwiały określanie różnego rodzaju opcji list za pomocąznaczników listy. Jednak formaty najnowszych wersji języków HTML oraz XHTML nakazujądefiniowanie tych opcji za pomocą stylów.

��

��

Czasami chcesz mieć możliwość ręcznego sformatowania tekstu w dokumencie albo chcesz

pozostawić formatowanie już zastosowane w danym fragmencie tekstu. Zazwyczaj tekst

pochodzi z innego źródła — jest wycięty i wklejony do Twojego dokumentu — i może już

mieć sformatowane odstępy, tabulatory i tak dalej. Zastosowanie znacznika �-)�� sprawia,

że przeglądarka traktuje białe znaki dosłownie i nie kondensuje ich tak, jak robi to zwykle.

Na przykład poniższa tabela będzie wyświetlona dokładnie w takiej samej formie, w jakiej

została wpisana w kodzie:

��!+*O��O��OP017�1P�1!� ,-PO��O��OP1.�/1%'71(I1)103(�P��A��G��PP1.�/1%'71(I17� %0'+0'1P,! )18H@��@8H��@PP&�1�/&P�PP1.�/1%'71(I171&'%10'1P��AG��G@A�PO��P��O��!+*

!��

Grupowanie elementów stanowi wyższy poziom formatowania bloków i stosuje się je

zazwyczaj do grup powiązanych ze sobą akapitów, całych stron, a czasem tylko do jedne-

go akapitu. Znacznik grupowania (��(2�) umożliwia formatowanie większych części do-

kumentu w bardzo prosty sposób. Jeśli na przykład chcesz, aby określony fragment tekstu

w dokumencie był otoczony ramką, możesz zdefiniować odpowiedni styl, a następnie

umieścić ten fragment między znacznikami ��(2�, tak jak w przykładzie:

��$%*��+1)*�&�3%+*�B !)+!+)?B !)+!�&�3%+�& %')CD��&�3%+*��+1)*�B )3*��*� I+&�0 !$1%031.1�'��*�)';(%1&&2�B !)+!+)�*��*� I+&�1.1�'�&5 !$1� �10371� $ (K&�3%/)';8.�9!3) )1I+) 0'+" !1$.J��*��)';*��B )3*��$%*

Efekt zastosowania tego kodu przedstawia rysunek 2.8.

Więcej informacji na temat wydzielania bloków tekstu za pomocą znacznika ��(2�znajdziesz w rozdziale 16.

��

�� !")"Znaczniki <div>grupują dużefragmenty tekstu

!��

�� #$��

Najwyższy możliwy poziom znaczników dostępny w HTML-u to poziom znaków — tak,jak w programach służących do edycji tekstu, i tu możesz określić formatowanie wybra-nych znaków. W tym punkcie znajdziesz omówienie elementów wstawianych.

"��

Do elementów wstawianych należą:

� czcionka pogrubiona (�%�);

� kursywa (�(�);

� tekst powiększony (�%('�);

� tekst pomniejszony (�+��);

� tekst wyróżniony (��);

� tekst mocno pogrubiony (�+�)&'�);

� tekst o stałej szerokości liter (��).

Spójrz na przykładowy kod zawierający próbkę akapitu oraz na efekt jego zastosowaniaprzedstawiony na rysunku 2.9.

��$%*�B )3*��*�+01.1�'��!+7+0�/I+!9L0+&�3%+�&�1�'10+8�1.'+I1.�B*(7(' 0.1� "!/B' 01��B*8�'*./!&3�1��'*8�B'"*�+.&�� 'J.&7 03��B'"*8�&$1%%*�+.&�� $0'+I&7 03��&$1%%*8�+$*�+.&��3!9L0' 03��+$*8�&�! 0"*�+.&�$ (0 � "!/B' 03��&�! 0"* !17��*�+.&� &�16+I&7+! . ,('%'�+!��*��*��B )3*��$%*

Zwróć uwagę na to, że w najnowszych specyfikacjach pominięto kilka znaczników wsta-wianych, takich jak przekreślenie (�+�)(0��) oraz podkreślenie (�*�). Zrezygnowano na-wet ze znacznika czcionki (�,&��) na rzecz stylów span (zobacz punkt „Elementy span”

��

�� !"*"Elementy wstawianemogą zmienićwygląd wyrazów,a nawetpojedynczychznaków

w dalszej części tego rozdziału). Znaczniki przekreślenia oraz podkreślenia zostały za-stąpione znacznikami usunięcia (��) oraz wstawienia (�(&+�), które służą do dokony-wania korekty (�� dla tekstu usuniętego i �(&+� dla tekstu wstawionego).

Więcej informacji na temat elementów wstawianych znajdziesz w rozdziale 4.

# ��

Znaczniki span (�+-�&�) grupują style wstawiane w większej liczbie znaków lub wyra-zów, a co za tym idzie, umożliwiają definiowanie własnych stylów wstawianych. Jeśli na

przykład chcesz, aby tekst był napisany czerwoną, pogrubioną czcionką i do tego jeszczeaby był podkreślony, możesz użyć takiego kodu:

��$%*��+1)*�&�3%+*�+$��1&'&?( % !�!+)C�+4��)+( !1�' 0�/0)+!%'0+C5 0��+'"��B %)CD��&�3%+*��+1)*�B )3*��*�&�10(%1&&2�+$��1&'&�*�+0�+.&�I+&��3!9L0' 03��&�10*81�+00'+��*��B )3*��$%*

Znacznik �+-�&� umożliwia zastosowanie formatowania stylu dokładnie w tym miejscu,w którym chcesz.

%��#��&��#�'

Do niektórych znaków specjalnych trzeba odwoływać się bezpośrednio zamiast wpisy-wać je w dokumencie. Niektóre z nich nie mogą być wpisane ze standardowej klawiatury,na przykład symbol znaku towarowego (4) lub praw autorskich (5); inne mogłyby wpro-wadzić zamieszanie podczas odczytywania dokumentu przez przeglądarkę (na przykład

nawiasy trójkątne, � oraz �). Tego typu znaki są powszechnie nazywane encjami.

Odwołania do encji tworzymy w dokumencie za pomocą specjalnego kodu. Kod ten za-czyna się zawsze od znaku 6, a kończy średnikiem. Istnieją trzy różne metody definiowa-nia encji:

� ��

� kod mnemoniczny (na przykład słowo /- dla symbolu praw autorskich);

� wartość dziesiętna odwołująca się do danego znaku (na przykład wartość 7#.8

dla symbolu praw autorskich);

� wartość szesnastkowa odwołująca się do danego znaku (na przykład wartość 79:8

dla symbolu praw autorskich);

Zwróć uwagę na to, że dziesiętne i szesnastkowe metody określania encji wymagają wsta-

wienia przed wartością znaku (7).

Oto przykłady poprawnie zapisanych encji:

� 6&%+-; — twarda spacja (zobacz później);

� 6��; — symbol „mniejszy niż” albo lewy nawias kwadratowy;

� 6/-; — znak praw autorskich (5);

� 6��-; — znak 6;

� 67#<#; — myślnik.

Więcej informacji na temat encji znajdziesz w rozdziale 9.

+��,�� -��

Jedna z encji, twarda spacja, jest często nadużywana w dokumentach HTML. Aby na przykład wsta-wić większy odstęp pomiędzy akapitami, twórcy stron często wpisują taki kod:

��*Q0B&�C��*

Efektem zastosowania takiego kodu jest pusty akapit. Większość przeglądarek w ogóle go niewyświetli.

Nie takie jest zamierzenie tej encji — jej zadaniem jest niedopuszczenie do rozdzielenia określo-nych słów między kolejnymi wierszami tekstu. Natomiast nie zaleca się wstawiania białych znakóww tekście za pomocą twardej spacji. Zamiast tego można skorzystać ze stylów, zgodnie z zalece-niami zaprezentowanymi w tej książce.

!��#��

HTML posiada dwa elementy, które ułatwiają organizowanie informacji w dokumencie:

tabele i formularze. Tabele umożliwiają zaprezentowanie danych za pomocą kolumn i wier-

szy w sposób podobny jak w arkuszach kalkulacyjnych. Formularze służą do prezentowa-

nia (oraz wyszukiwania) danych za pomocą elementów wspólnych dla interfejsów GUI

— takich jak pola tekstowe, pola wyboru czy listy.

��

$��

Tabele HTML są bardzo proste, ale odpowiednio użyte mogą przynieść naprawdę bardzo

ciekawy efekt. Na najbardziej podstawowym poziomie tabele służą do organizowania da-

nych w wiersze i kolumny. Na poziomie najwyższym tabele mogą prezentować bardzo

skomplikowany układ strony — tak jak w czasopiśmie lub gazecie, gdzie w kolumnach

umieszczany jest tekst, grafika, różnego rodzaju menu i tak dalej.

Tabele składają się z trzech podstawowych elementów, a co za tym idzie, posiadają trzy

znaczniki:

� Sama definicja tabeli jest określana za pomocą znacznika ��%��.

� Wiersze danych są definiowane za pomocą znaczników ��)�.

� Komórki tabeli (pojedyncze dane) są definiowane za pomocą znaczników ��.

Komórki tabeli, umieszczone w równych wierszach, tworzą kolumny tabeli.

Spójrz na przykładowy kod, którego efekt zastosowania przedstawia rysunek 2.10.

��$%*�B )3*��1B%+B !)+!2��*��!*��)*�$'J��)*��)*�'+.��)*��!*��!*��)*R001��)*��)*�F��)*��!*��!*��)*�1!� &7��)*��)*HG��)*��!*��!*��)*�1!'/&7��)*��)*H��)*��!*��!*��)*:10��)*��)*��)*��!*��!*��)*:+!73��)*��)*��)*��!*��!*��)*M!73&7� 5��)*��)*��)*��!*��!*��)*�1!('0��)*��)*�G��)*��!*��!*��)*�'(�16��)*��)*HF��)*��!*��!*��)*<�+510��)*��)*�@��)*��!*��!*��)*<73$ 0��)*��)*��)*��!*��1B%+*��B )3*��$%*

Jest to przykład bardzo prostej tabeli. HTML oferuje wiele opcji, które umożliwiają sfor-

matowanie elementów tabeli, jak również zagnieżdżenie jednej tabeli wewnątrz drugiej.

W ten sposób można znacznie poprawić wygląd tabeli, a także sprawić, aby była ona bar-

dziej złożona. Porównaj ze sobą rysunki 2.11 oraz 2.12. Rysunek 2.11 przedstawia stro-

nę w taki sposób, w jaki normalnie jest ona wyświetlana przez przeglądarkę. Jeśli jednak

włączysz ramki tabeli (zobacz rysunek 2.12), przekonasz się, że do osiągnięcia odpowied-

niego wyglądu dokumentu posłużono się tabelami (oraz tabelami zagnieżdżonymi).

Tabele zostały omówione szczegółowo w rozdziale 10., natomiast w rozdziale 11.znajdziesz informacje na temat tego, jak można wpływać na wygląd strony za pomocątabel.

� ��

�� !"#."Jedenaście wierszyi dwie kolumnydanych w tabeli

�� !"##"W tym dokumenciewykorzystanodwie niewidocznetabele, aby nadaćmu odpowiedniwygląd

%��

W formularzach HTML można wyświetlać i gromadzić dane za pomocą standardowych

elementów GUI. Formularze HTML oferują standardowy zestaw elementów GUI, takich

jak pola tekstowe, pola wyboru, listy rozwijane i wiele innych. Oprócz podstawowych

��

�� !"#!"Tu wyświetlonoramki tabel,aby pokazać,ile tabel posłużyłodo utworzenia stronyi w jaki sposóbwpłynęły onena jej wygląd

elementów GUI HTML oferuje również prostą metodę gromadzenia danych i przekazy-

wania ich do programu obsługi danych, w którym można sprawdzić ich poprawność, a tak-

że przechowywać je, porównywać i tak dalej.

Oto kod typowego formularza HTML oraz efekt jego zastosowania przedstawiony narysunku 2.13:

��$%*�B )3*�5 !$*

�B*�$'J��B*�'0�/��3�+2��+4��01$+2�'$'J�&'7+2��*�B!*�B!*

�B*�'+.��B*�'0�/��3�+2�!1)' �01$+2��'+.�*�H��'0�/��3�+2�!1)' �01$+2��'+.�*H��'0�/��3�+2�!1)' �01$+2��'+.�*��'0�/��3�+2�!1)' �01$+2��'+.�*��O�B!*�B!*

�B*:1.'I+&��9I/%/B' 03&$1.% )9�S��B*�&+%+(�01$+2�% )3�*� ��' 001$+2�(7+. %1) �+�*�7+. %1) �+� ��' 001$+2��!/&.1�. �+�*�!/&.1�. �+� ��' 001$+2��10'%' �+�*�10'%' �+��&+%+(�*�B!*�B!*

�B*:1.$ L+$3&'J7� BK&. 0�1.� �1-S��B*�B!*�'0�/��3�+2�(�+(.B 4�01$+2��+%+5 0�*�+%+5 0�B!*�'0�/��3�+2�(�+(.B 4�01$+2�� (7�1�*� (7�1�B!*

� ��

�� !"#$"Elementy formularzato standardowekontrolki GUI,które umożliwiająwyświetlaniei gromadzeniedanych

�'0�/��3�+2�(�+(.B 4�01$+2�+�$1'%�*�$1'%�B!*�'0�/��3�+2�(�+(.B 4�01$+2�0'+�*�'+I+&�+$71'0�+!+& �103�B!*��5 !$*��B )3*��$%*

Formularz przedstawiony w powyższym przykładzie jest bardzo prosty — prezentujetylko kilka podstawowych elementów i nie zawiera żadnego programu obsługi danych,który mógłby je przetwarzać. W rzeczywistości formularze bywają bardzo skomplikowa-ne i zazwyczaj wymagają skryptów sprawdzających poprawność zgromadzonych danych.Jednak nawet ten prosty formularz pokazuje, że przy wykorzystaniu HTML-a możeszuzyskać całkiem niezłą kontrolę nad danymi oraz ich formatem.

Formularze zostały szczegółowo omówione w rozdziale 13.

($��)��

Główną zaletą sieci WWW jest możliwość przełączania się między różnymi dokumenta-mi. Jeżeli na przykład tworzysz stronę, która dotyczy praw lokalnych, możesz umieścićw niej łącze do strony rządowej, na której użytkownik znajdzie dodatkowe informacje.Łącze jest zazwyczaj wyświetlane jako podkreślony tekst, a jego kolor różni się od nor-malnego tekstu dokumentu.

Przykładowo, łącze może wyglądać w przeglądarce tak:

�'J(+I'05 !$1(I'701I)7'+&7�/�1I�

Słowo �*��= jest połączone z innym dokumentem — gdy użytkownik je kliknie, jegoprzeglądarka wyświetli określoną stronę WWW.

Łącza tworzy się za pomocą znacznika ��. Na najprostszym poziomie znacznik ten przyj-muje jeden argument — stronę, z którą ma połączyć — i otacza tekst, który ma stanowićłącze. W poprzednim przykładzie można by użyć następującego kodu:

�'J(+I'05 !$1(I'701I)7'+&7�1�!+52��&+I$�" ;��%�*�/�1I��1*

��

Atrybut �)�, (ang. Hypertext REFerence — odnośnik do hipertekstu) znacznika �� de-finiuje protokół oraz docelową lokalizację łącza. W tym przykładzie zdefiniowano pro-tokół ��->��, ponieważ strona docelowa jest dostarczana za pomocą protokołu HTTP.Można również korzystać z innych protokołów (takich jak ,�->�� czy ��(��>), jeżeli ist-nieje taka potrzeba.

Znacznik odnośnika może również zawierać dodatkowe atrybuty, które określą na przy-kład to, gdzie ma zostać otwarty nowy dokument (na przykład w nowym oknie przeglądar-ki), a także zdefiniują wzajemny stosunek między dokumentami i zestaw znaków czcionkiużyty w nowym dokumencie.

Możesz również skorzystać z pewnej odmiany znacznika ��, aby zaznaczyć wybrane miej-sca w bieżącym dokumencie. Umieszczając łącze w innym miejscu tego samego dokumentuumożliwisz użytkownikowi przeniesienie się w określone miejsce. Spójrz na przykładowy

kod HTML:

�'J(+I'05 !$1(I'701I)7'+&7��1�!+52�T# 7)7H�*# 7)7'1%+H��1*��. )�� 101$+2�# 7)7H�*# 7)7'16H��1*

W tym przykładzie użytkownik może kliknąć łącze „Rozdział 2.”, aby przenieść się w miej-sce, w którym znajduje się odnośnik do rozdziału 2. Zwróć uwagę na to, że łącze �)�, musizawierać symbol hash (7), który definiuje je jako odnośnik, a nie jako odrębną stronę.

Więcej informacji na temat łączy oraz odnośników znajdziesz w rozdziale 7.

�"��

Jedną z największych innowacji, jakie wniosły do internetu sieć WWW oraz protokółHTTP jest możliwość dostarczania multimediów do przeglądarki. Prekursorami filmówwideo i dźwięku o jakości takiej, jak na płytach CD, były obrazy graficzne w formacie GIForaz JPEG.

Do dodawania obrazów do dokumentu HTML służy znacznik �(�'�. Znacznik ten za-wiera łącze do pliku z obrazem, a także przechowuje informacje niezbędne do tego, abypoprawnie wyświetlić obraz (na przykład określające jego rozmiar). Typowy znacznikobrazu wygląda mniej więcej tak:

�'$"&!(2��'$1"+&��$ !+�I�"�1%�2��B!17�+!!'��')��2��+'"��2�H��*

Efektem zastosowania tego kodu byłoby wyświetlenie obrazu tmoore.jpg w tym miejscudokumentu, w którym umieszczony jest znacznik. W tym przypadku obraz znajduje sięw katalogu (��'�+ bieżącego serwera i zostanie wyświetlony bez ramki, w rozmiarze 100na 200 pikseli. Atrybut �� zawiera tekstowy odpowiednik obrazu dla przeglądarek, którenie mogą wyświetlić grafiki (lub pojawiający się w przypadku, jeśli sam użytkownik zde-cydował się na taką konfigurację).

Obrazy mogą również pomagać w nawigacji po dokumencie. Możesz na przykład spra-

wić, aby ich kliknięcie przez użytkownika powodowało wykonanie jakiejś czynności, wy-

świetlenie innego dokumentu i tak dalej. Na przykład mapa Polski mogłaby służyć do tego,

��

aby wybrać określone województwo — kliknięcie województwa wywoływałoby wyświe-tlenie powiązanej tematycznie strony. Obrazy nawigacyjne są często nazywane mapami

obrazów i z reguły wymagają oddzielnej mapy opartej na współrzędnych i zawierającej fi-

gury geometryczne, definiującej obszary, które można kliknąć na obrazie.

Więcej informacji na temat obrazów znajdziesz w rozdziale 6.

*��

Dokumenty HTML są z reguły czytelne, ale czasem warto dodać do kodu komentarz. Naj-

częstszym powodem wstawiania komentarzy w kodzie HTML jest poprawa organizacji

dokumentu, a także chęć zaznaczenia wybranych fragmentów po to, aby później się do

nich odwołać.

HTML wykorzystuje znacznik �� do rozpoczęcia komentarza oraz �� do jego zakoń-

czenia. Nawet jeśli komentarze rozciągają się na kilka linijek, przeglądarka zawsze zi-

gnoruje wszystko, co znajduje się między znacznikami komentarza. Oto przykład dwóch

komentarzy, które zostaną zignorowane przez przeglądarkę:



oraz



��

HTML jest statyczną metodą rozmieszczania treści dokumentu — treść ta jest wysyłana

do przeglądarki użytkownika, która ją odczytuje i wyświetla, ale zazwyczaj nie zmienia

jej formy. Jednak czasem zachodzi potrzeba podjęcia pewnych decyzji, sprawdzenia po-

prawności formularzy, a także, w przypadku dynamicznego HTML-a (DHTML) — zmian

atrybutów dynamicznych obiektów. W tych przypadkach (a także w wielu innych) można

użyć skryptów uruchamianych po stronie klienta.

Więcej informacji na temat skryptów uruchamianych po stronie klienta znajdzieszw rozdziale 15.

Języki skryptów uruchamiane po stronie klienta, takie jak JavaScript, przekazują swój

kod do przeglądarki, umieszczając go wewnątrz dokumentu HTML. Zadaniem przeglą-

darki jest zinterpretowanie kodu i podjęcie odpowiednich czynności. Większość skryptów

uruchamianych po stronie klienta znajduje się w części �� dokumentu HTML, we-

wnątrz znaczników �+/)(-��, tak jak w poniższym przykładzie:

��

��$%*��+1)*�&(!'��%10"/1"+2�:1;1<(!'��*5/0(�' 0�'&(�'0) �=�8�8/!%>? ��&2��')��2�O�O�8�+'"��2�O�C ��&2 ��&O�8&(! %%B1!&20 8!+&'71B%+23+&�C5'02�'0) �� +0=/!%8��8 ��&>CD��&(!'��*��+1)*��

W większości przypadków dokument musi zawierać zdarzenia, które uruchomią skrypty.Zdarzenia te mogą być osadzone w elementach (poprzez atrybut &�*+�2�) lub po-dobne), powiązane z łączami, wywoływane za pomocą elementów formularza lub uru-

chamiane wraz z załadowaniem lub wyładowaniem dokumentu (poprzez atrybuty &��oraz &*&�� umieszczone w znaczniku �%��).

Istnieją metody umożliwiające automatyczne uruchamianie skryptów, czyli takie, którenie wymagają wystąpienia żadnego zdarzenia. Jednak nie zaleca się ich stosowania— dużo lepiej jest powiązać uruchomienie skryptu z jakimś zdarzeniem.

+��

Jak widzisz, standardowy dokument HTML jest dość skomplikowaną bestią. Jeśli jednakprzeanalizujesz kod fragment po fragmencie, okaże się, że w różnych dokumentach HTML

znajdziesz wiele wspólnych elementów. Oto listing HTML, który łączy te wszystkie ele-menty w jednym kodzie.

�� !"��#��$%��&�!'(��)�)�*��$%*��+1)*�$+�1...tutaj są umieszczone znaczniki meta...*��'�%+*�tutaj znajduje się tytuł strony (dokumentu)��'�%+*� ��M!+%2�&�3%+&�++��!+52�nazwa zewnętrznego arkusza stylów��3�+2��+4��(&&�*�&�3%+*... tutaj są umieszczone określone style...

��&�3%+*�&(!'��*... tutaj są umieszczone skrypty uruchamiane po stronie klienta...

��&(!'��*�B )3*...tutaj znajduje się treść zasadnicza dokumentu, akapity zmodyfikowane za pomocą elementów blokowych,

znaki, słowa i zdania zmodyfikowane przez elementy wstawiane...

��B )3*��$%*

Wszystkie dokumenty HTML powinny zawierać specyfikację � ��, znaczniki ��oraz �%��, a także przynajmniej tytuł ��(�� oraz część ��. Pozostałe elementysą opcjonalne, ale pomagają zdefiniować cel dokumentu, jego styl, a w rezultacie — jegoużyteczność, o czym przekonasz się podczas czytania kolejnych rozdziałów.

� ��

,��

Wiesz już, jakie podstawowe elementy składają się na dokument HTML. Ich ilość możena początku trochę przytłaczać, ale szybko nauczysz się, do czego służy każdy z nich

i jaki jest jego wpływ na pozostałe elementy w dokumencie. Dzięki temu będziesz wie-

dział, jak najlepiej wykorzystać poszczególne elementy, aby utworzyć dokument HTML

odpowiadający Twoim zamierzeniom. Kiedy będziesz znać już szczegółowe informacjena temat każdego z nich — znajdziesz je w kilku kolejnych rozdziałach — spróbuj dosto-

sować ich możliwości do własnych potrzeb.

Teraz powinieneś przeczytać rozdziały od 3. do 24., aby poszerzyć swoją wiedzę na te-mat różnych elementów HTML. Możesz również przejść do wybranych rozdziałów oma-

wiających te elementy, które Cię najbardziej interesują lub takie, które sprawiają Ci naj-

większe trudności. (Kieruj się odnośnikami zamieszczonymi w każdym punkcie tego

rozdziału, aby odnaleźć rozdział omawiający element, o którym chcesz się dowiedzieć

czegoś więcej).

HTML, XHTML i CSS. Biblia

Documents

Transcript of HTML, XHTML i CSS. Biblia