Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00592 008237 10457898 na godz. na dobę w sumie
Tworzenie stron WWW. Praktyczny kurs. Wydanie II - książka
Tworzenie stron WWW. Praktyczny kurs. Wydanie II - książka
Autor: Liczba stron: 408
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-7290-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-20%), audiobook).

Własna strona? To nic trudnego!


Jak myślisz, czy trudno jest zbudować porządną, interesującą witrynę internetową? Nie wymaga to ani wiedzy tajemnej, ani nadzwyczajnych zdolności. Rozejrzyj się - zobacz, jak wielu ludzi ma własnoręcznie wykonane strony internetowe. W rzeczywistości wystarczy do tego opanowanie dwóch elementów: języka HTML i kaskadowych arkuszy stylów CSS. Oba te filary zostały dokładnie opisane w książce, którą właśnie trzymasz w ręku.

Nie musisz się znać na programowaniu, by w krótkim czasie zostać webmasterem. W tym podręczniku znajdziesz zarówno jasne instrukcje, jak i praktyczne ćwiczenia, które pozwolą Ci błyskawicznie nauczyć się tworzenia witryn WWW. Dowiesz się, czym różnią się poszczególne wersje HTML-a, jak używać konkretnych znaczników i opracować strukturę strony. Poznasz typy elementów dodatkowych, takich jak listy, tabele, formularze i animacje, oraz sposoby optymalnego rozmieszczenia ich na stronie. Opanujesz także różne sztuczki związane z formatowaniem tekstu, nadawaniem stylów i podkładaniem tła. Krótko mówiąc, po tej lekturze będziesz gotów na podbój internetu!

Pokaż innym, co potrafisz - stwórz własną stronę WWW!



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

Darmowy fragment publikacji:

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ści ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Redaktor prowadzący: Ewelina Burska Projekt okładki: Jan Paluch Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie?twspk2 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Materiały do książki można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/twspk2.zip ISBN: 978-83-246-7290-5 Copyright © Helion 2014 Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:264)ci Wst(cid:246)p .............................................................................................. 9 O czym jest ta ksi(cid:261)(cid:298)ka? .................................................................................................... 9 Dla kogo jest ta ksi(cid:261)(cid:298)ka? .................................................................................................. 9 Co b(cid:266)dzie potrzebne? ...................................................................................................... 10 Kody (cid:296)ród(cid:225)owe i listingi ................................................................................................. 10 Rozdzia(cid:228) 1. Podstawy ........................................................................................ 11 Lekcja 1. Pierwsze kroki ................................................................................................ 11 Wczytanie dokumentu do przegl(cid:261)darki .................................................................... 12 HTML, XHTML i HTML5 ...................................................................................... 14 Podstawowa struktura strony WWW ........................................................................ 15 Pierwsza strona WWW ............................................................................................ 16 Pierwsza strona w XHTML ...................................................................................... 17 Prolog dokumentu HTML i XHTML ....................................................................... 18 Formatowanie kodu HTML ...................................................................................... 20 Polskie litery na stronie WWW ................................................................................ 21 Edytory tekstowe dla systemu Windows .................................................................. 24 Ró(cid:298)ne przegl(cid:261)darki ................................................................................................... 27 Lekcja 2. Strona WWW w internecie ............................................................................. 27 Adres strony WWW ................................................................................................. 27 Umieszczanie witryny w internecie .......................................................................... 28 W(cid:225)asny adres internetowy ........................................................................................ 35 Serwer WWW na domowym komputerze ................................................................ 36 Lekcja 3. Struktura HTML ............................................................................................. 40 Znaczniki HTML ...................................................................................................... 40 Zagnie(cid:298)d(cid:298)anie znaczników ....................................................................................... 41 Atrybuty znaczników ............................................................................................... 44 Encje (znaki specjalne) ............................................................................................. 47 Spacja, tabulacja i znak nowego wiersza .................................................................. 52 Komentarze .............................................................................................................. 54 Struktura dokumentu raz jeszcze .............................................................................. 55 Rozdzia(cid:228) 2. Elementy j(cid:246)zyka HTML ..................................................................... 61 Lekcja 4. Podstawowe znaczniki .................................................................................... 61 Tytu(cid:225)y (nag(cid:225)ówki) ..................................................................................................... 62 Akapity ..................................................................................................................... 63 Blok preformatowany ............................................................................................... 64 Kup książkęPoleć książkę 4 Tworzenie stron WWW. Praktyczny kurs Blok cytatu ............................................................................................................... 65 Linie ......................................................................................................................... 67 Podzia(cid:225) wiersza ......................................................................................................... 68 Adresy ...................................................................................................................... 69 Rodzaje spacji .......................................................................................................... 70 Warstwy ................................................................................................................... 72 Wyró(cid:298)nienie liniowe ( span ) ................................................................................. 73 Cytat liniowy ............................................................................................................ 73 Znaczniki wprowadzone w HTML5 ......................................................................... 75 (cid:251)wiczenia do samodzielnego wykonania ................................................................. 78 Lekcja 5. Listy, czyli wykazy ......................................................................................... 79 Listy w HTML ......................................................................................................... 79 Listy nieuporz(cid:261)dkowane ........................................................................................... 80 Listy uporz(cid:261)dkowane ............................................................................................... 81 Listy definicyjne ....................................................................................................... 82 Zagnie(cid:298)d(cid:298)anie list ..................................................................................................... 85 Zagnie(cid:298)d(cid:298)anie list o ró(cid:298)nych typach ........................................................................ 86 (cid:251)wiczenia do samodzielnego wykonania ................................................................. 88 Lekcja 6. Tabele ............................................................................................................. 89 Ogólna budowa tabel ................................................................................................ 89 Proste tabele ............................................................................................................. 90 Obramowanie i tytu(cid:225) tabeli ....................................................................................... 92 Odst(cid:266)py w komórkach i mi(cid:266)dzy komórkami ............................................................ 93 Puste komórki ........................................................................................................... 94 Nag(cid:225)ówki wierszy oraz kolumn ................................................................................ 96 (cid:224)(cid:261)czenie komórek .................................................................................................... 97 Tabele rozszerzone (z(cid:225)o(cid:298)one) ................................................................................. 100 Grupowanie kolumn ............................................................................................... 104 Sterowanie obramowaniem wewn(cid:266)trznym i zewn(cid:266)trznym ..................................... 108 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 109 Lekcja 7. Obrazy .......................................................................................................... 111 Grafika na stronach WWW (standardy plików graficznych) .................................. 111 Tworzenie i konwersja grafiki ................................................................................ 112 Rozmiary grafiki i zapis progresywny .................................................................... 114 Umieszczanie grafiki na stronie (znacznik img ) ................................................ 116 Przezroczyste obrazy .............................................................................................. 119 Regulacja rozmiarów obrazu .................................................................................. 120 Obrazy i tekst ......................................................................................................... 122 Dzielenie obrazów na cz(cid:266)(cid:286)ci .................................................................................. 123 Grupowanie obrazów w HTML5 ........................................................................... 125 Przestarza(cid:225)e atrybuty znacznika img .................................................................. 125 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 126 Lekcja 8. Odno(cid:286)niki ...................................................................................................... 126 Definiowanie odno(cid:286)ników ...................................................................................... 127 Adresy wzgl(cid:266)dne i bezwzgl(cid:266)dne ............................................................................ 128 Kolory odno(cid:286)ników ................................................................................................ 130 Rodzaje zasobów sieciowych ................................................................................. 131 Gdzie otwiera(cid:252) odno(cid:286)niki? ..................................................................................... 134 Obrazy jako odno(cid:286)niki ............................................................................................ 135 Mapy odno(cid:286)ników na obrazach .............................................................................. 138 Mapy odno(cid:286)ników i XHTML ................................................................................. 141 Zakotwiczenia ........................................................................................................ 143 Pozosta(cid:225)e atrybuty odno(cid:286)ników .............................................................................. 145 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 145 Kup książkęPoleć książkę Spis tre(cid:264)ci 5 Lekcja 9. Kontrola nad tekstem .................................................................................... 146 Formatowanie tekstu .............................................................................................. 147 Zmiana atrybutów czcionki .................................................................................... 147 Znaczniki logiczne ................................................................................................. 151 Znaczniki dost(cid:266)pne tylko w HTML5 ...................................................................... 158 Przestarza(cid:225)a kontrola nad czcionk(cid:261) ......................................................................... 160 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 161 Rozdzia(cid:228) 3. Z(cid:228)o(cid:276)one elementy witryny ............................................................... 163 Lekcja 10. Multimedia na stronie WWW ..................................................................... 163 Typy tre(cid:286)ci multimedialnych .................................................................................. 164 Animowane obrazy ................................................................................................ 165 Najprostsze rozwi(cid:261)zanie — odno(cid:286)nik .................................................................... 166 Zagnie(cid:298)d(cid:298)anie multimediów na stronie .................................................................. 167 Parametry multimediów ......................................................................................... 171 Zagnie(cid:298)d(cid:298)anie ze znacznikiem embed ............................................................... 177 Wideo z YouTube .................................................................................................. 178 Multimedia w HTML5 ........................................................................................... 179 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 181 Lekcja 11. Formularze i elementy interaktywne ........................................................... 182 Formularze na stronie WWW ................................................................................. 182 Interaktywne elementy formularzy ......................................................................... 185 Nowe elementy w HTML5 ..................................................................................... 199 Blokowanie elementów witryny ............................................................................. 206 Formularz wysy(cid:225)any na adres e-mail ...................................................................... 207 Swobodne elementy interaktywne .......................................................................... 210 Korzystanie ze skrótów klawiaturowych ................................................................ 211 Etykiety elementów interaktywnych ...................................................................... 212 Grupowanie elementów .......................................................................................... 214 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 215 Lekcja 12. Formatowanie strony za pomoc(cid:261) tabel ........................................................ 215 Wyrównywanie formularza .................................................................................... 216 Formatowanie formularza za pomoc(cid:261) tabeli ........................................................... 218 Tworzenie uk(cid:225)adu strony za pomoc(cid:261) tabeli ............................................................ 220 Zagnie(cid:298)d(cid:298)anie tabel ................................................................................................ 223 Czy warto u(cid:298)ywa(cid:252) tabel do formatowania? ............................................................ 225 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 226 Lekcja 13. Nowe i przestarza(cid:225)e ramki ........................................................................... 227 Co to s(cid:261) ramki? ....................................................................................................... 227 Struktura strony z ramkami .................................................................................... 228 Ramki a odno(cid:286)niki .................................................................................................. 234 Ramki w ramkach ................................................................................................... 236 Wewn(cid:266)trzne zagnie(cid:298)d(cid:298)anie ramek ......................................................................... 237 Ramki w HTML5 ................................................................................................... 238 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 240 Rozdzia(cid:228) 4. Style CSS ...................................................................................... 241 Lekcja 14. Podstawy stylów ......................................................................................... 241 Czym s(cid:261) style CSS? ................................................................................................ 242 Do(cid:225)(cid:261)czanie stylów do dokumentów ........................................................................ 243 Budowa stylu i rodzaje selektorów ......................................................................... 246 Dziedziczenie, kaskadowo(cid:286)(cid:252) i regu(cid:225)y nak(cid:225)adania ................................................... 260 Jednostki miary ...................................................................................................... 263 Komentarze do stylów ............................................................................................ 264 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 264 Kup książkęPoleć książkę 6 Tworzenie stron WWW. Praktyczny kurs Lekcja 15. W(cid:225)asno(cid:286)ci czcionek ..................................................................................... 265 Atrybuty czcionek .................................................................................................. 265 Rozmiar czcionki .................................................................................................... 265 Nazwane rozmiary czcionek ................................................................................... 268 Rodziny czcionek ................................................................................................... 271 Style i warianty ...................................................................................................... 273 Waga, czyli grubo(cid:286)(cid:252) czcionki ................................................................................. 275 Cecha font — wszystko razem ............................................................................... 276 W(cid:225)asne czcionki na stronie WWW ......................................................................... 279 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 280 Lekcja 16. Formatowanie tekstu ................................................................................... 280 Kontrola nad tekstem ............................................................................................. 281 Wyrównywanie tekstu w poziomie ........................................................................ 281 Wyrównywanie tekstu w pionie ............................................................................. 282 Wyrównywanie a inne elementy witryny ............................................................... 284 Kontrolowanie odst(cid:266)pów ........................................................................................ 287 Wci(cid:266)cia ................................................................................................................... 289 Dekoracje, czyli wyró(cid:298)nienia ................................................................................. 290 Kontrola wielko(cid:286)ci liter (transformacje) ................................................................. 291 Obs(cid:225)uga bia(cid:225)ych znaków ........................................................................................ 292 Cieniowanie napisów ............................................................................................. 294 Kierunek tekstu ...................................................................................................... 295 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 295 Lekcja 17. Style list ...................................................................................................... 296 Wyró(cid:298)niki listy nienumerowanej ............................................................................ 296 Typowe wyró(cid:298)niki listy numerowanej ................................................................... 298 Inne wyró(cid:298)niki ....................................................................................................... 300 Obrazy jako wyró(cid:298)niki ........................................................................................... 301 Pozycja wyró(cid:298)nika ................................................................................................. 303 Wszystko razem, czyli w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) list-style .......................................................... 304 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 305 Lekcja 18. Kolory, przezroczysto(cid:286)ci i podk(cid:225)ady ........................................................... 305 Definiowanie kolorów ............................................................................................ 306 Kolor tekstu i podk(cid:225)adu .......................................................................................... 308 Kolory okre(cid:286)lone przez system operacyjny ............................................................ 312 Stopie(cid:276) przezroczysto(cid:286)ci ........................................................................................ 313 Obrazy jako t(cid:225)o ....................................................................................................... 314 Powtarzanie obrazu t(cid:225)a ........................................................................................... 316 Zakotwiczanie obrazów t(cid:225)a ..................................................................................... 317 Pozycja obrazu t(cid:225)a .................................................................................................. 317 Wszystko razem, czyli w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) background ..................................................... 320 Nowe cechy w CSS3 .............................................................................................. 320 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 323 Lekcja 19. Marginesy, obrysy i obramowania .............................................................. 323 Model pude(cid:225)kowy — zale(cid:298)no(cid:286)ci mi(cid:266)dzy marginesami .......................................... 324 Definiowanie marginesów ...................................................................................... 324 Marginesy wewn(cid:266)trzne, czyli wype(cid:225)nienia ............................................................. 327 T(cid:225)a w modelu pude(cid:225)kowym .................................................................................... 328 Dodawanie pe(cid:225)nych obramowa(cid:276) (ramek) ............................................................... 330 Skrótowa definicja obramowania ........................................................................... 333 Obramowania cz(cid:261)stkowe ........................................................................................ 333 Obramowania w CSS3 ........................................................................................... 335 Obrysy .................................................................................................................... 337 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 339 Kup książkęPoleć książkę Spis tre(cid:264)ci 7 Lekcja 20. Style dotycz(cid:261)ce tabel ................................................................................... 340 CSS i standardowe obramowanie tabeli ................................................................. 340 Odst(cid:266)py wewn(cid:261)trz tabeli ........................................................................................ 342 T(cid:225)a i wype(cid:225)nienia .................................................................................................... 344 (cid:224)(cid:261)czenie obramowa(cid:276) .............................................................................................. 348 Obs(cid:225)uga pustych komórek ...................................................................................... 349 Pozycje tytu(cid:225)ów ...................................................................................................... 350 Ustalanie sposobu generowania tabeli .................................................................... 350 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 351 Rozdzia(cid:228) 5. Dalsze boje z CSS .......................................................................... 353 Lekcja 21. Wielko(cid:286)ci i pozycje elementów witryny ..................................................... 353 Rozmiary elementów strony ................................................................................... 354 Zawarto(cid:286)(cid:252) poza elementem .................................................................................... 356 Rozmiary maksymalne i minimalne ....................................................................... 357 Po(cid:225)o(cid:298)enie elementu w witrynie .............................................................................. 360 Elementy o sta(cid:225)ej pozycji ....................................................................................... 365 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 367 Lekcja 22. Sposoby wy(cid:286)wietlania elementów strony ................................................... 368 Kolejno(cid:286)(cid:252) wy(cid:286)wietlania .......................................................................................... 368 Kadrowanie elementów .......................................................................................... 371 Ukrywanie elementów ............................................................................................ 374 Sposoby wy(cid:286)wietlania ............................................................................................ 374 Kszta(cid:225)ty kursora ..................................................................................................... 377 (cid:251)wiczenia do samodzielnego wykonania ............................................................... 377 Lekcja 23. Uk(cid:225)ad strony generowany przez CSS .......................................................... 380 Przep(cid:225)ywy elementów ............................................................................................ 381 Selektywne wy(cid:225)(cid:261)czanie przep(cid:225)ywów ...................................................................... 384 Oblewanie tekstem, czyli przep(cid:225)ywy w praktyce ................................................... 385 Formularz pozycjonowany za pomoc(cid:261) CSS ........................................................... 387 Uk(cid:225)ad witryny generowany dzi(cid:266)ki CSS .................................................................. 389 (cid:251)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(cid:246)p O czym jest ta ksi(cid:241)(cid:276)ka? Internet, a wraz z nim strony WWW, zmienia si(cid:266) w nieprawdopodobnym wprost tem- pie. Wcale nie tak dawno królowa(cid:225)y dosy(cid:252) ascetyczne witryny, a style nadaj(cid:261)ce im opraw(cid:266) wizualn(cid:261) dopiero zdobywa(cid:225)y uznanie webmasterów (twórców witryn interne- towych). Dzi(cid:286) rzeczywisto(cid:286)(cid:252) jest zupe(cid:225)nie inna. Witryny nie tylko zawieraj(cid:261) ciekawe tre- (cid:286)ci, ale i prezentuj(cid:261) je w bardzo atrakcyjny sposób. Obrazy, multimedia, dynamiczne elementy, wideo itp. s(cid:261) ju(cid:298) nieod(cid:225)(cid:261)cznymi elementami sieci WWW. Nie zmieni(cid:225)o si(cid:266) jedno — podstawy. Do budowania witryn wci(cid:261)(cid:298) jest u(cid:298)ywany j(cid:266)zyk HTML. Pozwala on na utworzenie struktury strony i zamieszczenie w niej tre(cid:286)ci. Z kolei do zmiany mo(cid:298)liwo(cid:286)ci prezentacyjnych, czyli mo(cid:298)liwie atrakcyjnej prezentacji tej tre(cid:286)ci, s(cid:225)u(cid:298)(cid:261) tzw. style CSS. W(cid:225)a(cid:286)nie o tym jest ta ksi(cid:261)(cid:298)ka. To kurs pokazuj(cid:261)cy, jak za pomoc(cid:261) HTML i CSS budowa(cid:252) witryny internetowe. Zakres tematyczny obejmuje wszystkie aspekty niezb(cid:266)dne do tworzenia wspó(cid:225)czesnych stron WWW: od napisania najprostszej witryny wy(cid:286)wietlaj(cid:261)cej jedno zdanie i sposo- bów opublikowania jej w sieci, poprzez dodawanie rozmaitych elementów, takich jak tabele, wykazy i grafika (ale równie(cid:298) tre(cid:286)ci multimedialne i klipy wideo), a(cid:298) po bu- dowanie z(cid:225)o(cid:298)onego uk(cid:225)adu strony za pomoc(cid:261) stylów CSS. To wszystko jest zilustro- wane wieloma praktycznymi przyk(cid:225)adami, których zrozumienie nikomu nie przysporzy najmniejszych k(cid:225)opotów. Dla kogo jest ta ksi(cid:241)(cid:276)ka? Ksi(cid:261)(cid:298)ka jest przeznaczona dla osób pocz(cid:261)tkuj(cid:261)cych, które by(cid:252) mo(cid:298)e nigdy nie zajmo- wa(cid:225)y si(cid:266) budowaniem nawet najprostszych stron. Wszystkie techniki niezb(cid:266)dne do two- rzenia witryn WWW, czyli HTML i CSS, s(cid:261) omawiane od podstaw, tak by prezento- wane zagadnienia by(cid:225)y zrozumia(cid:225)e dla ka(cid:298)dego. Nie jest te(cid:298) konieczna znajomo(cid:286)(cid:252) Kup książkęPoleć książkę 10 Wst(cid:246)p technicznych aspektów funkcjonowania sieci. Za(cid:225)o(cid:298)eniem jest jednak, (cid:298)e Czytelnik ma wiedz(cid:266) i do(cid:286)wiadczenie niezb(cid:266)dne do sprawnego, codziennego pos(cid:225)ugiwania si(cid:266) komputerem i korzystania z zasobów internetu. Wie zatem, jak administrowa(cid:252) swoim systemem (czyli potrafi np. samodzielnie zainstalowa(cid:252) program), korzysta(cid:252) z edytorów tekstowych, poczty elektronicznej, przegl(cid:261)darki. Z pewno(cid:286)ci(cid:261) nie s(cid:261) to umiej(cid:266)tno(cid:286)ci wykraczaj(cid:261)ce poza wiedz(cid:266) typowego u(cid:298)ytkownika komputera. Co b(cid:246)dzie potrzebne? Na pewno niezb(cid:266)dna jest ch(cid:266)(cid:252) poznania technik tworzenia stron internetowych. Oczywi(cid:286)cie potrzebny b(cid:266)dzie komputer, najlepiej z dost(cid:266)pem do internetu (wbrew pozorom dost(cid:266)p do sieci wcale nie jest konieczny do nauki tworzenia stron!). Oprócz tego przyda si(cid:266) prosty edytor tekstu, mo(cid:298)e to by(cid:252) nawet windowsowy Notatnik — co prawda nie jest najwygodniejszym narz(cid:266)dziem, ale w zupe(cid:225)no(cid:286)ci wystarczaj(cid:261)cym. Kwestia edytorów zostanie dok(cid:225)adnie opisana w rozdziale 1. Potrzebna b(cid:266)dzie rów- nie(cid:298) przegl(cid:261)darka WWW — to wydaje si(cid:266) oczywiste. Mo(cid:298)e to by(cid:252) dowolny produkt tego typu, najlepiej w mo(cid:298)liwie najnowszej wersji, np. (w kolejno(cid:286)ci alfabetycznej): Chrome, Firefox, Internet Explorer, Opera. Kody (cid:274)ród(cid:228)owe i listingi Wszystkie listingi oraz kody (cid:296)ród(cid:225)owe przyk(cid:225)adów prezentowanych w ksi(cid:261)(cid:298)ce mo(cid:298)na pobra(cid:252) ze strony internetowej http://helion.pl/ksiazki/twspk2.htm lub bezpo(cid:286)rednio z ser- wera FTP: ftp://ftp.helion.pl/przyklady/twspk2.zip. Oprócz listingów pod wskazanymi adresami dost(cid:266)pne s(cid:261) rozwi(cid:261)zania (cid:252)wicze(cid:276) do samodzielnego wykonania zawartych w wi(cid:266)kszo(cid:286)ci lekcji. Kup książkęPoleć książkę Rozdzia(cid:228) 1 Podstawy Rozdzia(cid:225) 1 rozpoczyna nasz(cid:261) przygod(cid:266) z tworzeniem stron WWW. Sk(cid:225)ada si(cid:266) z trzech lekcji, w których omówione zosta(cid:225)y podstawy niezb(cid:266)dne do dalszej nauki. Zobaczy- my, jak wygl(cid:261)da struktura strony WWW, z czego sk(cid:225)ada si(cid:266) strona i jak w najprostszy sposób wy(cid:286)wietli(cid:252) zwyk(cid:225)y napis. Omówione zostan(cid:261) równie(cid:298) narz(cid:266)dzia pomocne przy tworzeniu witryny i przydatne edytory, dzi(cid:266)ki którym omin(cid:261) nas m.in. problemy z wy- (cid:286)wietlaniem polskich znaków. W lekcji 2 zostan(cid:261) przedstawione sposoby umieszcze- nia strony WWW w internecie, tak by by(cid:225)a dost(cid:266)pna dla wszystkich zainteresowanych. Ten temat jednak mo(cid:298)e zosta(cid:252) pomini(cid:266)ty przez pocz(cid:261)tkuj(cid:261)cych, gdy(cid:298) testowanie two- rzonych witryn mo(cid:298)na bez problemów przeprowadza(cid:252) na domowym komputerze przy u(cid:298)yciu wy(cid:225)(cid:261)cznie przegl(cid:261)darki WWW. Lekcja 1. Pierwsze kroki (cid:141) Z czego sk(cid:225)ada si(cid:266) strona WWW? (cid:141) Jak otworzy(cid:252) plik w przegl(cid:261)darce? (cid:141) Co to jest HTML i XHTML? (cid:141) Jakiego j(cid:266)zyka opisu strony u(cid:298)ywa(cid:252)? (cid:141) Jak wygl(cid:261)da struktura strony napisanej w HTML-u? (cid:141) Co to jest kod (cid:296)ród(cid:225)owy? (cid:141) W jaki sposób unikn(cid:261)(cid:252) problemów z polskimi literami? (cid:141) Czym jest prolog dokumentu HTML? (cid:141) Jakie edytory tekstowe wspomagaj(cid:261) tworzenie witryn? (cid:141) Dlaczego warto testowa(cid:252) witryny w ró(cid:298)nych przegl(cid:261)darkach? Kup książkęPoleć książkę 12 Rozdzia(cid:228) 1 (cid:105) Podstawy Wczytanie dokumentu do przegl(cid:241)darki Gdy przegl(cid:261)damy strony WWW, widzimy na nich wiele rozmaitych danych: tekst, grafiki, zdj(cid:266)cia, animacje, dynamiczne menu itp. Tworzy to wra(cid:298)enie du(cid:298)ej z(cid:225)o(cid:298)ono(cid:286)ci. Tymczasem podstawowa strona WWW to zwyczajny dokument tekstowy. Wszystko inne to tylko dodatki umieszczone w osobnych plikach. Oczywi(cid:286)cie nie jest to taki dokument, jaki tworzymy np. w Wordzie. Ma on swoj(cid:261) struktur(cid:266) i specjalne znaczniki, dzi(cid:266)ki którym przegl(cid:261)darka wie, jak ma wy(cid:286)wietli(cid:252) zawart(cid:261) w nim tre(cid:286)(cid:252). T(cid:266) struktur(cid:266) i te znaczniki musimy utworzy(cid:252) sami. To w(cid:225)a(cid:286)nie zadanie ka(cid:298)dego twórcy stron WWW. Jak w najprostszy sposób wy(cid:286)wietli(cid:252) co(cid:286) w przegl(cid:261)darce? To proste. Wystarczy utwo- rzy(cid:252) zwyk(cid:225)y dokument tekstowy, wpisa(cid:252) w nim dowoln(cid:261) tre(cid:286)(cid:252) i otworzy(cid:252) go w Chromie, Firefoksie, Internet Explorerze lub innym programie tego typu. Co rozumiemy przez dokument tekstowy? To plik zawieraj(cid:261)cy tylko tekst. Mo(cid:298)na go przygotowa(cid:252) za po- moc(cid:261) dowolnego edytora tekstowego. W systemie Windows wystarczy u(cid:298)y(cid:252) dost(cid:266)pnego standardowo Notatnika (z menu Start wybieramy Programy (lub Wszystkie programy), Akcesoria i Notatnik). W edytorze nale(cid:298)y wpisa(cid:252) dowoln(cid:261) tre(cid:286)(cid:252) (rysunek 1.1), a nast(cid:266)pnie zapisa(cid:252) plik, wy- bieraj(cid:261)c z menu Plik pozycj(cid:266) Zapisz. Rysunek 1.1. Testowy wpis w edytorze tekstowym W oknie wyboru nazwy pliku wpisujemy index.html lub dowoln(cid:261) inn(cid:261) nazw(cid:266) (rysunek 1.2). Wa(cid:298)ne, aby rozszerzenie nazwy pliku mia(cid:225)o posta(cid:252) html (lub htm, jednak html jest lepszym rozwi(cid:261)zaniem1). Z listy Zapisz jako typ nale(cid:298)y wybra(cid:252) pozycj(cid:266) Wszystkie pliki2, a pole wyboru Kodowanie pozostawi(cid:252) bez zmian. Po klikni(cid:266)ciu przycisku Zapisz dokument zostanie zapisany i zostanie mu nadane rozszerzenie html. Rysunek 1.2. Parametry zapisywanego pliku 1 Prawid(cid:225)owym rozszerzeniem plików zawieraj(cid:261)cych dokumenty typu HTML (czyli tre(cid:286)(cid:252) stron WWW) pierwotnie by(cid:225)o .html. Problem powsta(cid:225), gdy takie pliki trzeba by(cid:225)o zapisa(cid:252) w systemach DOS i opartych na nich wczesnych wersjach Windowsa, które dopuszcza(cid:225)y maksymalnie trzyliterowe rozszerzenia. Dlatego oprócz html zacz(cid:266)(cid:225)o funkcjonowa(cid:252) rozszerzenie htm. Dzi(cid:286) ka(cid:298)dy popularny system operacyjny oferuje rozszerzenia plików o d(cid:225)ugo(cid:286)ci wi(cid:266)kszej ni(cid:298) trzy znaki, dlatego lepiej stosowa(cid:252) rozszerzenie html. Je(cid:286)li w polu Zapisz typ jako pozostanie domy(cid:286)lna opcja Dokument tekstowy, do wprowadzonej nazwy pliku edytor doda rozszerzenie txt. Wtedy, je(cid:286)li np. wprowadzon(cid:261) nazw(cid:261) by(cid:225)o index.html, na dysku zostanie zapisany plik o nazwie index.html.txt. Dlatego konieczna jest zmiana tej opcji na wskazan(cid:261) w tek(cid:286)cie. 2 Kup książkęPoleć książkę Lekcja 1. Pierwsze kroki 13 Miejsce zapisania pliku jest dowolne. Mo(cid:298)na go umie(cid:286)ci(cid:252) nawet na pulpicie. Lepiej jednak przygotowa(cid:252) specjalny katalog, w którym b(cid:266)d(cid:261) umieszczane wszystkie pliki testowe i który pozwoli na swobodne testowanie prezentowanych przyk(cid:225)adów. Ten ka- talog mo(cid:298)na nazwa(cid:252) np. www. Taki katalog b(cid:266)dzie si(cid:266) pojawia(cid:225) w dalszych przyk(cid:225)adach. Po zapisaniu pliku trzeba go wczyta(cid:252) do przegl(cid:261)darki. Najpro(cid:286)ciej zrobimy to, klikaj(cid:261)c dwukrotnie plik w Eksploratorze Windows. Uruchomi si(cid:266) domy(cid:286)lna przegl(cid:261)darka3, a plik zostanie do niej wczytany. Mo(cid:298)na te(cid:298) najpierw uruchomi(cid:252) przegl(cid:261)dark(cid:266) (dowoln(cid:261)), a nast(cid:266)pnie wczyta(cid:252) do niej plik. Wtedy: (cid:141) W Chromie wciskamy kombinacj(cid:266) klawiszy Ctrl+O i w oknie wyboru plików wskazujemy plik index.html. (cid:141) W Firefoksie z menu Plik wybieramy Otwórz plik (lub wciskamy kombinacj(cid:266) klawiszy Ctrl+O) i wskazujemy plik index.html. (cid:141) W Internet Explorerze z menu Plik wybieramy Otwórz (lub wciskamy kombinacj(cid:266) klawiszy Ctrl+O), a nast(cid:266)pnie klikamy Przegl(cid:261)daj i wskazujemy plik index.html. (cid:141) W Operze na g(cid:225)ównym pasku narz(cid:266)dziowym (je(cid:286)li jest widoczny) klikamy Otwórz (lub wciskamy kombinacj(cid:266) klawiszy Ctrl+O) i wskazujemy plik index.html. Niezale(cid:298)nie od tego, jakiej aplikacji u(cid:298)yli(cid:286)my, na ekranie pojawi si(cid:266) tre(cid:286)(cid:252) pliku tek- stowego wprowadzona wcze(cid:286)niej w edytorze (rysunek 1.3). Rysunek 1.3. Plik tekstowy wczytany do przegl(cid:261)darki Jak wida(cid:252), najprostsza strona WWW wcale nie musi si(cid:266) sk(cid:225)ada(cid:252) ze skomplikowanych i ma(cid:225)o zrozumia(cid:225)ych dla laika polece(cid:276). Wystarczy napisa(cid:252) troch(cid:266) tekstu. Niestety, ta- kie post(cid:266)powanie wystarczy jedynie do zaprezentowania prostej tre(cid:286)ci. Ju(cid:298) przy kilku zdaniach natrafimy na prozaiczne problemy, cho(cid:252)by takie jak brak mo(cid:298)liwo(cid:286)ci zasto- sowania akapitów, zmiany czcionki, nie mówi(cid:261)c ju(cid:298) o budowaniu uk(cid:225)adu strony. Warto zrobi(cid:252) prosty test. Zmodyfikujmy tre(cid:286)(cid:252) pliku index.html (np. otwieraj(cid:261)c go po- nownie w Notatniku) lub utwórzmy nowy, tak by zawiera(cid:225) tre(cid:286)(cid:252) w kilku wierszach (rysunek 1.4). 3 Przegl(cid:261)darka domy(cid:286)lna to ta, która zosta(cid:225)a zarejestrowana w systemie jako produkt maj(cid:261)cy by(cid:252) u(cid:298)ywany domy(cid:286)lnie przy wszelkich czynno(cid:286)ciach zwi(cid:261)zanych z WWW, np. do otwierania plików z rozszerzeniem html. W dost(cid:266)pnych obecnie systemach z rodziny Windows domy(cid:286)lna przegl(cid:261)darka jest wybierana po zainstalowaniu systemu, jednak podczas instalacji innych produktów (Chrome, Firefox, Opera) ka(cid:298)dy z nich oferuje mo(cid:298)liwo(cid:286)(cid:252) zmiany tego ustawienia. Tak wi(cid:266)c domy(cid:286)ln(cid:261) przegl(cid:261)dark(cid:261) mo(cid:298)e by(cid:252) praktycznie dowolny produkt tego typu. Kup książkęPoleć książkę 14 Rysunek 1.4. Edytor z kilkoma wierszami tekstu Rozdzia(cid:228) 1 (cid:105) Podstawy Je(cid:298)eli po zapisaniu danych ponownie wczytamy plik index.html do przegl(cid:261)darki, spotka nas niespodzianka. Ca(cid:225)y tekst b(cid:266)dzie prezentowany tylko w jednym wierszu (rysunek 1.5). Wida(cid:252) wi(cid:266)c wyra(cid:296)nie, (cid:298)e do prawid(cid:225)owego formatowania strony WWW potrzebne s(cid:261) dodatkowe elementy. S(cid:225)u(cid:298)y do tego j(cid:266)zyk HTML (lub XHTML). Dopiero jego za- stosowanie pozwala tworzy(cid:252) poprawne witryny. Rysunek 1.5. W przegl(cid:261)darce tekst jest prezentowany jednym ci(cid:261)giem HTML, XHTML i HTML5 J(cid:266)zykiem s(cid:225)u(cid:298)(cid:261)cym do tworzenia stron WWW jest HTML, czyli Hypertext Markup Language. Nazywamy go równie(cid:298) j(cid:266)zykiem opisu strony. Sk(cid:225)ada si(cid:266) ze znaczników, które nadaj(cid:261) znaczenie ró(cid:298)nym elementom tekstowym. Pozwalaj(cid:261) np. sformatowa(cid:252) akapit lub doda(cid:252) do dokumentu odno(cid:286)nik (link, hiper(cid:225)(cid:261)cze) prowadz(cid:261)cy do innej witryny czy zasobów sieci. Pocz(cid:261)tki HTML si(cid:266)gaj(cid:261) wczesnych lat 90. XX wieku. Pierwszy dokument dokonuj(cid:261)- cy standaryzacji tego j(cid:266)zyka pojawi(cid:225) si(cid:266) w 1995 roku i dotyczy(cid:225) standardu HTML 2.0. Obecnie4 najnowsz(cid:261) oficjaln(cid:261) wersj(cid:261) standardu jest wci(cid:261)(cid:298) HTML 4.01, który pocho- dzi z 1999 roku5. Nie da si(cid:266) ukry(cid:252), (cid:298)e ma ju(cid:298) swoje lata, a rozwój zosta(cid:225) na d(cid:225)ugi czas zatrzymany. Dopiero w styczniu 2008 roku opublikowano roboczy szkic wersji 5, która wci(cid:261)(cid:298) jest w fazie uzgodnie(cid:276) organizacji standaryzacyjnych. Jedn(cid:261) z przyczyn zatrzymania rozwoju HTML by(cid:225)o dosy(cid:252) powszechne pod koniec lat 90. ubieg(cid:225)ego wieku przekonanie, (cid:298)e kolejne wersje j(cid:266)zyka opisu strony powinny by(cid:252) (cid:286)ci(cid:286)lej oparte na zdobywaj(cid:261)cym wtedy coraz wi(cid:266)ksz(cid:261) popularno(cid:286)(cid:252) j(cid:266)zyku XML. Dla- tego powsta(cid:225) j(cid:266)zyk XHTML (Extensible Hypertext Markup Language), który w pier- wotnej wersji 1.0 (stycze(cid:276) 2000 roku) by(cid:225) stosunkowo prost(cid:261) adaptacj(cid:261) HTML 4.01 do standardu XML. Powsta(cid:225)a równie(cid:298) wersja 1.1, która jednak a(cid:298) do pocz(cid:261)tku 2009 roku nie powinna by(cid:252) formalnie stosowana do zapisu danych typu HTML6. 4 Czyli w pierwszej po(cid:225)owie 2013 roku. 5 Oficjalne zatwierdzenie standardu mia(cid:225)o miejsce w maju 2000 roku (standard ISO/IEC 15445:2000). 6 Wynika to z rekomendacji organizacji standaryzacyjnej W3C. Otó(cid:298) typem danych dla dokumentów HTML i XHTML1.0 mo(cid:298)e by(cid:252) text/html standardowo rozpoznawany przez wszystkie serwery i przegl(cid:261)darki (a tak(cid:298)e inne aplikacje), tymczasem typem danych dla XHTML 1.1 powinno by(cid:252) application/xhtml+xml. To ograniczenie zosta(cid:225)o zniesione w styczniu 2009 roku. Kup książkęPoleć książkę Lekcja 1. Pierwsze kroki 15 Nie b(cid:266)dziemy si(cid:266) zag(cid:225)(cid:266)bia(cid:252) w teoretyczne rozwa(cid:298)ania na temat j(cid:266)zyków HTML i XHTML, czas bowiem odpowiedzie(cid:252) na pytanie nurtuj(cid:261)ce zapewne ka(cid:298)dego pocz(cid:261)tkuj(cid:261)cego twórc(cid:266) stron WWW — który z tych j(cid:266)zyków wybra(cid:252)? Odpowied(cid:296) b(cid:266)dzie przewrotna. Obecnie najrozs(cid:261)dniejsze jest wybranie zgodno(cid:286)ci z tzw. standardem HTML5. Dlaczego tak zwanym? Dlatego, (cid:298)e taki standard formalnie nie istnieje. Dost(cid:266)pne s(cid:261) jedynie jego propozycje, do których wci(cid:261)(cid:298) dodaje si(cid:266) nowe elementy7. Co wi(cid:266)cej, nie wszystkie nowe elementy s(cid:261) interpretowane przez przegl(cid:261)darki. Wbrew pozorom opisana sytuacja nie jest du(cid:298)ym problemem. Typowe elementy HTML5 s(cid:261) opracowane na tyle dok(cid:225)adnie, (cid:298)e mo(cid:298)na je stosowa(cid:252) w taki sposób, aby strony by(cid:225)y poprawnie interpretowane przez ró(cid:298)ne przegl(cid:261)darki dost(cid:266)pne na rynku. Dlatego wszystkie przyk(cid:225)ady prezentowane w ksi(cid:261)(cid:298)ce (chyba (cid:298)e napisano inaczej) b(cid:266)d(cid:261) zgodne ze wspomnianym HTML5 (ró(cid:298)nice mi(cid:266)dzy HTML 4.01 i HTML5 b(cid:266)d(cid:261) zaznaczane w opisach). Podstawowa struktura strony WWW Struktura strony WWW jest budowana z tzw. znaczników. Mo(cid:298)na je traktowa(cid:252) jak polecenia formatuj(cid:261)ce. Wi(cid:266)cej informacji o znacznikach zawiera lekcja 3, ju(cid:298) teraz jednak powinni(cid:286)my zapozna(cid:252) si(cid:266) z ogóln(cid:261) budow(cid:261) strony. Zosta(cid:225)a ona przedstawiona na listingu 1.1. Listing 1.1. Ogólna struktura strony WWW html head Tutaj nale(cid:298)y umie(cid:286)ci(cid:252) tre(cid:286)(cid:252) nag(cid:225)ówka dokumentu /head body Tutaj nale(cid:298)y umie(cid:286)ci(cid:252) w(cid:225)a(cid:286)ciw(cid:261) tre(cid:286)(cid:252) dokumentu HTML /body /html Dokument rozpoczynamy od znacznika html , a ko(cid:276)czymy znacznikiem /html . Wewn(cid:261)trz mo(cid:298)na wyró(cid:298)ni(cid:252) dwie g(cid:225)ówne cz(cid:266)(cid:286)ci. Pierwsza z nich to nag(cid:225)ówek, który znajduje si(cid:266) mi(cid:266)dzy znacznikami head i /head . Umieszczane s(cid:261) w nim ró(cid:298)ne in- formacje o dokumencie, np. sposób kodowania znaków, tytu(cid:225), dane o autorze itp. Te informacje nie s(cid:261) wy(cid:286)wietlane (z wyj(cid:261)tkiem tytu(cid:225)u strony). W(cid:225)a(cid:286)ciwa tre(cid:286)(cid:252) doku- mentu, czyli to, co zobaczy u(cid:298)ytkownik odwiedzaj(cid:261)cy witryn(cid:266), znajduje si(cid:266) w sekcji wyró(cid:298)nionej za pomoc(cid:261) znaczników body i /body . Tam mo(cid:298)na umie(cid:286)ci(cid:252) np. aka- pity tekstowe. Tre(cid:264)(cid:232) zaprezentowan(cid:241) na listingu, a sk(cid:228)adaj(cid:241)c(cid:241) si(cid:246) ze znaczników HTML nazywa- my kodem (cid:274)ród(cid:228)owym strony WWW. W skrócie b(cid:246)dziemy mówili o kodzie strony. 7 Organizacja W3C (World Wide Web Consortium) ma publikowa(cid:252) rekomendacje standardu HTML5 (wed(cid:225)ug planów pierwsza pojawi si(cid:266) w 2014 roku, a kolejna w 2016 roku). Inn(cid:261) koncepcj(cid:266) ma organizacja WHATWG (Web Hypertext Application Technology Working Group) — mówi ona o tzw. (cid:298)ywym standardzie, czyli specyfikacji, która wci(cid:261)(cid:298) mo(cid:298)e si(cid:266) zmienia(cid:252) (a wi(cid:266)c faktycznie nie jest standardem). Kup książkęPoleć książkę 16 Rozdzia(cid:228) 1 (cid:105) Podstawy Pierwsza strona WWW Czas napisa(cid:252) pierwsz(cid:261) stron(cid:266) WWW, czyli wype(cid:225)ni(cid:252) zaprezentowan(cid:261) wcze(cid:286)niej struktu- r(cid:266) prawid(cid:225)ow(cid:261) tre(cid:286)ci(cid:261). Zadaniem tej strony b(cid:266)dzie wy(cid:286)wietlenie jednego akapitu tek- stowego sk(cid:225)adaj(cid:261)cego si(cid:266) z kilku s(cid:225)ów. Kod takiej strony zosta(cid:225) przedstawiony na li- stingu 1.2. Z pozoru mo(cid:298)e si(cid:266) on wydawa(cid:252) dosy(cid:252) skomplikowany, nie nale(cid:298)y jednak si(cid:266) tym przejmowa(cid:252). Wszystkie elementy zostan(cid:261) wyja(cid:286)nione krok po kroku. Listing 1.2. Najprostsza strona WWW !DOCTYPE HTML html head title Pierwsza strona WWW /title /head body p To jest akapit tekstowy. /p /body /html Zanim zajmiemy si(cid:266) poszczególnymi elementami kodu, zapiszmy go w pliku index.html i wczytajmy do przegl(cid:261)darki, tak jak zosta(cid:225)o to opisane w podrozdziale „Wczytanie dokumentu do przegl(cid:261)darki”. Zobaczymy widok podobny do przedstawionego na ry- sunku 1.6. Rysunek 1.6. Kod z listingu 1.2 wczytany do przegl(cid:261)darki Na ekranie wida(cid:252) jedynie tytu(cid:225) strony (zarówno na pasku tytu(cid:225)u okna przegl(cid:261)darki, jak i w nag(cid:225)ówku karty, o ile u(cid:298)yta przegl(cid:261)darka korzysta z kart) oraz tre(cid:286)(cid:252) akapitu tekstowe- go. (cid:297)adna inna tre(cid:286)(cid:252), a w szczególno(cid:286)ci znaczniki HTML, nie zosta(cid:225)a wy(cid:286)wietlona. Przeanalizujmy teraz kod z listingu 1.2, który wygenerowa(cid:225) witryn(cid:266) widoczn(cid:261) na ry- sunku. Zaczyna si(cid:266) on od prologu (deklaracji typu dokumentu): !DOCTYPE HTML Jest to po prostu okre(cid:286)lenie standardu HTML, w którym zosta(cid:225)a utworzona strona. Wi(cid:266)cej informacji o prologach znajduje si(cid:266) w cz(cid:266)(cid:286)ci lekcji zatytu(cid:225)owanej „Prolog do- kumentu HTML i XHTML”. Na razie przyjmijmy, (cid:298)e w przypadku HTML5 na po- cz(cid:261)tku kodu nale(cid:298)y umie(cid:286)ci(cid:252) taki ci(cid:261)g znaków. W sekcji head zosta(cid:225) umieszczony znacznik title , który pozwala zdefiniowa(cid:252) tytu(cid:225) strony: title Pierwsza strona WWW /title Kup książkęPoleć książkę Lekcja 1. Pierwsze kroki 17 Tytu(cid:225)em jest ca(cid:225)a tre(cid:286)(cid:252) znajduj(cid:261)ca si(cid:266) pomi(cid:266)dzy title i /title . W prezentowa- nym przypadku jest to ci(cid:261)g Pierwsza strona WWW. Utworzenie tytu(cid:225)u strony jest obli- gatoryjne. Zawsze wi(cid:266)c nale(cid:298)y u(cid:298)y(cid:252) znacznika title i musi on by(cid:252) umieszczony w sekcji head . W sekcji body , zawieraj(cid:261)cej w(cid:225)a(cid:286)ciw(cid:261) tre(cid:286)(cid:252) witryny, zosta(cid:225) umieszczony znacznik p : p To jest akapit tekstowy. /p Definiuje on jeden akapit tekstowy. Tre(cid:286)ci(cid:261) akapitu s(cid:261) wszystkie znaki umieszczone mi(cid:266)dzy p a /p , w tym przypadku ci(cid:261)g To jest akapit tekstowy. Ten ci(cid:261)g jest wy(cid:286)wietlany w przegl(cid:261)darce po wczytaniu witryny. Pierwsza strona w XHTML Je(cid:298)eli zamiast HTML chcemy u(cid:298)y(cid:252) XHTML (nie jest to zalecane, mimo to wci(cid:261)(cid:298) mo(cid:298)na spotka(cid:252) wiele witryn korzystaj(cid:261)cych z tego j(cid:266)zyka), nie musimy wprowadza(cid:252) znacz(cid:261)cych modyfikacji kodu strony. W przypadku prostych witryn zmiany b(cid:266)d(cid:261) do- tyczy(cid:225)y tylko samego pocz(cid:261)tku dokumentu, który b(cid:266)dzie musia(cid:225) zawiera(cid:252) inny prolog, a tak(cid:298)e bardziej rozbudowany wst(cid:266)p. Najlepiej wida(cid:252) to na listingu 1.3. Listing 1.3. Kod prostej strony w XHTML ?xml version= 1.1 encoding= utf-8 ? !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/tr/xhtml11/Dtd/xhtml11.dtd html xmlns= http://www.w3.org/1999/xhtml xml:lang= pl head title Pierwsza strona WWW /title /head body p To jest akapit tekstowy. /p /body /html Tym razem przed deklaracj(cid:261) typu dokumentu znajduje si(cid:266) wiersz: ?xml version= 1.1 encoding= utf-8 ? Okre(cid:286)la on wersj(cid:266) dokumentu XML (parametr version), w tym przypadku 1.1, a tak(cid:298)e sposób kodowania znaków (parametr encoding). Wi(cid:266)cej informacji o kodowaniu znaków znajduje si(cid:266) w cz(cid:266)(cid:286)ci zatytu(cid:225)owanej „Polskie litery na stronie WWW”. Poni(cid:298)ej umieszczona jest w(cid:225)a(cid:286)ciwa deklaracja typu dokumentu: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/tr/xhtml11/Dtd/xhtml11.dtd specyficzna dla standardu XHTML 1.1 (deklaracje w(cid:225)a(cid:286)ciwe dla innych wersji XHTML zosta(cid:225)y opisane w kolejnej cz(cid:266)(cid:286)ci lekcji). Kup książkęPoleć książkę 18 Rozdzia(cid:228) 1 (cid:105) Podstawy Znacznik html rozpoczynaj(cid:261)cy w(cid:225)a(cid:286)ciwy dokument HTML zosta(cid:225) tu uzupe(cid:225)niony o parametr okre(cid:286)laj(cid:261)cy definicj(cid:266) tzw. przestrzeni nazw XHTML (xmlns), a tak(cid:298)e u(cid:298)yty j(cid:266)zyk (pl): html xmlns= http://www.w3.org/1999/xhtml xml:lang= pl Te parametry nie s(cid:261) obligatoryjne i znacznik móg(cid:225)by mie(cid:252) równie(cid:298) prost(cid:261) posta(cid:252), czyli html . Dalsza cz(cid:266)(cid:286)(cid:252) kodu jest taka sama jak w przypadku przyk(cid:225)adu z listingu 1.2. Podobnie b(cid:266)dzie w wi(cid:266)kszo(cid:286)ci przyk(cid:225)adów prezentowanych w ksi(cid:261)(cid:298)ce. W(cid:225)a(cid:286)ciwa tre(cid:286)(cid:252) kodu strony b(cid:266)dzie zgodna zarówno z HTML, jak i XHTML, a wi(cid:266)c uzyskanie odpowiedniego typu dokumentu b(cid:266)dzie mo(cid:298)liwe po wymianie jedynie opisanych fragmentów prologów. Na listingach natomiast b(cid:266)dzie prezentowany wy(cid:225)(cid:261)cznie prolog dla HTML5. Prolog dokumentu HTML i XHTML Prolog dokumentu to informacja o standardzie, w jakim ten dokument zosta(cid:225) wykona- ny. Innymi s(cid:225)owy, okre(cid:286)la on typ dokumentu, jest to deklaracja typu dokumentu — DTD (z ang. Document Type Declaration). Dzi(cid:266)ki tej deklaracji przegl(cid:261)darka (lub inny program) b(cid:266)dzie wiedzia(cid:225)a, jak odczytywa(cid:252) dokument i czego (jakich struktur) mo(cid:298)e si(cid:266) w nim spodziewa(cid:252). Dla j(cid:266)zyka HTML5 stosuje si(cid:266) tylko jeden prolog, ma on posta(cid:252): !DOCTYPE HTML Wszystkie przyk(cid:225)ady prezentowane w ksi(cid:261)(cid:298)ce b(cid:266)d(cid:261) z niego korzysta(cid:252). Je(cid:286)li istnieje konieczno(cid:286)(cid:252) u(cid:298)ycia starszej wersji HTML-a, 4.01, stosuje si(cid:266) trzy rodzaje prologu. Pierwszy ma posta(cid:252): !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN i okre(cid:286)la (cid:286)cis(cid:225)(cid:261) wersj(cid:266) standard 4.01. To oznacza, (cid:298)e na stronie nie mog(cid:261) by(cid:252) umiesz- czone (cid:298)adne elementy uznane za przestarza(cid:225)e (z ang. deprecated, stosowane jest te(cid:298) okre(cid:286)lenie elementy schy(cid:225)kowe), a dokument musi dok(cid:225)adnie spe(cid:225)nia(cid:252) wszelkie wy- mogi standardu. Drugi typ to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN Jest to przej(cid:286)ciowa (z ang. transitional) wersja standard 4.01, czasami okre(cid:286)lana jako lu(cid:296)na ze wzgl(cid:266)du na swobodniejsze, mniej restrykcyjne podej(cid:286)cie do respektowania standardu. Mo(cid:298)na w niej u(cid:298)ywa(cid:252) znaczników uznanych za przestarza(cid:225)e. Trzeci typ to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN Ta wersja oznacza stron(cid:266) z ramkami (temat ramek zostanie przedstawiony w lekcji 13). Dok(cid:225)adniej rzecz ujmuj(cid:261)c, taki dokument jest traktowany jak wersja Transitional uzu- pe(cid:225)niona o mo(cid:298)liwo(cid:286)(cid:252) stosowania ramek. Kup książkęPoleć książkę Lekcja 1. Pierwsze kroki 19 Ka(cid:298)dy z wymienionych prologów mo(cid:298)e by(cid:252) uzupe(cid:225)niony o odno(cid:286)nik do dokumentu zawieraj(cid:261)cego formalny opis sk(cid:225)adni dla danego standardu. Nie jest to obligatoryjne, ale stanowi wskazówk(cid:266) dla narz(cid:266)dzi dokonuj(cid:261)cych walidacji (sprawdzenia poprawno- (cid:286)ci) dokumentów. Najcz(cid:266)(cid:286)ciej wi(cid:266)c prolog jest uzupe(cid:225)niany o taki odno(cid:286)nik, mimo (cid:298)e z regu(cid:225)y przegl(cid:261)darki w ogóle nie korzystaj(cid:261) z tej informacji. Alternatywne wersje prologów zatem b(cid:266)d(cid:261) mia(cid:225)y postaci przedstawione poni(cid:298)ej. Wersja HTML 4.01 Strict: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd Wersja HTML 4.01 Transitional: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd Wersja HTML 4.01 Frameset: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd Analogicznie jak w przypadku HTML, dokumenty XHTML równie(cid:298) maj(cid:261) swoje prologi. Dla standardu XHTML 1.0 b(cid:266)d(cid:261) one nast(cid:266)puj(cid:261)ce: Dla (cid:286)cis(cid:225)ej (Strict) wersji standardu: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN Dla przej(cid:286)ciowej (Transitional) wersji standardu: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN Dla wersji z ramkami (Frameset): !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN Okre(cid:286)lenia: „(cid:286)cis(cid:225)a”, „przej(cid:286)ciowa” i „z ramkami” maj(cid:261) tu takie samo znaczenie jak w przypadku standardu HTML 4.01. Je(cid:286)li deklaracja DTD ma równie(cid:298) zawiera(cid:252) odno(cid:286)nik do dokumentu z opisem sk(cid:225)adni, stosuje si(cid:266) nast(cid:266)puj(cid:261)ce prologi: Dla (cid:286)cis(cid:225)ej (Strict) wersji standardu: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd Dla przej(cid:286)ciowej (Transitional) wersji standardu: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd Dla wersji z ramkami (Frameset): !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd Kup książkęPoleć książkę 20 Rozdzia(cid:228) 1 (cid:105) Podstawy Dla XHTML w wersji 1.1 stosuje si(cid:266) prolog o postaci: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd Formatowanie kodu HTML Wa(cid:298)n(cid:261) spraw(cid:261), na któr(cid:261) osoby pocz(cid:261)tkuj(cid:261)ce z regu(cid:225)y nie zwracaj(cid:261) uwagi, jest sposób formatowania kodu (cid:296)ród(cid:225)owego strony. Nie ma to wi(cid:266)kszego znaczenia przy niewiel- kich witrynach, w których znajduje si(cid:266) jedynie kilka akapitów tekstowych, jednak przy bardziej rozbudowanych stronach w(cid:225)a(cid:286)ciwy zapis bardzo u(cid:225)atwi pó(cid:296)niejsz(cid:261) edycj(cid:266) i poprawki. Chodzi o to, aby tak zapisa(cid:252) kod (cid:296)ród(cid:225)owy, (cid:298)eby by(cid:225) jak najbardziej dla nas czytelny. Dlatego najcz(cid:266)(cid:286)ciej wydziela si(cid:266) poszczególne bloki, stosuj(cid:261)c wci(cid:266)cia od lewej strony. Kod z listingu 1.2 mo(cid:298)na by przedstawi(cid:252) tak, jak zaprezentowano na listingu 1.4. Listing 1.4. Kod HTML z wyró(cid:298)nieniem bloków funkcjonalnych !DOCTYPE HTML html head title Pierwsza strona WWW /title /head body p To jest akapit tekstowy. /p /body /html W ten sposób wyra(cid:296)nie zosta(cid:225)y wydzielone sekcje head oraz body (odsuni(cid:266)te o dwa odst(cid:266)py od lewej strony listingu), a tak(cid:298)e ich zawarto(cid:286)(cid:252), czyli znaczniki title i p (przesuni(cid:266)cie o dwa odst(cid:266)py od pocz(cid:261)tku ka(cid:298)dej sekcji, czyli o cztery odst(cid:266)py od lewej strony listingu). Takie wyró(cid:298)nienie bloków funkcjonalnych bardzo u(cid:225)atwia orientowanie si(cid:266) w struktu- rze kodu, co jest wa(cid:298)ne przy tworzeniu nawet niezbyt z(cid:225)o(cid:298)onych witryn. Oczywi(cid:286)cie nie ma to (cid:298)adnego wp(cid:225)ywu na sposób wy(cid:286)wietlania danych w przegl(cid:261)darce (o tym de- cyduj(cid:261) odpowiednie znaczniki), a oddzia(cid:225)uje wy(cid:225)(cid:261)cznie na czytelno(cid:286)(cid:252) kodu (cid:296)ród(cid:225)owego. Rzecz jasna stosowanie wci(cid:266)(cid:252) formatuj(cid:261)cych nie jest obligatoryjne i nie ma koniecz- no(cid:286)ci ich u(cid:298)ywania, jest to jednak dobry zwyczaj, który po prostu warto stosowa(cid:252). Nie ma te(cid:298) jednego ustalonego standardu formatowania, który by mówi(cid:225), gdzie i ile dok(cid:225)adnie zastosowa(cid:252) odst(cid:266)pów czy przej(cid:286)(cid:252) do nowego wiersza. Ka(cid:298)dy mo(cid:298)e tu wy- pracowa(cid:252) w(cid:225)asny, najbardziej czytelny dla siebie standard. Przy czym zawsze trzeba bra(cid:252) pod uwag(cid:266), (cid:298)e najwa(cid:298)niejszym kryterium jest czytelno(cid:286)(cid:252) kodu oraz to, (cid:298)e w przysz(cid:225)o- (cid:286)ci mo(cid:298)e on by(cid:252) analizowany i poprawiany przez innych programistów. Kup książkęPoleć książkę Lekcja 1. Pierwsze kroki 21 Polskie litery na stronie WWW Podczas tworzenia strony WWW pr(cid:266)dzej czy pó(cid:296)niej napotkamy problem prawid(cid:225)owego wy(cid:286)wietlania polskich znaków, a mówi(cid:261)c ogólniej — wszelkich znaków narodowych i niestandardowych wykraczaj(cid:261)cych poza alfabet (cid:225)aci(cid:276)ski (i standard ASCII8). Najle- piej wi(cid:266)c od razu si(cid:266) dowiedzie(cid:252), jak prawid(cid:225)owo kodowa(cid:252) witryn(cid:266), tak by ka(cid:298)dy u(cid:298)ytkownik zobaczy(cid:225) prawid(cid:225)owy zapis. Wykonajmy najpierw prosty test. W kodzie z listingu 1.2 (lub 1.4) zmie(cid:276)my tre(cid:286)(cid:252) akapitu tekstowego tak, aby zawiera(cid:225) polskie znaki. Ca(cid:225)a sekcja body mo(cid:298)e przyj(cid:261)(cid:252) posta(cid:252) widoczn(cid:261) na listingu 1.5. Listing 1.5. Tre(cid:286)(cid:252) sekcji body z akapitem zawieraj(cid:261)cym polskie znaki body p Polskie znaki to m.in.: (cid:230)(cid:232)(cid:250)(cid:273)(cid:275)ó(cid:295)(cid:318)(cid:316) /p /body T(cid:266) tre(cid:286)(cid:252) zapiszmy w standardowy sposób, za pomoc(cid:261) dost(cid:266)pnego w systemie Win- dows Notatnika, w pliku index.html i wczytajmy go do przegl(cid:261)darki. Rezultaty b(cid:266)d(cid:261) ciekawe. Przyk(cid:225)adowo jedna z wersji przegl(cid:261)darki Firefox wy(cid:286)wietli ci(cid:261)g sk(cid:225)adaj(cid:261)cy si(cid:266) zarówno z prawid(cid:225)owych polskich liter, liter nieprawid(cid:225)owych, jak i nieokre(cid:286)lonych znaków (rysunek 1.7). Rysunek 1.7. Test polskich znaków — przegl(cid:261)darka Firefox 3 Lepiej sprawdzi si(cid:266) Internet Explorer w wersji 6 oraz 8 i wy(cid:298)szych. Tu polskie litery zostan(cid:261) wy(cid:286)wietlone poprawnie (rysunek 1.8). (cid:224)atwo si(cid:266) domy(cid:286)li(cid:252), (cid:298)e jest to efekt zapisania kodu (cid:296)ród(cid:225)owego
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tworzenie stron WWW. Praktyczny kurs. Wydanie II
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


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