Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00970 013468 11050642 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, 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ą: