projektowanie stron internetowych. przewodnik dla początkujących

46

Upload: vandang

Post on 11-Jan-2017

229 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: 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ę

Page 2: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 3: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 4: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 5: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 6: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 7: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 8: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 9: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 10: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 11: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 12: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 13: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 14: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 15: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 16: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 17: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 18: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 19: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 20: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 21: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 22: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 23: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 24: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 25: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 26: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 27: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 28: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 29: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 30: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 31: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 32: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 33: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 34: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 35: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 36: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 37: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 38: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 39: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 40: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 41: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 42: Projektowanie stron internetowych. Przewodnik dla początkujących

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ę

Page 43: Projektowanie stron internetowych. Przewodnik dla początkujących

Kup książkę Poleć książkę

Page 44: Projektowanie stron internetowych. Przewodnik dla początkujących