Projektowanie stron internetowych. Przewodnik dla początkujących ...
Transcript of Projektowanie stron internetowych. Przewodnik dla początkujących ...
bull Kup książkębull Poleć książkę bull Oceń książkę
bull Księgarnia internetowabull Lubię to raquo Nasza społeczność
Tytuł oryginału Learning Web Design A Beginnerrsquos Guide to HTML CSS JavaScript and Web Graphics
Tłumaczenie Aleksander Lamża (wstęp rozdz 1 ndash 11) Wojciech Moch (rozdz 12 ndash 22 dodatki)
z wykorzystaniem fragmentoacutew książki bdquoProjektowanie stron internetowych Przewodnik dla
początkujących webmasteroacutew po (X)HTML CSS i graficerdquo w tłumaczeniu Anny Trojan
ISBN 978-83-246-6667-6
copy 2014 Helion SA
Authorized Polish translation of the English edition Learning Web Design 4EISBN 9781449319274
copy 2012 Littlechair Inc
This translation is published and sold by permission of OrsquoReilly Media Inc
which owns or controls all rights to publish and sell the same
All rights reserved No part of this book may be reproduced or transmitted in any form or by any meanselectronic or mechanical including photocopying recording or by any information storage retrieval systemwithout permission from the Publisher
Wszelkie prawa zastrzeżone Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacjiw jakiejkolwiek postaci jest zabronione Wykonywanie kopii metodą kserograficzną fotograficzną a także kopiowanieksiążki na nośniku filmowym magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi
bądź towarowymi ich właścicieli
Wydawnictwo HELION dołożyło wszelkich starań by zawarte w tej książce
informacje były kompletne i rzetelne Nie bierze jednak żadnej odpowiedzialności
ani za ich wykorzystanie ani za związane z tym ewentualne naruszenie praw
patentowych lub autorskich Wydawnictwo HELION nie ponosi roacutewnież
żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania
informacji zawartych w książce
Wydawnictwo HELION
ul Kościuszki 1c 44-100 GLIWICE
tel 32 231 22 19 32 230 98 63
e-mail helionhelionplWWW httphelionpl (księgarnia internetowa katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem
ftpftphelionplprzykladyprsti2zipDrogi Czytelniku
Jeżeli chcesz ocenić tę książkę zajrzyj pod adres
httphelionpluseropinieprsti2Możesz tam wpisać swoje uwagi spostrzeżenia recenzję
Printed in Poland
iii
Spis treści
Przedmowa xi
Część I Podstawy
Rozdział 1Od czego zacząć 3
Od czego zacząć 4Czym się zajmuje projektant stron internetowych 4Jakich językoacutew muszę się nauczyć 11Co muszę kupić 14Czego się nauczyłeś 19Sprawdź się 20
Rozdział 2 Jak działa internet 21
Internet a Web 21Dostarczanie informacji 21Kilka słoacutew o przeglądarkach 23Adres strony internetowej (URL) 24Anatomia strony internetowej 26Składanie wszystkiego w całość 30Sprawdź się 32
Rozdział 3 Kilka ważnych spraw o ktoacuterych musisz wiedzieć 33
Od przybytku głowa boli 34Trzymanie się standardoacutew 36Stopniowe ulepszanie 36Technika Responsive Web Design 38
Kup książkę Poleć książkę
iv Spis treści
Web dla wszystkich czyli dostępność 41Need for Speed mdash liczy się szybkość 43Sprawdź się 45
Część II Znaczniki HTML i struktura dokumentu
Rozdział 4 Tworzenie prostej strony (przegląd języka HTML) 49
Strona internetowa krok po kroku 49Przed rozpoczęciem należy uruchomić edytor tekstu 50Krok 1 Zaczynamy od zawartości 53Krok 2 Nadajemy dokumentowi strukturę 55Krok 3 Oznaczamy elementy tekstowe 58Krok 4 Wstawiamy obrazek 61Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew 64Kiedy dobre strony nie działają dobrze 65Walidacja dokumentoacutew 66Sprawdź się 67Przegląd elementoacutew HTML tworzących strukturę dokumentu 68
Rozdział 5 Znaczniki tekstowe 69
Akapity 70Nagłoacutewki 70Listy 73Inne elementy stosowane do treści 76Struktura zawartości strony 79Przegląd elementoacutew liniowych 84Ogoacutelne elementy div oraz span 94Niektoacutere znaki specjalne 99Zestawienie wszystkiego razem 100Sprawdź się 102Przegląd elementoacutew tekstowych 104
Rozdział 6 Hiperłącza 105
Atrybut href 106Tworzenie odsyłaczy do stron internetowych 107Tworzenie odsyłaczy do stron z własnej witryny 108Otwieranie stron docelowych w nowym oknie przeglądarki 118Odsyłacze bdquopocztowerdquo 119
Kup książkę Poleć książkę
Spis treści v
Odsyłacze bdquotelefonicznerdquo 120Sprawdź się 120Przegląd elementoacutew mdash odsyłacze 122
Rozdział 7 Grafika 123
Kilka słoacutew o formatach obrazkoacutew 123Element img 124Okno w oknie 130Sprawdź się 131Przegląd elementoacutew mdash obrazki 132
Rozdział 8 Tabele 133
Jak używać tabel 133Podstawowa struktura tabeli 135Nagłoacutewki tabel 138Tworzenie zakresoacutew komoacuterek 139Dostępność tabel 142Podsumowanie zagadnień związanych z tabelami 144Sprawdź się 146Przegląd elementoacutew HTML mdash tabele 146
Rozdział 9 Formularze 147
Jak działają formularze 147Element form 149Zmienne oraz zawartość 151Wielkie podsumowanie kontrolek 152Dostępność formularzy 171Projekt i układ formularza 173Sprawdź się 175Formularze mdash przegląd elementoacutew 176
Rozdział 10 Co nowego w HTML5 181
Co się przydarzyło w drodze do XHTML 2 182W świecie znacznikoacutew 185Interfejsy API 189Elementy video i audio 192Element canvas 198
Kup książkę Poleć książkę
vi Spis treści
Podsumowanie 202Sprawdź się 203
Część III CSS i prezentacja dokumentu
Rozdział 11 Kaskadowe arkusze styloacutew 207
Zalety CSS-a 207Jak działają arkusze styloacutew 209Najważniejsze koncepcje 214Dalsza nauka CSS-a 221Sprawdź się 223
Rozdział 12 Formatowanie tekstu 225
Właściwości czcionek 225Zmiana koloru tekstu 243Więcej typoacutew selektoroacutew 244Zmiana stylu wiersza tekstu 249Podkreślenia oraz inne bdquodekoracjerdquo 252Zmiana wielkości liter 252Odstępy 253Cienie pod tekstem 254Zmiany wypunktowania i numeracji list 259Sprawdź się 261Przegląd CSS-a mdash właściwości dotyczące czcionki oraz tekstu 263
Rozdział 13 Kolory i tła 265
Określanie wartości koloru 265Kolor pierwszego planu 272Kolor tła 273Zabawy z przezroczystością 275Wprowadzenie do selektoroacutew pseudoklas 276Selektory pseudoelementoacutew 279Selektory atrybutoacutew 281Obrazki tła 284Skroacutetowa właściwość background 293Prawie tęcza (gradienty) 296I wreszcie mdash zewnętrzne arkusze styloacutew 300Sprawdź się 303Przegląd CSS-a mdash właściwości dotyczące koloru oraz tła 304
Kup książkę Poleć książkę
Spis treści vii
Rozdział 14 Model pojemnika 305
Pojemnik elementu 305Określanie wymiaroacutew zawartości elementu 306Dopełnienie 312Obramowanie 316Marginesy 328Przypisywanie roacutel wyświetlania 333Dodawanie cienia do elementoacutew 335Sprawdź się 336Przegląd CSS-a mdash podstawowe właściwości modelu pojemnika 338
Rozdział 15 Pływanie oraz pozycjonowanie 341
Normalny układ dokumentu 341Pływanie 342Podstawy pozycjonowania 356Pozycjonowanie względne 358Pozycjonowanie bezwzględne 359Pozycjonowanie sztywne 368Sprawdź się 370Przegląd CSS-a mdash właściwości dotyczące pływania i pozycjonowania 371
Rozdział 16 Układ strony i CSS 373
Strategie związane z układem strony 373Szablony stron internetowych 380Wielokolumnowe układy strony
z wykorzystaniem elementoacutew pływających 381Układ pozycjonowany 392Tła wypełniające kolumny od goacutery do dołu 395Sprawdź się 398
Rozdział 17 Przekształcenia transformacje i animacje 399
Przejścia CSS 399Transformacje CSS 410Animacja klatkowa 420Sprawdź się 423Przegląd właściwości CSS-a mdash przejścia transformacje i animacje 426
Kup książkę Poleć książkę
viii Spis treści
Rozdział 18 Techniki CSS 427
Czysta strona (zerowanie styloacutew CSS) 427Techniki zastępowania tekstu obrazkiem 429Technika CSS Sprites 430Nadawanie styloacutew formularzom 434Nadawanie styloacutew tabelom 441Podstawy techniki Responsive Web Design 444Podsumowanie arkuszy styloacutew 454Sprawdź się 454Przegląd CSS-a mdash właściwości dotyczące tabel oraz list 456
Część IV JavaScript
Rozdział 19 Wprowadzenie do JavaScriptu 459
Czym jest JavaScript 459Dodawanie skryptoacutew na stronę 463Anatomia skryptu 463Obiekt przeglądarki 478Zdarzenia 478Podsumowanie 481Sprawdź się 483
Rozdział 20 Korzystanie z JavaScriptu 485
Poznaj model DOM 485Wypełniacze 493Javascriptowe biblioteki 497Wielkie zakończenie 501Sprawdź się 502
Część V Tworzenie grafiki stron internetowych
Rozdział 21 Podstawy grafiki stron internetowych 507
Źroacutedła obrazkoacutew 507Poznaj formaty grafiki 510Rozmiar oraz rozdzielczość obrazka 522Praca z przezroczystością 526
Kup książkę Poleć książkę
Spis treści ix
Wprowadzenie do formatu SVG 533Podsumowanie informacji dotyczących grafiki stron internetowych 538Sprawdź się 539
Rozdział 22 Optymalizacja grafiki stron internetowych 541
Uniwersalne strategie optymalizacyjne 542Optymalizacja plikoacutew GIF 543Optymalizacja plikoacutew JPEG 547Optymalizacja plikoacutew PNG 552Optymalizacja pod kątem docelowego rozmiaru 553Przegląd optymalizacji 554Sprawdź się 555
Dodatek A Odpowiedzi do ćwiczeń 557
Dodatek B Selektory CSS3 583
Skorowidz 587
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
iii
Spis treści
Przedmowa xi
Część I Podstawy
Rozdział 1Od czego zacząć 3
Od czego zacząć 4Czym się zajmuje projektant stron internetowych 4Jakich językoacutew muszę się nauczyć 11Co muszę kupić 14Czego się nauczyłeś 19Sprawdź się 20
Rozdział 2 Jak działa internet 21
Internet a Web 21Dostarczanie informacji 21Kilka słoacutew o przeglądarkach 23Adres strony internetowej (URL) 24Anatomia strony internetowej 26Składanie wszystkiego w całość 30Sprawdź się 32
Rozdział 3 Kilka ważnych spraw o ktoacuterych musisz wiedzieć 33
Od przybytku głowa boli 34Trzymanie się standardoacutew 36Stopniowe ulepszanie 36Technika Responsive Web Design 38
Kup książkę Poleć książkę
iv Spis treści
Web dla wszystkich czyli dostępność 41Need for Speed mdash liczy się szybkość 43Sprawdź się 45
Część II Znaczniki HTML i struktura dokumentu
Rozdział 4 Tworzenie prostej strony (przegląd języka HTML) 49
Strona internetowa krok po kroku 49Przed rozpoczęciem należy uruchomić edytor tekstu 50Krok 1 Zaczynamy od zawartości 53Krok 2 Nadajemy dokumentowi strukturę 55Krok 3 Oznaczamy elementy tekstowe 58Krok 4 Wstawiamy obrazek 61Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew 64Kiedy dobre strony nie działają dobrze 65Walidacja dokumentoacutew 66Sprawdź się 67Przegląd elementoacutew HTML tworzących strukturę dokumentu 68
Rozdział 5 Znaczniki tekstowe 69
Akapity 70Nagłoacutewki 70Listy 73Inne elementy stosowane do treści 76Struktura zawartości strony 79Przegląd elementoacutew liniowych 84Ogoacutelne elementy div oraz span 94Niektoacutere znaki specjalne 99Zestawienie wszystkiego razem 100Sprawdź się 102Przegląd elementoacutew tekstowych 104
Rozdział 6 Hiperłącza 105
Atrybut href 106Tworzenie odsyłaczy do stron internetowych 107Tworzenie odsyłaczy do stron z własnej witryny 108Otwieranie stron docelowych w nowym oknie przeglądarki 118Odsyłacze bdquopocztowerdquo 119
Kup książkę Poleć książkę
Spis treści v
Odsyłacze bdquotelefonicznerdquo 120Sprawdź się 120Przegląd elementoacutew mdash odsyłacze 122
Rozdział 7 Grafika 123
Kilka słoacutew o formatach obrazkoacutew 123Element img 124Okno w oknie 130Sprawdź się 131Przegląd elementoacutew mdash obrazki 132
Rozdział 8 Tabele 133
Jak używać tabel 133Podstawowa struktura tabeli 135Nagłoacutewki tabel 138Tworzenie zakresoacutew komoacuterek 139Dostępność tabel 142Podsumowanie zagadnień związanych z tabelami 144Sprawdź się 146Przegląd elementoacutew HTML mdash tabele 146
Rozdział 9 Formularze 147
Jak działają formularze 147Element form 149Zmienne oraz zawartość 151Wielkie podsumowanie kontrolek 152Dostępność formularzy 171Projekt i układ formularza 173Sprawdź się 175Formularze mdash przegląd elementoacutew 176
Rozdział 10 Co nowego w HTML5 181
Co się przydarzyło w drodze do XHTML 2 182W świecie znacznikoacutew 185Interfejsy API 189Elementy video i audio 192Element canvas 198
Kup książkę Poleć książkę
vi Spis treści
Podsumowanie 202Sprawdź się 203
Część III CSS i prezentacja dokumentu
Rozdział 11 Kaskadowe arkusze styloacutew 207
Zalety CSS-a 207Jak działają arkusze styloacutew 209Najważniejsze koncepcje 214Dalsza nauka CSS-a 221Sprawdź się 223
Rozdział 12 Formatowanie tekstu 225
Właściwości czcionek 225Zmiana koloru tekstu 243Więcej typoacutew selektoroacutew 244Zmiana stylu wiersza tekstu 249Podkreślenia oraz inne bdquodekoracjerdquo 252Zmiana wielkości liter 252Odstępy 253Cienie pod tekstem 254Zmiany wypunktowania i numeracji list 259Sprawdź się 261Przegląd CSS-a mdash właściwości dotyczące czcionki oraz tekstu 263
Rozdział 13 Kolory i tła 265
Określanie wartości koloru 265Kolor pierwszego planu 272Kolor tła 273Zabawy z przezroczystością 275Wprowadzenie do selektoroacutew pseudoklas 276Selektory pseudoelementoacutew 279Selektory atrybutoacutew 281Obrazki tła 284Skroacutetowa właściwość background 293Prawie tęcza (gradienty) 296I wreszcie mdash zewnętrzne arkusze styloacutew 300Sprawdź się 303Przegląd CSS-a mdash właściwości dotyczące koloru oraz tła 304
Kup książkę Poleć książkę
Spis treści vii
Rozdział 14 Model pojemnika 305
Pojemnik elementu 305Określanie wymiaroacutew zawartości elementu 306Dopełnienie 312Obramowanie 316Marginesy 328Przypisywanie roacutel wyświetlania 333Dodawanie cienia do elementoacutew 335Sprawdź się 336Przegląd CSS-a mdash podstawowe właściwości modelu pojemnika 338
Rozdział 15 Pływanie oraz pozycjonowanie 341
Normalny układ dokumentu 341Pływanie 342Podstawy pozycjonowania 356Pozycjonowanie względne 358Pozycjonowanie bezwzględne 359Pozycjonowanie sztywne 368Sprawdź się 370Przegląd CSS-a mdash właściwości dotyczące pływania i pozycjonowania 371
Rozdział 16 Układ strony i CSS 373
Strategie związane z układem strony 373Szablony stron internetowych 380Wielokolumnowe układy strony
z wykorzystaniem elementoacutew pływających 381Układ pozycjonowany 392Tła wypełniające kolumny od goacutery do dołu 395Sprawdź się 398
Rozdział 17 Przekształcenia transformacje i animacje 399
Przejścia CSS 399Transformacje CSS 410Animacja klatkowa 420Sprawdź się 423Przegląd właściwości CSS-a mdash przejścia transformacje i animacje 426
Kup książkę Poleć książkę
viii Spis treści
Rozdział 18 Techniki CSS 427
Czysta strona (zerowanie styloacutew CSS) 427Techniki zastępowania tekstu obrazkiem 429Technika CSS Sprites 430Nadawanie styloacutew formularzom 434Nadawanie styloacutew tabelom 441Podstawy techniki Responsive Web Design 444Podsumowanie arkuszy styloacutew 454Sprawdź się 454Przegląd CSS-a mdash właściwości dotyczące tabel oraz list 456
Część IV JavaScript
Rozdział 19 Wprowadzenie do JavaScriptu 459
Czym jest JavaScript 459Dodawanie skryptoacutew na stronę 463Anatomia skryptu 463Obiekt przeglądarki 478Zdarzenia 478Podsumowanie 481Sprawdź się 483
Rozdział 20 Korzystanie z JavaScriptu 485
Poznaj model DOM 485Wypełniacze 493Javascriptowe biblioteki 497Wielkie zakończenie 501Sprawdź się 502
Część V Tworzenie grafiki stron internetowych
Rozdział 21 Podstawy grafiki stron internetowych 507
Źroacutedła obrazkoacutew 507Poznaj formaty grafiki 510Rozmiar oraz rozdzielczość obrazka 522Praca z przezroczystością 526
Kup książkę Poleć książkę
Spis treści ix
Wprowadzenie do formatu SVG 533Podsumowanie informacji dotyczących grafiki stron internetowych 538Sprawdź się 539
Rozdział 22 Optymalizacja grafiki stron internetowych 541
Uniwersalne strategie optymalizacyjne 542Optymalizacja plikoacutew GIF 543Optymalizacja plikoacutew JPEG 547Optymalizacja plikoacutew PNG 552Optymalizacja pod kątem docelowego rozmiaru 553Przegląd optymalizacji 554Sprawdź się 555
Dodatek A Odpowiedzi do ćwiczeń 557
Dodatek B Selektory CSS3 583
Skorowidz 587
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
iv Spis treści
Web dla wszystkich czyli dostępność 41Need for Speed mdash liczy się szybkość 43Sprawdź się 45
Część II Znaczniki HTML i struktura dokumentu
Rozdział 4 Tworzenie prostej strony (przegląd języka HTML) 49
Strona internetowa krok po kroku 49Przed rozpoczęciem należy uruchomić edytor tekstu 50Krok 1 Zaczynamy od zawartości 53Krok 2 Nadajemy dokumentowi strukturę 55Krok 3 Oznaczamy elementy tekstowe 58Krok 4 Wstawiamy obrazek 61Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew 64Kiedy dobre strony nie działają dobrze 65Walidacja dokumentoacutew 66Sprawdź się 67Przegląd elementoacutew HTML tworzących strukturę dokumentu 68
Rozdział 5 Znaczniki tekstowe 69
Akapity 70Nagłoacutewki 70Listy 73Inne elementy stosowane do treści 76Struktura zawartości strony 79Przegląd elementoacutew liniowych 84Ogoacutelne elementy div oraz span 94Niektoacutere znaki specjalne 99Zestawienie wszystkiego razem 100Sprawdź się 102Przegląd elementoacutew tekstowych 104
Rozdział 6 Hiperłącza 105
Atrybut href 106Tworzenie odsyłaczy do stron internetowych 107Tworzenie odsyłaczy do stron z własnej witryny 108Otwieranie stron docelowych w nowym oknie przeglądarki 118Odsyłacze bdquopocztowerdquo 119
Kup książkę Poleć książkę
Spis treści v
Odsyłacze bdquotelefonicznerdquo 120Sprawdź się 120Przegląd elementoacutew mdash odsyłacze 122
Rozdział 7 Grafika 123
Kilka słoacutew o formatach obrazkoacutew 123Element img 124Okno w oknie 130Sprawdź się 131Przegląd elementoacutew mdash obrazki 132
Rozdział 8 Tabele 133
Jak używać tabel 133Podstawowa struktura tabeli 135Nagłoacutewki tabel 138Tworzenie zakresoacutew komoacuterek 139Dostępność tabel 142Podsumowanie zagadnień związanych z tabelami 144Sprawdź się 146Przegląd elementoacutew HTML mdash tabele 146
Rozdział 9 Formularze 147
Jak działają formularze 147Element form 149Zmienne oraz zawartość 151Wielkie podsumowanie kontrolek 152Dostępność formularzy 171Projekt i układ formularza 173Sprawdź się 175Formularze mdash przegląd elementoacutew 176
Rozdział 10 Co nowego w HTML5 181
Co się przydarzyło w drodze do XHTML 2 182W świecie znacznikoacutew 185Interfejsy API 189Elementy video i audio 192Element canvas 198
Kup książkę Poleć książkę
vi Spis treści
Podsumowanie 202Sprawdź się 203
Część III CSS i prezentacja dokumentu
Rozdział 11 Kaskadowe arkusze styloacutew 207
Zalety CSS-a 207Jak działają arkusze styloacutew 209Najważniejsze koncepcje 214Dalsza nauka CSS-a 221Sprawdź się 223
Rozdział 12 Formatowanie tekstu 225
Właściwości czcionek 225Zmiana koloru tekstu 243Więcej typoacutew selektoroacutew 244Zmiana stylu wiersza tekstu 249Podkreślenia oraz inne bdquodekoracjerdquo 252Zmiana wielkości liter 252Odstępy 253Cienie pod tekstem 254Zmiany wypunktowania i numeracji list 259Sprawdź się 261Przegląd CSS-a mdash właściwości dotyczące czcionki oraz tekstu 263
Rozdział 13 Kolory i tła 265
Określanie wartości koloru 265Kolor pierwszego planu 272Kolor tła 273Zabawy z przezroczystością 275Wprowadzenie do selektoroacutew pseudoklas 276Selektory pseudoelementoacutew 279Selektory atrybutoacutew 281Obrazki tła 284Skroacutetowa właściwość background 293Prawie tęcza (gradienty) 296I wreszcie mdash zewnętrzne arkusze styloacutew 300Sprawdź się 303Przegląd CSS-a mdash właściwości dotyczące koloru oraz tła 304
Kup książkę Poleć książkę
Spis treści vii
Rozdział 14 Model pojemnika 305
Pojemnik elementu 305Określanie wymiaroacutew zawartości elementu 306Dopełnienie 312Obramowanie 316Marginesy 328Przypisywanie roacutel wyświetlania 333Dodawanie cienia do elementoacutew 335Sprawdź się 336Przegląd CSS-a mdash podstawowe właściwości modelu pojemnika 338
Rozdział 15 Pływanie oraz pozycjonowanie 341
Normalny układ dokumentu 341Pływanie 342Podstawy pozycjonowania 356Pozycjonowanie względne 358Pozycjonowanie bezwzględne 359Pozycjonowanie sztywne 368Sprawdź się 370Przegląd CSS-a mdash właściwości dotyczące pływania i pozycjonowania 371
Rozdział 16 Układ strony i CSS 373
Strategie związane z układem strony 373Szablony stron internetowych 380Wielokolumnowe układy strony
z wykorzystaniem elementoacutew pływających 381Układ pozycjonowany 392Tła wypełniające kolumny od goacutery do dołu 395Sprawdź się 398
Rozdział 17 Przekształcenia transformacje i animacje 399
Przejścia CSS 399Transformacje CSS 410Animacja klatkowa 420Sprawdź się 423Przegląd właściwości CSS-a mdash przejścia transformacje i animacje 426
Kup książkę Poleć książkę
viii Spis treści
Rozdział 18 Techniki CSS 427
Czysta strona (zerowanie styloacutew CSS) 427Techniki zastępowania tekstu obrazkiem 429Technika CSS Sprites 430Nadawanie styloacutew formularzom 434Nadawanie styloacutew tabelom 441Podstawy techniki Responsive Web Design 444Podsumowanie arkuszy styloacutew 454Sprawdź się 454Przegląd CSS-a mdash właściwości dotyczące tabel oraz list 456
Część IV JavaScript
Rozdział 19 Wprowadzenie do JavaScriptu 459
Czym jest JavaScript 459Dodawanie skryptoacutew na stronę 463Anatomia skryptu 463Obiekt przeglądarki 478Zdarzenia 478Podsumowanie 481Sprawdź się 483
Rozdział 20 Korzystanie z JavaScriptu 485
Poznaj model DOM 485Wypełniacze 493Javascriptowe biblioteki 497Wielkie zakończenie 501Sprawdź się 502
Część V Tworzenie grafiki stron internetowych
Rozdział 21 Podstawy grafiki stron internetowych 507
Źroacutedła obrazkoacutew 507Poznaj formaty grafiki 510Rozmiar oraz rozdzielczość obrazka 522Praca z przezroczystością 526
Kup książkę Poleć książkę
Spis treści ix
Wprowadzenie do formatu SVG 533Podsumowanie informacji dotyczących grafiki stron internetowych 538Sprawdź się 539
Rozdział 22 Optymalizacja grafiki stron internetowych 541
Uniwersalne strategie optymalizacyjne 542Optymalizacja plikoacutew GIF 543Optymalizacja plikoacutew JPEG 547Optymalizacja plikoacutew PNG 552Optymalizacja pod kątem docelowego rozmiaru 553Przegląd optymalizacji 554Sprawdź się 555
Dodatek A Odpowiedzi do ćwiczeń 557
Dodatek B Selektory CSS3 583
Skorowidz 587
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Spis treści v
Odsyłacze bdquotelefonicznerdquo 120Sprawdź się 120Przegląd elementoacutew mdash odsyłacze 122
Rozdział 7 Grafika 123
Kilka słoacutew o formatach obrazkoacutew 123Element img 124Okno w oknie 130Sprawdź się 131Przegląd elementoacutew mdash obrazki 132
Rozdział 8 Tabele 133
Jak używać tabel 133Podstawowa struktura tabeli 135Nagłoacutewki tabel 138Tworzenie zakresoacutew komoacuterek 139Dostępność tabel 142Podsumowanie zagadnień związanych z tabelami 144Sprawdź się 146Przegląd elementoacutew HTML mdash tabele 146
Rozdział 9 Formularze 147
Jak działają formularze 147Element form 149Zmienne oraz zawartość 151Wielkie podsumowanie kontrolek 152Dostępność formularzy 171Projekt i układ formularza 173Sprawdź się 175Formularze mdash przegląd elementoacutew 176
Rozdział 10 Co nowego w HTML5 181
Co się przydarzyło w drodze do XHTML 2 182W świecie znacznikoacutew 185Interfejsy API 189Elementy video i audio 192Element canvas 198
Kup książkę Poleć książkę
vi Spis treści
Podsumowanie 202Sprawdź się 203
Część III CSS i prezentacja dokumentu
Rozdział 11 Kaskadowe arkusze styloacutew 207
Zalety CSS-a 207Jak działają arkusze styloacutew 209Najważniejsze koncepcje 214Dalsza nauka CSS-a 221Sprawdź się 223
Rozdział 12 Formatowanie tekstu 225
Właściwości czcionek 225Zmiana koloru tekstu 243Więcej typoacutew selektoroacutew 244Zmiana stylu wiersza tekstu 249Podkreślenia oraz inne bdquodekoracjerdquo 252Zmiana wielkości liter 252Odstępy 253Cienie pod tekstem 254Zmiany wypunktowania i numeracji list 259Sprawdź się 261Przegląd CSS-a mdash właściwości dotyczące czcionki oraz tekstu 263
Rozdział 13 Kolory i tła 265
Określanie wartości koloru 265Kolor pierwszego planu 272Kolor tła 273Zabawy z przezroczystością 275Wprowadzenie do selektoroacutew pseudoklas 276Selektory pseudoelementoacutew 279Selektory atrybutoacutew 281Obrazki tła 284Skroacutetowa właściwość background 293Prawie tęcza (gradienty) 296I wreszcie mdash zewnętrzne arkusze styloacutew 300Sprawdź się 303Przegląd CSS-a mdash właściwości dotyczące koloru oraz tła 304
Kup książkę Poleć książkę
Spis treści vii
Rozdział 14 Model pojemnika 305
Pojemnik elementu 305Określanie wymiaroacutew zawartości elementu 306Dopełnienie 312Obramowanie 316Marginesy 328Przypisywanie roacutel wyświetlania 333Dodawanie cienia do elementoacutew 335Sprawdź się 336Przegląd CSS-a mdash podstawowe właściwości modelu pojemnika 338
Rozdział 15 Pływanie oraz pozycjonowanie 341
Normalny układ dokumentu 341Pływanie 342Podstawy pozycjonowania 356Pozycjonowanie względne 358Pozycjonowanie bezwzględne 359Pozycjonowanie sztywne 368Sprawdź się 370Przegląd CSS-a mdash właściwości dotyczące pływania i pozycjonowania 371
Rozdział 16 Układ strony i CSS 373
Strategie związane z układem strony 373Szablony stron internetowych 380Wielokolumnowe układy strony
z wykorzystaniem elementoacutew pływających 381Układ pozycjonowany 392Tła wypełniające kolumny od goacutery do dołu 395Sprawdź się 398
Rozdział 17 Przekształcenia transformacje i animacje 399
Przejścia CSS 399Transformacje CSS 410Animacja klatkowa 420Sprawdź się 423Przegląd właściwości CSS-a mdash przejścia transformacje i animacje 426
Kup książkę Poleć książkę
viii Spis treści
Rozdział 18 Techniki CSS 427
Czysta strona (zerowanie styloacutew CSS) 427Techniki zastępowania tekstu obrazkiem 429Technika CSS Sprites 430Nadawanie styloacutew formularzom 434Nadawanie styloacutew tabelom 441Podstawy techniki Responsive Web Design 444Podsumowanie arkuszy styloacutew 454Sprawdź się 454Przegląd CSS-a mdash właściwości dotyczące tabel oraz list 456
Część IV JavaScript
Rozdział 19 Wprowadzenie do JavaScriptu 459
Czym jest JavaScript 459Dodawanie skryptoacutew na stronę 463Anatomia skryptu 463Obiekt przeglądarki 478Zdarzenia 478Podsumowanie 481Sprawdź się 483
Rozdział 20 Korzystanie z JavaScriptu 485
Poznaj model DOM 485Wypełniacze 493Javascriptowe biblioteki 497Wielkie zakończenie 501Sprawdź się 502
Część V Tworzenie grafiki stron internetowych
Rozdział 21 Podstawy grafiki stron internetowych 507
Źroacutedła obrazkoacutew 507Poznaj formaty grafiki 510Rozmiar oraz rozdzielczość obrazka 522Praca z przezroczystością 526
Kup książkę Poleć książkę
Spis treści ix
Wprowadzenie do formatu SVG 533Podsumowanie informacji dotyczących grafiki stron internetowych 538Sprawdź się 539
Rozdział 22 Optymalizacja grafiki stron internetowych 541
Uniwersalne strategie optymalizacyjne 542Optymalizacja plikoacutew GIF 543Optymalizacja plikoacutew JPEG 547Optymalizacja plikoacutew PNG 552Optymalizacja pod kątem docelowego rozmiaru 553Przegląd optymalizacji 554Sprawdź się 555
Dodatek A Odpowiedzi do ćwiczeń 557
Dodatek B Selektory CSS3 583
Skorowidz 587
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
vi Spis treści
Podsumowanie 202Sprawdź się 203
Część III CSS i prezentacja dokumentu
Rozdział 11 Kaskadowe arkusze styloacutew 207
Zalety CSS-a 207Jak działają arkusze styloacutew 209Najważniejsze koncepcje 214Dalsza nauka CSS-a 221Sprawdź się 223
Rozdział 12 Formatowanie tekstu 225
Właściwości czcionek 225Zmiana koloru tekstu 243Więcej typoacutew selektoroacutew 244Zmiana stylu wiersza tekstu 249Podkreślenia oraz inne bdquodekoracjerdquo 252Zmiana wielkości liter 252Odstępy 253Cienie pod tekstem 254Zmiany wypunktowania i numeracji list 259Sprawdź się 261Przegląd CSS-a mdash właściwości dotyczące czcionki oraz tekstu 263
Rozdział 13 Kolory i tła 265
Określanie wartości koloru 265Kolor pierwszego planu 272Kolor tła 273Zabawy z przezroczystością 275Wprowadzenie do selektoroacutew pseudoklas 276Selektory pseudoelementoacutew 279Selektory atrybutoacutew 281Obrazki tła 284Skroacutetowa właściwość background 293Prawie tęcza (gradienty) 296I wreszcie mdash zewnętrzne arkusze styloacutew 300Sprawdź się 303Przegląd CSS-a mdash właściwości dotyczące koloru oraz tła 304
Kup książkę Poleć książkę
Spis treści vii
Rozdział 14 Model pojemnika 305
Pojemnik elementu 305Określanie wymiaroacutew zawartości elementu 306Dopełnienie 312Obramowanie 316Marginesy 328Przypisywanie roacutel wyświetlania 333Dodawanie cienia do elementoacutew 335Sprawdź się 336Przegląd CSS-a mdash podstawowe właściwości modelu pojemnika 338
Rozdział 15 Pływanie oraz pozycjonowanie 341
Normalny układ dokumentu 341Pływanie 342Podstawy pozycjonowania 356Pozycjonowanie względne 358Pozycjonowanie bezwzględne 359Pozycjonowanie sztywne 368Sprawdź się 370Przegląd CSS-a mdash właściwości dotyczące pływania i pozycjonowania 371
Rozdział 16 Układ strony i CSS 373
Strategie związane z układem strony 373Szablony stron internetowych 380Wielokolumnowe układy strony
z wykorzystaniem elementoacutew pływających 381Układ pozycjonowany 392Tła wypełniające kolumny od goacutery do dołu 395Sprawdź się 398
Rozdział 17 Przekształcenia transformacje i animacje 399
Przejścia CSS 399Transformacje CSS 410Animacja klatkowa 420Sprawdź się 423Przegląd właściwości CSS-a mdash przejścia transformacje i animacje 426
Kup książkę Poleć książkę
viii Spis treści
Rozdział 18 Techniki CSS 427
Czysta strona (zerowanie styloacutew CSS) 427Techniki zastępowania tekstu obrazkiem 429Technika CSS Sprites 430Nadawanie styloacutew formularzom 434Nadawanie styloacutew tabelom 441Podstawy techniki Responsive Web Design 444Podsumowanie arkuszy styloacutew 454Sprawdź się 454Przegląd CSS-a mdash właściwości dotyczące tabel oraz list 456
Część IV JavaScript
Rozdział 19 Wprowadzenie do JavaScriptu 459
Czym jest JavaScript 459Dodawanie skryptoacutew na stronę 463Anatomia skryptu 463Obiekt przeglądarki 478Zdarzenia 478Podsumowanie 481Sprawdź się 483
Rozdział 20 Korzystanie z JavaScriptu 485
Poznaj model DOM 485Wypełniacze 493Javascriptowe biblioteki 497Wielkie zakończenie 501Sprawdź się 502
Część V Tworzenie grafiki stron internetowych
Rozdział 21 Podstawy grafiki stron internetowych 507
Źroacutedła obrazkoacutew 507Poznaj formaty grafiki 510Rozmiar oraz rozdzielczość obrazka 522Praca z przezroczystością 526
Kup książkę Poleć książkę
Spis treści ix
Wprowadzenie do formatu SVG 533Podsumowanie informacji dotyczących grafiki stron internetowych 538Sprawdź się 539
Rozdział 22 Optymalizacja grafiki stron internetowych 541
Uniwersalne strategie optymalizacyjne 542Optymalizacja plikoacutew GIF 543Optymalizacja plikoacutew JPEG 547Optymalizacja plikoacutew PNG 552Optymalizacja pod kątem docelowego rozmiaru 553Przegląd optymalizacji 554Sprawdź się 555
Dodatek A Odpowiedzi do ćwiczeń 557
Dodatek B Selektory CSS3 583
Skorowidz 587
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Spis treści vii
Rozdział 14 Model pojemnika 305
Pojemnik elementu 305Określanie wymiaroacutew zawartości elementu 306Dopełnienie 312Obramowanie 316Marginesy 328Przypisywanie roacutel wyświetlania 333Dodawanie cienia do elementoacutew 335Sprawdź się 336Przegląd CSS-a mdash podstawowe właściwości modelu pojemnika 338
Rozdział 15 Pływanie oraz pozycjonowanie 341
Normalny układ dokumentu 341Pływanie 342Podstawy pozycjonowania 356Pozycjonowanie względne 358Pozycjonowanie bezwzględne 359Pozycjonowanie sztywne 368Sprawdź się 370Przegląd CSS-a mdash właściwości dotyczące pływania i pozycjonowania 371
Rozdział 16 Układ strony i CSS 373
Strategie związane z układem strony 373Szablony stron internetowych 380Wielokolumnowe układy strony
z wykorzystaniem elementoacutew pływających 381Układ pozycjonowany 392Tła wypełniające kolumny od goacutery do dołu 395Sprawdź się 398
Rozdział 17 Przekształcenia transformacje i animacje 399
Przejścia CSS 399Transformacje CSS 410Animacja klatkowa 420Sprawdź się 423Przegląd właściwości CSS-a mdash przejścia transformacje i animacje 426
Kup książkę Poleć książkę
viii Spis treści
Rozdział 18 Techniki CSS 427
Czysta strona (zerowanie styloacutew CSS) 427Techniki zastępowania tekstu obrazkiem 429Technika CSS Sprites 430Nadawanie styloacutew formularzom 434Nadawanie styloacutew tabelom 441Podstawy techniki Responsive Web Design 444Podsumowanie arkuszy styloacutew 454Sprawdź się 454Przegląd CSS-a mdash właściwości dotyczące tabel oraz list 456
Część IV JavaScript
Rozdział 19 Wprowadzenie do JavaScriptu 459
Czym jest JavaScript 459Dodawanie skryptoacutew na stronę 463Anatomia skryptu 463Obiekt przeglądarki 478Zdarzenia 478Podsumowanie 481Sprawdź się 483
Rozdział 20 Korzystanie z JavaScriptu 485
Poznaj model DOM 485Wypełniacze 493Javascriptowe biblioteki 497Wielkie zakończenie 501Sprawdź się 502
Część V Tworzenie grafiki stron internetowych
Rozdział 21 Podstawy grafiki stron internetowych 507
Źroacutedła obrazkoacutew 507Poznaj formaty grafiki 510Rozmiar oraz rozdzielczość obrazka 522Praca z przezroczystością 526
Kup książkę Poleć książkę
Spis treści ix
Wprowadzenie do formatu SVG 533Podsumowanie informacji dotyczących grafiki stron internetowych 538Sprawdź się 539
Rozdział 22 Optymalizacja grafiki stron internetowych 541
Uniwersalne strategie optymalizacyjne 542Optymalizacja plikoacutew GIF 543Optymalizacja plikoacutew JPEG 547Optymalizacja plikoacutew PNG 552Optymalizacja pod kątem docelowego rozmiaru 553Przegląd optymalizacji 554Sprawdź się 555
Dodatek A Odpowiedzi do ćwiczeń 557
Dodatek B Selektory CSS3 583
Skorowidz 587
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
viii Spis treści
Rozdział 18 Techniki CSS 427
Czysta strona (zerowanie styloacutew CSS) 427Techniki zastępowania tekstu obrazkiem 429Technika CSS Sprites 430Nadawanie styloacutew formularzom 434Nadawanie styloacutew tabelom 441Podstawy techniki Responsive Web Design 444Podsumowanie arkuszy styloacutew 454Sprawdź się 454Przegląd CSS-a mdash właściwości dotyczące tabel oraz list 456
Część IV JavaScript
Rozdział 19 Wprowadzenie do JavaScriptu 459
Czym jest JavaScript 459Dodawanie skryptoacutew na stronę 463Anatomia skryptu 463Obiekt przeglądarki 478Zdarzenia 478Podsumowanie 481Sprawdź się 483
Rozdział 20 Korzystanie z JavaScriptu 485
Poznaj model DOM 485Wypełniacze 493Javascriptowe biblioteki 497Wielkie zakończenie 501Sprawdź się 502
Część V Tworzenie grafiki stron internetowych
Rozdział 21 Podstawy grafiki stron internetowych 507
Źroacutedła obrazkoacutew 507Poznaj formaty grafiki 510Rozmiar oraz rozdzielczość obrazka 522Praca z przezroczystością 526
Kup książkę Poleć książkę
Spis treści ix
Wprowadzenie do formatu SVG 533Podsumowanie informacji dotyczących grafiki stron internetowych 538Sprawdź się 539
Rozdział 22 Optymalizacja grafiki stron internetowych 541
Uniwersalne strategie optymalizacyjne 542Optymalizacja plikoacutew GIF 543Optymalizacja plikoacutew JPEG 547Optymalizacja plikoacutew PNG 552Optymalizacja pod kątem docelowego rozmiaru 553Przegląd optymalizacji 554Sprawdź się 555
Dodatek A Odpowiedzi do ćwiczeń 557
Dodatek B Selektory CSS3 583
Skorowidz 587
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Spis treści ix
Wprowadzenie do formatu SVG 533Podsumowanie informacji dotyczących grafiki stron internetowych 538Sprawdź się 539
Rozdział 22 Optymalizacja grafiki stron internetowych 541
Uniwersalne strategie optymalizacyjne 542Optymalizacja plikoacutew GIF 543Optymalizacja plikoacutew JPEG 547Optymalizacja plikoacutew PNG 552Optymalizacja pod kątem docelowego rozmiaru 553Przegląd optymalizacji 554Sprawdź się 555
Dodatek A Odpowiedzi do ćwiczeń 557
Dodatek B Selektory CSS3 583
Skorowidz 587
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
49
W TYM ROZDZIALE
Wprowadzenie do elementoacutew oraz atrybutoacutew
Wstawianie znacznikoacutew w prostym dokumencie
Elementy tworzące strukturę dokumentu
Prosty arkusz styloacutew
Rozwiązywanie problemoacutew z niedziałającymi stronami internetowymi
ROZDZIAŁ 4Tworzenie prostej strony
W pierwszej części książki został przedstawiony ogoacutelny przegląd środowiska pracy pro-jektantoacutew stron internetowych Po tym wprowadzeniu czas zakasać rękawy i przejść do tworzenia prawdziwej strony internetowej Będzie ona prosta jednak nawet najbardziej skomplikowane strony są oparte na opisanych tu zasadach
W tym rozdziale utworzymy prostą stronę internetową byś moacutegł się przekonać jak w praktyce stosuje się znaczniki HTML Przedstawione ćwiczenia pozwolą na dalszą samodzielną pracę
Dzięki lekturze tego rozdziałubull zrozumiesz jak działają znaczniki HTML w tym elementy oraz atrybutybull zobaczysz w jaki sposoacuteb przeglądarki interpretują dokumenty HTMLbull poznasz podstawową strukturę dokumentu HTMLbull przyjrzysz się arkuszom styloacutew
Na razie nie musisz się przejmować nauką poszczegoacutelnych elementoacutew czy reguł arkuszy styloacutew będzie na to czas w kolejnych rozdziałach Na razie przyjrzyj się samemu procesowi ogoacutelnej strukturze dokumentu oraz nowej terminologii
Strona internetowa krok po krokuJuż w rozdziale 2 bdquoJak działa internetrdquo mogłeś się przyjrzeć dokumentowi HTML Teraz jednak dokument ten utworzysz samodzielnie i będziesz się nim bawić w przeglą-darce Cały proces został podzielony na pięć etapoacutew ilustrujących podstawy tworzenia strony internetowej
Krok 1 Zaczynamy od zawartości Zaczniemy od wpisania do dokumentu zwykłego tekstu i sprawdzimy co z nim zrobi przeglądarka
Krok 2 Nadajemy dokumentowi strukturę Zapoznamy się ze składnią elementoacutew HTML oraz sposobem nadawania dokumentowi struktury
Krok 3 Oznaczamy elementy tekstowe Treść strony zostanie opisana za pomocą od-powiednich elementoacutew tekstowych Przy okazji dowiesz się jak poprawnie używać HTML -a
Krok 4 Wstawiamy obrazki Dodając obrazek do strony poznasz atrybuty oraz puste elementy
(przegląd języka HTML)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
50
Krok 5 Zmieniamy wygląd strony za pomocą arkusza styloacutew Dzięki temu ćwiczeniu dowiesz się jak sformatować treść strony z wykorzystaniem kaskadowych arkuszy styloacutew (CSS)
Pod koniec rozdziału będziesz miał gotowy dokument źroacutedłowy strony przed-stawionej na rysunku 41 Nie jest ona jakoś szczegoacutelnie rozbudowana ale od czegoś trzeba zacząć
W czasie pracy nad stroną będziesz bardzo często sprawdzać w przeglądarce wynik wprowadzonych zmian mdash prawdopodobnie częściej niż robi się to zazwyczaj mdash ale ponieważ jest to wprowadzenie do HTML -a dobrze będzie przyjrzeć się skutkowi każdej niewielkiej zmiany pliku źroacutedłowego
Przed rozpoczęciem należy uruchomić edytor tekstuZaroacutewno w tym rozdziale jak i w całej książce dokumenty HTML będziemy tworzyć ręcznie dlatego musisz zacząć od uruchomienia edytora tekstu Edytor tekstu dostarcza-ny z systemem operacyjnym taki jak Notatnik (Windows) czy TextEdit (Mac OS X) powinien w zupełności wystarczyć1 Do naszych celoacutew nadaje się każdy edytor tekstu w ktoacuterym można zapisywać zwykłe pliki tekstowe z rozszerzeniem html Jeśli do two-rzenia stron internetowych używasz narzędzia typu WYSIWYG takiego jak Dream-weaver na razie zostaw je w spokoju Najpierw musisz nabrać wprawy w samodzielnym tworzeniu dokumentoacutew HTML (patrz ramka bdquoPraktyczna nauka języka HTMLrdquo)
Z tego podrozdziału dowiesz się jak otworzyć nowe dokumenty w programach Notatnik oraz TextEdit Nawet jeśli korzystałeś z nich wcześniej warto rzucić okiem na ten tekst pod kątem specjalnych ustawień ktoacutere sprawią że ćwiczenia poacutejdą gładko
Rozpoczynamy od Notatnika posiadacze komputeroacutew Macintosh powinni przejść dalej
1 Notatnik rzeczywiście umożliwia wprowadzanie tekstu ale na tym jego funkcjonalność się kończy więc przydatność tego narzędzia podczas pracy z kodem jest dyskusyjna Zdecydowanie lepszym rozwiązaniem jest zainstalowanie edytora przeznaczonego dla programistoacutew Jedną z ważniej-szych zalet takiego rozwiązania mdash zwłaszcza podczas nauki języka mdash jest funkcja kolorowania kodu dzięki ktoacuterej dużo łatwiej wychwycić przypadkowe błędy Dostępnych jest wiele bezpłatnych edytoroacutew tego typu z czego najbardziej popularne dla systemu Windows to Notepad2 Notepad++ Bluefish czy PSPad W systemie Mac OS jednym z lepszych edytoroacutew jest TextMate mdash przyp tłum
Praktyczna nauka języka HTMLZdecydowanie najlepiej uczyć się języka HTML w staroświecki sposoacuteb mdash poprzez ręczne pisanie kodu Dzięki wpisywaniu znacznikoacutew jeden po dru‑gim i obserwowaniu efektoacutew tych zmian w prze‑glądarce masz największe szanse na zrozumienie zasad rządzących językiem Wbrew pozorom nauczenie się poprawnego tworzenia dokumentoacutew w HTML ‑u nie zabiera zbyt wiele czasu
Zrozumienie języka HTML pomoże Ci sprawniej i wydajniej korzystać z narzędzi przeznaczonych do tworzenia stron internetowych Poza tym pomyśl o satysfakcji ktoacuterą odczujesz gdy spojrzysz na plik źroacutedłowy i będziesz wiedzieć o co w nim chodzi Znajomość HTML ‑a jest także niezbędna do rozwiązywania problemoacutew z niedziałającymi stro‑nami internetowymi lub ulepszania domyślnego formatowania tworzonego przez roacuteżne narzędzia
Musisz też wziąć pod uwagę fakt że profesjonaliści w zdecydowanej większości przypadkoacutew wpisują ręcznie kod ponieważ daje im to największą kontrolę nad projektem i możliwość wyboru elementoacutew z ktoacuterych korzystają
Rysunek 41 W tym rozdziale krok po kroku napiszemy dokument źroacutedłowy dla powyższej strony internetowej
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Przed rozpoczęciem należy uruchomić edytor tekstu
Rozdział 4 Tworzenie prostej strony 51
Tworzenie nowego dokumentu w Notatniku (Windows)Poniżej znajdują się kroki konieczne do utworzenia nowego dokumentu w programie Notatnik w systemie Windows 7 (rysunek 42)1 Otwoacuterz menu Start i wybierz pozycję Notatnik (w menu Akcesoria) 1 2 Zostanie otwarte okno nowego dokumentu w ktoacuterym można rozpocząć wpisywanie
tekstu 2 3 Teraz zmienimy ustawienia by były widoczne rozszerzenia nazw plikoacutew Nie musisz
tego robić by tworzyć dokumenty HTML jednak dzięki temu już na pierwszy rzut oka będziesz wiedzieć z jakim plikiem masz do czynienia W dowolnym oknie eksploratora z menu Narzędzia 3 wybierz Opcje folderoacutew a następnie przejdź na kartę Widok 4 Odszukaj opcję Ukryj rozszerzenia znanych typoacutew plikoacutew i ją wyłącz 5 Kliknij przycisk OK aby zapisać ustawienia Rozszerzenia nazw plikoacutew będą
już widoczne
Otwoacuterz menu Start i przejdź do Notatnika (Wszystkie programyAkcesoriaNotatnik)
Kliknięcie pozycji Notatnik spowodujeotwarcie nowego dokumentu
Aby włączyć wyświetlanie rozszerzeń nazw plikoacutew musiszw oknie eksploratora przejść do menu NarzędziaOpcje folderoacutew
Przejdź na
kartę Widok
Odszukaj opcję
Ukryj rozszerzenia znanychtypoacutew plikoacutew i ją wyłącz
a następnie kliknij przycisk OKaby zapisać zmiany ustawień
Rysunek 42 Tworzenie nowego dokumentu w Notatniku
UWAGA
Aby w systemie Windows 7 wyświetlić menu i uzyskać dostęp do menu Narzędzia wciśnij klawisz Alt W systemie Windows Vista odpo-wiednikiem pozycji Opcje folderoacutew jest Opcje folderoacutew i opcje wyszukiwania
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przed rozpoczęciem należy uruchomić edytor tekstu
52
Tworzenie nowego dokumentu w programie TextEdit (Mac OS X)Domyślnie program TextEdit tworzy dokumenty w formacie tzw bogatego tekstu (ang rich text) czyli jako dokumenty z ukrytymi instrukcjami formatowania stylu po-zwalającymi na przykład na pogrubianie tekstu czy ustalanie rozmiaru czcionki Łatwo poznać kiedy TextEdit jest w tym trybie ponieważ na goacuterze okna jest widoczny pasek narzędzi formatujących (nie ma go w trybie zwykłego tekstu) Dokumenty HTML muszą być zwykłymi dokumentami tekstowymi dlatego należy zmienić format jak to zostało przedstawione na rysunku 431 Skorzystaj z Findera by w folderze Programy znaleźć program TextEdit Następnie
dwukrotnie kliknij jego nazwę lub ikonę aby go uruchomić2 TextEdit otwiera nowy dokument Na goacuterze ekranu znajduje się pasek narzędzi
formatujących więc TextEdit jest w trybie bogatego tekstu Poniżej znajdują się instrukcje zmiany trybu
3 Otwoacuterz okno Preferencje z menu TextEdit4 Musisz zmienić trzy ustawienia Na karcie Nowy dokument zaznacz pole Tekst zwykły (Plain text) Na karcie OtwoacuterzZachowaj (Open and Save) zaznacz pole Ignoruj polecenia forma-
towania tekstu w plikach HTML (Ignore rich text commands in HTML files) i wyłącz pole Dodaj rozszerzenie bdquotxtrdquo do nazwy pliku tekstowego (Append sbquotxtrsquo extensions to plain text files)
5 Po wprowadzeniu zmian kliknij czerwony przycisk znajdujący się w lewym goacuternym rogu
6 Po utworzeniu nowego dokumentu zniknie pasek narzędzi formatujących więc będziesz moacutegł zapisać dokument jako plik html Jeśli w przyszłości będziesz chciał przywroacutecić poprzedni tryb pracy edytora wykonaj podobne czynności
W edytorze w trybie zwykłego tekstuten pasek nie jest wyświetlany
Widoczny pasek narzędzi formatującychwskazuje na tryb bogatego tekstu
Rysunek 43 Program TextEdit i okno ustawień z menu Preferencje
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Krok 1 Zaczynamy od zawartości
Rozdział 4 Tworzenie prostej strony 53
Krok 1 Zaczynamy od zawartościKiedy już mamy nowy dokument czas umieścić w nim jakąś treść Tworzenie stron internetowych zawsze zaczynamy od ich zawartości dlatego w naszym projekcie po-stąpimy tak samo W ćwiczeniu 41 pokazano w jaki sposoacuteb wpisuje się zwykły tekst i zapisuje dokument w nowym folderze
Konwencje dotyczące nazewnictwaPrzy nazywaniu plikoacutew należy przestrzegać poniższych reguł oraz konwencji
Należy używać właściwych rozszerzeń nazw plikoacutew Pliki HTML i XHTML muszą mieć roz‑szerzenie html Pliki graficzne należy oznaczać zgodnie z ich formatem mdash gif png lub jpg (dopuszczalne jest roacutewnież jpeg)
W nazwach plikoacutew nie należy używać spacji Często w celu wizualnego oddzielenia słoacutew w nazwach plikoacutew używa się znakoacutew podkre‑ślenia (_) lub łącznika ( ‑) jak w robbins_biohtml czy robbins ‑biohtml
Należy unikać znakoacutew specjalnych takich jak bull i tym podobnych Nazwy plikoacutew powinny zawierać litery cyfry znaki podkreślenia łączniki oraz kropki
Wielkość liter w nazwach plikoacutew może mieć znaczenie w zależności od konfiguracji serwera Konsekwentne używanie w nazwach plikoacutew tylko małych liter mdash choć nie jest to ko‑nieczne mdash pozwala na łatwiejsze zarządzanie plikami i ich nazwami
Nazwy plikoacutew powinny być kroacutetkie Dzięki kroacutetkim nazwom łatwiej zapanować nad plikami Jeśli plik naprawdę musi mieć długą składającą się z kilku słoacutew nazwę poszczegoacutelne słowa można oddzielać za pomocą łącznikoacutew jak w długi ‑tytuł ‑plikuhtml dzięki czemu takie nazwy będą czytelne
Własne konwencje W dużych projektach warto wypracować własny spoacutejny system nazywania plikoacutew Możesz na przykład założyć że będziesz stosować tylko małe litery a słowa będziesz oddzielać łącznikami Eliminujesz w ten sposoacuteb sytuacje w ktoacuterych musisz zgadywać jak kiedyś nazwałeś jakiś plik do ktoacuterego chcesz teraz utworzyć odsyłacz
Ćwiczenie 41 Wprowadzanie treści strony
1 W nowym dokumencie otwartym w edytorze wpisz poniższą treść Wprowadź ją w dokładnie takiej samej postaci zachowując podział wierszy Tekst ten jest dostępny w materiałach towarzyszących książce ktoacutere można pobrać ze strony ftpftphelionplprzykladyprsti2zip
Bistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24
2 W menu Plik wybierz polecenie Zapisz lub Zapisz jako aby zostało wyświetlone okno dialogowe Zapisz jako (rysunek 44) Zanim zapiszesz plik musisz utworzyć nowy folder ktoacutery będzie zawierał wszystkie pliki tej strony (innymi słowy lokalny folder głoacutewny)
Windows kliknij przycisk Nowy folder znajdujący się na goacuterze okna
Macintosh kliknij przycisk Nowy katalog
Windows 7 Mac OSX
Rysunek 44 Zapisywanie pliku indexhtml w nowym folderze o nazwie bistro
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 1 Zaczynamy od zawartości
54
Zrozumienie pierwszego krokuTreść strony nie prezentuje się zbyt ciekawie (rysunek 45) Tekst napisany jest jednym ciągiem mdash nie tak to wyglądało w oryginalnym dokumencie Można z tego wyciągnąć kilka wnioskoacutew Pierwszy z nich mdash co jest widoczne na pierwszy rzut oka mdash jest taki że przeglądarka ignoruje podział wierszy w dokumencie źroacutedłowym (w ramce bdquoCo ignorują przeglądarkirdquo wymieniono inne informacje zawarte w kodzie źroacutedłowym ktoacutere nie są wyświetlane w oknie przeglądarki)
Po drugie widać że samo wpisanie treści strony i nazwanie dokumentu html nie wystarczy Choć przeglądarka może wyświetlić tekst z takiego pliku nie oznaczyliśmy w żaden sposoacuteb struktury jego treści a właśnie do tego służy HTML Dodamy więc znaczniki ktoacutere zdefiniują strukturę dokumentu mdash najpierw w samym dokumencie HTML (krok 2) a poacuteźniej do zawartości strony (krok 3) Kiedy przeglądarka będzie znała strukturę zawartości będzie w stanie wyświetlić stronę w pożądany sposoacuteb
Nadaj folderowi nazwę bistro a następnie zapisz w nim plik tekstowy indexhtml Użytkownicy systemu Win‑dows będą dodatkowo musieli wybrać pozycję Wszystkie pliki w polu Zapisz jako typ żeby Notatnik nie dodał rozszerzenia txt do wybranej przez nas nazwy pliku Nazwa pliku musi się kończyć rozszerzeniem html by przeglądarka rozpoznała ten plik jako dokument HTML Więcej informacji na temat nazw plikoacutew znajduje się w ramce bdquoKonwencje dotyczące nazewnictwardquo Uwaga Jako sposoacuteb kodowania wszystkich plikoacutew w książce przyjęto standard UTF ‑8 dlatego przy zapisywaniu plikoacutew należy roacutewnież zamiast domyślnego ANSI wybrać z listy UTF ‑8
3 Sproacutebuj obejrzeć plik indexhtml w przeglądarce Uruchom ulubioną przeglądarkę i z menu Plik wybierz polecenie Otwoacuterz lub Otwoacuterz plik Odszukaj plik indexhtml i go otwoacuterz Powinieneś zobaczyć coś podobnego do strony zaprezentowanej na rysunku 45
Rysunek 45 Wygląd pierwszej wersji strony internetowej w przeglądarce
Co ignorują przeglądarkiNiektoacutere informacje zawarte w kodzie źroacutedłowym dokumentu są ignorowane podczas wyświetlania strony
Powtarzające się spacje Kiedy przeglądarka napotka więcej niż jedną spację pod rząd wy‑świetla pojedynczą spację Jeśli zatem dokument zawiera tekst
dawno dawno temu
przeglądarka wyświetli
dawno dawno temu
Podziały wierszy (powroty karetki) Przeglą‑darki zamieniają znaki podziału wiersza (powrotu karetki) na spacje Zgodnie z wcześniejszą zasadą (dotyczącą powtarzających się spacji) podziały wiersza umieszczone w dokumencie źroacutedłowym nie mają wpływu na sposoacuteb wyświetlania w prze‑glądarce Tekst oraz inne elementy będą zawijane dopoacuteki w tekście dokumentu nie zostanie napotka‑ny nowy element blokowy taki jak nagłoacutewek (h1) akapit (p) lub podział wiersza (br)
Tabulatory Znaki tabulacji roacutewnież są zamieniane na spacje Jaki stąd wniosek Są bezużyteczne
Nierozpoznawane znaczniki Przeglądarka po prostu ignoruje wszystkie znaczniki ktoacuterych nie rozumie lub ktoacutere zostały zapisane niepoprawnie W zależności od elementu oraz przeglądarki może to mieć roacuteżne skutki Przeglądarka może nie wyświetlić nic lub może wyświetlić zawartość znacznika tak jakby była ona normalnym tekstem
Tekst znajdujący się w komentarzach Przeglądarki nie wyświetlają tekstu znajdującego się pomiędzy specjalnymi znacznikami lt ‑ ‑ oraz ‑ ‑gt służącymi do oznaczania komentarzy Więcej informacji na ten temat znajduje się w ramce bdquoWstawianie komentarzyrdquo w dalszej części rozdziału
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 55
Krok 2 Nadajemy dokumentowi strukturęZawartość strony zapisana jest w dokumencie html mdash teraz czas dodać do niego znaczniki
Wprowadzenie do elementoacutew HTMLW rozdziale 2 bdquoJak działa internetrdquo zostały pokazane przykłady elementoacutew HTML ze znacznikami otwierającymi (jak na przykład ltpgt dla akapitu) oraz zamykającymi (jak ltpgt) Przed rozpoczęciem wstawiania znacznikoacutew do dokumentu warto się przyjrzeć strukturze elementu HTML i ustalić najważniejsze pojęcia Ogoacutelna budowa znacznika została przedstawiona na rysunku 46
Znacznikotwierający
Element
ltnazwa_elementugt Zawartość elementu ltnazwa_elementugt
Znacznik zamykający(rozpoczyna się od znaku )
Zawartość elementu(może to być tekst lub inne elementy HTML)
Przykład lth1gt Bistro Pod Czarną Gąską lth1gt
Rysunek 46 Elementy znacznika HTML
Poszczegoacutelne elementy strony są opisywane znacznikami znajdującymi się w kodzie źroacutedłowym Znacznik składa się z nazwy elementu (zazwyczaj będącej skroacutetem dłuż-szej nazwy opisowej w języku angielskim) znajdującej się w nawiasach ostrych (lt gt) Przeglądarka wie że tekst znajdujący się pomiędzy takimi nawiasami nie może być wyświetlany w oknie przeglądarki
Nazwa elementu pojawia się w znaczniku otwierającym (ang opening tag nazy-wanym roacutewnież znacznikiem początkowym ang start tag) i ponownie w znaczniku zamykającym (ang closing tag nazywanym też znacznikiem końcowym ang end tag) poprzedzonym znakiem prawego ukośnika (ang slash ) Znacznik zamykający działa trochę jak bdquowyłącznikrdquo dla elementu Należy uważać by w znacznikach nie użyć przez przypadek znaku lewego ukośnika (ang backslash ) Więcej na ten temat znajduje się w ramce bdquoUkośnik prawy a lewyrdquo
Znaczniki umieszczane wokoacuteł zawartości nazywa się w języku angielskim markup (stąd HTML mdash HyperText Markup Language) Należy zapamiętać że element składa się zaroacutewno ze swojej zawartości jak i znacznikoacutew początkowych oraz końcowych Nie wszystkie elementy posiadają jednak jakąś zawartość Niektoacutere są z definicji puste jak na przykład element img wykorzystywany do dodawania obrazkoacutew do strony Elementy puste zostaną omoacutewione w dalszej części rozdziału
I jeszcze jedna sprawa mdash wielkość liter W języku HTML wielkość liter stosowanych w znacznikach nie ma znaczenia więc ltimggt ltImggt i ltIMGgt są poprawne i oznaczają to samo Z kolei w języku XHTML (ktoacutery pod względem składni jest dużo bardziej wymagający) wszystkie znaczniki muszą być zapisane małymi literami Wielu twoacutercoacutew stron przyjęło tę konwencję i warto się jej trzymać (w książce tak właśnie jest)
Element składa się zaroacutewno z zawartości jak i obejmującego ją znacznika
Ukośnik prawy a lewyW znacznikach HTML oraz adresach URL jest stosowany znak prawego ukośnika () Znak ten można znaleźć pod znakiem zapytania () na standardowej klawiaturze QWERTY
Łatwo jest pomylić ten znak z lewym ukośnikiem () ktoacutery na klawiaturze znajduje się pod znakiem | Ukośnik lewy nie działa w znacznikach oraz adresach URL dlatego należy pamiętać by go tam nie używać
WSK AZOacuteWK A
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 2 Nadajemy dokumentowi strukturę
56
Podstawowa struktura dokumentuNa rysunku 47 została przedstawiona sugerowana podstawowa struktura dokumentu HTML5 Dlaczego bdquosugerowanardquo Ponieważ jedynym wymaganym elementem jest ti‑tle Lepiej jednak od samego początku tworzyć dokumenty ktoacutere są w pełni poprawne Gdybyś pisał w języku XHTML wszystkie przedstawione elementy (z wyjątkiem meta) byłyby wymagane Przyjrzyj się dokładniej rysunkowi 47 1 Tak się akurat składa że w pierwszym wierszu kodu nie ma żadnego elementu
Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE) ktoacutera wskazuje że jest to dokument HTML5 Temat ten jest szerzej omoacutewiony w rozdziale 10 bdquoCo nowego w HTML5rdquo W tej chwili wystarczy zapamiętać że dzięki tej deklaracji nowoczesne przeglądarki będą wiedzieć że mają do czynienia z dokumentem napisanym zgodnie ze specyfikacją HTML5
2 Cały dokument znajduje się wewnątrz elementu html Jest on nazywany głoacutewnym elementem ponieważ zawiera wszystkie inne elementy a poza tym nie można go umieścić w innym elemencie Zasady te dotyczą zaroacutewno języka HTML jak i XHTML
3 W elemencie html dokument jest podzielony na dwie sekcje head i body W ele-mencie head (nagłoacutewek) są umieszczone informacje opisujące dokument takie jak tytuł stosowane arkusze styloacutew skrypty i inne metadane
4 Elementy meta w sekcji head dostarczają informacji o samym dokumencie Istnieje wiele zastosowań tych elementoacutew ale my korzystamy tylko z jednego mdash określenia typu kodowania znakoacutew (czyli standardu kodowania liter cyfr i symboli) stoso-wanego w dokumencie Nie ma sensu wdawać się teraz w szczegoacuteły ale musisz wiedzieć że z wielu względoacutew dobrze jest umieścić element meta charset (choćby ze względu na prawidłowe wyświetlanie polskich bdquoogonkoacutewrdquo)
5 Ważnym elementem sekcji head jest title ponieważ mdash zgodnie ze specyfikacją HTML mdash wszystkie dokumenty muszą posiadać tytuł
6 W sekcji body umieszcza się wszystko to co ma zostać wyświetlone przez przeglądarkę
Jesteś gotowy na utworzenie struktury strony restauracji bdquoPod Czarną Gąskąrdquo Otwoacuterz dokument indexhtml i przejdź do ćwiczenia 42
ltDOCTYPE htmlgt
lthtmlgt
ltheadgtltmeta charset=utf-8gtlttitlegtTytułlttitlegtltheadgt
ltbodygtTreść stronyltbodygt
lthtmlgt
Rysunek 47 Podstawowa struktura dokumentu HTML
UWAGA
Przed pojawieniem się specyfikacji HTML5 element meta służący do określenia kodowania znakoacutew był trochę bardziej skomplikowany Jeśli tworzysz dokumenty w standardzie HTML 401 lub XHTML 10 element meta powinien wyglądać tak
ltmeta http ‑equiv=contenttype content=texthtml charset=UTF ‑8gt
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Krok 2 Nadajemy dokumentowi strukturę
Rozdział 4 Tworzenie prostej strony 57
Ćwiczenie 42 Defi niowanie podstawowej struktury
1 Otwoacuterz dokument indexhtml o ile nie zrobiłeś tego wcześniej
2 Rozpocznij od dodania na samej goacuterze deklaracji typu dokumentu HTML5
ltDOCTYPE htmlgt
3 W kolejnym wierszu wstaw znacznik otwierający lthtmlgt a na samym końcu mdash po całej zawartości pliku mdash znacznik zamykający lthtmlgt
4 Teraz utwoacuterz nagłoacutewek dokumentu w ktoacuterym ma się znaleźć tytuł strony W tym celu przed treścią umieść znaczniki ltheadgt i ltheadgt Wewnątrz sekcji nagłoacutewka wstaw znacznik ltmeta charset=ut‑f ‑8gt ustalający kodowanie znakoacutew oraz wpisz tytuł Bistro Pod Czarną Gąską umiesz‑czając go między otwierającym i zamykającym znacznikiem lttitlegt
Można roacutewnież powiedzieć że element title jest zagnieżdżony w elemencie head Na temat zagnieżdżania dowiesz się więcej w kolejnych rozdziałach
5 Na koniec musisz zdefi niować ciało dokumentu W tym celu całą treść dokumentu umieść między znacz‑nikami ltbodygt i ltbodygt Po wprowadzeniu zmian kod dokumentu powinien wyglądać jak poniżej (dopisane fragmenty zostały wyroacuteżnione pogrubieniem)
ltDOCTYPE htmlgtlthtmlgt
ltheadgtltmeta charset=utf ‑8gtlttitlegtBistro Pod Czarną Gąskąlttitlegtltheadgt
ltbodygtBistro Pod Czarną Gąską
RestauracjaBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutew
Usługi cateringoweKiedy Ty będziesz się świetnie bawić my będziemy dla Ciebie gotować Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankiety
Lokalizacja i godziny otwarciaKuchary ul Smaczna 13Od poniedziałku do czwartku w godzinach od 11 do 21 w piątki i soboty od 11 do 24ltbodygt
lthtmlgt
6 Zapisz zmiany w pliku tak by została nadpisana starsza wersja Otwoacuterz dokument w przeglądarce lub mdash jeśli jest on już otwarty mdash odśwież stronę Na rysunku 48 został zaprezentowany aktualny wygląd dokumentu
Rysunek 48 Wygląd strony w przeglądar‑ce po zdefi niowaniu elementoacutew struktury dokumentu
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
58
Wygląda na to że po zdefiniowaniu struktury dokumentu niewiele się zmieniło mdash możemy tylko zauważyć że przeglądarka wyświetla teraz tytuł strony Gdybyś dodał tę stronę do Zakładek lub Ulubionych tytuł pojawiłby się na liście (więcej informacji w ramce bdquoPamiętaj o dobrym tytulerdquo) Treść strony nadal jest wyświetlana jako jeden blok tekstu ponieważ nie wskazaliśmy przeglądarce jak miałaby zostać podzielona Zajmiemy się tym już niebawem
Krok 3 Oznaczamy elementy tekstoweNawet mając tak niewielkie doświadczenie z kodem HTML nietrudno się domyślić że teraz trzeba będzie uzupełnić treść strony odpowiednimi znacznikami definiującymi nagłoacutewki (h1 i h2) akapity (p) a także tekst zaakcentowany (em) Zajmiemy się tym w ćwiczeniu 43 jednak przed jego rozpoczęciem warto poświęcić chwilę na omoacutewienie tego co można a czego nie można robić ze znacznikami HTML
Wprowadzenie do znacznikoacutew semantycznychPodstawowym celem języka HTML jest nadanie treści strony odpowiedniego znaczenia oraz struktury Zapamiętaj że HTML nie służy do ustalania wyglądu zawartości strony (czyli jej prezentacji)
Naszym zadaniem jest wybranie tych elementoacutew HTML ktoacutere najlepiej oddają znaczenie poszczegoacutelnych fragmentoacutew treści Nazywa się to semantycznym oznaczaniem treści lub dodawaniem znacznikoacutew semantycznych (ang semantic markup) Na przykład najistotniejszy nagłoacutewek znajdujący się na początku treści powinien zostać oznaczony jako h1 Nie należy się przejmować tym jak będzie wyglądał w przeglądarce mdash można to z łatwością zmienić za pomocą arkusza styloacutew Ważne jest natomiast to by wybrać element na podstawie tego co ma w danym przypadku największy sens
Poza dodawaniem znaczenia do treści strony znaczniki nadają jej roacutewnież strukturę Sposoacuteb następowania elementoacutew po sobie lub zagnieżdżania ich wewnątrz innych tworzy pomiędzy nimi relacje Strukturę traktuj jak konspekt dokumentu (ktoacuterego technicznym odpowiednikiem jest obiektowy model dokumentu czyli DOM mdash ang Document Object Model) Dzięki ustaleniu hierarchii elementoacutew przeglądarki wiedzą jak traktować zawartość dokumentu Poza tym struktura umożliwia definiowanie wyglądu (czyli prezentacji) stron za pomocą arkuszy styloacutew oraz zachowań mdash z wykorzystaniem JavaScriptu Struktura dokumentu jest omoacutewiona bardziej szczegoacutełowo w trzeciej części książki przy okazji omawiania kaskadowych arkuszy styloacutew oraz w czwartej części poświęconej językowi JavaScript
Choć HTML miał być w zamierzeniach wykorzystywany do nadawania znaczenia oraz struktury ta misja w początkowych latach istnienia internetu została nieco wypaczo-na Ponieważ nie był dostępny mechanizm arkuszy styloacutew rozszerzano HTML w taki sposoacuteb by autorzy stron mogli zmieniać wygląd czcionek kolory czy rozmieszczenie tekstu za pomocą znacznikoacutew i ich atrybutoacutew Tego typu dodatki prezentacyjne można znaleźć w kodzie starszych stron lub dokumentoacutew utworzonych za pomocą starszych narzędzi W tej książce skupiamy się jednak na wykorzystywaniu języka HTML w po-prawny sposoacuteb zgodny z obecnymi standardami
Dość już tego wykładu mdash czas na ćwiczenie 43 w ktoacuterym popracujemy nad treścią dokumentu
Pamiętaj o dobrym tytuleElement title jest nie tylko wymagany w każ‑dym dokumencie ale także bardzo przydatny Tytuł dokumentu jest tym co jest wyświetlane na liście w Zakładkach bądź Ulubionych Opisowe tytuły są także kluczowym narzędziem zwiększającym dostępność strony ponieważ są pierwszą rzeczą jaką słyszą użytkownicy strony korzystający z niej za pomocą czytnika ekranu Roacutewnież wyszukiwarki internetowe w dużej mierze polegają na tytułach dokumentoacutew Z tego powodu należy nadawać wszystkim dokumentom przemyślane oraz opiso‑we tytuły i unikać tytułoacutew niejasnych typu bdquoWitamrdquo czy bdquoMoja stronardquo Należy się roacutewnież zatroszczyć o odpowiednią długość tytułu by mieścił się on w pasku tytułu przeglądarki Dobrym rozwiąza‑niem jest też umieszczanie konkretnej informacji (na przykład nazwy firmy) na początku tytułu tak by była ona widoczna nawet w sytuacji gdy w przeglądarce jest otwartych wiele zakładek
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Krok 3 Oznaczamy elementy tekstowe
Rozdział 4 Tworzenie prostej strony 59
Powoli zaczynamy do czegoś dochodzić Po oznaczeniu elementoacutew przeglądarka może teraz wyświetlić tekst w poprawny sposoacuteb Warto jednak poświęcić jeszcze chwilę na bardziej szczegoacutełowe omoacutewienie tego co widzimy na rysunku 49
Elementy blokowe oraz linioweChoć może się to wydawać oczywiste warto podkreślić że nagłoacutewki oraz akapity roz-poczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim jak było wcześniej Jest tak ponieważ są one przykładami elementoacutew blokowych (ang block ele-ment) Przeglądarki traktują elementy blokowe tak jakby znajdowały się w małych pro-stokątnych pojemnikach ułożone jeden na drugim Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domyślnie do-dawany jest jakiś odstęp Na rysunku 410 elementy blokowe są oznaczone na czerwono
Ćwiczenie 43 Definiowanie elementoacutew tekstowych
1 Otwoacuterz dokument indexhtml w edytorze o ile jeszcze tego nie zrobiłeś
2 Pierwszy wiersz tekstu Bistro bdquoPod Czarną Gąskąrdquo jest głoacutewnym nagłoacutewkiem strony dlatego zostanie oznaczony jako element nagłoacutewka poziomu pierwszego (h1) Na początku tego wiersza wstaw znacznik otwierający lth1gt a na jego końcu mdash zamykający lth1gt
lth1gtBistro Pod Czarną Gąskąlth1gt
3 Dokument zawiera roacutewnież trzy pomniejsze nagłoacutewki Oznacz je w podobny sposoacuteb ale zastosuj elementy nagłoacutewkoacutew poziomu drugiego (h2) Pierwszy został przedstawiony poniżej a kolejnymi (Usługi cateringowe oraz Lokalizacja i godziny otwarcia) musisz się zająć sam
lth2gtRestauracjalth2gt
4 Po każdym z elementoacutew h2 następują kroacutetkie fragmenty tekstu ktoacutere należy oznaczyć jako akapity (czyli elementy p) Poniżej znajduje się przykład pierwsze‑go akapitu a kolejnymi musisz się zająć sam
ltpgtRestauracja Bistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymi możesz się delektować w przyjaznej atmosferze Menu jest często zmieniane by zawsze serwować dania ze świeżych produktoacutewltpgt
5 Na koniec w sekcji Usługi cateringowe należy jakoś wyroacuteżnić to że odwiedzający restaurację powinni pozostawić gotowanie nam Żeby zaakcentować tekst należy umieścić go w elemencie em jak poniżej
ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgt Catering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąski spotkania klubowe czy wystawne bankietyltpgt
6 Po wstawieniu wszystkich znacznikoacutew należy tak jak poprzednio zapisać plik i otworzyć (lub odświeżyć) stronę w przeglądarce Powinna wyglądać mniej więcej tak jak na rysunku 49 Jeśli tak nie jest sprawdź znaczniki pod kątem brakujących nawiasoacutew lub ukośnikoacutew w znacznikach zamykających
Rysunek 49 Strona po oznaczeniu tekstu za pomocą elementoacutew HTML
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 3 Oznaczamy elementy tekstowe
60
Rysunek 410 Wyroacuteżniona struktura elementoacutew na stronie
Inaczej wygląda to w przypadku tekstu oznaczonego jako zaakcentowany (em) Nie rozpoczyna się on od nowego wiersza ale pozostaje częścią akapitu Jest tak ponieważ element em jest elementem liniowym (ang inline element) Elementy wewnętrzne nie rozpoczynają nowych wierszy pozostają na swoim miejscu Na rysunku 410 element wewnętrzny em jest zaznaczony na jasnoniebiesko
Domyślne styleNa rysunkach 49 oraz 410 można roacutewnież zauważyć że przeglądarka nadaje elemen-tom strony wygląd odzwierciedlający strukturę dokumentu mdash nagłoacutewek pierwszego stopnia jest największy i najbardziej rzuca się w oczy nagłoacutewek drugiego stopnia jest nieco mniejszy i tak dalej
W jaki sposoacuteb przeglądarka ustala jak powinien wyglądać element h1 Wykorzy-stuje arkusz styloacutew Wszystkie przeglądarki mają wbudowane własne arkusze styloacutew (w specyfikacji są one określane mianem user agent style sheets mdash arkusze styloacutew agenta użytkownika) ktoacutere określają domyślny sposoacuteb wyświetlania poszczegoacutelnych elementoacutew Domyślny wygląd jest podobny w roacuteżnych przeglądarkach (na przykład elementy h1 zawsze są duże i pogrubione) jednak istnieją pewne roacuteżnice (elementy blockquote mogą być wcięte lub nie)
Jeśli uważasz że element h1 wyświetlany przez przeglądarkę jest zbyt duży i nie-zgrabny wystarczy zmienić to za pomocą arkusza styloacutew Należy oprzeć się pokusie oznaczenia nagłoacutewka innym elementem tylko po to by wyglądał on lepiej (na przykład używając h3 w miejsce h1 by element ten nie był aż tak duży) W czasach kiedy obsługa arkuszy styloacutew nie była tak powszechna w taki właśnie sposoacuteb nadużywano znacznikoacutew Teraz gdy istnieją arkusze styloacutew kontrolujące wygląd strony zawsze powinno się wy-bierać elementy zgodnie z tym jak opisują one zawartość i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę
Wstawianie komentarzyW dokumencie źroacutedłowym można umieścić notatki dla siebie oraz innych osoacuteb oznaczając je jako komentarze Wszystko co umieści się pomiędzy znacznikami komentarzy (lt ‑ ‑ oraz ‑ ‑gt) nie zostanie wyświetlone w przeglądarce i nie będzie miało wpływu na resztę źroacutedła dokumentu
lt ‑ ‑ To jest komentarz ‑ ‑gtlt ‑ ‑ To jest komentarzrozciągający się na kilka wierszyKończy się tutaj ‑ ‑gt
Komentarze przydają się do opisywania oraz organizowania długich dokumentoacutew zwłaszcza jeśli pracuje nad nimi wieloosobowy zespoacuteł W poniższym przykładzie komentarze są wykorzy‑stywane do oznaczenia części strony zawierającej blok nawigacji
lt ‑ ‑ początek nawigacji ‑ ‑gtltulgtltulgtlt ‑ ‑ koniec nawigacji ‑ ‑gt
Należy pamiętać że choć w oknie przeglądarki nie pojawią się komentarze są one widoczne w źroacutedle dokumentu ktoacutere każdy użytkownik może wyświetlić dlatego trzeba pozostawiać jedynie te komentarze ktoacutere wszyscy mogą zobaczyć Najlepszym rozwiązaniem jest jednak usunięcie komentarzy przed opublikowaniem strony co dodatkowo zmniejsza rozmiar plikoacutew
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 61
Prezentację strony poprawimy za chwilę za pomocą arkusza styloacutew jednak najpierw warto dodać do strony obrazek
Krok 4 Wstawiamy obrazekStrona internetowa bez obrazkoacutew wygląda średnio Dlatego też w ćwiczeniu 44 do-damy jeden obrazek używając w tym celu elementu img Obrazki zostaną omoacutewione bardziej szczegoacutełowo w rozdziale 7 bdquoGrafikardquo jednak na razie skupimy się na dwoacutech podstawowych zagadnieniach elementach pustych oraz atrybutach
Elementy pusteDotychczas wszystkie elementy wykorzystane na stronie internetowej Bistro bdquoPod Czarną Gąskąrdquo podlegały regułom składni przedstawionym na rysunku 41 i składały się z tekstu otoczonego znacznikami otwierającymi oraz zamykającymi
Spora liczba elementoacutew nie ma zawartości tekstowej ponieważ są one wykorzy-stywane jako proste instrukcje O takich elementach moacutewi się że są puste (ang empty) Element obrazka (img od angielskiego image mdash obrazek) jest przykładem tego typu elementu Przekazuje on przeglądarce że ma pobrać plik graficzny z serwera i wstawić go na stronę w miejscu występowania znacznika Inne elementy puste to podział wiersza (br) linia pozioma (hr) a także elementy udostępniające informacje o dokumencie jednak niewpływające na wyświetlaną treść jak element meta
Na rysunku 411 została przedstawiona składnia pustego elementu (bardzo prosta w poroacutewnaniu z tą z rysunku 44) Jeśli dokument tworzysz w języku XHTML składnia delikatnie się roacuteżni (patrz ramka bdquoPuste elementy w XHTMLrdquo)
Przykład element br służy do wstawienia podziału wiersza
ltnazwa-elementugt
ltpgtul Smaczna 13ltbrgtKucharyltpgt
Rysunek 411 Składnia pustego elementu
AtrybutyWroacutećmy teraz do wstawiania obrazka Sam znacznik ltimggt w takiej postaci nie jest oczywiście zbyt przydatny ponieważ nie wiadomo jaki obrazek ma zostać wstawiony Aby temu zaradzić użyjemy atrybutoacutew Atrybuty to instrukcje określające lub modyfi-kujące element Dla elementu img wymagany jest atrybut src (pochodzący od angiel-skiego wyrazu source oznaczającego źroacutedło) ktoacutery wskazuje lokalizację pliku obrazka za pomocą jego adresu URL
Puste elementy w XHTML ‑uW języku XHTML wszystkie elementy włącznie z pustymi muszą zostać zamknięte (zakończone) Elementy puste zamyka się dodając na ich końcu tuż przed nawiasem końcowym ukośnik poprze‑dzony spacją na przykład ltimg gt ltbr gt oraz lthr gt Poniżej został zaprezentowany przykład wykorzystania składni XHTML
ltpgtul Smaczna 13 ltbr gtKucharyltpgt
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 4 Wstawiamy obrazek
62
Składnia atrybutoacutew jest następująca
atrybut=wartość
W znaczniku atrybuty umieszcza się po nazwie elementu W niepustych elementach dodaje się je tylko w otwierającym znaczniku
ltelement atrybut=wartośćgtltelement atrybut=wartośćgtZawartośćltelementgt
W znaczniku można umieścić więcej niż jeden atrybut mdash kolejność ich wpisywania nie ma znaczenia trzeba jedynie oddzielać je spacjami
ltelement atrybut1=wartość atrybut2=wartośćgt
Na rysunku 412 został przedstawiony element img wraz z wymaganymi atrybutami
ltimg src=birdjpg alt=zdjęcie ptakagt
Atrybut Atrybut
Nazwa atrybutu WartośćWartość Nazwa atrybutu
Nazwy oraz wartości atrybutoacutew rozdzielane są znakiem roacutewności (=)
Większa liczba atrybutoacutew rozdzielona jest spacjami
Rysunek 412 Element wraz z atrybutami
Oto co musisz wiedzieć na temat atrybutoacutewbull Atrybuty umieszczane są po nazwie elementu tylko w znaczniku otwierającym
nigdy w zamykającymbull Do elementu można stosować większą liczbę atrybutoacutew rozdzielanych spacjami
w znaczniku otwierającym Ich kolejność nie jest istotnabull Atrybuty przyjmują wartości ktoacutere następują po znaku roacutewności (=) W języku
HTML niektoacutere atrybuty nie muszą mieć przypisanej wartości np atrybut checked (ktoacutery służy do zaznaczania pola wyboru) Z kolei składnia języka XHTML wy-maga przypisywania wartości w każdym przypadku (checked=checked) Ten typ atrybutu jest nazywany boolowskim ponieważ opisuje cechę ktoacutera może być albo włączona albo wyłączona
bull W zależności od przeznaczenia atrybutu wartość może być liczbą słowem łańcu-chem znakoacutew adresem URL lub miarą W książce znajdziesz przykłady na każdy z tych atrybutoacutew
bull Niektoacutere wartości nie muszą być umieszczane w cudzysłowie ale dotyczy to tylko języka HTML mdash w XHTML -u cudzysłoacutew jest obowiązkowy Wielu twoacutercoacutew stron zawsze stosuje cudzysłowy by kod był spoacutejny i czytelny Mimo że przyjętą konwencją jest stosowanie cudzysłowoacutew w ich miejsce można wstawiać apostrofy ale trzeba pamiętać o zachowaniu konsekwencji I jeszcze jedna uwaga mdash w kodzie HTML trzeba używać bdquoprostychrdquo cudzysłowoacutew i apostrofoacutew czyli a nie rdquo
bull W pewnych elementach niektoacutere atrybuty są wymagane jak na przykład src oraz alt w elemencie img
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Krok 4 Wstawiamy obrazek
Rozdział 4 Tworzenie prostej strony 63
bull Nazwy atrybutoacutew dostępnych dla każdego elementu są zdefiniowane w specyfika-cjach HTML Nie można samemu wymyślić atrybutu dla elementu2Najwyższy czas na trochę praktyki Przed nami ćwiczenie 44 w ktoacuterym do strony
Bistro bdquoPod Czarną Gąskąrdquo dodasz element img wraz z atrybutami
Ćwiczenie 44 Wstawianie obrazka
1 Pierwsze co musisz zrobić to zdobyć kopię obrazka ktoacutery ma zostać wyświetlony na stronie Plik ten znajduje się w materiałach do tego rozdziału ktoacutere można pobrać ze strony wydawnictwa (ftpftphelionplprzykladyprsti2zip) Możesz też otworzyć stronę z tym przykładem ktoacutera roacutewnież jest dostępna na stronie wydawnictwa (httphelionplplikiprsti204bistro) i pobrać rysunek W tym celu kliknij prawym przyciskiem myszy (w Macu kliknij trzymając wciśnięty Control) obrazek przedstawiający gęś i z podręcznego menu (patrz rysunek 413) wybierz polecenie Zapisz grafikę jako (lub podobnie mdash to zależy od przeglą‑darki) W oknie dialogowym zapisywania przejdź do katalogu bistro w ktoacuterym znajduje się plik indexhtml i zapisz w nim pobierany plik graficzny blackgoosepng
2 Następnie na początku nagłoacutewka pierwszego stopnia wpisz kod elementu img wraz z atrybutami
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtBistro Pod Czarną Gąskąlth1gt
W atrybucie src podajemy nazwę pliku graficznego ktoacutery ma zostać umieszczony na stronie Z kolei w atrybucie alt wpisujemy tekst ktoacutery zostanie wyświetlony jeśli obrazek nie jest dostępny Oba atrybuty są wymagane w każdym elemencie img
Windowsaby wyświetlić podręczne menu kliknij obrazek prawym przyciskiem myszy
Macaby wyświetlić podręczne menu kliknij obrazek trzymając wciśnięty klawisz Control Nazwy i liczba dostępnych opcji może się roacuteżnić w zależności od przeglądarki
Rysunek 413 Zapisywanie pliku obrazka ze strony internetowej
2 Zgodnie ze specyfikacją HTML5 istnieje możliwość definiowania własnych atrybutoacutew Tworzy się je poprzez uzupełnienie własnej nazwy prefiksem data ‑ np data ‑mojatrybut mdash przyp tłum
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutew
64
3 Aby obrazek znalazł się nad tytułem po elemencie img wstaw znacznik podziału wiersza (ltbrgt)
lth1gtltimg src=blackgoosepng alt=Logo bistro Pod Czarną GąskągtltbrgtBistro Pod Czarną Gąskąlth1gt
4 Ostatni akapit podzielimy na trzy wiersze dzięki czemu stanie się bardziej czytelny co widać na rysunku 414 Wstaw znaczniki ltbrgt w odpowiednich miejscach by uzyskać ten sam rezultat
5 Po wprowadzeniu zmian zapisz plik indexhtml a następnie otwoacuterz go lub odśwież w oknie przeglądarki Strona powinna wyglądać tak jak na rysunku 414 Jeśli tak nie jest sprawdź czy plik z rysunkiem (blackgoo‑sepng) znajduje się w tym samym katalogu co strona indexhtml Jeśli tak jest upewnij się że w znaczniku img nie brakuje jakichś znakoacutew na przykład zamykającego cudzysłowu czy nawiasu ostrego
Rysunek 414 Wygląd strony internetowej z wstawionym obrazkiem logo
Krok 5 Zmieniamy wygląd za pomocą arkusza styloacutewW niektoacuterych sytuacjach może się okazać że domyślny wygląd nadawany stronie przez przeglądarkę jest całkowicie satysfakcjonujący W przypadku strony internetowej Bistro bdquoPod Czarną Gąskąrdquo tak nie jest Jeżeli chcemy by robiła lepsze wrażenie na poten-cjalnych klientach musimy popracować nad jej wyglądem i trochę ją upiększyć To jest zadanie dla kaskadowych arkuszy styloacutew (CSS)
W ćwiczeniu 45 za pomocą kilku prostych reguł arkuszy styloacutew zmienimy wygląd elementoacutew tekstowych oraz tło strony Nie martw się jeśli wszystkiego nie rozumiesz mdash kaskadowe arkusze styloacutew są szczegoacutełowo omoacutewione w trzeciej części książki Teraz zostanie jedynie uchylony rąbek tego co można osiągnąć poprzez dodanie bdquowarstwyrdquo prezentacji do struktury dokumentu utworzonej za pomocą znacznikoacutew HTML
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Kiedy dobre strony nie działają dobrze
Rozdział 4 Tworzenie prostej strony 65
Strona Bistro bdquoPod Czarną Gąskąrdquo jest gotowa Nie tylko udało Ci się napisać pierwszy dokument HTML oraz arkusz styloacutew ale dowiedziałeś się też co nieco na temat elementoacutew atrybutoacutew elementoacutew pustych elementoacutew blokowych i liniowych podstawowej struktury dokumentu HTML oraz poprawnego stosowania znacznikoacutew
Kiedy dobre strony nie działają dobrzeDotychczasowe ćwiczenia przebiegły dosyć gładko jednak przy ręcznym wpisywaniu kodu HTML łatwo jest popełnić jakiś drobny błąd Jeden źle wpisany znak potrafi niestety popsuć działanie całej strony Za chwilę celowo wprowadzimy błędy w doku-mencie żeby można było zobaczyć co się wtedy stanie
Ćwiczenie 45 Dodawanie arkusza styloacutew
1 Otwoacuterz w edytorze plik indexhtml
2 Arkusz styloacutew osadzimy w dokumencie za pomocą elementu style (to tylko jeden z możliwych sposoboacutew dodawania arkuszy styloacutew pozostałe są omoacutewione w rozdziale 11 bdquoKaskadowe arkusze styloacutewrdquo)
Element style wstaw wewnątrz elementu head jak na poniższym listingu
ltheadgt ltmeta charset=rdquoutf‑8rdquogt lttitlegtBistro bdquoPod Czarną Gąskąrdquolttitlegt ltstylegt ltstylegtltheadgt
3 Teraz wewnątrz elementu style wpisz poniższe reguły Nie przejmuj się jeśli nie wiesz na czym to dokładnie polega (chociaż to całkiem intuicyjne) Reguły styloacutew zostaną omoacutewione w trzeciej części książki
ltstylegt
body background‑color faf2e4 margin 0 15 font‑family sans‑serif
h1 text‑align center font‑family serif font‑weight normal text‑transform uppercase border‑bottom 1px solid 57b1dc margin‑top 30px
h2 color d1633c font‑size 1em
ltstylegt4 Czas zapisać stronę i przyjrzeć się jej w przeglądarce Powinna wyglądać podob‑
nie do strony z rysunku 415 Jeśli tak nie jest przejrzyj kod arkusza styloacutew żeby sprawdzić czy nie pominąłeś jakiegoś średnika bądź nawiasu klamrowego
Rysunek 415 Strona Bistro bdquoPod Czarną Gąskąrdquo po zastosowaniu reguł styloacutew
UWAGA
Pominięcie prawego ukośnika w znaczniku zamykającym (i w efekcie pominięcie samego znacznika zamykającego) dla niektoacuterych ele-mentoacutew blokowych takich jak nagłoacutewki czy akapity może nie mieć aż tak dramatycznego efektu Przeglądarki interpretują rozpoczęcie nowego elementu blokowego jako jednoczesne zakończenie poprzedniego
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Walidacja dokumentoacutew
66
Co się stanie gdy zapomni się wpisać ukośnik () w znaczniku zamykającym ele-ment ltemgt Wystarczyło zapomnieć o jednym znaku a spora część dokumentu została wyświetlona tekstem zaakcentowanym (kursywą) co widać na rysunku 416 Stało się tak ponieważ z powodu braku ukośnika przeglądarka nie wyłączy ustawionego forma-towania a więc jest ono stosowane aż do końca dokumentu
A co się stanie jeśli przypadkowo pominiemy nawias znajdujący się na końcu pierwszego znacznika lth2gt (jak na rysunku 417)
Jak widać brakuje teraz nagłoacutewka Dzieje się tak ponieważ bez nawiasu zamykającego znacznik przeglądarka zakłada że cały następujący po nim tekst mdash aż do następnego nawiasu zamykającego (gt) mdash jest częścią znacznika lth2gt Przeglądarki nie wyświetlają teks-tu znajdującego się wewnątrz znacznika dlatego nagłoacutewek zniknął Przeglądarka zignorowała nieznaną nazwę elementu i przeszła do kolejnego
Popełnianie błędoacutew w pierwszych dokumentach HTML i ich samodzielne korygowanie jest świetną metodą nauki Jeśli udało Ci się bezbłędnie napisać kod strony sproacutebuj się nim pobawić by sprawdzić jak przeglądarka reaguje na roacuteżne zmiany Może się to bardzo przydać kiedy w przyszłości będziesz musiał rozwiązywać problemy z niedziałającymi stronami Najczęściej spotykane kłopoty wymieniono w ramce bdquoMasz problemrdquo Warto zwroacutecić uwagę że problemy te nie są typowe wyłącznie dla początkujących Takie drobne błędy przydarzają się nawet profesjonalistom
Walidacja dokumentoacutewJedną z metod ktoacuterą stosują profesjonaliści by wyłapać błędy w ko-dzie dokumentoacutew jest ich walidacja Co to oznacza Walidacja polega na sprawdzeniu poprawności kodu względem specyfikacji używanej wersji języka HTML (a jest ich kilka co jest omoacutewione dokładniej w rozdziale 10 bdquoCo nowego w HTML5rdquo) Powinie-neś zawsze poddawać swoje witryny walidacji ponieważ zachowa-nie zgodności ze standardami zapewnia większą kompatybilność z roacuteżnymi przeglądarkami przyspiesza ich działanie oraz zwiększa dostępność
lth2gtUsługi cateringowelth2gt ltpgtKiedy Ty będziesz się świetnie bawić ltemgtmy będziemy dla Ciebie gotowaćltemgtCatering Pod Czarną Gąską sprosta wszystkim wyzwaniom czy będą to przekąskispotkania klubowe czy wystawne bankietyltpgt
ć ltemgt
Rysunek 416 Kiedy zostanie pominięty ukośnik przeglądarka nie wie gdzie kończy się element co ilustruje powyższy przykład
Z powodu brakunawiasu wszystkie
znaki występujące polth2 są interpretowanejako dalszy ciąg nazwy
elementu ktoacutera jestcałkowicie
niezrozumiała dlaprzeglądarki więc
tekst bdquoRestauracjardquow ogoacutele nie jest
wyświetlany
lth2Restauracjalth2gt ltpgtBistro Pod Czarną Gąską oferuje wyboacuter popularnych dań obiadowych ktoacuterymimożesz się delektować w przyjaznej atmosferze Menu jest często zmieniane byzawsze serwować dania ze świeżych produktoacutewltpgt
lth2Res
Brakujący nagłoacutewek
Rysunek 417 Brakujący nawias końcowy sprawia że cała następu‑jąca po nim treść staje się częścią znacznika i tym samym nie zostaje wyświetlona
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Sprawdź się
Rozdział 4 Tworzenie prostej strony 67
Tak naprawdę przeglądarki nie wymagają bezbłędnych dokumentoacutew (starają się jak najlepiej je wyświetlić ignorując drobne błędy) Może się jednak zdarzyć że nieza-uważony w porę błąd da o sobie znać w innej przeglądarce lub na innym urządzeniu
Jak w takim razie sprawdzić poprawność dokumentu Moacutegłbyś sam go dokładnie przeanalizować (lub poprosić o to znajomego) ale weź pod uwagę to że ludzie popeł-niają błędy Poza tym nikt nie jest w stanie zapamiętać wszystkich szczegoacutełoacutew zawar-tych w specyfikacji Powinieneś więc użyć walidatora czyli programu sprawdzającego poprawność kodu HTML pod kątem zgodności ze standardami Poniżej znajduje się lista najistotniejszych spraw ktoacutere sprawdza walidator
bull dołączenie deklaracji typu dokumentu (DOCTYPE) mdash bez niej walidator nie wie ktoacuterej wersji języka HTML lub XHTML używasz
bull wskazanie kodowania znakoacutew stosowanego w dokumenciebull uwzględnienie wymaganych reguł i atrybutoacutewbull zastosowanie niestandardowych elementoacutewbull pomyłki w znacznikachbull błędy zagnieżdżenia elementoacutewbull literoacutewki i inne drobne błędy
Programiści korzystają z wielu narzędzi służących do sprawdzania i poprawiania błędoacutew w dokumentach HTML Konsorcjum W3C udostępnia na swojej stronie walidator (httpvalidatorw3org) z ktoacuterego można korzystać online Dokumenty HTML5 można sprawdzać też za pomocą walidatora ze strony html5validatornu Możesz roacutewnież skorzystać z walidatoroacutew dostarczanych wraz z narzędziami progra-mistycznymi przeglądarek (w Chrome i Safari) dodatkami (na przykład Firebug do Firefoksa) a nawet graficznymi edytorami stron takimi jak Dreamweaver
Sprawdź sięPora sprawdzić czy zrozumiałeś podstawy stosowania znacznikoacutew Odpowiedz na poniższe pytania wykorzystując do tego wiedzę zdobytą w tym rozdziale Odpowiedzi na pytania znajdziesz w dodatku A1 Jaka jest roacuteżnica między znacznikiem a elementem
2 Napisz kod podstawowej struktury dokumentu HTML
Masz problemPoniżej znajduje się lista typowych problemoacutew ktoacutere pojawiają się podczas tworzenia stron inter‑netowych i oglądania ich w przeglądarkach
Zmieniłem swoacutej dokument ale kiedy odświeżam stronę w przeglądarce wygląda dokładnie tak samo
Możliwe że dokument nie został zapisany przed odświeżeniem lub też został zapisany w innym katalogu
Poacuteł mojej strony zniknęłoMogło się tak zdarzyć jeśli brakuje gdzieś nawiasu zamykającego (gt) lub cudzysłowu wewnątrz znacznika Jest to często spotykany błąd przy ręcznym pisaniu kodu HTML
Za pomocą elementu img wstawiłem na stronę grafikę jednak w przeglądarce pokazuje się tylko ikona wskazująca na nieistniejący obrazek
Taka ikona może oznaczać kilka rzeczy Być może przeglądarka nie potrafi odnaleźć pliku graficznego Upewnij się że adres URL pliku obrazka jest poprawny (adresy URL zostaną omoacutewione w rozdziale 6 bdquoHiperłączardquo) Trzeba sprawdzić czy plik obrazka naprawdę znajduje się w podanym katalogu Jeśli tak jest należy się upewnić że jest zapisany w jednym z formatoacutew ktoacutere przeglądarka potrafi wyświetlić (GIF JPG lub PNG) a także że ma właściwe rozszerzenie (odpowiednio gif jpg lub jpeg oraz png)
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Część II Znaczniki HTML i struktura dokumentu
Przegląd elementoacutew HTML tworzących strukturę dokumentu
68
3 Poniżej znajduje się kilka przykładowych nazw plikoacutew Dla każdej z nich określ czy jest to prawidłowa nazwa dokumentu webowego zaznaczając odpowiedź bdquotakrdquo lub bdquonierdquo Jeśli uznasz że jakaś nazwa nie jest poprawna napisz dlaczego tak uważasz
a Sunflowerhtml tak nie
b indexdoc tak nie
c cooking home pagehtml tak nie
d Song_Lyricshtml tak nie
e gamesrubixhtml tak nie
f whateverhtml tak nie
4 Wszystkie poniższe przykłady znacznikoacutew są niepoprawne Opisz błędy popełnione w każdym z nich i podaj poprawne wersje znacznikoacutew
a ltimg birthdayjpggt a ltigtGratulacjeltigt a lta href=filehtmlgttekst odsyłaczalta href=filehtmlgt a ltpgtTo jest nowy akapitltpgt
5 W jaki sposoacuteb można oznaczyć komentarz w dokumencie HTML by nie był on wyświetlany w oknie przeglądarki
tutaj zaczyna się lista produktoacutew
Przegląd elementoacutew HTML tworzących strukturę dokumentuW tym rozdziale zostały opisane elementy ustanawiające strukturę dokumentu Pozo-stałe elementy wprowadzone w ćwiczeniach zostaną omoacutewione bardziej szczegoacutełowo w kolejnych rozdziałach
Element Opisbody Określa ciało dokumentu ktoacutere przechowuje treśćhead Określa nagłoacutewek zawierający informacje o dokumenciehtml Głoacutewny element dokumentu zawierający wszystkie inne elementymeta Dostarcza informacje o dokumencietitle Nadaje stronie tytuł
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
587
Skorowidz
Aabsolute positioning Patrz
pozycjonowanie bezwzględneActionScript 11adaptive layout Patrz strona układ
adaptacyjnyadjacent sibling selector Patrz selektor
przylegającego rodzeństwaAdobe Dreamweaver Patrz
DreamweaverAdobe Fireworks Patrz FireworksAdobe Flash Patrz FlashAdobe Illustrator Patrz IllustratorAdobe Photoshop Patrz PhotoshopAdobe Photoshop Elements Patrz
Photoshop Elementsadres
IP 22IPv4 Patrz IPv4IPv6 Patrz IPv6
plikoacutew obrazoacutew 115URL 24 105 106 125 149 156 284
302 478bezwzględny 106długi 107względny 106 110 111 112 125
agent użytkownikaarkusze styloacutew 60identyfi kator 453
Ajax 497akapit Patrz element pakronim 89
Allsopp John 297Alman Ben 477animacja 11 399 400 402 404 416
514 515automatyczna 399jawna Patrz animacja klatkowaklatkowa 420niejawna 420właściwość 422
antyaliasing 531Apache 22API Patrz interfejs APIarchitekt informacji 10arkusz styloacutew
agenta użytkownika 60kaskadowy Patrz CSS
artykuł 79 80 Patrz też element articleASPNET 9 13 150Asynchronous JavaScript and XML
Patrz Ajaxatrybut
62 184 187accesskey 187action 149 176align 344alt 42 62 124 125 132 158aria 187autoplay 196 198boolowski 62cellpadding 142cellspacing 142checked 62 161class 95 96 97 98 187 225 246
colspan 139 140 146contenteditable 187 191contextmenu 187controls 195data 188dir 188disabled 155 176draggable 188 191dropzone 191enctype 176for 171globalny 187hard 155headers 137 144 146height 128hidden 188href 105 106 301id 95 96 97 98 116 188 225 245label 164 176lang 188list 157loop 196 198maxlength 154 156mediagroup 196method 150 176multiple 164muted 196name 151 152 154 156 161 176placeholder 154 155poster 195preload 196readonly 155rel 301
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz588
atrybut mdash czytnik ekranu
atrybutrole 187 188rowspan 139 141 146scope 137 144 146selected 164size 156soft 155spellcheck 188src 61 62 115 124 125 132 195
463start 75step 169style 188summary 143tabindex 188target 119title 131 155 188type 153 154 155 156 158 161
162 165 166 167 168 169 176 197 213 301 463
usemap 131value 154 156 176width 128 132wrap 155
Audacity 194audio 193authoring 8backend 9bank fotografii 508 509BBEdit 17 19Berners‑Lee Tim 11 21 90 182 183biblioteka
Dojo 498JavaScript 497 498jQuery 498 499
pobieranie pliku 499tworzenie skryptoacutew 500
jQuery Mobile 498jQuery UI 498LESS Patrz LESSModernizr 80 495MooTools 498Proietti Valerio 498Prototype 498Ruby on Rails 150 498
SASS CSS Patrz SASSYUI 498
Bblock element Patrz element blokowyblog 4Blogger 4blok zawierający Patrz pozycjonowanie
blok zawierającyBluefish 50border Patrz obramowanieBowman Doug 397box model Patrz model pojemnikabraille Patrz mediabreakpoint Patrz punkt graniczny
Ccache Patrz pamięć podręcznaCagle Kurt 538Cailliau Robert 22Calzadilla Anthony 420Camen Kroc 196Cascading Style Sheet Patrz CSSCatlin Hampton 433Cederholm Dan 395 410checkbox Patrz przycisk pola wyboruchild Patrz dzieckochild selector Patrz selektor dzieckaChisholm Wendy 43cień 254 263 335
wewnątrz 336Clark Keith 495Clarke Andy 247client‑side 23client-side scripting language Patrz
język skryptowy działający po stronie klienta
clipart Patrz klipartCoda 17 19collection Patrz kolekcjaColorZilla 300comparison operator Patrz operator
poroacutewnania
Composer 16content area Patrz element zawartośćContent Strategist Patrz strateg
zawartościcontextual selector Patrz selektor
kontekstowyCorel PaintShop Pro 17 19 508Coyier Chris 134 295 299CSS 8 11 12 29 38 64 86 123 124
172 175 205 207 213 217 305 373important 217 218historia 221komentarz 213 300konflikt 217modularny 302narzędzia 222osadzony 213 218 300przeglądarki 217przejście Patrz przejścieregiony Patrz regiony CSSreguła 210 211
font‑face 227import 300 302keyframes 421kolejność 219
transformacja Patrz transformacjaukład 381wewnętrzny 214 300wykluczenia Patrz wykluczenia CSSzalety 207zapytania 445zerowanie 427zewnętrzny 213 218 300 302
CSS Exclusions Patrz wykluczenia CSS
CSS Regions Patrz regiony CSSCSS Reset Patrz CSS zerowanieCygwin 18 19cytat
długi 76 77 Patrz też element blockquote
kroacutetki 77 89 Patrz też element qczcionka Patrz kroacutej pismaczytnik ekranu 12 23 58 70 86 87 77
126 127 134 138 171
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz 589
dane typ mdash element
Ddane typ 466
ciąg znakoacutew 467liczbowy 466logiczny 467null 466tablica Patrz tablicaundefined 466 476
degradacja z wdziękiem 37deklaracja 210 211
DOCTYPE 56 67 184 185wartość 210 212
inherit 239właściwość Patrz właściwość
descendant Patrz potomekdescendant selector Patrz selektor
potomnyDeweloper 8DHTML 13display role Patrz rola wyświetlaniadithering 520 543 545DNS 22Document Object Model Patrz DOMDocument Type Definition Patrz DTDdokument
definicja typu Patrz DOCTYPEdrzewo Patrz drzewokonspekt 70 81oznaczenie 26struktura 29 55 209 215układ normalny 341walidacja 66zewnętrzny HTML 130źroacutedłowy 26
DOM 11 13 58 461 485trawersowanie 486
Domain Name System Patrz DNSdomena 22 24dopełnienie 142 292 305 306 312dostępność 41 42
formularza 153 158 161 171tabeli 142
Dreamweaver 4 16 115 222 273drzewo 486
węzeł 486 489dodawanie 490lista 487metoda dostępu 487usuwanie 490
DTD 185Dunham Ethan 228dynamic pseudo‑class 276dziecko 215dziedziczenie 214 216 239 274
EECMAScript 13 460edytor
HTML 16 50WYSIWYG 16
efekt halo 531Eich Brendan 460ekstranet 23elastic layout Patrz strona układ
elastycznyelement 184 187
a 85 105 119 276 400abbr 85 86 89 104acronym 86 89 189address 84 104applet 86 189article 79 80 81 82 104 187 494aside 79 80 81 104 187atrybut Patrz atrybutaudio 187 190 191autofocus 176b 85 87 88 104 172base 97basefont 86 97 189bdi 85 93 104 187bdo 85 93 104big 86 189blockquote 60 76 104blokowy 59 70 76 274 306 307
pływający 346body 56 68 76 215 463br 61 85 92 104button 158 176
canvas 11 187 191 198 199 200 411
caption 137 143 146center 86 189cień Patrz cieńcite 85 89 104code 85 90 104col 136 137 146colgroup 136 137 146command 187data 85 92 104datalist 157 170 176 187dd 75 76 104del 85 92 104details 76 187dfn 85 90 104dir 86 189div 79 80 94 99 104 124 149dl 75 76 104 134dopełnienie Patrz dopełnieniedt 75 76 104dzielący na sekcje 81em 60 66 85 86 104 215embed 187 196fieldset 76 161 171 172 173 176
435figcaption 76 78 104 127 143 187figure 76 78 104 127 143 187font 86 189footer 79 80 83 104 187form 149 150 166 176frame 189frameset 189głoacutewny Patrz element htmlgrupujący treść 76h1 Patrz nagłoacutewekhead 56 68 97 215 463header 79 80 83 104 187hgroup 73 80 104 187hr 61 72 76 104html 56 68 97i 85 87 88 104iframe 130 132img 61 115 123 124 125 127 132
215 284 411
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz590
element mdash folder
elementinput 153 154 155 158 161 165
166 176 187ins 85 92 104isindex 86 189isindex 189kbd 85 90 104keygen 170 176 187kolejność układania na stosie 367krawędź wewnętrzna 305 306krawędź zewnętrzna 305 306label 153 161 164 171 173 176legend 171 172 176 435li 73 74 104 107 124 244 245 259
276liniowy 59 60 70 77 84 85 94 124
125 274 306 307margines 330pływający 344 345
link 300 301margines 305 306 328 343
domyślny 328składanie 330 345ujemny 331 388
mark 85 90 104 187menu 86 187meta 56 61 68 97 445meta charset 56meter 170 176 187nagłoacutewka Patrz nagłoacuteweknarożniki eliptyczne 322 323
zaokrąglone 320 323nav 79 80 81 82 104 187 494niezastępowany 125noframes 189object 196ol Patrz lista uporządkowanaoptgroup 164 176option 155 157 176output 170 176 187p 59 70 76 104param 97 196pływający 330 341 342 344 346
349 351 354 381zrzucenie 354
podział na kolumny 381pojemnik 305 306
typ 334porzucony HTML 401 184 189pozycjonowany bezwzględnie 330
347 356 359 381 392pre 76 104progress 170 176 187przepełnienie zawartości 311przestarzały 86pusty 61 72 301q 77 85 89 104rp 85 93 104 187rt 85 93 104 187ruby 85 93 104 187s 85 87 88 104samp 85 90 104script 97 462 499section 79 80 81 104 187 494select 163 176semantyczny wewnątrztekstowy 84
Patrz też element liniowysmall 85 87 88 104source 187 196 197span 85 94 95 96 99 104 172strike 86 189strong 85 86 104style 65 97 213 272sub 85 90 104summary 187sup 85 90 104table 135 136tbody 137 146td 76 135 136 138 140 142 146textarea 154 155 176 434tfoot 137 146th 135 136 137 138 140 142 146thead 137 146time 85 91 104 187title 56 58 68 97tr 135 146track 187transformacja Patrz transformacjatt 86 189u 85 87 88 104
ul Patrz lista nieuporządkowanavar 85 104video 187 190 191 195 196 198wbr 85 93 104 187wewnętrzny Patrz element liniowywymiary 306 307 309 310wyświetlający czas 42zastępowany 125
margines 331zawartość 305 306
element box Patrz element pojemnik model pojemnika
element type selector Patrz selektor typu elementu
em 234 235 313 328 356 379encja 99end tag Patrz znacznik zamykającyescape character Patrz znak ucieczkievent Patrz zdarzenieevent binding Patrz zdarzenie wiązanieexplicit animation Patrz animacja
klatkowaeXtensible Markup Language Patrz
XML
Ffałszywe kolumny 395 396 397faux columns Patrz fałszywe kolumnyFerraiuolo Eric 272Firefogg 194firewall 23Fireworks 8 17 508 514 521 534 550
553kompresja 549
fixed layout Patrz strona układ sztywnyfixed positioning Patrz pozycjonowanie
sztywneFlanagan David 463Flash 10 11 181 191 198FlashCanvas 199Flexbox 381 395Flickr 509float drop 354folder 108
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz 591
foreground mdash hiperłącze
foreground Patrz pierwszy planformat
audio 193BMP 123 510Embedded Open Type 228EOT 228EPS 123 510GIF 123 510 511 513 514 515 520
526 528 548optymalizacja 542 543 544 545
546 547html 53JPEG 123 510 511 515 520 548
optymalizacja 542 547 550progresywny 516
JPG Patrz format JPEGOpenType 228OTF 228PNG 123 510 511 517 518 519
520 526 528 531 548optymalizacja 552
strumieniowy 11SVG 510 532 534 535 536
animacja 537XML 534
TIFF 123 510TrueType 228TTF 228Web Open Font Format 228webowy 123wideo 192WOFF 228
formularz 13 76 147 171 434 436aplikacja Patrz formularz skryptdostępność Patrz dostępność
formularzakontrolka 147 151 152 153
grupa 172identyfikator 171ukryta 166
menu rozwijane Patrz menu rozwijane
pole tekstowe Patrz pole tekstoweprzycisk Patrz przyciskskrypt 147 149
styl 175 434układ 173zmienna 151 152
Friedman Vitaly 247frontend 9Frost Brad 34 369 451 454FTP 18 19 21funkcja 473 474
addEventListener 479 480alert 464 473 478argument 473 475confirm 464 478obsługi zdarzeń 478prompt 464window
close 478focus 478
własna 474zwracanie wartości 475
Ggamma 518Gardner Lyza 40 453 454Garrett James 497general sibling selector Patrz selektor
dowolnego rodzeństwagenerated content Patrz zawartość
generowanageneric font family Patrz kroacutej pisma
rodzina gatunkowageolokacja 191Getty Images 509GIF Patrz GIFGIMP 17 19 508global scope Patrz zmienna zakres
globalnygniazdo 191Google 37graceful degradation Patrz degradacja
z wdziękiemgradient 37 272 295
generator 299 300liniowy 296projektowanie 299
promienisty 296 297przeglądarki 298
grafika 123 132bitmapowa 522clipart Patrz klipartdostępność 127elastyczna 447format pliku Patrz formatoptymalizacja 541 542 543 546 547
551 552 553 554rastrowa Patrz grafika bitmapowaskalowanie 128w tle 123 124 284 286 288 292
294paralaksa ruchu Patrz paralaksa
ruchuwebowa 507wektorowa 11 522 533wymiary 128 132zewnętrzna 123żroacutedła 508
Graphic Interchange Format Patrz format GIF
grid Patrz siatkaGriffiths Patrick 378Grigsby Jason 40 453Gustafson Aaron 38 158 396 430
HHandbrake 194handheld Patrz mediaHawryluk Zoltan 256 336Hay Stephen 35 381Hayes Paul 418heksadecymalny Hickson Ian 184hiperłącze 21 22 26 105
do fragmentu w innym dokumencie 118
do katalogu wyżej w hierarchii 112do określonego miejsca na stronie 116do podkatalogu 110do strony internetowych 107pocztowe 119
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz592
hiperłącze mdash kompilator
hiperłączetelefoniczne 120w nowym oknie przeglądarki 118w ramach jednego katalogu 109zewnętrzne 107
HSL 269HSLa 271HTML 8 12 26 49 50 55 119 485
historia 182znacznik Patrz znacznik
HTML5 11 12 56 80 179 180 181 185 187
HTML5 Shiv 494HTTP 11 21 24hybrid layout Patrz strona układ
hybrydowyhypertext links Patrz hipertekstHyperText Markup Language Patrz
HTML
IID selector Patrz selektor
identyfikatoraidentyfikator 95
agenta użytkownika 453IIFE 477IIS 22Illustrator 17 19 508ilustracja 76 78 Patrz też element
figure element figcaptionżroacutedła 508
image replacement technique Patrz tekst zastępowanie obrazkiem
implicit animation Patrz animacja niejawna
Independently Invoked Functional Expression Patrz IIFE
informacje kontaktowe do autora dokumentu 84
Information Architect Patrz architekt informacji
Inkscape 536inline element Patrz element liniowyinline style Patrz CSS wewnętrzny
inner edge Patrz element krawędź wewnętrzna
instrukcja 464if 469ifelse 469 470pętli Patrz pętlawarunkow 469
Interaction Design Patrz projektowanie interakcji
interaktywność 11 13 461interfejs 461
API 184 185 189 191 485Canvas API 200osi czasu 421użytkownika 5 6 10 498
widżet 13WYSIWYG 16
interlace Patrz przeplotinterlinia 235Internet Explorer 8 80intranet 23IPv4 22IPv6 22Irish Paul 310 494IStockphoto 509IxD Patrz projektowanie interakcji
JJava 13 460JavaScript 9 11 29 37 119 459460
biblioteka Patrz bibliotekamanifest 470
JavaScript Object Notation Patrz JSON
JavaServer Pages 150jednostka miary 234
bezwzględna 234względna 234
Jehl Scott 38 312 496 497Jensen Scott 35język
dynamiczny 459 460o słabym typowaniu 459 460skryptowy 13
działający po stronie klienta 459
XML Patrz XMLznacznikoacutew Patrz HTML
Johansson Roger 81JSON 497
Kkanał
alpha 271 518 526RSS Patrz RSS
katalog 25 108głoacutewny 114
Kellum Scott 429 523keyframe klatka kluczowaklasa 95 98 187 244 246 400 432
500 583klatka kluczowa 420 421Kleinfeld Sanders 200klient 23klip wideo 78 195klipart 509klucz 170Koblentz Thierry 447kodek 192kolekcja 487kolor
HSL Patrz HSLindeksowany 511 513 517nazwa 243 266 267obramowania Patrz obramowanie
kolorpaleta 273 512 513pierwszego planu 243 272RGB Patrz RGBtekstu Patrz tekst kolortła 243 272 273 274webowy 273wybieranie 169
kombinator Patrz selektor potomnykomentarz 54 60 213 464
CSS Patrz CSS komentarzjednowierszowy 465warunkowy 271 272 310wielowierszowy 465
kompilator 460
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz 593
kompresja mdash multimedia
kompresja 511 513bezstratna 513 517 546JPEG 515 547stratna 515
kontekst pozycjonowania Patrz pozycjonowanie blok zawierający
koszyk na zakupy 13 14kotwica 105kroacutej pisma
bezszeryfowy 71 229 230 231dekoracyjny 230format
Embedded Open Type 228konwersja 228OpenType 228TrueType 228Web Open Font Format 228
kapitaliki 241o stałej szerokości znakoacutew 77 90 230
231osadzanie 229pisanka 230pochylenie 239rodzina 226rodzina gatunkowa 229stos 226 231styl 239szeryfowy 71 229 230 231udostępnianie 228waga 239wariant 240wielkość 233 234 238słowo kluczowe 235
LLawson Bruce 182Lennartz Sven 431LESS 303 433licencja
Creative Commons 509rights-managed Patrz licencja
wyłącznaroyalty-free 509wyłączna 508
linia pozioma 72liquid layout Patrz strona układ płynnylista
definicji 73 75katalogowa 86nienumerowana Patrz lista
nieuporządkowananieuporządkowana 73 74 82 86 93
104 259 350 351numerowana Patrz lista
uporządkowanauporządkowana 73 74 104 149
local scope Patrz zmienna zakres lokalny
loop Patrz pętlaLovitt Michael 527
Łłącze hipertekstowe Patrz hiperłącze
MMacDonald Matthew 182mailto 119Marcotte Ethan 40 376 444margin Patrz element marginesMarquis Mat 454 459 485maszyna wirtualna 15mathematical operator Patrz operator
matematycznyMay Matt 43media 448
zapytanie 448 449menu 86
grupa opcji 164kontekstowe 86pasek 42poziome 349przewijane 163rozwijane 13 147 151 152 163 278
menubar Patrz menu pasekmetadane 97metajęzyk 183metoda
appendChild 491createElement 490createTextNode 491GET 150 151getAttribute 489getElementById 488getElementsByClassName 488getElementsByTagName 487innerHTML 490insertBefore 492POST 150 151querySelectorAll 488ready 500removeChild 492replaceChild 492setAttribute 489style 490
Meyer Eric 247 299 427Microsoft Expression Web 16 19 115
222Microsoft Internet Information Services
Patrz IISmiejsce docelowe 116mieszanka 433mikroformat 96 97Miro Video Converter 194mixin Patrz mieszankaMobitest 44model
border‑box 309content‑box 292 307 311pojemnika 220 305
IE 310 311Modernizr Patrz biblioteka Modernizrmodular style sheet Patrz CSS
modularnyMoll Cameron 377MP3WMAOgg Converter 194MSDN 381multimedia 10
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz594
nagłoacutewek mdash projektowanie
Nnagłoacutewek 59 70 76 79 83 386 Patrz
też element headergrupa 72łączenie z treścią tabeli 137tabeli 138zapytanie o media 449
nawigacja 79 Patrz też element navNCSA Mosaic 22niepełnosprawność Patrz użytkownik
niepełnosprawnynode Patrz drzewo węzełnode list Patrz drzewo węzeł listanon‑replaced Patrz element
niezastępowanyNorman Donald 5notacja funkcjonalna 284Notatnik 50 51Notepad 50
OO Connor Joshue 43obiekt
document 487window 478 479XMLHttpRequest 497
obramowanie 72 202 272 289 305 306 316kolor 202 243 272 273 319styl 316szerokość 318
obrazek Patrz grafika ilustracjaobrys Patrz obramowanieodsyłacz Patrz hiperłączeoffset Patrz pozycjonowanie
przesunięcieokno w oknie 130operator
matematyczny 469poroacutewnania 468 469
outer edge Patrz element krawędź zewnętrzna
Ppadding Patrz dopełnieniepaleta koloroacutew webowych Patrz kolor
webowypamięć podręczna 126 191paralaksa ruchu 295parent Patrz rodzicParker Todd 38parsowanie 28pasek
menu 42nawigacyjny poziomy 334 353postępu 42przewijania 119 130 155 295 312
persona PatrzPeter Beverloo 299pętla 471
for 471Photoshop 7 17 273 507 514 525 553
kompresja 549Proacutebnik koloroacutew 268 521
Photoshop Elements 17 19PHP 9 13 150 459pica 234pierwszy plan 272piksel 234 236 313 328 363 522 523
referencyjny 523plik
dźwiękowy 198graficzny 28graficzny 53indeksu 25rozszerzenie 53wideo 194
pływanie Patrz element pływającyPNG Patrz format PNGPNGcrush 519podkładka 462pojemnik elementu Patrz element
pojemnik model pojemnikapole
daty i czasu 152 167tekstowe 147 151 152 434
adresu e‑mailowego 156
hasło 155jednowierszowe 154 155okalizacji 156numeru telefonu 156wielowierszowe 154wyspecjalizowane 152 155wyszukiwania 156
wartości liczbowych 152 168wyboru 152 435
koloru 152 169wartości liczbowej z danego
zakresu 42wyszukiwania 86
polyfill Patrz wypełniaczpositioning context Patrz
pozycjonowanie blok zawierającypotomek 215Powers Shelley 538powiązanie
jawne 171niejawne 171
pozycjonowanie 341 356 Patrz też element pozycjonowanybezwzględne 356 359 381 392blok zawierający 360 361 364przesunięcie 357 363statyczne 356sztywne 357 368względne 356 358
prawo autorskie 88 102 507 508prezentacja 12 29print Patrz mediaprogram
do projektowania stron internetowych 7 17 18 19
do transferu plikoacutew Patrz FTPprogressbar Patrz pasek postępuprogressive enhancement Patrz
stopniowe ulepszanieprojection Patrz mediaprojektant informacji Patrz architekt
informacjiprojektowanie 5
doznań użytkownika 5 10graficzne 7
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz 595
projektowanie mdash selektor
interakcji 5skoncentrowane na potrzebach
użytkownikoacutew 6wizualne Patrz projektowanie
graficzneprotokoacuteł
HTTP 11 21 24HTTPS 24
przedrostek producenta przeglądarki 298 299
przeglądarka 18 19 23 126 127 128 478błędy 342Chrome 44desktopowa Patrz przeglądarka
graficznagraficzna 22 23informacje ignorowane 54 77mobilna 18 19 23nowe okno 118 119obsługa formatu
audio 194wideo 193
producent 298 299Safari 156 157w JavaScript 478wojna 182 493
przejście 399 400 406 407przeplot 514 518przezroczystość 271 275 286 514 518
526 528binarna 526 527kanału alfa 526 527 531w IE 271 275 276 518 527
przodek 215pozycjonowany 360
przycisk 147 151 152 434obrazkowy 158opcji 161 435pola wyboru pliku 161 165reset 158submit 158 434uniwersalny 158
pseudoclass selector Patrz selektor pseudoklasy
pseudoelement 279after 280before 280first‑letter 280first‑line 280
pseudoklasa 276 279 584 Patrz też selektorakcji użytkownika 277dynamiczna Patrz pseudoklasa
dynamicznaodnośnika 276
PSPad 50punkt
graniczny 452typograficzny 234
PuTTY 18 19Python 9 13 150
QQuartarolo Tony 431
Rradio button Patrz przycisk opcjiramka pływająca 130reference pixel Patrz piksel referencyjnyregiony CSS 381reklama interaktywna 131relative positioning Patrz
pozycjonowanie względnereplaced element Patrz element
zastępowanyResig John 498Respondjs 496Responsive Web Design 38 39 40 310
374 376 444 448Retina 430 449 453 517 522 523 524
550RGB 169 243 265 268 515 517 520
wartości szesnastkowe 266 267 269 270
RGBa 271 275Rieger Stephanie 40Robinson Alex 388
Robinson Mike 81rodzeństwo 215rodzic 215 239rola wyświetlania 333root directory Patrz katalog głoacutewnyrozdzielczość 522roztrząsanie Patrz ditheringRSS 14Ruby 9 13 459Ruby on Rails Patrz biblioteka Ruby
on Railsrysunek 78
SSASS 303 433Scalable Vector Graphics Patrz format
SVGscope Patrz zmienna zakresscreen Patrz mediascreen reader Patrz czytnik ekranuSCSS 433SeaMonkey 16 19sekcja 76 79 80 104 Patrz też element
sectionSelectivizr 279 495selektor 210 211 216 276 486 Patrz
też pseudoelement pseudoklasaactive 277 400checked 279disabled 279empty 279enabled 279first‑child 279first‑of‑type 279focus 277 400hover 277 400lang 279last‑child 279last‑of‑type 279link 276not 279nth‑child 279nth‑last‑child 279nth‑last‑of‑type 279
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz596
selektor mdash technika
selektornth‑of‑type 279only‑child 279only‑of‑type 279root 279target 279visited 276atrybutoacutew 281 282dowolnego rodzeństwa 245dziecka 245grupowanie 220 276identyfikatora 244 245 247 276interfejsu użytkownika 279klasy 244 246 247 276kontekstowy 244 245 247potomny 244 276przylegającego rodzeństwa 245pseudoelementu 279pseudoklasy 276 279strukturalny 279typu elementu 211 218uniwersalny 246 276
separator treści 28server‑side 23serwer 21 22
Apache Patrz ApacheIIS Patrz IISprzesyłanie danych
GET 150 151POST 150 151
SGML 183 185Sha Thomasa 498Shaefer Christian 310Sharp Remy 80 182 393 494Shea David 208shim Patrz podkładkasiatka 375 381Silverlight 181 192skanowanie 508 509skroacutet 89skrypt 461 463
box‑sizing 310DOM Patrz DOMosadzony 463Overthrow 312po stronie serwera 9 11
polyfill 279tworzenie 500zewnętrzny 463
slider Patrz pole wyboru wartości liczbowej z danego zakresu
Sloppy 44Slowy 44słowo kluczowe
return 475var 465 476 477
Souders Steve 44spam 120specyficzność 218 247sprite 430 431
generator 432Squarespace 4standard żyjący 184start tag Patrz znacznik otwierającystatement Patrz instrukcjastatic positioning Patrz pozycjonowanie
statyczneStephenson Sam 498stopka 79 83 386 392 Patrz też
element footerstopniowe ulepszanie 33 36storyboard 7strateg zawartości 10strona
czysta 427fałszywe kolumny Patrz fałszywe
kolumnygrafika 61 76kolumna Patrz fałszywe kolumny
strona układ wielokolumnowytło 395
pełne powiększenie 378prezentacja 58szablon 380szkic 6tworzenie 49tytuł 58układ 373 379 381
adaptacyjny 446elastyczny 373 377 379hybrydowy 373 379
płynny 373 376 377 382 386 392 396 445 446
pozycjonowany 392sztywny 373 374 375 384 385
394 395wielokolumnowy 373 380 381
382 384 385 386 392 394 396 397
źroacutedło 26Style Tiles 8subdomena 24
m 40Sublime Text 17 19syndykacja 81Syntactically awesome style sheets
Patrz SASSsystem siatki Patrz siatkaszeryfowa czcionka
Śścieżka 108
określana względem katalogu głoacutewnego 114
Ttabela 78 133 324 441
dostępność Patrz dostępność tabelkolumy zakres 140komoacuterka 76 135
pusta 443rozmiar 142zakres 139
nagłoacutewek 138struktura 135 137styl 138 441wiersza zakres 141
tablica 468element 468
technikaCSS Sprites 430Kelluma 429zastępowania tekstu obrazkiem Patrz
tekst zastępowanie obrazkiemzerowania styloacutew CSS 427
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz 597
teczka mdash właściwość
teczka 108tekst
alternatywny 42 124 126anonimowy 70cień 254 263formatowanie 225 263goły 70kolor 243sformatowany Patrz element prewyroacutewnanie 251 263zastępowanie obrazkiem 429zawijanie 347zmiana stylu wiersza 249 250 257
TelnetSSH 18 19test z udziałem użytkownikoacutew 6TextEdit 52TextMate 50TextPad 16 19timer Patrz element wyświetlający czastło Patrz grafika w tle kolor tła
właściwość background właściwość background‑image
Toland Patty 38tooltip Patrz wskazoacutewkatouch event Patrz zdarzenie dotykutransformacja 399 410 412 413 414 415
dwuwymiarowa 410kąta 411płynna 416trzywymiarowa 418 426własna 411
transformation Patrz transformacjatransition Patrz przejścieTRBL 313 314tty Patrz mediaTuck Michael 231Tumblr 4tv Patrz mediatweening Patrz animacja automatyczna
UUCD Patrz projektowanie
skoncentrowane na potrzebach użytkownikoacutew
UI Patrz interfejs użytkownikaURI 106URL 106URN 106urządzenie
dotykowe 277 278 312mobilne 33 34 35 39 295 336 369
445 450user agent style sheet Patrz
wyświetlanie domyślneuser agent style sheets Patrz arkusze
styloacutew agenta użytkownikaUser Centered Design Patrz
projektowani skoncentrowane na potrzebach użytkownikoacutew
User Experience Patrz projektowanie doznań użytkownika
User Interface Patrz interfejs użytkownika
UX Patrz projektowanie doznań użytkownika
użytkownik 5 6 7 13niepełnosprawny 41 42
VVeer 509viewport Patrz widokVirtual Machine maszyna wirtualnaVisscher Sjoerd 494
WW3C 11 22 36 41 42 67 69 106 137
182 183 190 376 381Wachs Maggie Costello 38WAI 41walidator 67 186warstwa
prezentacji 13 29 37 58 64 81 123 124 133 142 182 185 209
struktury 13 209zachowania 13
WaSP 183Web Accessibility Initiative Patrz WAI
Web Development 8Web Hypertext Application Technology
Working Group Patrz WHATWGWeb Standards Project Patrz WaSPWebPagetest 44Weizenbaum Nathan 433Weyl Estelle 420WHATWG 69 91 92 93 104 184
190wideo 192widok 445widżet 131wiersz
długość optymalna 374poleceń 18 19
witrynadiagram 6dla niepełnosprawnych Patrz
użytkownik niepełnosprawnyoptymalizacja 43 44wersja mobilna 40
właściwość 210 211 304animation 422 426background 280 293 304background‑attachment 291 304background‑clip 292 304background‑color 273 285 294 304
401background‑image 284 294 296 304background‑origin 292 304background‑position 288 292 304
401background‑repeat 286 289 304background‑size 292 304border 280 320 338border‑collapse 324 441 442 456border‑color 273 319 338 401border‑image 296 323 324 325 338border‑radius 320 321 338border-spacing 442 456border‑style 316 317 338border‑width 318 338box‑shadow 335 338box‑sizing 307 310 338clear 347 371
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz598
właściwość mdash znak
właściwośćcolor 243 272 273 280 304 401column-count 381display 260 333 339 411 441
none 334dziedziczenie 216empty-cells 443 456float 280 342 343 371font 241 263 280font‑family 226 263font‑size 233 234 235 237 263 401font‑size‑adjust 257font‑style 240 263font‑variant 241263font‑weight 239 263 401height 306 307 339 402letter‑spacing 253 280 401line‑height 249 263 280 401list‑style 261list‑style‑image 261 296list‑style‑position 260list‑style‑type 259margin 280 328 339 402opacity 275 304 401outline 380 401overflow 311 339padding 280 312 313 339 402perspective 426position 356 369 371table-layout 441text ‑indent 250 429text‑align 251 263text‑align‑last 251text‑decoration 252 263 280text‑direction 257 263text‑indent 250 263 401text‑justify 251text‑shadow 254 263 299 401text‑transform 252 263 280transform 426transform-origin 411transition 406 426transition-delay 400 404 426transition-duration 400 401 426transition-property 400 401 426
transition-timing-function 400 402 426
unicode‑bidi 257 263vertical‑align 257 263 280 401visibility 257 263 401white‑space 257 263width 306 307 339 345 346 402word‑spacing 253 263 280 401z-index 367 371 402
WordPress 4World Wide Web Consortium Patrz
W3CWroblewski Luke 35 173wskazoacutewka 42wydajność 6 43 44 430wykluczenia CSS 381wykres 134wypełniacz 462 493 494
HTML5 Shim Patrz HTML5 ShivHTML5 Shiv Patrz HTML5 ShivModernizr Patrz biblioteka
ModernizrRespondjs Patrz RespondjsSelectivizr Patrz Selectivizr
wyszukiwarka 37 70wyświetlanie domyślne 217
XXHTML 12 14 55 183
składnia 183XML 14 183 485
serializacja dla HTML5 185SVG 534
YYoung Zebulon 431YSlow 44
Zzagnieżdżanie 57 89zapora sieciowa Patrz firewallzawartość generowana 280
zdarzenie 478atrybut HTML 479dotyku 462metoda przyłączona do elementu 479
480obsługa 479 480onblur 479onchange 479onclick 478479onerror 479onfocus 479onkeydown 479onkeypress 479onkeyup 479onload 478479onmousedown 479onmousemove 479onmouseover 478479onmouseup 479onsubmit 479wiązanie 478
Zeldman Jeffrey 36 429zmienna 465
zakres 476globalny 476 477lokalny 476 477
znacznik 26 54 55 185końcowy Patrz znacznik zamykającyotwierający 55początkowy Patrz znacznik
otwierającysemantyczny 58tekstowy 69widoku meta 445zamykający 55 65 66
znak 245 270$ 433amp 99 100 246 112 115 465 465 276 279
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Skorowidz 599
279bdquordquo 99 464 433pound 100yen 100euro 100lt 99 100gt 100copy 99 100reg 100hellip 100apostrofu 100biały 77 211 464cudzysłowu 62 89kropki 246pauzy 100poacutełpauzy 100spacji twardej 100specjalny 99trade 100ucieczki 99wypunktowania 73 100
Żżądanie HTTP 44
Kup książkę Poleć książkę
Kup książkę Poleć książkę
Kup książkę Poleć książkę