Wszelkie prawa zastrzeżone Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione Wykonywanie kopii metodą kserograficzną fotograficzną a także kopiowanie książki na nośniku filmowym magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań by zawarte w tej książce informacje były kompletne i rzetelne Nie biorą jednak żadnej odpowiedzialnościani za ich wykorzystanie ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich Autor oraz Wydawnictwo HELION nie ponoszą roacutewnież żadnej odpowiedzialnościza ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce

Redaktor prowadzący Ewelina BurskaProjekt okładki Jan PaluchMateriały graficzne na okładce zostały wykorzystane za zgodą Shutterstock

Wydawnictwo HELIONul Kościuszki 1c 44-100 GLIWICEtel 32 231 22 19 32 230 98 63e-mail helionhelionplWWW httphelionpl (księgarnia internetowa katalog książek)

Drogi CzytelnikuJeżeli chcesz ocenić tę książkę zajrzyj pod adres httphelionpluseropinietwspk2Możesz tam wpisać swoje uwagi spostrzeżenia recenzję

Materiały do książki można znaleźć pod adresem ftpftphelionplprzykladytwspk2zip

ISBN 978-83-246-7290-5

Copyright copy Helion 2014

Printed in Poland

bull Kup książkębull Poleć książkę bull Oceń książkę

bull Księgarnia internetowabull Lubię to raquo Nasza społeczność

Spis tre ci

Wst p 9O czym jest ta ksi ka 9Dla kogo jest ta ksi ka 9Co b dzie potrzebne 10Kody roacuted owe i listingi 10

Rozdzia 1 Podstawy 11Lekcja 1 Pierwsze kroki 11

Wczytanie dokumentu do przegl darki 12HTML XHTML i HTML5 14Podstawowa struktura strony WWW 15Pierwsza strona WWW 16Pierwsza strona w XHTML 17Prolog dokumentu HTML i XHTML 18Formatowanie kodu HTML 20Polskie litery na stronie WWW 21Edytory tekstowe dla systemu Windows 24Roacute ne przegl darki 27

Lekcja 2 Strona WWW w internecie 27Adres strony WWW 27Umieszczanie witryny w internecie 28W asny adres internetowy 35Serwer WWW na domowym komputerze 36

Lekcja 3 Struktura HTML 40Znaczniki HTML 40Zagnie d anie znacznikoacutew 41Atrybuty znacznikoacutew 44Encje (znaki specjalne) 47Spacja tabulacja i znak nowego wiersza 52Komentarze 54Struktura dokumentu raz jeszcze 55

Rozdzia 2 Elementy j zyka HTML 61Lekcja 4 Podstawowe znaczniki 61

Tytu y (nag oacutewki) 62Akapity 63Blok preformatowany 64

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

4 Tworzenie stron WWW Praktyczny kurs

Blok cytatu 65Linie 67Podzia wiersza 68Adresy 69Rodzaje spacji 70Warstwy 72Wyroacute nienie liniowe (ltspangt) 73Cytat liniowy 73Znaczniki wprowadzone w HTML5 75

wiczenia do samodzielnego wykonania 78Lekcja 5 Listy czyli wykazy 79

Listy w HTML 79Listy nieuporz dkowane 80Listy uporz dkowane 81Listy definicyjne 82Zagnie d anie list 85Zagnie d anie list o roacute nych typach 86

wiczenia do samodzielnego wykonania 88Lekcja 6 Tabele 89

Ogoacutelna budowa tabel 89Proste tabele 90Obramowanie i tytu tabeli 92Odst py w komoacuterkach i mi dzy komoacuterkami 93Puste komoacuterki 94Nag oacutewki wierszy oraz kolumn 96

czenie komoacuterek 97Tabele rozszerzone (z o one) 100Grupowanie kolumn 104Sterowanie obramowaniem wewn trznym i zewn trznym 108

wiczenia do samodzielnego wykonania 109Lekcja 7 Obrazy 111

Grafika na stronach WWW (standardy plikoacutew graficznych) 111Tworzenie i konwersja grafiki 112Rozmiary grafiki i zapis progresywny 114Umieszczanie grafiki na stronie (znacznik ltimggt) 116Przezroczyste obrazy 119Regulacja rozmiaroacutew obrazu 120Obrazy i tekst 122Dzielenie obrazoacutew na cz ci 123Grupowanie obrazoacutew w HTML5 125Przestarza e atrybuty znacznika ltimggt 125

wiczenia do samodzielnego wykonania 126Lekcja 8 Odno niki 126

Definiowanie odno nikoacutew 127Adresy wzgl dne i bezwzgl dne 128Kolory odno nikoacutew 130Rodzaje zasoboacutew sieciowych 131Gdzie otwiera odno niki 134Obrazy jako odno niki 135Mapy odno nikoacutew na obrazach 138Mapy odno nikoacutew i XHTML 141Zakotwiczenia 143Pozosta e atrybuty odno nikoacutew 145

wiczenia do samodzielnego wykonania 145

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

Spis tre ci 5

Lekcja 9 Kontrola nad tekstem 146Formatowanie tekstu 147Zmiana atrybutoacutew czcionki 147Znaczniki logiczne 151Znaczniki dost pne tylko w HTML5 158Przestarza a kontrola nad czcionk 160

wiczenia do samodzielnego wykonania 161

Rozdzia 3 Z o one elementy witryny 163Lekcja 10 Multimedia na stronie WWW 163

Typy tre ci multimedialnych 164Animowane obrazy 165Najprostsze rozwi zanie mdash odno nik 166Zagnie d anie multimedioacutew na stronie 167Parametry multimedioacutew 171Zagnie d anie ze znacznikiem ltembedgt 177Wideo z YouTube 178Multimedia w HTML5 179

wiczenia do samodzielnego wykonania 181Lekcja 11 Formularze i elementy interaktywne 182

Formularze na stronie WWW 182Interaktywne elementy formularzy 185Nowe elementy w HTML5 199Blokowanie elementoacutew witryny 206Formularz wysy any na adres e-mail 207Swobodne elementy interaktywne 210Korzystanie ze skroacutetoacutew klawiaturowych 211Etykiety elementoacutew interaktywnych 212Grupowanie elementoacutew 214

wiczenia do samodzielnego wykonania 215Lekcja 12 Formatowanie strony za pomoc tabel 215

Wyroacutewnywanie formularza 216Formatowanie formularza za pomoc tabeli 218Tworzenie uk adu strony za pomoc tabeli 220Zagnie d anie tabel 223Czy warto u ywa tabel do formatowania 225

wiczenia do samodzielnego wykonania 226Lekcja 13 Nowe i przestarza e ramki 227

Co to s ramki 227Struktura strony z ramkami 228Ramki a odno niki 234Ramki w ramkach 236Wewn trzne zagnie d anie ramek 237Ramki w HTML5 238

wiczenia do samodzielnego wykonania 240

Rozdzia 4 Style CSS 241Lekcja 14 Podstawy styloacutew 241

Czym s style CSS 242Do czanie styloacutew do dokumentoacutew 243Budowa stylu i rodzaje selektoroacutew 246Dziedziczenie kaskadowo i regu y nak adania 260Jednostki miary 263Komentarze do styloacutew 264

wiczenia do samodzielnego wykonania 264

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

6 Tworzenie stron WWW Praktyczny kurs

Lekcja 15 W asno ci czcionek 265Atrybuty czcionek 265Rozmiar czcionki 265Nazwane rozmiary czcionek 268Rodziny czcionek 271Style i warianty 273Waga czyli grubo czcionki 275Cecha font mdash wszystko razem 276W asne czcionki na stronie WWW 279

wiczenia do samodzielnego wykonania 280Lekcja 16 Formatowanie tekstu 280

Kontrola nad tekstem 281Wyroacutewnywanie tekstu w poziomie 281Wyroacutewnywanie tekstu w pionie 282Wyroacutewnywanie a inne elementy witryny 284Kontrolowanie odst poacutew 287Wci cia 289Dekoracje czyli wyroacute nienia 290Kontrola wielko ci liter (transformacje) 291Obs uga bia ych znakoacutew 292Cieniowanie napisoacutew 294Kierunek tekstu 295

wiczenia do samodzielnego wykonania 295Lekcja 17 Style list 296

Wyroacute niki listy nienumerowanej 296Typowe wyroacute niki listy numerowanej 298Inne wyroacute niki 300Obrazy jako wyroacute niki 301Pozycja wyroacute nika 303Wszystko razem czyli w a ciwo list-style 304

wiczenia do samodzielnego wykonania 305Lekcja 18 Kolory przezroczysto ci i podk ady 305

Definiowanie koloroacutew 306Kolor tekstu i podk adu 308Kolory okre lone przez system operacyjny 312Stopie przezroczysto ci 313Obrazy jako t o 314Powtarzanie obrazu t a 316Zakotwiczanie obrazoacutew t a 317Pozycja obrazu t a 317Wszystko razem czyli w a ciwo background 320Nowe cechy w CSS3 320

wiczenia do samodzielnego wykonania 323Lekcja 19 Marginesy obrysy i obramowania 323

Model pude kowy mdash zale no ci mi dzy marginesami 324Definiowanie marginesoacutew 324Marginesy wewn trzne czyli wype nienia 327T a w modelu pude kowym 328Dodawanie pe nych obramowa (ramek) 330Skroacutetowa definicja obramowania 333Obramowania cz stkowe 333Obramowania w CSS3 335Obrysy 337

wiczenia do samodzielnego wykonania 339

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

Spis tre ci 7

Lekcja 20 Style dotycz ce tabel 340CSS i standardowe obramowanie tabeli 340Odst py wewn trz tabeli 342T a i wype nienia 344

czenie obramowa 348Obs uga pustych komoacuterek 349Pozycje tytu oacutew 350Ustalanie sposobu generowania tabeli 350

wiczenia do samodzielnego wykonania 351

Rozdzia 5 Dalsze boje z CSS 353Lekcja 21 Wielko ci i pozycje elementoacutew witryny 353

Rozmiary elementoacutew strony 354Zawarto poza elementem 356Rozmiary maksymalne i minimalne 357Po o enie elementu w witrynie 360Elementy o sta ej pozycji 365

wiczenia do samodzielnego wykonania 367Lekcja 22 Sposoby wy wietlania elementoacutew strony 368

Kolejno wy wietlania 368Kadrowanie elementoacutew 371Ukrywanie elementoacutew 374Sposoby wy wietlania 374Kszta ty kursora 377

wiczenia do samodzielnego wykonania 377Lekcja 23 Uk ad strony generowany przez CSS 380

Przep ywy elementoacutew 381Selektywne wy czanie przep ywoacutew 384Oblewanie tekstem czyli przep ywy w praktyce 385Formularz pozycjonowany za pomoc CSS 387Uk ad witryny generowany dzi ki CSS 389

wiczenia do samodzielnego wykonania 391

Skorowidz 393

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

8 Tworzenie stron WWW Praktyczny kurs

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

Wst p

O czym jest ta ksi kaInternet a wraz z nim strony WWW zmienia si w nieprawdopodobnym wprost tem-pie Wcale nie tak dawno kroacutelowa y dosy ascetyczne witryny a style nadaj ce imopraw wizualn dopiero zdobywa y uznanie webmasteroacutew (twoacutercoacutew witryn interne-towych) Dzi rzeczywisto jest zupe nie inna Witryny nie tylko zawieraj ciekawe tre-ci ale i prezentuj je w bardzo atrakcyjny sposoacuteb Obrazy multimedia dynamiczne

elementy wideo itp s ju nieod cznymi elementami sieci WWW

Nie zmieni o si jedno mdash podstawy Do budowania witryn wci jest u ywany j zykHTML Pozwala on na utworzenie struktury strony i zamieszczenie w niej tre ci Z koleido zmiany mo liwo ci prezentacyjnych czyli mo liwie atrakcyjnej prezentacji tej tre cis u tzw style CSS W a nie o tym jest ta ksi ka To kurs pokazuj cy jak za pomocHTML i CSS budowa witryny internetowe

Zakres tematyczny obejmuje wszystkie aspekty niezb dne do tworzenia wspoacute czesnychstron WWW od napisania najprostszej witryny wy wietlaj cej jedno zdanie i sposo-boacutew opublikowania jej w sieci poprzez dodawanie rozmaitych elementoacutew takich jaktabele wykazy i grafika (ale roacutewnie tre ci multimedialne i klipy wideo) a po bu-dowanie z o onego uk adu strony za pomoc styloacutew CSS To wszystko jest zilustro-wane wieloma praktycznymi przyk adami ktoacuterych zrozumienie nikomu nie przysporzynajmniejszych k opotoacutew

Dla kogo jest ta ksi kaKsi ka jest przeznaczona dla osoacuteb pocz tkuj cych ktoacutere by mo e nigdy nie zajmo-wa y si budowaniem nawet najprostszych stron Wszystkie techniki niezb dne do two-rzenia witryn WWW czyli HTML i CSS s omawiane od podstaw tak by prezento-wane zagadnienia by y zrozumia e dla ka dego Nie jest te konieczna znajomo

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

10 Wst p

technicznych aspektoacutew funkcjonowania sieci Za o eniem jest jednak e Czytelnikma wiedz i do wiadczenie niezb dne do sprawnego codziennego pos ugiwania sikomputerem i korzystania z zasoboacutew internetu Wie zatem jak administrowa swoimsystemem (czyli potrafi np samodzielnie zainstalowa program) korzysta z edytoroacutewtekstowych poczty elektronicznej przegl darki Z pewno ci nie s to umiej tno ciwykraczaj ce poza wiedz typowego u ytkownika komputera

Co b dzie potrzebneNa pewno niezb dna jest ch poznania technik tworzenia stron internetowychOczywi cie potrzebny b dzie komputer najlepiej z dost pem do internetu (wbrewpozorom dost p do sieci wcale nie jest konieczny do nauki tworzenia stron) Oproacutecztego przyda si prosty edytor tekstu mo e to by nawet windowsowy Notatnik mdash coprawda nie jest najwygodniejszym narz dziem ale w zupe no ci wystarczaj cymKwestia edytoroacutew zostanie dok adnie opisana w rozdziale 1 Potrzebna b dzie roacutew-nie przegl darka WWW mdash to wydaje si oczywiste Mo e to by dowolny produkttego typu najlepiej w mo liwie najnowszej wersji np (w kolejno ci alfabetycznej)Chrome Firefox Internet Explorer Opera

Kody roacuted owe i listingiWszystkie listingi oraz kody roacuted owe przyk adoacutew prezentowanych w ksi ce mo napobra ze strony internetowej httphelionplksiazkitwspk2htm lub bezpo rednio z ser-wera FTP ftpftphelionplprzykladytwspk2zip Oproacutecz listingoacutew pod wskazanymiadresami dost pne s rozwi zania wicze do samodzielnego wykonania zawartychw wi kszo ci lekcji

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

Rozdzia 1

Podstawy

Rozdzia 1 rozpoczyna nasz przygod z tworzeniem stron WWW Sk ada si z trzechlekcji w ktoacuterych omoacutewione zosta y podstawy niezb dne do dalszej nauki Zobaczy-my jak wygl da struktura strony WWW z czego sk ada si strona i jak w najprostszysposoacuteb wy wietli zwyk y napis Omoacutewione zostan roacutewnie narz dzia pomocne przytworzeniu witryny i przydatne edytory dzi ki ktoacuterym omin nas min problemy z wy-wietlaniem polskich znakoacutew W lekcji 2 zostan przedstawione sposoby umieszcze-

nia strony WWW w internecie tak by by a dost pna dla wszystkich zainteresowanychTen temat jednak mo e zosta pomini ty przez pocz tkuj cych gdy testowanie two-rzonych witryn mo na bez problemoacutew przeprowadza na domowym komputerze przyu yciu wy cznie przegl darki WWW

Lekcja 1 Pierwsze kroki Z czego sk ada si strona WWW

Jak otworzy plik w przegl darce

Co to jest HTML i XHTML

Jakiego j zyka opisu strony u ywa

Jak wygl da struktura strony napisanej w HTML-u

Co to jest kod roacuted owy

W jaki sposoacuteb unikn problemoacutew z polskimi literami

Czym jest prolog dokumentu HTML

Jakie edytory tekstowe wspomagaj tworzenie witryn

Dlaczego warto testowa witryny w roacute nych przegl darkach

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

12 Rozdzia 1 Podstawy

Wczytanie dokumentu do przegl darki

Gdy przegl damy strony WWW widzimy na nich wiele rozmaitych danych tekstgrafiki zdj cia animacje dynamiczne menu itp Tworzy to wra enie du ej z o ono ciTymczasem podstawowa strona WWW to zwyczajny dokument tekstowy Wszystkoinne to tylko dodatki umieszczone w osobnych plikach Oczywi cie nie jest to takidokument jaki tworzymy np w Wordzie Ma on swoj struktur i specjalne znacznikidzi ki ktoacuterym przegl darka wie jak ma wy wietli zawart w nim tre T strukturi te znaczniki musimy utworzy sami To w a nie zadanie ka dego twoacutercy stron WWW

Jak w najprostszy sposoacuteb wy wietli co w przegl darce To proste Wystarczy utwo-rzy zwyk y dokument tekstowy wpisa w nim dowoln tre i otworzy go w ChromieFirefoksie Internet Explorerze lub innym programie tego typu Co rozumiemy przezdokument tekstowy To plik zawieraj cy tylko tekst Mo na go przygotowa za po-moc dowolnego edytora tekstowego W systemie Windows wystarczy u y dost pnegostandardowo Notatnika (z menu Start wybieramy Programy (lub Wszystkie programy)Akcesoria i Notatnik)

W edytorze nale y wpisa dowoln tre (rysunek 11) a nast pnie zapisa plik wy-bieraj c z menu Plik pozycj Zapisz

Rysunek 11Testowy wpisw edytorze tekstowym

W oknie wyboru nazwy pliku wpisujemy indexhtml lub dowoln inn nazw (rysunek12) Wa ne aby rozszerzenie nazwy pliku mia o posta html (lub htm jednak htmljest lepszym rozwi zaniem1) Z listy Zapisz jako typ nale y wybra pozycj Wszystkiepliki2 a pole wyboru Kodowanie pozostawi bez zmian Po klikni ciu przycisku Zapiszdokument zostanie zapisany i zostanie mu nadane rozszerzenie html

Rysunek 12Parametryzapisywanego pliku

1 Prawid owym rozszerzeniem plikoacutew zawieraj cych dokumenty typu HTML (czyli tre stron WWW)

pierwotnie by o html Problem powsta gdy takie pliki trzeba by o zapisa w systemach DOS i opartychna nich wczesnych wersjach Windowsa ktoacutere dopuszcza y maksymalnie trzyliterowe rozszerzeniaDlatego oproacutecz html zacz o funkcjonowa rozszerzenie htm Dzi ka dy popularny system operacyjnyoferuje rozszerzenia plikoacutew o d ugo ci wi kszej ni trzy znaki dlatego lepiej stosowa rozszerzenie html

2 Je li w polu Zapisz typ jako pozostanie domy lna opcja Dokument tekstowy do wprowadzonej nazwypliku edytor doda rozszerzenie txt Wtedy je li np wprowadzon nazw by o indexhtml na dyskuzostanie zapisany plik o nazwie indexhtmltxt Dlatego konieczna jest zmiana tej opcji na wskazanw tek cie

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

Lekcja 1 Pierwsze kroki 13

Miejsce zapisania pliku jest dowolne Mo na go umie ci nawet na pulpicie Lepiejjednak przygotowa specjalny katalog w ktoacuterym b d umieszczane wszystkie plikitestowe i ktoacutery pozwoli na swobodne testowanie prezentowanych przyk adoacutew Ten ka-talog mo na nazwa np www Taki katalog b dzie si pojawia w dalszych przyk adach

Po zapisaniu pliku trzeba go wczyta do przegl darki Najpro ciej zrobimy to klikaj cdwukrotnie plik w Eksploratorze Windows Uruchomi si domy lna przegl darka3a plik zostanie do niej wczytany Mo na te najpierw uruchomi przegl dark (dowoln )a nast pnie wczyta do niej plik Wtedy

W Chromie wciskamy kombinacj klawiszy Ctrl+O i w oknie wyboru plikoacutewwskazujemy plik indexhtml

W Firefoksie z menu Plik wybieramy Otwoacuterz plik (lub wciskamy kombinacjklawiszy Ctrl+O) i wskazujemy plik indexhtml

W Internet Explorerze z menu Plik wybieramy Otwoacuterz (lub wciskamykombinacj klawiszy Ctrl+O) a nast pnie klikamy Przegl daj i wskazujemyplik indexhtml

W Operze na g oacutewnym pasku narz dziowym (je li jest widoczny) klikamy Otwoacuterz(lub wciskamy kombinacj klawiszy Ctrl+O) i wskazujemy plik indexhtml

Niezale nie od tego jakiej aplikacji u yli my na ekranie pojawi si tre pliku tek-stowego wprowadzona wcze niej w edytorze (rysunek 13)

Rysunek 13Plik tekstowy wczytanydo przegl darki

Jak wida najprostsza strona WWW wcale nie musi si sk ada ze skomplikowanychi ma o zrozumia ych dla laika polece Wystarczy napisa troch tekstu Niestety ta-kie post powanie wystarczy jedynie do zaprezentowania prostej tre ci Ju przy kilkuzdaniach natrafimy na prozaiczne problemy cho by takie jak brak mo liwo ci zasto-sowania akapitoacutew zmiany czcionki nie moacutewi c ju o budowaniu uk adu strony

Warto zrobi prosty test Zmodyfikujmy tre pliku indexhtml (np otwieraj c go po-nownie w Notatniku) lub utwoacuterzmy nowy tak by zawiera tre w kilku wierszach(rysunek 14)

3 Przegl darka domy lna to ta ktoacutera zosta a zarejestrowana w systemie jako produkt maj cy by u ywany

domy lnie przy wszelkich czynno ciach zwi zanych z WWW np do otwierania plikoacutew z rozszerzeniemhtml W dost pnych obecnie systemach z rodziny Windows domy lna przegl darka jest wybierana pozainstalowaniu systemu jednak podczas instalacji innych produktoacutew (Chrome Firefox Opera) ka dyz nich oferuje mo liwo zmiany tego ustawienia Tak wi c domy ln przegl dark mo e by praktyczniedowolny produkt tego typu

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

14 Rozdzia 1 Podstawy

Rysunek 14Edytor z kilkomawierszami tekstu

Je eli po zapisaniu danych ponownie wczytamy plik indexhtml do przegl darki spotkanas niespodzianka Ca y tekst b dzie prezentowany tylko w jednym wierszu (rysunek15) Wida wi c wyra nie e do prawid owego formatowania strony WWW potrzebnes dodatkowe elementy S u y do tego j zyk HTML (lub XHTML) Dopiero jego za-stosowanie pozwala tworzy poprawne witryny

Rysunek 15W przegl darce tekstjest prezentowanyjednym ci giem

HTML XHTML i HTML5

J zykiem s u cym do tworzenia stron WWW jest HTML czyli Hypertext MarkupLanguage Nazywamy go roacutewnie j zykiem opisu strony Sk ada si ze znacznikoacutewktoacutere nadaj znaczenie roacute nym elementom tekstowym Pozwalaj np sformatowaakapit lub doda do dokumentu odno nik (link hiper cze) prowadz cy do innej witrynyczy zasoboacutew sieci

Pocz tki HTML si gaj wczesnych lat 90 XX wieku Pierwszy dokument dokonuj -cy standaryzacji tego j zyka pojawi si w 1995 roku i dotyczy standardu HTML 20Obecnie4 najnowsz oficjaln wersj standardu jest wci HTML 401 ktoacutery pocho-dzi z 1999 roku5 Nie da si ukry e ma ju swoje lata a rozwoacutej zosta na d ugi czaszatrzymany Dopiero w styczniu 2008 roku opublikowano roboczy szkic wersji 5ktoacutera wci jest w fazie uzgodnie organizacji standaryzacyjnych

Jedn z przyczyn zatrzymania rozwoju HTML by o dosy powszechne pod koniec lat90 ubieg ego wieku przekonanie e kolejne wersje j zyka opisu strony powinny byci lej oparte na zdobywaj cym wtedy coraz wi ksz popularno j zyku XML Dla-

tego powsta j zyk XHTML (Extensible Hypertext Markup Language) ktoacutery w pier-wotnej wersji 10 (stycze 2000 roku) by stosunkowo prost adaptacj HTML 401do standardu XML Powsta a roacutewnie wersja 11 ktoacutera jednak a do pocz tku 2009roku nie powinna by formalnie stosowana do zapisu danych typu HTML6

4 Czyli w pierwszej po owie 2013 roku5 Oficjalne zatwierdzenie standardu mia o miejsce w maju 2000 roku (standard ISOIEC 154452000)6 Wynika to z rekomendacji organizacji standaryzacyjnej W3C Otoacute typem danych dla dokumentoacutew

HTML i XHTML10 mo e by texthtml standardowo rozpoznawany przez wszystkie serweryi przegl darki (a tak e inne aplikacje) tymczasem typem danych dla XHTML 11 powinno byapplicationxhtml+xml To ograniczenie zosta o zniesione w styczniu 2009 roku

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

Lekcja 1 Pierwsze kroki 15

Nie b dziemy si zag bia w teoretyczne rozwa ania na temat j zykoacutew HTML i XHTMLczas bowiem odpowiedzie na pytanie nurtuj ce zapewne ka dego pocz tkuj cegotwoacuterc stron WWW mdash ktoacutery z tych j zykoacutew wybra Odpowied b dzie przewrotnaObecnie najrozs dniejsze jest wybranie zgodno ci z tzw standardem HTML5 Dlaczegotak zwanym Dlatego e taki standard formalnie nie istnieje Dost pne s jedynie jegopropozycje do ktoacuterych wci dodaje si nowe elementy7 Co wi cej nie wszystkienowe elementy s interpretowane przez przegl darki

Wbrew pozorom opisana sytuacja nie jest du ym problemem Typowe elementy HTML5s opracowane na tyle dok adnie e mo na je stosowa w taki sposoacuteb aby stronyby y poprawnie interpretowane przez roacute ne przegl darki dost pne na rynku Dlategowszystkie przyk ady prezentowane w ksi ce (chyba e napisano inaczej) b d zgodneze wspomnianym HTML5 (roacute nice mi dzy HTML 401 i HTML5 b d zaznaczanew opisach)

Podstawowa struktura strony WWWStruktura strony WWW jest budowana z tzw znacznikoacutew Mo na je traktowa jakpolecenia formatuj ce Wi cej informacji o znacznikach zawiera lekcja 3 ju terazjednak powinni my zapozna si z ogoacuteln budow strony Zosta a ona przedstawionana listingu 11

Listing 11 Ogoacutelna struktura strony WWW

lthtmlgtltheadgtTutaj nale y umie ci tre nag oacutewka dokumentultheadgtltbodygtTutaj nale y umie ci w a ciw tre dokumentu HTMLltbodygtlthtmlgt

Dokument rozpoczynamy od znacznika lthtmlgt a ko czymy znacznikiem lthtmlgtWewn trz mo na wyroacute ni dwie g oacutewne cz ci Pierwsza z nich to nag oacutewek ktoacuteryznajduje si mi dzy znacznikami ltheadgt i ltheadgt Umieszczane s w nim roacute ne in-formacje o dokumencie np sposoacuteb kodowania znakoacutew tytu dane o autorze itp Teinformacje nie s wy wietlane (z wyj tkiem tytu u strony) W a ciwa tre doku-mentu czyli to co zobaczy u ytkownik odwiedzaj cy witryn znajduje si w sekcjiwyroacute nionej za pomoc znacznikoacutew ltbodygt i ltbodygt Tam mo na umie ci np aka-pity tekstowe

Tre zaprezentowan na listingu a sk adaj c si ze znacznikoacutew HTML nazywa-my kodem roacuted owym strony WWW W skroacutecie b dziemy moacutewili o kodzie strony

7 Organizacja W3C (World Wide Web Consortium) ma publikowa rekomendacje standardu HTML5

(wed ug planoacutew pierwsza pojawi si w 2014 roku a kolejna w 2016 roku) Inn koncepcj ma organizacjaWHATWG (Web Hypertext Application Technology Working Group) mdash moacutewi ona o tzw ywymstandardzie czyli specyfikacji ktoacutera wci mo e si zmienia (a wi c faktycznie nie jest standardem)

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

16 Rozdzia 1 Podstawy

Pierwsza strona WWW

Czas napisa pierwsz stron WWW czyli wype ni zaprezentowan wcze niej struktu-r prawid ow tre ci Zadaniem tej strony b dzie wy wietlenie jednego akapitu tek-stowego sk adaj cego si z kilku s oacutew Kod takiej strony zosta przedstawiony na li-stingu 12 Z pozoru mo e si on wydawa dosy skomplikowany nie nale y jednaksi tym przejmowa Wszystkie elementy zostan wyja nione krok po kroku

Listing 12 Najprostsza strona WWW

ltDOCTYPE HTMLgtlthtmlgtltheadgtlttitlegtPierwsza strona WWWlttitlegtltheadgtltbodygtltpgtTo jest akapit tekstowyltpgtltbodygtlthtmlgt

Zanim zajmiemy si poszczegoacutelnymi elementami kodu zapiszmy go w pliku indexhtmli wczytajmy do przegl darki tak jak zosta o to opisane w podrozdziale bdquoWczytaniedokumentu do przegl darkirdquo Zobaczymy widok podobny do przedstawionego na ry-sunku 16

Rysunek 16Kod z listingu 12wczytany do przegl darki

Na ekranie wida jedynie tytu strony (zaroacutewno na pasku tytu u okna przegl darki jaki w nag oacutewku karty o ile u yta przegl darka korzysta z kart) oraz tre akapitu tekstowe-go adna inna tre a w szczegoacutelno ci znaczniki HTML nie zosta a wy wietlona

Przeanalizujmy teraz kod z listingu 12 ktoacutery wygenerowa witryn widoczn na ry-sunku Zaczyna si on od prologu (deklaracji typu dokumentu)

ltDOCTYPE HTMLgt

Jest to po prostu okre lenie standardu HTML w ktoacuterym zosta a utworzona stronaWi cej informacji o prologach znajduje si w cz ci lekcji zatytu owanej bdquoProlog do-kumentu HTML i XHTMLrdquo Na razie przyjmijmy e w przypadku HTML5 na po-cz tku kodu nale y umie ci taki ci g znakoacutew

W sekcji ltheadgt zosta umieszczony znacznik lttitlegt ktoacutery pozwala zdefiniowatytu strony

lttitlegtPierwsza strona WWWlttitlegt

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

Lekcja 1 Pierwsze kroki 17

Tytu em jest ca a tre znajduj ca si pomi dzy lttitlegt i lttitlegt W prezentowa-nym przypadku jest to ci g Pierwsza strona WWW Utworzenie tytu u strony jest obli-gatoryjne Zawsze wi c nale y u y znacznika lttitlegt i musi on by umieszczonyw sekcji ltheadgt

W sekcji ltbodygt zawieraj cej w a ciw tre witryny zosta umieszczony znacznik ltpgtltpgtTo jest akapit tekstowyltpgt

Definiuje on jeden akapit tekstowy Tre ci akapitu s wszystkie znaki umieszczonemi dzy ltpgt a ltpgt w tym przypadku ci g To jest akapit tekstowy Ten ci g jestwy wietlany w przegl darce po wczytaniu witryny

Pierwsza strona w XHTML

Je eli zamiast HTML chcemy u y XHTML (nie jest to zalecane mimo to wcimo na spotka wiele witryn korzystaj cych z tego j zyka) nie musimy wprowadzaznacz cych modyfikacji kodu strony W przypadku prostych witryn zmiany b d do-tyczy y tylko samego pocz tku dokumentu ktoacutery b dzie musia zawiera inny prologa tak e bardziej rozbudowany wst p Najlepiej wida to na listingu 13

Listing 13 Kod prostej strony w XHTML

ltxml version=11 encoding=utf-8gtltDOCTYPE html PUBLIC -W3CDTD XHTML 11EN httpwwww3orgtrxhtml11Dtdxhtml11dtdgtlthtml xmlns=httpwwww3org1999xhtml xmllang=plgtltheadgtlttitlegtPierwsza strona WWWlttitlegtltheadgtltbodygtltpgtTo jest akapit tekstowyltpgtltbodygtlthtmlgt

Tym razem przed deklaracj typu dokumentu znajduje si wierszltxml version=11 encoding=utf-8gt

Okre la on wersj dokumentu XML (parametr version) w tym przypadku 11 a tak esposoacuteb kodowania znakoacutew (parametr encoding) Wi cej informacji o kodowaniu znakoacutewznajduje si w cz ci zatytu owanej bdquoPolskie litery na stronie WWWrdquo

Poni ej umieszczona jest w a ciwa deklaracja typu dokumentultDOCTYPE html PUBLIC -W3CDTD XHTML 11EN httpwwww3orgtrxhtml11Dtdxhtml11dtdgt

specyficzna dla standardu XHTML 11 (deklaracje w a ciwe dla innych wersji XHTMLzosta y opisane w kolejnej cz ci lekcji)

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

18 Rozdzia 1 Podstawy

Znacznik lthtmlgt rozpoczynaj cy w a ciwy dokument HTML zosta tu uzupe nionyo parametr okre laj cy definicj tzw przestrzeni nazw XHTML (xmlns) a tak e u ytyj zyk (pl)

lthtml xmlns=httpwwww3org1999xhtml xmllang=plgt

Te parametry nie s obligatoryjne i znacznik moacuteg by mie roacutewnie prost posta czyli lthtmlgt

Dalsza cz kodu jest taka sama jak w przypadku przyk adu z listingu 12 Podobnieb dzie w wi kszo ci przyk adoacutew prezentowanych w ksi ce W a ciwa tre kodustrony b dzie zgodna zaroacutewno z HTML jak i XHTML a wi c uzyskanie odpowiedniegotypu dokumentu b dzie mo liwe po wymianie jedynie opisanych fragmentoacutew prologoacutewNa listingach natomiast b dzie prezentowany wy cznie prolog dla HTML5

Prolog dokumentu HTML i XHTML

Prolog dokumentu to informacja o standardzie w jakim ten dokument zosta wykona-ny Innymi s owy okre la on typ dokumentu jest to deklaracja typu dokumentu mdashDTD (z ang Document Type Declaration) Dzi ki tej deklaracji przegl darka (lub innyprogram) b dzie wiedzia a jak odczytywa dokument i czego (jakich struktur) mo esi w nim spodziewa Dla j zyka HTML5 stosuje si tylko jeden prolog ma on posta

ltDOCTYPE HTMLgt

Wszystkie przyk ady prezentowane w ksi ce b d z niego korzysta

Je li istnieje konieczno u ycia starszej wersji HTML-a 401 stosuje si trzy rodzajeprologu Pierwszy ma posta

ltDOCTYPE HTML PUBLIC -W3CDTD HTML 401ENgt

i okre la cis wersj standard 401 To oznacza e na stronie nie mog by umiesz-czone adne elementy uznane za przestarza e (z ang deprecated stosowane jest teokre lenie elementy schy kowe) a dokument musi dok adnie spe nia wszelkie wy-mogi standardu

Drugi typ toltDOCTYPE HTML PUBLIC -W3CDTD HTML 401 TransitionalENgt

Jest to przej ciowa (z ang transitional) wersja standard 401 czasami okre lana jakolu na ze wzgl du na swobodniejsze mniej restrykcyjne podej cie do respektowaniastandardu Mo na w niej u ywa znacznikoacutew uznanych za przestarza e

Trzeci typ toltDOCTYPE HTML PUBLIC -W3CDTD HTML 401 FramesetENgt

Ta wersja oznacza stron z ramkami (temat ramek zostanie przedstawiony w lekcji 13)Dok adniej rzecz ujmuj c taki dokument jest traktowany jak wersja Transitional uzu-pe niona o mo liwo stosowania ramek

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

Lekcja 1 Pierwsze kroki 19

Ka dy z wymienionych prologoacutew mo e by uzupe niony o odno nik do dokumentuzawieraj cego formalny opis sk adni dla danego standardu Nie jest to obligatoryjneale stanowi wskazoacutewk dla narz dzi dokonuj cych walidacji (sprawdzenia poprawno-ci) dokumentoacutew Najcz ciej wi c prolog jest uzupe niany o taki odno nik mimo e

z regu y przegl darki w ogoacutele nie korzystaj z tej informacji

Alternatywne wersje prologoacutew zatem b d mia y postaci przedstawione poni ej

Wersja HTML 401 StrictltDOCTYPE HTML PUBLIC -W3CDTD HTML 401EN httpwwww3orgTRhtml4strictdtdgt

Wersja HTML 401 TransitionalltDOCTYPE HTML PUBLIC -W3CDTD HTML 401 TransitionalEN httpwwww3orgTRhtml4loosedtdgt

Wersja HTML 401 FramesetltDOCTYPE HTML PUBLIC -W3CDTD HTML 401 FramesetENhttpwwww3orgTRhtml4framesetdtdgt

Analogicznie jak w przypadku HTML dokumenty XHTML roacutewnie maj swojeprologi Dla standardu XHTML 10 b d one nast puj ce

Dla cis ej (Strict) wersji standardultDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENgt

Dla przej ciowej (Transitional) wersji standardultDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENgt

Dla wersji z ramkami (Frameset)ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 FramesetENgt

Okre lenia bdquo cis ardquo bdquoprzej ciowardquo i bdquoz ramkamirdquo maj tu takie samo znaczenie jakw przypadku standardu HTML 401

Je li deklaracja DTD ma roacutewnie zawiera odno nik do dokumentu z opisem sk adnistosuje si nast puj ce prologi

Dla cis ej (Strict) wersji standardultDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictENhttpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt

Dla przej ciowej (Transitional) wersji standardultDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

Dla wersji z ramkami (Frameset)ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 FramesetENhttpwwww3orgTRxhtml1DTDxhtml1-framesetdtdgt

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

20 Rozdzia 1 Podstawy

Dla XHTML w wersji 11 stosuje si prolog o postaciltDOCTYPE html PUBLIC -W3CDTD XHTML 11EN httpwwww3orgTRxhtml11DTDxhtml11dtdgt

Formatowanie kodu HTML

Wa n spraw na ktoacuter osoby pocz tkuj ce z regu y nie zwracaj uwagi jest sposoacutebformatowania kodu roacuted owego strony Nie ma to wi kszego znaczenia przy niewiel-kich witrynach w ktoacuterych znajduje si jedynie kilka akapitoacutew tekstowych jednakprzy bardziej rozbudowanych stronach w a ciwy zapis bardzo u atwi poacute niejsz edycji poprawki Chodzi o to aby tak zapisa kod roacuted owy eby by jak najbardziej dlanas czytelny Dlatego najcz ciej wydziela si poszczegoacutelne bloki stosuj c wci ciaod lewej strony Kod z listingu 12 mo na by przedstawi tak jak zaprezentowano nalistingu 14

Listing 14 Kod HTML z wyroacute nieniem blokoacutew funkcjonalnych

ltDOCTYPE HTMLgtlthtmlgt ltheadgt lttitlegtPierwsza strona WWWlttitlegt ltheadgt ltbodygt ltpgtTo jest akapit tekstowyltpgt ltbodygtlthtmlgt

W ten sposoacuteb wyra nie zosta y wydzielone sekcje ltheadgt oraz ltbodygt (odsuni te o dwaodst py od lewej strony listingu) a tak e ich zawarto czyli znaczniki lttitlegt i ltpgt(przesuni cie o dwa odst py od pocz tku ka dej sekcji czyli o cztery odst py od lewejstrony listingu)

Takie wyroacute nienie blokoacutew funkcjonalnych bardzo u atwia orientowanie si w struktu-rze kodu co jest wa ne przy tworzeniu nawet niezbyt z o onych witryn Oczywi cienie ma to adnego wp ywu na sposoacuteb wy wietlania danych w przegl darce (o tym de-cyduj odpowiednie znaczniki) a oddzia uje wy cznie na czytelno kodu roacuted owegoRzecz jasna stosowanie wci formatuj cych nie jest obligatoryjne i nie ma koniecz-no ci ich u ywania jest to jednak dobry zwyczaj ktoacutery po prostu warto stosowa Nie ma te jednego ustalonego standardu formatowania ktoacutery by moacutewi gdzie i iledok adnie zastosowa odst poacutew czy przej do nowego wiersza Ka dy mo e tu wy-pracowa w asny najbardziej czytelny dla siebie standard Przy czym zawsze trzeba brapod uwag e najwa niejszym kryterium jest czytelno kodu oraz to e w przysz o-ci mo e on by analizowany i poprawiany przez innych programistoacutew

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

Lekcja 1 Pierwsze kroki 21

Polskie litery na stronie WWW

Podczas tworzenia strony WWW pr dzej czy poacute niej napotkamy problem prawid owegowy wietlania polskich znakoacutew a moacutewi c ogoacutelniej mdash wszelkich znakoacutew narodowychi niestandardowych wykraczaj cych poza alfabet aci ski (i standard ASCII8) Najle-piej wi c od razu si dowiedzie jak prawid owo kodowa witryn tak by ka dyu ytkownik zobaczy prawid owy zapis Wykonajmy najpierw prosty test W kodziez listingu 12 (lub 14) zmie my tre akapitu tekstowego tak aby zawiera polskieznaki Ca a sekcja ltbodygt mo e przyj posta widoczn na listingu 15

Listing 15 Tre sekcji ltbodygt z akapitem zawieraj cym polskie znaki

ltbodygt ltpgtPolskie znaki to min oacute ltpgtltbodygt

T tre zapiszmy w standardowy sposoacuteb za pomoc dost pnego w systemie Win-dows Notatnika w pliku indexhtml i wczytajmy go do przegl darki Rezultaty b dciekawe Przyk adowo jedna z wersji przegl darki Firefox wy wietli ci g sk adaj cysi zaroacutewno z prawid owych polskich liter liter nieprawid owych jak i nieokre lonychznakoacutew (rysunek 17)

Rysunek 17Test polskich znakoacutewmdash przegl darka Firefox 3

Lepiej sprawdzi si Internet Explorer w wersji 6 oraz 8 i wy szych Tu polskie literyzostan wy wietlone poprawnie (rysunek 18) atwo si domy li e jest to efektzapisania kodu roacuted owego w windowsowym Notatniku mdash dzi ki temu edytor tekstui przegl darka pracuj w tym samym (ale niestety nieprawid owym o czym dalej)standardzie kodowania znakoacutew

Rysunek 18Test polskich znakoacutewmdash przegl darka InternetExplorer 8

Myli by si kto kto na tej podstawie za o y by e Internet Explorer zawsze popraw-nie wy wietli tak stron Otoacute ju w wersji 7 tej przegl darki efekt b dzie zgo a od-mienny Nie zobaczymy adnych polskich liter a zamiast nich pojawi si znaki za-st pcze (rysunek 19)

8 Skroacutet ASCII pochodzi on angielskiej nazwy American Standard Code for Information Interchange

i okre la jeden z pierwotnych sposoboacutew zapisu znakoacutew dla komputeroacutew Niestety uwzgl dnia jedynielitery i znaki specjalne charakterystyczne dla krajoacutew anglosaskich

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

22 Rozdzia 1 Podstawy

Opisane problemy b d te dotyczy y takich produktoacutew jak Chrome i Opera

Rysunek 19Test polskich znakoacutewmdash przegl darka InternetExplorer 7

Za ten stan rzeczy nie powinni my wini przegl darek Roacute ne zasz o ci historycznespowodowa y e polskie litery (a ogoacutelniej mdash wszelkie znaki narodowe i niestandar-dowe) mog by zapisywane w roacute nych formatach (roacute nych standardach kodowania9)Skoro tak to naszym zadaniem jest poinformowanie przegl darki jakiego standardukodowania u yli my na stronie WWW Nie jest jej zadaniem bdquozgadywanierdquo tej infor-macji To oznacza e w kodzie strony musimy umie ci znacznik okre laj cy sposoacutebkodowania Mo e on mie posta

ltmeta charset=kodowaniegt

lubltmeta http-equiv=Content-Type content=texthtml charset=kodowaniegt

i nale y go umie ci w sekcji ltheadgt Pierwsza posta jest nowocze niejsza i stosowanaw HTML5 (to po prostu zapis skroacutecony postaci drugiej) Druga jest starsza i nale yjej u y w przypadku konieczno ci zachowania standardu HTML 401 W dalszejcz ci ksi ki b dzie stosowana jedynie posta nowsza

Przedstawiony znacznik moacutewi przegl darce e ma do czynienia z dokumentemHTML w ktoacuterym znaki zosta y zakodowane w standardzie okre lonym przez wartoparametru charset W miejsce ci gu kodowanie zatem nale y wstawi okre lenie stan-dardu kodowania znakoacutew

W sieci spotkamy strony stosuj ce nast puj ce kodowanie

UTF-8 mdash najnowszy z prezentowanych sposoacuteb zapisu wed ug mi dzynarodowychstandardoacutew Unicode i UCS10 Unicode pozwala na zapis znakoacutew wyst puj cychw wi kszo ci j zykoacutew wiata O ile to mo liwe nale y korzysta z tegostandardu zapisu

ISO-8859-2 mdash popularny w latach 90 XX wieku sposoacuteb zapisu stanowi cynorm mi dzynarodow 11 Mo na go u ywa jednak obecnie lepiej stosowakodowanie UTF-8

9 Znaki ktoacutere wprowadzamy z klawiatury s w komputerze zapisywane za pomoc warto ci liczbowych

Ka dy znak ma przypisany kod np ma a litera a ma kod 97 (w standardzie ASCII i pochodnych) Sposoacutebprzypisania warto ci liczbowych (kodoacutew) do liter nazywamy w a nie standardem kodowania znakoacutew

10 Standardy UCS (standard ISO) i Unicode w wi kszo ci s ze sob zgodne praktycznie we wszystkichwersjach mdash w praktyce ich si nie rozroacute nia a moacutewi si po prostu o zapisie Unicode UTF-8 to nazwajednego ze sposoboacutew zapisu znakoacutew wed ug normy Unicode

11 Odpowiada to polskiej normie PN-93T-42118

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

Lekcja 1 Pierwsze kroki 23

Windows-1250 mdash kodowanie znakoacutew charakterystyczne dla systemu WindowsNie stanowi normy mi dzynarodowej Nale y unika stosowania tego zapisu

Znacznik ltmetagt b dzie przyjmowa nast puj ce postaci

Dla UTF-8ltmeta charset=utf-8gt

lubltmeta http-equiv=Content-Type content=texthtml charset=utf-8gt

Dla ISO-8859-2ltmeta charset=iso-8859-2gt

lubltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt

Dla Windows-1250ltmeta windows-1250gt

lubltmeta http-equiv=Content-Type content=texthtml charset=windows-1250gt

Jak spowodowa aby strona z listingu 15 by a poprawnie wy wietlana we wszystkichwspoacute czesnych przegl darkach Skoro zapisali my j w Notatniku w standardowy spo-soacuteb to sposobem kodowania jest Windows-1250 Takie te kodowanie nale y uwzgl d-ni w znaczniku ltmetagt umieszczonym w sekcji ltheadgt Kod przyjmie wtedy postawidoczn na listingu 16

Listing 16 Strona zawieraj ca okre lenie standardu kodowania znakoacutew

ltDOCTYPE HTMLgtlthtmlgt ltheadgt ltmeta charset=windows-1250gt lttitlegtPierwsza strona WWWlttitlegt ltheadgt ltbodygt ltpgtPolskie znaki to min oacute ltpgt ltbodygtlthtmlgt

Po takim uzupe nieniu kodu polskie znaki pojawi si we w a ciwej postaci i w Chromiei w Firefoksie i w Internet Explorerze (a tak e w innych przegl darkach jak Operaczy Konqueror)

Jak wspomniano wy ej kodowanie typu Windows-1250 jest zdecydowanie niezalecaneZamiast niego powinni my stosowa UTF-8 Jak to zrobi Trzeba skorzysta z odpo-wiedniego edytora tekstowego To zagadnienie zosta o opisane w kolejnej cz ci lekcji

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

24 Rozdzia 1 Podstawy

Edytory tekstowe dla systemu WindowsDo tworzenia stron WWW potrzebny jest edytor Do nauki najlepsze s edytory pra-cuj ce w trybie tekstowym w ktoacuterym znaczniki i tre (z nich sk ada si witryna)wpisuje si bezpo rednio z klawiatury Istniej co prawda programy oferuj ce graficznytryb budowania witryny jednak osoby pocz tkuj ce raczej nie powinny z nich korzy-sta gdy najpierw nale y pozna budow witryn bdquood wewn trzrdquo tzn zaznajomi siz kolejnymi znacznikami i zale no ciami mi dzy nimi Tylko w ten sposoacuteb mo na zostaprofesjonalnym twoacuterc WWW

Edytory tekstowe mo na podzieli na dwa rodzaje ogoacutelnego przeznaczenia oraz wspo-magaj ce wprowadzanie kodu HTML Dla naszych potrzeb w zupe no ci wystarczyten pierwszy rodzaj Wa ne aby edytor obs ugiwa kodowanie UTF-8 Takie warunkicho z pewnymi problemami spe nia nawet windowsowy Notatnik Lepszym rozwi za-niem jest jednak u ycie edytora programistycznego ktoacutery oferuje dodatkowe funkcjo-nalno ci takie jak kolorowanie i pod wietlanie sk adni HTML czy numerowaniewierszy kodu Bardzo popularnym produktem tego typu jest Notepad++ Godny pole-cenia jest roacutewnie Notepad2

Notatnik Windows

Notatnik jest edytorem tekstu dost pnym nawet w tak leciwych wersjach systemu jak31 Pocz wszy od Windows 2000 pozwala na odczyt i zapis plikoacutew ze znakami ko-dowanymi w standardzie UTF-8 nadaje si wi c roacutewnie do tworzenia poprawnychstron WWW Nie oferuje jednak adnych dodatkowych udogodnie brakuje w nimtak prostych funkcji jak numerowanie wierszy Nie nadaje si zatem do tworzeniabardziej z o onych witryn Na potrzeby tego kursu jednak b dzie wystarczaj cy mdashje li kto nie chce instalowa w swoim systemie dodatkowego oprogramowania mo-e skorzysta z Notatnika

Aby stron WWW utworzon w Notatniku zapisa w kodowaniu UTF-8 z menu Pliknale y wybra pozycj Zapisz jako W oknie dialogowym s u cym do zapisu plikoacutew(rysunek 110) w polu Nazwa pliku nale y wpisa nazw pliku (np indexhtml) z listyZapisz typ jako wybra pozycj Wszystkie pliki a na li cie Kodowanie koniecznie wska-za pozycj UTF-8

Rysunek 110Zapis pliku jako UTF-8z u yciem systemowegoNotatnika

Tak zapisany plik b dzie ju zawsze rozpoznawany przez Notatnik jako zapisany w ko-dowaniu UTF-8 To oznacza e przy kolejnym otwieraniu go w Notatniku nie trzebaju przeprowadza adnych dodatkowych operacji a zapis mo na wykona za pomoczwyk ego polecenia Zapisz (menu Plik pozycja Zapisz lub kombinacja klawiszy Ctrl+S)

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

Lekcja 1 Pierwsze kroki 25

Niestety Notatnik w przypadku plikoacutew kodowanych jako UTF-8 zawsze zapisuje napocz tku pliku tzw znacznik BOM12 To w niektoacuterych przypadkach mo e spowodowapewne problemy z wy wietlaniem strony Mo e si wtedy na jej pocz tku pojawici g trzech znakoacutew widoczny na rysunku 111 To rzadka sytuacja przegl darki z re-gu y radz sobie z takimi plikami czasem jednak w sieci zobaczymy stron serwuj cnam owe kilka dodatkowych znakoacutew Najlepszym rozwi zaniem jest wi c u ycieedytora ktoacutery potrafi zapisa znaki bez znacznika BOM

Rysunek 111Znacznik BOMuwidocznionyw przegl darce

Notepad++

Doskona ym zamiennikiem systemowego notatnika jest Notepad++ (rysunek 112)To darmowa aplikacja rozwijana na zasadach wolnego oprogramowania Najnowszwersj mo na pobra pod adresem httpnotepad-plussourceforgenet Edytor tenoferuje wiele ciekawych i przydatnych funkcji Najwa niejsze dla nas to kolorowa-nie sk adni HTML (a tak e kilkudziesi ciu innych j zykoacutew) co ogromnie zwi kszaczytelno kodu numerowanie poszczegoacutelnych wierszy i zapis danych w standardzieUTF-8 Pod podanym adresem oproacutecz wersji instalacyjnej mo na znale pliki z polskwersj j zykow

Rysunek 112Kod strony WWWw edytorze Notepad++

Aby zastosowa kodowanie UTF-8 nale y najlepiej jeszcze przed rozpocz ciemwpisywania tekstu z menu Format wybra pozycj Koduj w UTF-8 (bez BOM) (En-code In UTF-8 without BOM) Po wprowadzeniu kodu plik zapisujemy standardowowybieraj c z menu Plik (File) pozycj Zapisz (Save) lub wciskaj c kombinacj klawiszyCtrl+S

12 Znacznik BOM czyli znacznik porz dku bajtoacutew (z ang Byte Order Mark) S to trzy bajty okre laj ce

porz dek bajtoacutew sk adaj cych si na znaki Unicode Dla kodowania UTF-8 znacznik BOM nie jestkonieczny gdy ustawienie bajtoacutew sk adaj cych si na znak jest z goacutery okre lone

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

26 Rozdzia 1 Podstawy

W przypadku gdy dysponujemy plikiem ktoacutery zosta zapisany w standardzie Win-dows-1250 (np by tworzony w Notatniku i zapisany standardowo bez zmiany ko-dowania) przej cie na UTF-8 osi gniemy wybieraj c z menu Format pozycj Kon-wertuj na format UTF-8 bez BOM (Convert to UTF-8 wihout BOM) Sposoacuteb zapisupliku na dysku si nie zmieni

Notepad2

Kolejnym zamiennikiem Notatnika jest Notepad2 (rysunek 113) Jego mo liwo ci smniejsze ni oferowane przez Notepad++ jednak na potrzeby naszego kursu najzu-pe niej wystarczaj ce Edytor oferuje kolorowanie sk adni HTML numerowanie wierszykodu i zapis w formacie UTF-8 Aby edytowany dokument zosta zapisany w kodowaniuUTF-8 z menu File nale y wybra pozycj Encoding a nast pnie zaznaczy pozycjUTF-8

Rysunek 113Strona WWW wczytanado edytora Notepad2

Inne edytory

Oproacutecz edytoroacutew tekstowych ogoacutelnego przeznaczenia ktoacuterych trzy przyk ady zosta yju przedstawione w sieci mo na znale specjalizowane aplikacje wspomagaj cetworzenie witryn internetowych W roacuted nich znajduj si zaroacutewno aplikacje komer-cyjne jak Adobe Dreamweaver czy polski Paj czek jak i darmowe aplikacje z ktoacuterychmo na wymieni 1st page 2000 ezHTML i WebSite Pro Cz z nich umo liwia bu-dowanie stron w trybie graficznym wi kszo jednak pracuje w trybie tekstowymwspomagaj c twoacuterc przez automatyczne wstawianie znacznikoacutew autouzupe nianiekodu czy weryfikacj poprawno ci witryny

Ta ksi ka jednak to kurs tworzenia stron WWW w HTML a nie instrukcja obs ugikonkretnego edytora Zanim bowiem zacznie si u ywa zaawansowanych narz dzitrzeba pozna zasady konstruowania stron Dopiero na dalszym etapie nauki mo nawybra bardziej zaawansowane narz dzia i wiadomie wyselekcjonowa takie ktoacuterejest najbardziej odpowiednie do potrzeb Dlatego wystarczaj cym edytorem b dzieNotepad++ lub Notepad2 a w ostateczno ci zwyk y Notatnik

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

Skorowidz

A

adresy 69bezwzgl dny 128URL 128 203wzgl dny 129

akapit 63artyku 75ASF 176

zagnie d anie 176atrybuty 44

accept 183 185accept-charset 183acceskey 44 211action 183 192 207 209align 63 68 72 92 104 125 168alink 60alt 116 139 185archive 167autocomplete 183 185autofocus 185 195 196autoplay 172 175 177 179autostart 172background 60bgcolor 60border 92 108 125 168 169cellpadding 93cellspacing 93char 104charoff 104charset 145checked 185 188 190cite 66 74class 45 300classid 167 173codebase 167 174codetype 167color 160cols 195 229 236colspan 97 98

content 56 58controller 173controls 177 179coords 139 145data 167 169 170 173 174 175 176datetime 156declare 167dir 45disabled 185 187 195 196 197 198 206

207 215enctype 183 184 191 208 209face 160filename 173for 205 213form 167 185 195 196 211 215formaction 185formenctype 185formmethod 186formnovalidate 186formtarget 186frame 108 219frameborder 230 232globalne 46 168height 120 167 169 173 174 175 176

177 186 239high 203href 127 139 166 222hreflang 145hspace 125 168http-equiv 56 57id 45 143 213label 197 198lang 45 63 74link 60longdesc 118 230loop 173 180low 203marginheight 230marginwidth 230

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

394 Skorowidz

atrybutymax 186 201 203 204maxlength 185 186 195media 145 180method 183 191min 186 201 203movie 173multiple 186 196 197 198muted 180name 56 138 145 167 171 183 185 188

190 195 196 209 215 230 239noresize 230 232noshade 68novalidate 183onclick 192open 75optimum 203pattern 186placeholder 186 187 195pluginurl 177poster 181preload 180readonly 185 187 195 207rel 145required 186 195 196rev 145reversed 82rows 195 229 236rowspan 97 98rules 108sandbox 239scrolling 230seamless 239selected 197 199shape 138 145showcontrols 173 175 177size 68 160 185 186 196 197 198span 104 105 106src 116 121 173 174 175 176 177 180

185 194 230 239srcdoc 239standby 167start 82step 186 201style 45 73 105 221 222 285tabindex 46target 134 183 235text 60title 46 59 73type 80 81 145 167 168 169 172 173

174 175 176 177 180 185 186 188190 191 194 195

usemap 138 167valign 104

value 171 185 186 188 190 191 197204 209 210

valuetype 172vlink 60vspace 126 168width 65 68 120 167 169 173 174 175

176 177 186 221 239wrap 195znacznikoacutew 44

AVI 175zagnie d anie 175

B

bia e znaki 52 71obs uga 292spacje 70

blokicytatu 65funkcjonalne 20preformatowany 64

C

class 45content 56CSS 242

font-face 279background 320background-attachment 317background-color 311background-image 314background-origin 328background-position 318 320background-repeat 316border 333 340border-collapse 348box-shadow 337budowa stylu 246caption-side 350cieniowanie napisoacutew 294class 248 249 250 254 259clear 384clip 321 371color 308contain 321cover 321cursor 377czcionki systemowe 278definicje 244definiowanie koloroacutew 306definiowanie marginesoacutew 324 327dekoracje 290direction 295

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

Skorowidz 395

display 374dodawanie obrazoacutew t a 315dodawanie ramek 330do czanie do dokumentoacutew 243dziedziczenie stylu 260empty-cells 349fixed 365float 381font 276font-family 271font-size 265 268font-style 273font-variant 274font-weight 275formularz 387generowanie tabeli 350grubo czcionki 275height 354hierarchia 262href 246id 250jednostki miar 263kadrowanie elementoacutew strony 371kadrowanie obrazu 373kaskada 261kierunek tekstu 295klasa 248kolejno nak adania styloacutew 262komentarze do styloacutew 264kontrola nad tekstem 281kontrola wielko ci liter 291kontrolowanie odst poacutew 287kroje czcionki 277kszta ty kursora myszy 377letter-spacing 288line-height 276 287list-style 304list-style-image 301 302list-style-position 303list-style-type 297 298

czenie obramowa 348maksymalne rozmiary elementoacutew 357margin 325media 245minimalne rozmiary elementoacutew 357obramowania 333 335obramowanie tabeli 340obrys 337obs uga bia ych znakoacutew 292obs uga pustych komoacuterek 349odst py wewn trz tabeli 342ogoacutelny schemat stylu 246okre lanie rozmiaroacutew tekstu 268opacity 313

origin 321overflow 356 357padding 327 342po o enie elementu strony 360position 360 373powtarzanie obrazu t a 316pozycja obrazu t a 317pozycja wyroacute nika 303pozycje tytu oacutew 350pozycjonowanie obrazoacutew t a 319przep ywy elementoacutew strony 381przycinanie obrazu 372pseudoklasy 252regulacja rozmiaru czcionki 265regu y dziedziczenia 260rodziny czcionek 271rozmiar czcionki 268rozmiary elementoacutew strony 354selektor 246 247size 321skalowanie obrazu t a 321schemat definicji stylu 247sta a pozycja elementu 365standardowe kolory 308stopie przezroczysto ci 313styl czcionki 273styl wierszowy 243style 243 244 261table-layout 350text-align 281text-decoration 290text-indent 289text-shadow 294text-transform 291t a tabel 344uk ad witryny 389ukrywanie elementoacutew strony 374u ycie ogoacutelnej klasy 248vertical-align 282 286visibility 374waga czcionki 275wariant czcionki 273wci cia 289white-space 292width 354w asne czcionki 279word-spacing 288wstawianie elementoacutew 255wype nienia tabel 344wyroacutewnywanie nietekstowych elementoacutew 285wyroacutewnywanie obrazoacutew 285wyroacutewnywanie pionowe tekstu 283wyroacutewnywanie poziome tekstu 282wyroacute niki 300

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

396 Skorowidz

CSSwyroacute niki listy nienumerowanej 296wyroacute niki listy numerowanej 298wyroacute niki opcji 301wy wietlanie elementoacutew strony 368 374zablokowanie przep ywu elementoacutew strony 384zakotwiczanie obrazoacutew t a 317zawarto poza elementem 356zestaw regu 246z-index 370zmiana koloru tekstu 308zmiana koloru t a 311zmiana rozmiaru czcionki 243zmiana typoacutew pozycjonowania 364zmiana typu czcionki 271zmiana w asno ci akapitoacutew tekstowych 245

cytat liniowy 73czcionka 243

font-face 279atrybuty 265bold 275bolder 276caption 278class 277cursive 271 273doboacuter 273fantasy 271 273font 276font-family 271font-size 265 268font-style 273font-variant 274font-weight 275grubo 275icon 278italic 274kroje 277large 268larger 270lighter 276medium 268menu 278message-box 278monospaced 271nazwane rozmiary 268normal 274 275oblique 274ogoacutelne rodziny 271ogoacutelne typy 271o sta ej szeroko ci 149pochylenie 148pogrubienie 148pomniejszona 149powi kszona 149rodziny 271

rozmiar 265sans-serif 271serif 271small 268small-caption 278smaller 270status-bar 278styl 273systemowe 278waga 275wariant 273warto ci bezwzgl dne 268warto ci wzgl dne 269w asne 279x-large 268x-small 268xx-large 268xx-small 268zmiana atrybutoacutew 147zmiana typu 271

D

dir 45dokument tekstowy 12

DTD 18prolog 18rozszerzenie html 12tworzenie 12wczytanie do przegl darki 13zapisanie 12

domena 35rejestracja 36

DTD 18 19dziedziczenie 256 260

stylu 260zmiana stylu 261

E

edytory tekstowe 24Notatnik Windows 24Notepad++ 25Notepad2 26

elementy schy kowe 18e-mail 201

formularz wysy aj cy dane 208encje 47 70

interpunkcji 49najpopularniejsze 48symboli matematycznych 50symboli walut 49znakoacutew drukarskich 49znakoacutew specjalnych 52

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

Skorowidz 397

F

FileZilla 31Flash 164 173

zagnie d anie 173formatowanie tekstu 147

adnotacje RUBY 159cytat 151czcionka o sta ej szeroko ci 149czcionka pomniejszona 149czcionka powi kszona 149indeks dolny 150indeks goacuterny 149kroacutetki kod 154kursywa 148odniesienie 151pochylenie czcionki 148pogrubienie czcionki 148prze amywanie s owa 158przyk ad kodu 154silne wyroacute nienie 153skroacutetowce 154skroacutety 153tekst odroacute niaj cy si 158tekst podkre lony 150tekst przekre lony 150tekst uniewa niony 157tekst usuni ty 156tekst wprowadzany 156tekst wstawiony 157wyroacute nienie 152wyroacute nienie tekstu 158wyroacute nienie terminu 153zmiana atrybutoacutew czcionki 147zmienne 156znaczniki logiczne 151

formularze 182atrybuty 183CSS 387elementy interaktywne 185encje definiuj ce odst py 217etykietowanie elementoacutew 213grupowanie elementoacutew 214listy wyboru 196ogoacutelna definicja 213pola do wyboru plikoacutew 190pola tekstowe 186pola typu password 187pola wyboru typu checkbox 190pola wyboru typu radio 188przyciski 191resetowanie 193rozszerzone pola tekstowe 195style wyroacutewnuj ce elementy 388

tabele 218wi zanie elementoacutew strony 211wyroacutewnywanie 216wys anie danych 193wysy anie danych na adres e-mail 207

FTP 30 132FileZilla 31klient FTP 30Total Commander 33wgrywanie strony na serwer 32

G

GIF 111 114 164animowany 165z przeplotem 116

grafika 111dzielenie obrazoacutew 123galeria 136GIF 111grupowanie obrazoacutew 125jako obrazu 115JPEG 111obraz wewn trz tekstu 122PNG 112przegl darki 112przezroczyste obrazy 119rozmiary obrazoacutew 114 120skalowanie obrazu 121stopie kompresji 114TIFF 112tworzenie 112umieszczanie na stronie 116zapis progresywny 115

H

hiper cza Patrz odno nikihtdocs 39HTML 9 14

adresy 69akapity 63artyku 75bia e znaki 52blok cytatu 65blok preformatowany 64bloki funkcjonalne 20cytat liniowy 73encje 47 70formatowanie kodu 20Frameset 19informacje szczegoacute owe 75komentarze 54linie 67

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

398 Skorowidz

HTMLlisty 79nag oacutewki 62 76obszar generowanej grafiki 76odno niki 127okre lenie standardu 16podzia wiersza 68sekcje 77spacje 52 70stopka 76Strict 19strona WWW 14tabele 89tabulacja 52Transitional 19tre poboczna 75tytu y 62warstwy 72wyroacute nienie liniowe 73znaczniki 40znak nowego wiersza 52

http-equiv 56

I

id 45identyfikatory zasoboacutew 134informacje szczegoacute owe 75IrfanView 112ISO-8859-2 22

J

JPEG 111 114regulacja stopnia kompresji 114zapis progresywny 115zapis plikoacutew 115

K

kaskada 261hierarchia 262

kaskadowe arkusze styloacutew Patrz CSSklasa 248

centruj ca 286kolory

ActiveBorder 312ActiveCaption 312AppWorkspace 312Background 312background-color 311ButtonFace 312ButtonHighlight 312ButtonShadow 312

ButtonText 312CaptionText 312color 308definiowanie 306GrayText 312Highlight 312HighlightText 312InactiveBorder 312InactiveCaption 312InactiveCaptionText 312InfoBackground 313InfoText 313kody 308Menu 313MenuText 313model RGB 306okre lone przez system operacyjny 312pierwszoplanowy 308podk adowy 308ramki 330Scrollbar 313standardowe kolory 308tekstu 308ThreeDDarkShadow 313ThreeDFace 313ThreeDHighlight 313ThreeDLightShadow 313ThreeDShadow 313t a 311Window 313WindowFrame 313WindowText 313

komentarze 54konto WWW 28

mened er 29

L

lang 45linie 67linki Patrz odno nikilisty 79

budowa 79definicyjne 82definiowanie w asnych wyroacute nikoacutew 301list-style 304list-style-image 301 302list-style-position 303list-style-type 297 298nienumerowana 296nieuporz dkowane 80 85numerowana 298pozycja wyroacute nika 303pseudoklas 252

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

Skorowidz 399

roacute ne wyroacute niki pozycji 303uporz dkowane 81 86 87wyboru 196zagnie d anie 85 86zmiana postaci 82

cza Patrz odno niki

M

mailto 133margines

definiowanie 324 327margin 325padding 327wewn trzny 324 327zewn trzny 324 325

mened er plikoacutew 33Total Commander 33

modelekontenerowy 324pude kowy 324 328RGB 306

MP3 176zagnie d anie 176

MPEG 174zagnie d anie 174

multimedia 164animowane GIF-y 164Flash 164HTML5 179parametry 171QuickTime 165Real Networks 165udost pnienie 166Windows Media 164zagnie d anie 167

N

nag oacutewek 76grupowanie 77tabele 100

name 56Notatnik Windows 24Notepad++ 25Notepad2 26

O

obrazy 111background 320background-attachment 317

background-origin 328background-position 318 320background-repeat 316bottom 318center 318clip 321contain 321cover 321dzielenie na cz ci 123fixed 317GIF 111grupowanie 125jako t o 314jako wyroacute niki 301jako 115JPEG 111kadrowanie 372left 318mapy odno nikoacutew 138 140model pude kowy 328no-repeat 316odno niki 135okre lanie szeroko ci 359okre lanie wysoko ci 359origin 321PNG 112pozycja obrazu t a 317 319przezroczyste 119przycinanie 372regulacja rozmiaroacutew 120repeat 316repeat-x 316repeat-y 316right 318rozmiary 114scroll 317size 321skalowanie 121 359skalowanie obrazu t a 321sposoby powtarzania t a 316stopie kompresji 114TIFF 112top 318wewn trz tekstu 122wyroacutewnywanie t a 329zakotwiczanie obrazoacutew t a 317

obrys 337outline 338outline-color 338outline-style 338outline-width 338

odno niki 127active 130adres URL 128atrybuty 145

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

400 Skorowidz

odno nikihover 130kolory 130link 130

cza wewn trzne 127cza zewn trzne 127

mapy 138 140multimedia 166na stronie WWW 144obrazy 135protokoacute HTTP 128sposoby otwierania 134stany 130typy 130visited 130wskazywanie zasoboacutew 132zakotwiczenia 143

odsy acze Patrz odno niki

P

PDF 171PNG 112 114podzia wiersza 68pola do wyboru plikoacutew 190pola tekstowe 186

autouzupe nianie 205definiowanie 186rozszerzone 195

pola typu password 187pola wyboru checkbox 190

blokowanie 206definiowanie 190u ycie 190

pola wyboru radio 188tworzenie 188u ycie 189

polecenia formatuj ce Patrz znacznikiprotokoacute HTTP 128prywatny serwer WWW 36

instalacja 36stan serwera 38umieszczanie w asnej witryny 39

przyciski 191definiowanie 191 194reakcja na klikni cie 192typu reset 192typu submit 192

pseudoklasy 252active 254after 255before 255hover 254

lang 253link 254lista 252sposoby u ycia 253visited 254

Q

QuickTime 165

R

odno niki 234ramki 227 239 330

border 333 340border-collapse 348border-color 330border-style 330border-width 330box-shadow 337collapse 348dashed 330definiowanie 228definiowanie obramowa 331dotted 330double 331funkcjonalne 234groove 331grubo 330hidden 330HTML5 238inset 331kolor 330

czenie obramowa 348medium 330obramowania 333 335obramowania tabel 341 342odno niki 234outset 331ridge 331rozmiar 229separate 348solid 330styl 330style obramowa 331thick 330thin 330w ramkach 236wewn trzne zagnie d anie 237wype nienia 344zawarto 230

Real Networks 165

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

Skorowidz 401

S

sekcje 77selektory 246 247

atrybutoacutew 251div 361elementoacutew potomnych 256identyfikatora 250klasy 248ogoacutelny 247operatory 251pojedynczego elementu 247pseudoklasy 252wieloelementowy 258

skroacutety klawiaturowe 211aktywacja 212klawisze funkcyjne 212

spacje 70nierozdzielaj ca 71

stopka 76tabele 101

strona WWW 12adres 27 69 203akapity 15 63animowane GIF-y 164 165aplikacja FTP 30artyku 75automatyczne od wie anie 58autor strony 56blok cytatu 65blok preformatowany 64blokowanie elementoacutew 206cytat liniowy 73data i czas 200data wa no ci 57definiowanie koloroacutew 306dodawanie grafiki 116DTD 18 19edytory tekstowe 24elementy schy kowe 18e-mail 201fixed 365Flash 164formatowanie tekstu 147formularze 182generator strony 56grafika 111height 354HTML 14informacje szczegoacute owe 75ISO-8859-2 22kadrowanie elementoacutew 371kod strony 15kod roacuted owy 15

kolejno wy wietlania elementoacutew 368kolory 200konto WWW 28kontrolowanie przep ywoacutew elementoacutew 381linie 67listy 79maksymalne rozmiary elementoacutew 357miernik 203minimalne rozmiary elementoacutew 357multimedia 164 166nag oacutewek 1555 62 76numer 201oblanie elementoacutew tekstem 387obraz wewn trz tekstu 122obrys 337obszar generowanej grafiki 76odno niki 127 144opis strony 56overflow 356 357pami podr czna 58pasek post pu 204PDF 171podzia wiersza 68pole wynikowe 205polskie znaki 21po o enie elementu 360position 360pozycjonowanie elementoacutew 363pozycjonowanie ustalone 366prolog dokumentu 18przekierowanie na inny adres 58przezroczyste obrazy 119QuickTime 165ramki 227Real Networks 165rozmiary elementoacutew strony 354schmat zagnie d onego obiekt 172sekcja ltbodygt 59sekcja ltheadgt 55sekcje 77skroacutety klawiaturowe 211s owa kluczowe 56spacje 70sposoby wy wietlania elementoacutew 374sposoacuteb kodowania znakoacutew 17sta a pozycja elementu 365standard HTML 16stopie przezroczysto ci 313stopka 76struktura 15 55struktura witryny 220style tworz ce uk ad 390tabele 89 218telefon 202

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

402 Skorowidz

strona WWWtre poboczna 75tytu strony 16uk ad tabelaryczny 221ukrywanie elementoacutew 374umieszczanie na serwerze 29UTF-8 22warstwy 72wersja dokumentu XML 17width 354Windows Media 164Windows-1250 23w asne czcionki 279w a ciwa tre 59wyroacutewnywanie nietekstowych elementoacutew 285wyroacutewnywanie obrazoacutew 285wyroacutewnywanie tekstu w pionie 282wyroacutewnywanie tekstu w poziomie 281wyroacute nienie liniowe 73wyszukiwanie 202XHTML 17zablokowanie przep ywu elementoacutew 384zagnie d anie multimedioacutew 167zakotwiczenia 144zakres 201zawarto poza elementem 356zmiana przep ywu elementoacutew 386znaczniki 15

style 45

T

tabele 89 218cia o 100definiowanie 222empty-cells 349formatowanie formularza 218grupowanie kolumn 104hide 349

czenie komoacuterek 97 99czenie obramowa 348

model z o ony 101nag oacutewek 100nag oacutewki kolumn 96nag oacutewki wierszy 96obramowania 92 340 341 342obramowania wewn trzne 108obramowania zewn trzne 109obs uga pustych komoacuterek 349odst py w komoacuterkach 93odst py wewn trz 342puste komoacuterki 94rozszerzone 100show 349

sposoby generowania 350sterowanie obramowaniem 108stopka 100tabela wewn trz innej tabeli 224table-layout 350t o 344tworzenie 91tworzenie uk adu strony 220tytu 92wype nienia 345zagnie d anie 223

tabindex 46tekst

baseline 282blink 290bottom 282capitalize 291center 281cieniowanie napisoacutew 294definiowanie odst poacutew 287dekoracje 290direction 295formatowanie 147 280h-shadow 294justify 281kierunek 295kolor 294kontrola wielko ci liter 291kontrolowanie odst poacutew 287left 281letter-spacing 288line-height 287line-through 290lowercase 291ltr 295middle 282nowrap 292obs uga bia ych znakoacutew 292overline 290pre 292pre-line 292pre-wrap 292przyk adowe transformacje 292right 281rodzaje odst poacutew poziomych 289rozmycie 294rtl 295sposoby wyroacutewnywania pionowego 282sposoby wyroacutewnywania poziomego 282sub 282super 282text-align 281 285text-bottom 282text-decoration 290

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

Skorowidz 403

text-indent 289text-shadow 294text-top 282text-transform 291top 282typy wci 290underline 290uppercase 291vertical-align 282v-shadow 294wci cia 289white-space 292word-spacing 288wyroacutewnywanie w pionie 282wyroacutewnywanie w poziomie 281zmiana koloru 308

title 46Total Commander 33

po czenie FTP 33tre poboczna 75tytu y 62

caption-side 350pozycje 350

U

UTF-8 22Notatnik Windows 24Notepad++ 25Notepad2 26

W

warstwy 72WAV 177

zagnie d anie 177Windows Media 164Windows-1250 23w asny adres internetowy Patrz domenaWMV 176

zagnie d anie 176wype nienie Patrz margines wewn trznywyroacute nienie liniowe 73

X

XHTML 14 17Frameset 19mapy odno nikoacutew 141prolog dokumentu 19sposoacuteb kodowania znakoacutew 17Strict 19Transitional 19wersja dokumentu XML 17

Y

YouTube 178zagnie d anie 178

Z

zagnie d anieASF 176AVI 175Flash 173MP3 176MPEG 174multimedioacutew 167ramki 237WAV 177WMV 176YouTube 178

zakotwiczenia 143znaczniki 15 40

ltagt 235 254ltabbrgt 153ltacronymgt 154ltaddressgt 69ltareagt 138ltarticlegt 75ltasidegt 75ltaudiogt 179ltbgt 148ltbasegt 55ltbiggt 149ltblockquotegt 65ltblokquotegt 73ltbodygt 15 59 229ltbrgt ltbr gt 68ltbuttongt 194ltcanvasgt 76ltcaptiongt 92ltcitegt 151ltcodegt 154ltcolgt 105 106ltcolgroupgt 104ltdatalistgt 205ltddgt 82ltdelgt 156ltdetailsgt 75ltdfngt 153ltdivgt 72 169ltdlgt 82ltdtgt 82ltemgt 152ltembedgt 177 179ltfieldsetgt 214ltfigcaptiongt 125

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

404 Skorowidz

znacznikiltfiguregt 125ltfontgt 160ltfootergt 76ltformgt 183 192 211ltframegt 230 238ltframesetgt 228 233 236 238lth3gt 144ltheadgt 15 55 229ltheadergt 76lthgroupgt 77lthr gt 67lthrgt 67lthtmlgt 15lthXgt 63ltigt 148ltiframegt 178 238ltimggt 116 117 125 138ltinputgt 185 186 188 190 191 195 199ltinsgt 157ltkbdgt 156ltlabelgt 213ltlegendgt 214ltligt 80ltlinkgt 55 246ltmapgt 138ltmarkgt 158ltmetagt 23 55 57 229ltnoframegt 228ltnoframesgt 229ltobjectgt 167 169 171 174 175 176ltolgt 81ltoptgroupgt 196 198ltoptiongt 196 197ltoutputgt 205ltpgt 17 144 222ltparamgt 171 172 174 175 176 177ltpregt 64ltprogressgt 204ltqgt 74ltrpgt 159ltrtgt 159

ltrubygt 159ltsgt 150 157ltscriptgt 55ltsectiongt 77ltselectgt 196ltsmallgt 149ltsourcegt 180ltspangt 73 267ltstrikegt 150ltstronggt 153ltstylegt 55 244 245 286ltsubgt 150ltsummarygt 75ltsupgt 149lttablegt 90 92 218 222lttbodygt 101lttdgt 90 94 97 218 220lttextareagt 195lttfootgt 101ltthgt 96lttheadgt 100lttitlegt 17 55 56lttrgt 90ltttgt 149ltugt 150 158ltulgt 80ltvargt 156ltvideogt 181ltwbrgt 158atrybuty 44blokowe 43BOM 25do formatowania tekstu 43fizyczne 147logiczne 147 151otwieraj ce 40puste 41wierszowe 43wskazoacutewki dla robotoacutew 57zagnie d anie 41zamykaj ce 40

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