Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00207 007881 13585826 na godz. na dobę w sumie
Tworzenie stron WWW. Praktyczny kurs - książka
Tworzenie stron WWW. Praktyczny kurs - książka
Autor: Liczba stron: 384
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2487-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Naucz się wreszcie samodzielnie tworzyć strony internetowe!

O projektowaniu witryn internetowych napisano już tyle książek, że można by z nich stworzyć osobną bibliotekę. Rzecz jednak w tym, że większość z nich skierowana była do informatyków, a więc ludzi posługujących się specyficznym żargonem i zorientowanych w temacie. Ponadto strony powstałe kilka lat temu nie mają zbyt wiele wspólnego z tymi powstającymi dziś, a techniki ich tworzenia także są już zupełnie inne. Jeśli więc nigdy dotąd nie próbowałeś stworzyć własnej witryny albo zniechęciły Cię kiedyś związane z tym komplikacje, powinieneś czym prędzej sięgnąć po ten poradnik. Zdziwisz się, jak proste i przyjemne może być zbudowanie własnej strony WWW.

Książka 'Tworzenie stron WWW. Praktyczny kurs' przeznaczona jest dla początkujących adeptów sztuki tworzenia witryn internetowych - jedynym wymaganiem jest umiejętność w miarę sprawnego posługiwania się komputerem i pracy z dowolnym edytorem tekstu. Wszystkie potrzebne techniki czy zasady formatowania stron zostały tu opisane i zaprezentowane w praktyce. Podczas lektury oraz wykonywania ćwiczeń dowiesz się, jak opracować strukturę strony, a także wykorzystać znaczniki, listy, elementy XHTML, obrazy, odnośniki, multimedia, formularze itp., by stworzyć naprawdę interesującą, nowoczesną i funkcjonalną witrynę internetową.

Weź swoją stronę we własne ręce - nikt nie zrobi jej lepiej od Ciebie!

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

Darmowy fragment publikacji:

Tworzenie stron WWW. Praktyczny kurs Autor: Marcin Lis ISBN: 978-83-246-2487-4 Format: 158235, stron: 384 Naucz siê wreszcie samodzielnie tworzyæ strony internetowe! • Jakie techniki koniecznie trzeba poznaæ, by w³asnorêcznie projektowaæ witryny WWW? • Co zrobiæ, by wszystkie elementy strony znalaz³y siê na swoich miejscach? • Jak nadaæ stronie indywidualny charakter i opublikowaæ j¹ w sieci? O projektowaniu witryn internetowych napisano ju¿ tyle ksi¹¿ek, ¿e mo¿na by z nich stworzyæ osobn¹ bibliotekê. Rzecz jednak w tym, ¿e wiêkszoœæ z nich skierowana by³a do informatyków, a wiêc ludzi pos³uguj¹cych siê specyficznym ¿argonem i zorientowanych w temacie. Ponadto strony powsta³e kilka lat temu nie maj¹ zbyt wiele wspólnego z tymi powstaj¹cymi dziœ, a techniki ich tworzenia tak¿e s¹ ju¿ zupe³nie inne. Jeœli wiêc nigdy dot¹d nie próbowa³eœ stworzyæ w³asnej witryny albo zniechêci³y Ciê kiedyœ zwi¹zane z tym komplikacje, powinieneœ czym prêdzej siêgn¹æ po ten poradnik. Zdziwisz siê, jak proste i przyjemne mo¿e byæ zbudowanie w³asnej strony WWW. Ksi¹¿ka „Tworzenie stron WWW. Praktyczny kurs” przeznaczona jest dla pocz¹tkuj¹cych adeptów sztuki tworzenia witryn internetowych – jedynym wymaganiem jest umiejêtnoœæ w miarê sprawnego pos³ugiwania siê komputerem i pracy z dowolnym edytorem tekstu. Wszystkie potrzebne techniki czy zasady formatowania stron zosta³y tu opisane i zaprezentowane w praktyce. Podczas lektury oraz wykonywania æwiczeñ dowiesz siê, jak opracowaæ strukturê strony, a tak¿e wykorzystaæ znaczniki, listy, elementy XHTML, obrazy, odnoœniki, multimedia, formularze itp., by stworzyæ naprawdê interesuj¹c¹, nowoczesn¹ i funkcjonaln¹ witrynê internetow¹. • Podstawowa struktura strony WWW • Strona WWW w internecie • Struktura (X)HTML i podstawowe znaczniki • Listy, tabele, obrazy i odnoœniki • Kontrola nad tekstem i multimedia na stronie WWW • Formularze i formatowanie strony za pomoc¹ tabel • Style CSS • W³asnoœci czcionek i formatowanie tekstu • Marginesy, obrysy i obramowania • Wielkoœci i pozycje elementów witryny • Sposoby wyœwietlania elementów strony • Uk³ad strony generowany przez CSS WeŸ swoj¹ stronê we w³asne rêce — nikt nie zrobi jej lepiej od Ciebie! Spis treĈci Wstöp .............................................................................................. 9 O czym jest ta ksiąĪka? .................................................................................................... 9 Dla kogo jest ta ksiąĪka? .................................................................................................. 9 Co bĊdzie potrzebne? ...................................................................................................... 10 Kody Ĩródáowe i listingi ................................................................................................. 10 Rozdziaä 1. Podstawy ....................................................................................... 11 Lekcja 1. Pierwsze kroki ................................................................................................ 11 Wczytanie dokumentu do przeglądarki .................................................................... 12 HTML i XHTML ..................................................................................................... 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 Windows ................................................................................ 23 RóĪne przeglądarki ................................................................................................... 26 Lekcja 2. Strona WWW w internecie ............................................................................. 27 Adres strony WWW ................................................................................................. 27 Umieszczanie witryny w internecie .......................................................................... 28 Wáasny adres internetowy ........................................................................................ 35 Serwer WWW na domowym komputerze ................................................................ 36 Lekcja 3. Struktura (X)HTML ........................................................................................ 40 Znaczniki HTML ...................................................................................................... 40 ZagnieĪdĪanie znaczników ....................................................................................... 41 Atrybuty znaczników ............................................................................................... 44 Encje (znaki specjalne) ............................................................................................. 46 Spacja, tabulacja i znak nowego wiersza .................................................................. 51 Komentarze .............................................................................................................. 53 Struktura dokumentu raz jeszcze .............................................................................. 54 Rozdziaä 2. Elementy (X)HTML ......................................................................... 61 Lekcja 4. Podstawowe znaczniki .................................................................................... 61 Tytuáy ....................................................................................................................... 62 Akapity ..................................................................................................................... 63 Blok preformatowany ............................................................................................... 64 Blok cytatu ............................................................................................................... 65 4 Tworzenie stron WWW. Praktyczny kurs Linie ......................................................................................................................... 66 KoĔce wiersza .......................................................................................................... 68 Adresy ...................................................................................................................... 69 Rodzaje spacji .......................................................................................................... 70 Warstwy ................................................................................................................... 72 WyróĪnienie liniowe ( span ) ................................................................................. 72 Cytat liniowy ............................................................................................................ 73 ûwiczenia do samodzielnego wykonania ................................................................. 74 Lekcja 5. Listy, czyli wykazy ......................................................................................... 75 Listy w (X)HTML .................................................................................................... 75 Listy nieuporządkowane ........................................................................................... 76 Listy uporządkowane ............................................................................................... 77 Listy definicyjne ....................................................................................................... 78 ZagnieĪdĪanie list ..................................................................................................... 81 ZagnieĪdĪanie list o róĪnych typach ........................................................................ 83 ûwiczenia do samodzielnego wykonania ................................................................. 85 Lekcja 6. Tabele ............................................................................................................. 85 Ogólna budowa tabel ................................................................................................ 86 Proste tabele ............................................................................................................. 86 Obramowanie i tytuá tabeli ....................................................................................... 88 OdstĊpy w komórkach i miĊdzy komórkami ............................................................ 90 SzerokoĞü tabeli i wyrównywanie danych ................................................................ 91 Puste komórki ........................................................................................................... 96 Nagáówki wierszy oraz kolumn ................................................................................ 97 àączenie komórek .................................................................................................... 99 Tabele rozszerzone (záoĪone) ................................................................................. 102 Grupowanie kolumn ............................................................................................... 105 Sterowanie obramowaniem wewnĊtrznym i zewnĊtrznym ..................................... 110 Tabele i HTML5 ..................................................................................................... 111 ûwiczenia do samodzielnego wykonania ............................................................... 111 Lekcja 7. Obrazy .......................................................................................................... 113 Grafika na stronach WWW (standardy plików graficznych) .................................. 113 Tworzenie i konwersja grafiki ................................................................................ 114 Rozmiary grafiki i zapis progresywny .................................................................... 116 Umieszczanie grafiki na stronie (znacznik img ) ................................................ 118 Przezroczyste obrazy .............................................................................................. 121 Regulacja rozmiarów obrazu .................................................................................. 122 Obrazy i tekst ......................................................................................................... 124 Dzielenie obrazów na czĊĞci .................................................................................. 125 Przestarzaáe atrybuty znacznika img .................................................................. 127 ûwiczenia do samodzielnego wykonania ............................................................... 127 Lekcja 8. OdnoĞniki ...................................................................................................... 128 Definiowanie odnoĞników ...................................................................................... 128 Adresy wzglĊdne i bezwzglĊdne ............................................................................ 130 Kolory odnoĞników ................................................................................................ 131 Rodzaje zasobów sieciowych ................................................................................. 132 Gdzie otwieraü odnoĞniki? ..................................................................................... 135 Obrazy jako odnoĞniki ............................................................................................ 136 Mapy odnoĞników na obrazach .............................................................................. 139 Mapy odnoĞników i XHTML ................................................................................. 142 Zakotwiczenia (odnoĞniki do etykiet) .................................................................... 144 Pozostaáe atrybuty odnoĞników .............................................................................. 146 ûwiczenia do samodzielnego wykonania ............................................................... 147 Spis treĈci 5 Lekcja 9. Kontrola nad tekstem .................................................................................... 148 Formatowanie tekstu .............................................................................................. 148 Zmiana atrybutów czcionki .................................................................................... 149 Znaczniki logiczne ................................................................................................. 151 Przestarzaáa kontrola nad czcionką ......................................................................... 159 ûwiczenia do samodzielnego wykonania ............................................................... 160 Rozdziaä 3. ZäoĔone elementy witryny ............................................................. 161 Lekcja 10. Multimedia na stronie WWW ..................................................................... 161 Typy treĞci multimedialnych .................................................................................. 162 Animowane obrazy ................................................................................................ 163 Najprostsze rozwiązanie — odnoĞnik .................................................................... 164 ZagnieĪdĪanie multimediów na stronie .................................................................. 164 Parametry multimediów ......................................................................................... 169 ZagnieĪdĪanie wedáug starych metod ..................................................................... 175 Wideo z YouTube .................................................................................................. 176 Multimedia w HTML5 ........................................................................................... 177 ûwiczenia do samodzielnego wykonania ............................................................... 178 Lekcja 11. Formularze .................................................................................................. 178 Formularze na stronie WWW ................................................................................. 179 Elementy formularzy .............................................................................................. 181 Blokowanie elementów formularza ........................................................................ 193 Formularz wysyáany na e-maila ............................................................................. 195 Swobodne elementy formularza ............................................................................. 197 DostĊp do elementów za pomocą skrótów klawiaturowych ................................... 198 Etykiety elementów formularza ............................................................................. 199 Grupowanie elementów .......................................................................................... 200 ûwiczenia do samodzielnego wykonania ............................................................... 202 Lekcja 12. Formatowanie strony za pomocą tabel ........................................................ 202 Wyrównywanie formularza .................................................................................... 202 Formatowanie formularza za pomocą tabeli ........................................................... 205 Tworzenie ukáadu strony za pomocą tabeli ............................................................ 206 ZagnieĪdĪanie tabel ................................................................................................ 209 Czy warto uĪywaü tabel do formatowania? ............................................................ 212 ûwiczenia do samodzielnego wykonania ............................................................... 213 Lekcja 13. Przestarzaáe ramki ....................................................................................... 214 Co to są ramki? ....................................................................................................... 214 Struktura strony z ramkami .................................................................................... 215 Ramki a odnoĞniki .................................................................................................. 221 Ramki w ramkach ................................................................................................... 223 WewnĊtrzne zagnieĪdĪanie ramek ......................................................................... 224 ûwiczenia do samodzielnego wykonania ............................................................... 225 Rozdziaä 4. Style CSS .................................................................................... 227 Lekcja 14. Podstawy stylów ......................................................................................... 227 Czym są style CSS? ................................................................................................ 228 Doáączanie stylów do dokumentów ........................................................................ 229 Budowa stylu i rodzaje selektorów ......................................................................... 232 Dziedziczenie, kaskadowoĞü i reguáy nakáadania ................................................... 243 Jednostki miary ...................................................................................................... 246 Komentarze do stylów ............................................................................................ 247 ûwiczenia do samodzielnego wykonania ............................................................... 247 6 Tworzenie stron WWW. Praktyczny kurs Lekcja 15. WáasnoĞci czcionek ..................................................................................... 248 Atrybuty czcionek .................................................................................................. 248 Rozmiar czcionki .................................................................................................... 249 Nazwane rozmiary czcionek ................................................................................... 251 Rodziny czcionek ................................................................................................... 254 Style i warianty ...................................................................................................... 256 Waga, czyli gruboĞü czcionki ................................................................................. 258 Cecha font — wszystko razem ............................................................................... 259 ûwiczenia do samodzielnego wykonania ............................................................... 262 Lekcja 16. Formatowanie tekstu ................................................................................... 263 Kontrola nad tekstem ............................................................................................. 263 Wyrównywanie tekstu w poziomie ........................................................................ 263 Wyrównywanie tekstu w pionie ............................................................................. 264 Wyrównywanie a inne elementy witryny ............................................................... 267 Kontrolowanie odstĊpów ........................................................................................ 269 WciĊcia ................................................................................................................... 271 Dekoracje, czyli wyróĪnienia ................................................................................. 272 Kontrola wielkoĞci liter (transformacje) ................................................................. 273 Obsáuga biaáych znaków ........................................................................................ 274 Kierunek tekstu ...................................................................................................... 276 ûwiczenia do samodzielnego wykonania ............................................................... 276 Lekcja 17. Style list ...................................................................................................... 277 WyróĪniki listy nienumerowanej ............................................................................ 277 Typowe wyróĪniki listy numerowanej ................................................................... 279 Inne wyróĪniki ....................................................................................................... 281 Obrazy jako wyróĪniki ........................................................................................... 282 Pozycja wyróĪnika ................................................................................................. 285 Wszystko razem, czyli wáaĞciwoĞü list-style .......................................................... 286 ûwiczenia do samodzielnego wykonania ............................................................... 286 Lekcja 18. Kolory i podkáady ....................................................................................... 287 Definiowanie kolorów ............................................................................................ 287 Kolor tekstu i podkáadu .......................................................................................... 291 Kolory okreĞlone przez system operacyjny ............................................................ 292 Obrazy jako táo ....................................................................................................... 293 Powtarzanie obrazu táa ........................................................................................... 295 Zakotwiczanie obrazów táa ..................................................................................... 296 Pozycja obrazu táa .................................................................................................. 296 Wszystko razem, czyli wáaĞciwoĞü background ..................................................... 299 ûwiczenia do samodzielnego wykonania ............................................................... 299 Lekcja 19. Marginesy, obrysy i obramowania .............................................................. 300 Model pudeákowy — zaleĪnoĞci miĊdzy marginesami .......................................... 300 Definiowanie marginesów ...................................................................................... 301 Marginesy wewnĊtrzne, czyli wypeánienia ............................................................. 303 Dodawanie peánych obramowaĔ (ramek) ............................................................... 305 Skrótowa definicja obramowania ........................................................................... 308 Obramowania cząstkowe ........................................................................................ 308 Obrysy .................................................................................................................... 310 ûwiczenia do samodzielnego wykonania ............................................................... 311 Lekcja 20. Style dotyczące tabel ................................................................................... 312 CSS i standardowe obramowanie tabeli ................................................................. 312 OdstĊpy wewnątrz tabeli ........................................................................................ 314 Táa i wypeánienia .................................................................................................... 315 àączenie obramowaĔ .............................................................................................. 319 Obsáuga pustych komórek ...................................................................................... 320 Spis treĈci 7 Pozycje tytuáów ...................................................................................................... 321 Ustalanie sposobu generowania tabeli .................................................................... 322 ûwiczenia do samodzielnego wykonania ............................................................... 322 Rozdziaä 5. Dalsze boje CSS ........................................................................... 325 Lekcja 21. WielkoĞci i pozycje elementów witryny ..................................................... 325 Rozmiary elementów strony ................................................................................... 326 ZawartoĞü poza elementem .................................................................................... 328 Rozmiary maksymalne i minimalne ....................................................................... 329 PoáoĪenie elementu na witrynie .............................................................................. 332 Elementy o staáej pozycji ....................................................................................... 337 ûwiczenia do samodzielnego wykonania ............................................................... 339 Lekcja 22. Sposoby wyĞwietlania elementów strony ................................................... 340 KolejnoĞü wyĞwietlania .......................................................................................... 340 Kadrowanie elementów .......................................................................................... 343 Ukrywanie elementów ............................................................................................ 346 Sposoby wyĞwietlania ............................................................................................ 346 Ksztaáty kursora ..................................................................................................... 349 ûwiczenia do samodzielnego wykonania ............................................................... 351 Lekcja 23. Ukáad strony generowany przez CSS .......................................................... 351 Przepáywy elementów ............................................................................................ 352 Selektywne wyáączanie przepáywów ...................................................................... 355 Oblewanie tekstem, czyli przepáywy w praktyce ................................................... 356 Formularz pozycjonowany za pomocą CSS ........................................................... 358 Ukáad witryny generowany dziĊki CSS .................................................................. 360 ûwiczenia do samodzielnego wykonania ............................................................... 362 Skorowidz .................................................................................... 365 Rozdziaä 1. Podstawy Rozdziaá pierwszy rozpoczyna naszą przygodĊ z tworzeniem stron WWW. Skáada siĊ z trzech lekcji, w których omówione zostaáy podstawy niezbĊdne do dalszej nauki. Zobaczymy, jak wygląda struktura strony WWW, z czego ona siĊ skáada i jak w naj- prostszy sposób wyĞwietliü zwykáy napis. Omówione zostaną równieĪ narzĊdzia po- mocne przy tworzeniu witryny i przydatne edytory, dziĊki którym ominą nas m.in. problemy z wyĞwietlaniem polskich znaków. W lekcji 2. zostaną przedstawione spo- soby umieszczania strony WWW w internecie, tak by byáa dostĊpna dla wszystkich zainteresowanych. Temat ten moĪe byü jednak przez początkujących pominiĊty, gdyĪ testowanie tworzonych witryn moĪna bez problemów przeprowadzaü na domowym komputerze przy uĪyciu wyáącznie przeglądarki WWW. Lekcja 1. Pierwsze kroki  Z czego skáada siĊ strona WWW?  Jak otworzyü plik w przeglądarce?  Co to jest HTML i XHTML?  Jakiego jĊzyka opisu strony uĪywaü?  Jaka wygląda struktura strony napisanej w HTML-u?  Co to jest kod Ĩródáowy?  W jaki sposób uniknąü problemów z polskimi literami?  Czym jest prolog dokumentu HTML?  Jakie edytory tekstowe wspomagają tworzenie witryn?  Czemu warto testowaü witryny w róĪnych przeglądarkach? 12 Rozdziaä 1. i Podstawy Wczytanie dokumentu do przeglñdarki Gdy przeglądamy strony WWW, widzimy na nich wiele rozmaitych danych: tekst, grafiki, zdjĊcia, animacje, dynamiczne menu itp. Tworzy to wraĪenie duĪej záoĪonoĞci. Jednak podstawowa strona WWW to zwyczajny dokument tekstowy. Wszystko inne to tylko dodatki umieszczone w osobnych plikach. OczywiĞcie nie jest to taki dokument, jaki piszemy np. w Wordzie. Ma on swoją strukturĊ i specjalne znaczniki, dziĊki którym przeglądarka wie, jak ma wyĞwietliü zawartą w nim treĞü. TĊ strukturĊ i te znaczniki musimy utworzyü sami. To wáaĞnie zadanie kaĪdego twórcy stron WWW. Jak w najprostszy sposób wyĞwietliü coĞ w przeglądarce? To proste. Wystarczy utworzyü zwyczajny dokument tekstowy, wpisaü w nim dowolną treĞü i otworzyü go w Firefoksie, Internet Explorerze bądĨ innym programie tego typu. Co rozumiemy przez „dokument tekstowy”? To plik zawierający tylko tekst. MoĪna go utworzyü za pomocą dowolnego edytora tekstowego. W systemie Windows najlepiej uĪyü dostĊpnego standardowo Notat- nika (z menu Start wybierz Programy [bądĨ Wszystkie programy], Akcesoria i Notatnik). W edytorze naleĪy wpisaü dowolną treĞü (rysunek 1.1), a nastĊpnie zapisaü plik, wybie- rając z menu Plik pozycjĊ Zapisz. Rysunek 1.1. Testowy wpis w edytorze tekstowym W oknie wyboru nazwy pliku wpisujemy index.html lub dowolną inną nazwĊ (rysu- nek 1.2). WaĪne, aby rozszerzenie nazwy pliku miaáo postaü html (lub htm, jednak html jest lepszym rozwiązaniem1). Z listy Zapisz jako typ naleĪy wybraü pozycjĊ Wszystkie pliki2, a pole wyboru Kodowanie pozostawiü bez zmian. Po klikniĊciu przycisku Za- pisz dokument zostanie zapisany i zostanie mu nadane rozszerzenie html. Rysunek 1.2. Parametry zapisywanego pliku 1 Prawidáowym rozszerzeniem plików zawierających dokumenty typu HTML (czyli treĞü stron WWW) pierwotnie byáo .html. Problem powstaá, gdy takie pliki trzeba byáo zapisaü w systemach DOS i opartych na nich wczesnych wersjach Windowsa, które dopuszczaáy maksymalnie trzyliterowe rozszerzenia. Dlatego teĪ oprócz html zaczĊáo funkcjonowaü równieĪ rozszerzenie htm. W dzisiejszych jednak czasach kaĪdy popularny system operacyjny oferuje rozszerzenia plików o dáugoĞci wiĊkszej niĪ 3 znaki, dlatego naleĪy stosowaü rozszerzenie html. 2 JeĞli w polu Zapisz typ jako pozostanie domyĞlna opcja Dokument tekstowy, do wprowadzonej nazwy pliku edytor doda rozszerzenie txt. Wtedy, jeĞli np. wprowadzoną nazwą byáo index.html, na dysku zostanie zapisany plik o nazwie index.html.txt. Dlatego teĪ istnieje koniecznoĞü zmiany tej opcji na wskazaną w tekĞcie. Lekcja 1. Pierwsze kroki 13 Miejsce zapisania pliku jest dowolne. MoĪna go umieĞciü nawet na pulpicie. Lepiej jednak przygotowaü specjalny katalog, w którym bĊdą umieszczane wszystkie pliki testowe i który pozwoli na swobodne testowanie prezentowanych przykáadów. Ten katalog moĪna nazwaü np. www. Taki teĪ katalog bĊdzie siĊ pojawiaá w dalszych przykáadach. Po zapisaniu pliku trzeba go wczytaü do przeglądarki. NajproĞciej moĪna to zrobiü, klika- jąc dwukrotnie plik w Eksploratorze Windows. Wtedy zostanie uruchomiona domyĞlna przeglądarka3, a plik zostanie do niej wczytany. MoĪna teĪ najpierw uruchomiü przeglą- darkĊ (dowolną), a nastĊpnie wczytaü do niej plik. Wtedy:  W Firefoksie z menu Plik wybieramy Otwórz plik i wskazujemy plik index.html.  W Internet Explorerze z menu Plik wybieramy Otwórz, a nastĊpnie przeglądaj, i wskazujemy plik index.html.  W Operze z menu Plik wybieramy Otwórz i wskazujemy plik index.html. NiezaleĪnie od tego, jakiej aplikacji uĪyliĞmy, na ekranie pojawi siĊ, wprowadzona wczeĞniej w edytorze, treĞü pliku tekstowego (rysunek 1.3). Rysunek 1.3. Plik tekstowy wczytany do przeglądarki Jak widaü, najprostsza strona WWW wcale nie musi siĊ skáadaü ze skomplikowanych i maáo zrozumiaáych dla laika poleceĔ. Wystarczy napisaü trochĊ tekstu. Niestety ta- kie postĊpowanie wystarczy jedynie do zaprezentowania prostej treĞci. JuĪ przy kilku zdaniach natrafimy na prozaiczne problemy, choüby takie jak brak moĪliwoĞci zasto- sowania akapitów, zmiany czcionki, nie mówiąc juĪ o budowaniu ukáadu strony. Warto zrobiü prosty test. Zmodyfikujmy treĞü pliku index.html (np. otwierając go po- nownie w Notatniku) lub utwórzmy nowy, tak by zawieraá treĞü w kilku wierszach (rysunek 1.4). Rysunek 1.4. Edytor z kilkoma wierszami tekstu 3 Przeglądarka domyĞlna to ta, która zostaáa zarejestrowana w systemie jako produkt mający byü uĪywany domyĞlnie przy wszelkich czynnoĞciach związanych z WWW, np. do otwierania plików z rozszerzeniem .html. W systemie Windows standardowo domyĞlną przeglądarką jest Internet Explorer, jednak podczas instalacji innych produktów (Firefox, Opera) kaĪdy z nich oferuje moĪliwoĞü zmiany tego ustawienia. Tak wiĊc domyĞlną przeglądarką moĪe byü praktycznie dowolny produkt tego typu. 14 Rozdziaä 1. i Podstawy JeĪeli po zapisaniu danych ponownie wczytamy plik index.html do przeglądarki, spotka nas niespodzianka. Caáy tekst bĊdzie prezentowany tylko w jednym wierszu (rysu- nek 1.5). Widaü wiĊc wyraĨnie, Īe do prawidáowego formatowania strony WWW po- trzebne są dodatkowe elementy. SáuĪy do tego jĊzyk HTML lub XHTML. Dopiero jego zastosowanie pozwala tworzyü poprawne witryny. Rysunek 1.5. W przeglądarce tekst prezentowany jest jednym ciągiem HTML i XHTML JĊzykiem sáuĪącym do tworzenia stron WWW jest HTML, czyli Hypertext Markup Language. Nazywamy go równieĪ jĊzykiem opisu strony. Skáada siĊ on ze znaczników, które nadają znaczenie róĪnym elementom tekstowym. Pozwalają np. sformatowaü akapit czy teĪ dodaü do dokumentu odnoĞnik (link, hiperáącze) prowadzący do innej witryny bądĨ zasobów sieci. Początki HTML siĊgają wczesnych lat 90. XX wieku. Pierwszy dokument dokonujący standaryzacji tego jĊzyka pojawiá siĊ w 1995 roku i dotyczyá standardu HTML 2.0. Obec- nie4 najnowszą oficjalną wersją standardu jest HTML 4.01, który pochodzi z 1999 ro- ku 5. Nie da siĊ wiĊc ukryü, Īe ma on juĪ swoje lata, a rozwój zostaá na dáugi czas za- trzymany. Dopiero w styczniu 2008 roku zostaá opublikowany roboczy szkic wersji 5.0, która wciąĪ jest w fazie uzgodnieĔ organizacji standaryzacyjnych. Jedną z przyczyn zatrzymania rozwoju HTML byáo dosyü powszechne pod koniec lat 90. ubiegáego wieku przekonanie, Īe kolejne wersje jĊzyka opisu strony powinny byü oparte na zdobywającym wtedy coraz wiĊkszą popularnoĞü jĊzyku XML. Dlatego teĪ powstaá jĊzyk XHTML (Extensible Hypertext Markup Language), który w swej pier- wotnej wersji 1.0 (styczeĔ 2000 r.) byá stosunkowo prostą adaptacją HTML 4.01 do standardu XML. Powstaáa równieĪ wersja 1.1, która jednak aĪ do początku 2009 roku nie powinna byü formalnie stosowana do zapisu danych typu HTML6. Aby jednak nie wnikaü w dalsze teoretyczne rozwaĪania na temat jĊzyków HTML i XHTML, czas odpowiedzieü na pytanie nurtujące zapewne kaĪdego początkującego twórcĊ stron WWW — który z tych jĊzyków wybraü? OdpowiedĨ bĊdzie przewrotna. Nie ma formalnej potrzeby dokonywania wyboru — przynajmniej na początku nauki. 4 Sáowa te zostaáy napisane w drugiej poáowie 2009 roku. 5 Oficjalne zatwierdzenie standardu miaáo miejsce w maju 2000 r. (standard ISO/IEC 15445:2000). 6 Wynika to z rekomendacji organizacji standaryzacyjnej W3C. OtóĪ typem danych dla dokumentów HTML i XHTML1.0 moĪe byü standardowo rozpoznawany przez wszystkie serwery i przeglądarki (a takĪe inne aplikacje) text/html, gdy tymczasem typem danych dla XHTML 1.1 powinno byü application/xhtml+xml. To ograniczenie zostaáo zniesione w styczniu 2009 roku. Lekcja 1. Pierwsze kroki 15 Wszystkie podstawowe struktury witryny moĪna zapisaü tak, aby byáy zgodne i z HTML, i z XHTML. Co wiĊcej, zwolenników i przeciwników obu jĊzyków pogodzi zapewne HTML5 (zgodny z XHTML5)7. Wszystkie przykáady prezentowane w ksiąĪce (chyba Īe zaznaczono inaczej) bĊdą zgodne zarówno z HTML 4.01, jak i z XHTML 1.0 i 1.1, a w wiĊkszoĞci przypadków takĪe z nadchodzącą najnowszą wersją HTML5 (róĪnice miĊdzy HTML 4.01 i HTML5 bĊdą zaznaczane w opisach). Podstawowa struktura strony WWW Struktura strony WWW budowana jest z tzw. znaczników. MoĪna je traktowaü jak polecenia formatujące. WiĊcej informacji o znacznikach zostanie przedstawionych w lekcji 3., juĪ teraz jednak powinniĞmy zapoznaü siĊ z ogólną budową strony. Zostaáa ona przedstawiona na listingu 1.1. Listing 1.1. Ogólna struktura strony WWW html head Tutaj naleĪy umieĞciü treĞü nagáówka dokumentu /head body Tutaj naleĪy umieĞciü wáaĞciwą treĞü dokumentu HTML /body /html Dokument rozpoczynamy od znacznika html , a koĔczymy znacznikiem /html . Wewnątrz moĪna wyróĪniü dwie sekcje. Pierwsza z nich to tak zwany nagáówek, któ- ry znajduje siĊ miĊdzy znacznikami head i /head . Umieszczane są w nim róĪne informacje o dokumencie, takie jak np. sposób kodowania znaków, tytuá, dane o autorze itp. Te informacje nie są wyĞwietlane. WáaĞciwa teĞü dokumentu, czyli to co zobaczy uĪytkownik odwiedzający witrynĊ, znajduje siĊ w sekcji wyróĪnionej za pomocą znaczników body i /body . Tam moĪna umieĞciü np. akapity tekstowe. TreĈè zaprezentowanñ na listingu, a skäadajñcñ siö ze znaczników HTML (XHTML), nazywamy kodem Ēródäowym strony WWW. UĔywajñc skrótu, bödziemy mówili po pro- stu o kodzie strony. Taka struktura bĊdzie wspólna zarówno dla kodu HTML, jak i XHTML8. Aby wiĊc moĪna byáo rozróĪniü oba typy, a takĪe okreĞliü konkretną wersjĊ wybranego jĊzyka, niezbĊdne jest zastosowanie tzw. prologu. Prolog jest elementem niezbĊdnym dla kaĪdej poprawnej, zgodnej ze standardami strony WWW. Rodzaje prologów zostaáy opisane w czĊĞci lekcji zatytuáowanej „Prolog dokumentu HTML i XHTML”. 7 Prace nad XHTML 1.2 i 2.0 są obecnie wstrzymywane, a tzw. XHTML5 jest czĊĞcią standardu HTML5. 8 Jest to równieĪ struktura dla dokumentów HTML w wersjach poniĪej 4, w których nie stosowano elementów prologu. 16 Rozdziaä 1. i Podstawy Pierwsza strona WWW Czas napisaü naszą pierwszą stronĊ WWW, czyli wypeániü zaprezentowaną wczeĞniej strukturĊ prawidáową treĞcią. Zadaniem tej strony bĊdzie jedynie wyĞwietlenie jednego akapitu tekstowego skáadającego siĊ z kilku sáów. Kod takiej strony, zgodny ze stan- dardem HTML 4.01, zostaá przedstawiony na listingu 1.2. Wygląda on dosyü skom- plikowanie, nie naleĪy siĊ tym jednak przejmowaü. Wszystkie elementy zostaną wy- jaĞnione krok po kroku. Listing 1.2. Najprostsza strona WWW !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd html head title Pierwsza strona WWW /title /head body p To jest akapit tekstowy. /p /body /html Zanim jednak zajmiemy siĊ poszczególnymi elementami kodu, zapiszmy go w pliku index.html i wczytajmy do przeglądarki, tak jak zostaáo to opisane w podrozdziale „Wczytanie dokumentu do przeglądarki”. Zobaczymy wtedy widok przedstawiony na rysunku 1.6. Rysunek 1.6. Kod z listingu 1.2 wczytany do przeglądarki Jak widaü, na ekranie pojawiá siĊ jedynie tytuá strony, widoczny zarówno na pasku tytuáu okna przeglądarki, jak i w nagáówku karty (o ile uĪyta przeglądarka korzysta z kart), oraz treĞü akapitu tekstowego. ĩadna inna treĞü, a w szczególnoĞci znaczniki HTML, nie zostaáa wyĞwietlona. Przeanalizujmy teraz kod z listingu 1.2, który wygenerowaá widoczną na rysunku wi- trynĊ. Zaczyna siĊ on od tak zwanego prologu (deklaracji typu dokumentu): !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd Jest to po prostu okreĞlenie standardu HTML, w którym zostaáa utworzona strona. WiĊcej informacji o prologach znajduje siĊ w czĊĞci lekcji zatytuáowanej „Prolog do- kumentu HTML i XHTML”. Na razie przyjmijmy po prostu, Īe w przypadku standardu HTML 4.01 na początku kodu naleĪy umieĞciü taki, trzeba przyznaü, dosyü dziwnie wyglądający, ciąg znaków. Lekcja 1. Pierwsze kroki 17 W sekcji head zostaá umieszczony znacznik title , który pozwala zdefiniowaü tytuá strony: title Pierwsza strona WWW /title Tytuáem jest caáa treĞü znajdująca siĊ pomiĊdzy title i /title . W prezentowa- nym przypadku jest to ciąg Pierwsza strona WWW. Utworzenie tytuáu strony jest obli- gatoryjne. Zawsze naleĪy wiĊc uĪyü znacznika title i musi on byü umieszczony w sekcji head . W sekcji body , zawierającej wáaĞciwą treĞü witryny, zostaá umieszczony znacznik p : p To jest akapit tekstowy. /p Definiuje on jeden akapit tekstowy. TreĞcią akapitu są wszystkie znaki umieszczone miĊdzy p a /p . W tym przypadku jest to zatem ciąg To jest akapit tekstowy. Ten ciąg jest wyĞwietlany w przeglądarce po wczytaniu witryny. Pierwsza strona w XHTML JeĪeli zamiast HTML chcemy uĪyü XHTML, wcale nie musimy wprowadzaü znaczą- cych modyfikacji kodu strony. W przypadku prostych witryn zmiany bĊdą dotyczyáy tylko samego początku dokumentu, który bĊdzie musiaá zawieraü inny prolog, a takĪe bardziej rozbudowany wstĊp. Najlepiej widaü 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 jeszcze przed deklaracją typu dokumentu znajduje siĊ wiersz: ?xml version= 1.1 encoding= utf-8 ? OkreĞla on wersjĊ dokumentu XML (parametr version), w tym przypadku 1.1, a takĪe sposób kodowania znaków (parametr encoding). WiĊcej informacji o kodowaniu znaków znajduje siĊ w czĊĞci zatytuáowanej „Polskie litery na stronie WWW”. PoniĪej znajduje siĊ wáaĞciwa deklaracja typu dokumentu: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/tr/xhtml11/Dtd/xhtml11.dtd wáaĞciwa dla standardu XHTML 1.1 (deklaracje wáaĞciwe dla innych wersji XHTML zostaáy opisane w kolejnej czĊĞci lekcji). 18 Rozdziaä 1. i Podstawy Znacznik html rozpoczynający wáaĞciwy dokument HTML zostaá tu uzupeániony o parametr okreĞlający definicjĊ tzw. przestrzeni nazw XHTML (xmlns), a takĪe uĪyty jĊzyk (pl): html xmlns= http://www.w3.org/1999/xhtml xml:lang= pl Te parametry nie są jednak obligatoryjne i znacznik ten mógáby mieü równieĪ prostą postaü, czyli html . Dalsza czĊĞü kodu jest taka sama jak w przypadku przykáadu z listingu 1.2. Tak samo bĊdzie teĪ w wiĊkszoĞci przykáadów prezentowanych w ksiąĪce. WáaĞciwa treĞü kodu strony bĊdzie zgodna zarówno z HTML, jak i XHTML, a wiĊc uzyskanie odpowied- niego typu dokumentu bĊdzie moĪna uzyskaü, wymieniając jedynie opisane frag- menty prologów. Na listingach bĊdzie natomiast prezentowany wyáącznie prolog dla HTML 4.01. Prolog dokumentu HTML i XHTML Prolog dokumentu to informacja o standardzie, w jakim ten dokument zostaá wykonany. Innymi sáowy okreĞla on typ dokumentu, jest to deklaracja typu dokumentu — DTD (z ang. document type declaration). DziĊki tej deklaracji przeglądarka (lub inny pro- gram) bĊdzie wiedziaáa, jak odczytywaü dokument i czego (jakich struktur) moĪe siĊ w nim spodziewaü. Dla jĊzyka HTML w wersji 4 (4.01) stosuje siĊ 3 rodzaje prologu. Pierwszy ma postaü: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN i okreĞla Ğcisáą wersjĊ standardu 4.01. To oznacza, Īe na stronie nie mogą byü umiesz- czone Īadne elementy uznane za przestarzaáe (z ang. deprecated, stosowane jest teĪ okreĞlanie elementy schyákowe), a dokument musi dokáadnie speániaü wszelkie wy- mogi standardu. Drugi typ to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN Jest to „przejĞciowa” (z ang. transitional) wersja standardu 4.01, czasami okreĞlana jako luĨna, ze wzglĊdu na swobodniejsze, mniej restrykcyjne podejĞcie do respekto- wania standardu. MoĪna w niej uĪywaü znaczników uznanych za przestarzaáe. Trzeci typ to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN Ta wersja oznacza stronĊ z ramkami (temat ramek zostanie przedstawiony w lekcji 13.). Dokáadniej rzecz ujmując, taki dokument jest traktowany jak wersja Transitional uzu- peániona o moĪliwoĞü stosowania ramek. KaĪdy z wymienionych prologów moĪe byü uzupeániony o odnoĞnik do dokumentu zawierającego formalny opis skáadni dla danego standardu. Nie jest to obligatoryjne, ale jest wskazówką dla narzĊdzi dokonujących walidacji (sprawdzenia poprawnoĞci) do- kumentów. NajczĊĞciej prolog jest wiĊc o taki odnoĞnik uzupeániany, mimo Īe prze- glądarki z reguáy z tej informacji nie korzystają. Lekcja 1. Pierwsze kroki 19 Alternatywne wersje prologów bĊdą zatem miaáy przedstawione poniĪej postaci. 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Ī mają swoje prologi. Dla standardu XHTML 1.0 bĊdą one nastĊpujące: Dla Ğcisáej (strict) wersji standardu: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN Dla przejĞ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Ğlenia „Ğcisáa”, „przejĞciowa” i „z ramkami” mają tu takie samo znaczenie jak w przypadku standardu HTML 4.01. JeĞli deklaracja DTD ma równieĪ zawieraü odnoĞnik do dokumentu z opisem skáadni, stosuje siĊ nastĊpujące prologi: Dla Ğcisá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Ğ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 Dla XHTML w wersji 1.1 stosuje siĊ prolog o postaci: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd 20 Rozdziaä 1. i Podstawy Wszystkie prezentowane w ksiąĪce przykáady (chyba Īe zaznaczono inaczej) bĊdą zgodne ze Ğcisáą wersją standardu HTML 4.01 (a takĪe XHTML 1.1) i bĊdzie w nich stosowany prolog o postaci: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd JeĞli natomiast dana strona ma byü zapisana jako XHTML, powinien byü uĪywany prolog: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd Sposób umieszczenia prologu w dokumencie HTML i XHTML zostaá zaprezentowany w poprzednich dwóch czĊĞciach lekcji. Formatowanie kodu HTML WaĪną sprawą, na którą osoby początkujące z reguáy nie zwracają uwagi, jest sposób formatowania kodu Ĩródáowego strony. Nie ma to wiĊkszego znaczenia przy niewiel- kich witrynach, na których znajduje siĊ jedynie kilka akapitów tekstowych, jednak przy bardziej rozbudowanych stronach wáaĞciwy zapis bardzo uáatwi póĨniejszą edycjĊ i poprawki. Chodzi o to, aby tak zapisaü kod Ĩródáowy, Īeby byá jak najbardziej dla nas czytelny. Dlatego teĪ najczĊĞciej wydziela siĊ poszczególne bloki, stosując wciĊ- cia od lewej strony. Kod z listingu 1.2 moĪna by przedstawiü tak, jak zaprezentowano to na listingu 1.4. Listing 1.4. Kod HTML z wyróĪnieniem bloków funkcjonalnych !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd html head title Pierwsza strona WWW /title /head body p To jest akapit tekstowy. /p /body /html W ten sposób wyraĨnie zostaáy wydzielone sekcje head oraz body (odsuniĊte o dwa odstĊpy od lewej strony listingu), a takĪe ich zawartoĞü, czyli znaczniki title i p (przesuniĊcie o dwa odstĊpy od początku kaĪdej sekcji, czyli o 4 odstĊpy od lewej strony listingu). Takie wyróĪnienie bloków funkcjonalnych bardzo uáatwia orientowanie siĊ w struktu- rze kodu, co jest waĪne przy tworzeniu nawet niezbyt záoĪonych witryn. OczywiĞcie nie ma to Īadnego wpáywu na sposób wyĞwietlania danych w przeglądarce (o tym de- cydują odpowiednie znaczniki), a wpáywa wyáącznie na czytelnoĞü kodu Ĩródáowego. Rzecz jasna stosowanie wciĊü formatujących nie jest obligatoryjne i nie ma koniecz- noĞci ich uĪywania, jest to jednak dobry zwyczaj, który po prostu warto stosowaü. Nie ma teĪ jednego ustalonego standardu formatowania, który by mówiá, gdzie i ile Lekcja 1. Pierwsze kroki 21 dokáadnie zastosowaü odstĊpów, czy przejĞü do nowego wiersza. KaĪdy moĪe tu wy- pracowaü swój wáasny, najbardziej czytelny dla siebie, standard. Zawsze trzeba jednak wziąü pod uwagĊ, Īe najwaĪniejszym kryterium jest czytelnoĞü kodu oraz to, Īe w przy- száoĞci moĪe on byü analizowany i poprawiany przez innych programistów. Polskie litery na stronie WWW Podczas tworzenia strony WWW prĊdzej czy póĨniej napotkamy problem prawidáo- wego wyĞwietlania polskich znaków, a mówiąc ogólniej — wszelkich znaków naro- dowych i niestandardowych wykraczających poza alfabet áaciĔski (i standard ASCII9). Najlepiej wiĊc od razu dowiedzieü siĊ, jak prawidáowo kodowaü witrynĊ, tak by kaĪdy uĪytkownik zobaczyá prawidáowy zapis. Wykonajmy jednak najpierw prosty test. W ko- dzie z listingu 1.2 (lub 1.4) zmieĔmy treĞü akapitu tekstowego, tak aby zawieraá pol- skie znaki. Caáa sekcja body moĪe przyjąü postaü widoczną na listingu 1.5. Listing 1.5. TreĞü sekcji body z akapitem zawierającym polskie znaki body p Polskie znaki to m.in.: æèúđēóħľļ /p /body TĊ treĞü zapiszmy w standardowy sposób za pomocą dostĊpnego w Windows Notatnika w pliku index.html i wczytajmy go do przeglądarki. Rezultaty bĊdą ciekawe. Przykáadowo przeglądarka Firefox wyĞwietli ciąg skáadający siĊ zarówno z prawidáowych polskich liter, liter nieprawidáowych, jak i nieokreĞlonych znaków (rysunek 1.7). Rysunek 1.7. Test polskich znaków — przeglądarka Firefox 3 Lepiej sprawdzi siĊ Internet Explorer w wersji 6. Tu polskie litery zostaną wyĞwietlone poprawnie (rysunek 1.8). àatwo siĊ domyĞliü, Īe jest to efekt zapisania kodu Ĩródáowego w windowsowym Notatniku — dziĊki temu edytor tekstu i przeglądarka pracują w tym samym (ale niestety nieprawidáowym, o czym niĪej) standardzie kodowania znaków. Myliáby siĊ jednak ktoĞ, kto na tej podstawie zaáoĪyáby, Īe Internet Explorer zawsze poprawnie wyĞwietli taką stronĊ. OtóĪ juĪ w wersji 7 tej przeglądarki efekt bĊdzie zgoáa odmienny. Nie zobaczymy Īadnej polskiej litery, a zamiast nich pojawią siĊ znaki za- stĊpcze (rysunek 1.9). 9 Skrót ASCII pochodzi on angielskiej nazwy American Standard Code for Information Interchange i okreĞla jeden z pierwotnych sposobów zapisu znaków dla komputerów osobistych. Niestety uwzglĊdnia jedynie litery i znaki specjalne charakterystyczne dla krajów anglosaskich. Rozdziaä 1. i Podstawy 22 Rysunek 1.8. Test polskich znaków — przeglądarka Internet Explorer 6 Rysunek 1.9. Test polskich znaków — przeglądarka Internet Explorer 7 Nie powinniĞmy jednak winiü za ten stan rzeczy przeglądarek. RóĪne zaszáoĞci histo- ryczne spowodowaáy bowiem, Īe polskie litery (a ogólniej — wszelkie znaki narodo- we i niestandardowe) mogą byü zapisywane w róĪnych formatach (róĪnych standar- dach kodowania10). Skoro tak, to naszym zadaniem jest poinformowanie przeglądarki, jakiego standardu kodowania uĪyliĞmy na naszej stronie WWW. Nie jest jej zadaniem „zgadywanie” tej informacji. To oznacza, Īe w kodzie strony zawsze musimy umie- Ğciü znacznik okreĞlający sposób kodowania. Ma on nastĊpującą postaü: meta http-equiv= Content-Type content= text/html; charset=kodowanie i naleĪy go umieĞciü w sekcji head . Ten znacznik mówi przeglądarce, Īe ma do czynie- nia z tekstowym dokumentem HTML, w którym znaki zostaáy zakodowane w stan- dardzie okreĞlonym przez wartoĞü parametru charset. W miejsce ciągu kodowanie na- leĪy zatem wstawiü okreĞlenie standardu kodowania znaków. W sieci spotkamy strony stosujące nastĊpujące kodowania:  Windows-1250 — kodowanie znaków charakterystyczne dla systemu Windows. Nie stanowi normy miĊdzynarodowej. NaleĪy unikaü stosowania tego zapisu.  ISO-8859-2 — popularny w latach 90. XX w. sposób zapisu stanowiący normĊ miĊdzynarodową11. MoĪna go uĪywaü, jednak w obecnych czasach lepiej stosowaü kodowanie UTF-8.  UTF-8 — najnowszy z prezentowanych sposób zapisu, wedáug miĊdzynarodowych standardów Unicode i UCS12. Unicode pozwala na zapis znaków wystĊpujących w wiĊkszoĞci jĊzyków Ğwiata. O ile to moĪliwe, naleĪy korzystaü z tego standardu zapisu. 10Znaki, które wprowadzamy z klawiatury, są w komputerze zapisywane za pomocą wartoĞci liczbowych. KaĪdy znak ma przypisany swój kod, np. maáa litera a ma kod 97 (w standardzie ASCII i pochodnych). Sposób przypisania wartoĞci liczbowych (kodów) do liter nazywamy wáaĞnie standardem kodowania znaków. 11Odpowiada to polskiej normie PN-93/T-42118. 12Standardy UCS (standard ISO) i Unicode są w wiĊkszoĞci ze sobą zgodne w zasadzie we wszystkich wersjach, i w praktyce nie rozróĪnia siĊ ich, mówiąc po prostu o zapisie Unicode. UTF-8 to po prostu nazwa jednego ze sposobów zapisu znaków wedáug normy Unicode. Lekcja 1. Pierwsze kroki 23 Znacznik meta bĊdzie wiĊc przyjmowaá nastĊpujące postaci: Dla Windows-1250: meta http-equiv= Content-Type content= text/html; charset=windows-1250 Dla ISO-8859-2: meta http-equiv= Content-Type content= text/html; charset=iso-8859-2 Dla UTF-8: meta http-equiv= Content-Type content= text/html; charset=utf-8 Jak zatem spowodowaü, aby strona z listingu 1.5 byáa poprawnie wyĞwietlana we wszystkich wspóáczesnych przeglądarkach? Skoro zapisaliĞmy ją w Notatniku w stan- dardowy sposób, to sposobem kodowania jest Windows-1250. Takie teĪ kodowania naleĪy uwzglĊdniü w znaczniku meta umieszczonym w sekcji head . Kod przyjąáby wtedy postaü widoczną na listingu 1.6. Listing 1.6. Strona zawierająca okreĞlenie standardu kodowania znaków !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd html head meta http-equiv= Content-Type content= text/html; charset=windows-1250 title Pierwsza strona WWW /title /head body p Polskie znaki to m.in.: æèúđēóħľļ /p /body /html Po takim uzupeánieniu kodu polskie znaki pojawią siĊ we wáaĞciwej postaci i w Firefok- sie, i w Internet Explorerze (a takĪe w innych przeglądarkach jak Opera czy Konqueror). Jak zostaáo to jednak wspomniane wyĪej, kodowanie typu Windows-1250 jest zdecy- dowanie niezalecane. Zamiast niego powinniĞmy stosowaü UTF-8. Jak to zrobiü? Trzeba skorzystaü z odpowiedniego edytora tekstowego. To zagadnienie zostaáo opisane w kolej- nej czĊĞci lekcji. Edytory tekstowe dla Windows Do tworzenia stron WWW potrzebny jest edytor. Do nauki najlepsze są edytory pra- cujące w trybie tekstowym, w którym znaczniki i treĞü, z których skáada siĊ witryna, wpisuje siĊ bezpoĞrednio z klawiatury. Istnieją co prawda programy oferujące gra- ficzny tryb budowania witryny, jednak osoby początkujące raczej nie powinny z nich korzystaü, gdyĪ najpierw naleĪy poznaü budowĊ witryn „od wewnątrz”, zaznajamia- jąc siĊ z kolejnymi znacznikami i zaleĪnoĞciami miĊdzy nimi. Tylko w ten sposób moĪna zostaü profesjonalnym twórcą WWW. 24 Rozdziaä 1. i Podstawy Edytory tekstowe moĪna podzieliü na dwa rodzaje. Te ogólnego przeznaczenia oraz te wspomagające wprowadzanie kodu HTML. Dla naszych potrzeb wystarczy w zupeá- noĞci ten pierwszy rodzaj. WaĪne, aby taki edytor obsáugiwaá kodowanie UTF-8. Takie warunki, choü z pewnymi problemami, speánia nawet windowsowy Notatnik. Lepszym rozwiązaniem jest jednak uĪycie takich produktów jak Notepad++ czy Notepad2, któ- re dodatkowo oferują bardzo przydatne podĞwietlanie (kolorowanie) skáadni HTML (XHTML). Notatnik Windows Notatnik jest edytorem tekstu dostĊpnym nawet w tak leciwych wersjach systemu jak 3.1. Począwszy od Windows 2000, pozwala on na odczyt i zapis plików ze znakami kodo- wanymi w standardzie UTF-8, nadaje siĊ wiĊc równieĪ do tworzenia poprawnych stron WWW. Nie oferuje jednak Īadnych dodatkowych udogodnieĔ, brakuje w nim nawet tak prostych funkcji jak numerowanie wierszy. Nie nadaje siĊ wiĊc do tworzenia bar- dziej záoĪonych witryn. Na potrzeby tego kursu bĊdzie jednak wystarczający, jeĞli wiĊc ktoĞ nie chce instalowaü w swoim systemie dodatkowego oprogramowania, mo- Īe skorzystaü z Notatnika. Aby utworzoną w Notatniku stronĊ WWW zapisaü w kodowaniu UTF-8, z menu Plik naleĪy wybraü pozycjĊ Zapisz jako. W oknie dialogowym sáuĪącym do zapisu plików (rysunek 1.10) w polu Nazwa pliku naleĪy wpisaü nazwĊ pliku (np. index.html), z listy Zapisz typ jako wybraü pozycjĊ Wszystkie pliki, a z listy Kodowanie koniecznie wy- braü pozycjĊ UTF-8. Rysunek 1.10. Zapis pliku jako UTF-8 z uĪyciem systemowego Notatnika Tak zapisany plik bĊdzie juĪ zawsze rozpoznawany przez Notatnik jako zapisany w ko- dowaniu UTF-8. To oznacza, Īe przy kolejnym otwieraniu go w Notatniku nie trzeba juĪ przeprowadzaü Īadnych dodatkowych operacji, a zapis moĪna wykonaü za pomo- cą zwykáego polecenia Zapisz (menu Plik, pozycja Zapisz lub kombinacja klawiszy CTRL+S). Niestety Notatnik w przypadku plików kodowanych jako UTF-8 zawsze zapisuje na początku pliku tzw. znacznik BOM13. To w niektórych przypadkach moĪe spowodowaü pewne problemy z wyĞwietlaniem strony. MoĪe siĊ wtedy na jej początku pojawiü ciąg trzech znaków widoczny na rysunku 1.11. To rzadka sytuacja, przeglądarki z re- guáy radzą sobie z takimi plikami, czasem jednak w sieci zobaczymy stronĊ serwującą nam owe kilka dodatkowych znaków. Najlepszym rozwiązaniem jest wiĊc uĪycie edytora, który potrafi zapisaü znaki bez znacznika BOM. 13Znacznik BOM, czyli znacznik porządku bajtów (z ang. byte order mark). Są to trzy bajty okreĞlające porządek bajtów skáadających siĊ na znaki Unicode. Dla kodowania UTF-8 znacznik BOM nie jest konieczny, gdyĪ ustawienie bajtów skáadających siĊ na znak jest z góry okreĞlone. Lekcja 1. Pierwsze kroki 25 Rysunek 1.11. Uwidoczniony w przeglądarce znacznik BOM Notepad++ Doskonaáym zamiennikiem systemowego notatnika jest Notepad++ (rysunek 1.12). Jest to darmowa aplikacja rozwijana na zasadach wolnego oprogramowania. Najnowszą wersjĊ moĪna pobraü pod adresem http://notepad-plus.sourceforge.net/. Edytor ten oferuje wiele ciekawych i przydatnych funkcji. NajwaĪniejsze dla nas to: kolorowanie skáadni (X)HTML (a takĪe kilkudziesiĊciu innych jĊzyków), co ogromnie zwiĊksza czytelnoĞü kodu, numerowanie poszczególnych wierszy i zapis danych w standardzie UTF-8. Pod podanym adresem oprócz wersji instalacyjnej moĪna równieĪ znaleĨü pliki z polską wersją jĊzykową. Rysunek 1.12. Kod strony WWW w edytorze Notepad++ Aby zastosowaü kodowanie UTF-8, naleĪy, najlepiej jeszcze przed rozpoczĊciem wpisy- wania tekstu, z menu Format wybraü pozycjĊ Encode In UTF-8 without BOM (Koduj w UTF-8 (bez BOM)). Po wprowadzeniu kodu plik zapisujemy standardowo, wybierając z menu File (Plik) pozycjĊ Save (Zapisz) lub wciskając kombinacjĊ klawiszy Ctrl+S. W przypadku gdy dysponujemy plikiem, który zostaá zapisany w standardzie Windows- 1250 (np. byá tworzony w Notatniku i zapisany standardowo, bez zmiany kodowania), przejĞcie na UTF-8 osiągniemy, wybierając z menu Format pozycjĊ Convert to UTF-8 wihout BOM (Konwertuj na format UTF-8 bez BOM). Sposób zapisu pliku na dysku nie zmieni siĊ. 26 Notepad2 Rozdziaä 1. i Podstawy Kolejnym zamiennikiem Notatnika jest Notepad2 (rysunek 1.13). Jego moĪliwoĞci są mniejsze niĪ oferowane przez Notepad++, jednak na potrzeby naszego kursu najzupeániej wystarczające. Edytor oferuje kolorowanie skáadni HTML, numerowanie wierszy kodu i zapis w formacie UTF-8. Aby edytowany dokument zostaá zapisany w kodowaniu UTF-8, z menu File naleĪy wybraü pozycjĊ Encoding, a nastĊpnie zaznaczyü pozycjĊ UTF-8. Rysunek 1.13. Strona WWW wczytana do edytora Notepad2 Inne edytory Oprócz edytorów tekstowych ogólnego przeznaczenia, których trzy przykáady zostaáy przedstawione wyĪej, w sieci moĪna znaleĨü teĪ specjalizowane aplikacje wspomagające tworzenie witryn internetowych. WĞród nich znajdują siĊ zarówno aplikacje komercyjne, jak Adobe Dreamweaver czy polski Pajączek, jak i darmowe aplikacje, z których moĪna wymieniü 1st page 2000, ezHTML czy WebSite Pro. CzĊĞü z nich umoĪliwia budowanie stron w trybie graficznym, wiĊkszoĞü jednak pracuje w trybie tekstowych, wspomagając twórcĊ przez automatyczne wstawianie znaczników, autouzupeánianie kodu czy weryfikacjĊ poprawnoĞci witryny. Ta ksiąĪka to jednak kurs tworzenia stron WWW w HTML i XHTML, a nie instrukcja obsáugi konkretnego edytora. Zanim bowiem zacznie siĊ uĪywaü zaawansowanych narzĊdzi, najpierw trzeba poznaü zasady konstruowania stron. Dopiero na dalszym etapie nauki moĪna wybraü bardziej zaawansowane narzĊdzia i Ğwiadomie wyselek- cjonowaü takie, które jest najbardziej odpowiednie do potrzeb. Dlatego teĪ w zupeá- noĞci wystarczającym edytorem bĊdzie Notepad++ bądĨ Notepad2, a w ostatecznoĞci zwykáy Notatnik. RóĔne przeglñdarki Choü wiĊkszoĞü uĪytkowników internetu przyzwyczajona jest tylko do jednej prze- glądarki, a wiele osób nawet nie wie, Īe istnieje ich wiele, twórca stron WWW musi zdawaü sobie sprawĊ, iĪ kaĪda aplikacja tego typu jest trochĊ inna. W przypadku pro- stych stron róĪnice zapewne siĊ nie ujawnią, jednak wraz z tworzeniem coraz bardziej Lekcja 2. Strona WWW w internecie 27 zaawansowanych witryn coraz wiĊksze znaczenie bĊdzie miaáo testowanie kodu z uwzglĊdnieniem róĪnych przeglądarek. Niestety, mimo Īe bĊdziemy tworzyü wi- tryny w peáni zgodne ze standardami HTML i XHTML, czĊsto okaĪe siĊ, iĪ wystĊ- pują róĪnice w prezentacji strony. MoĪe siĊ wiĊc okazaü, Īe do formalnie poprawnego kodu trzeba bĊdzie wprowadzaü poprawki. OczywiĞcie nie ma sensu testowaü witryn we wszystkich dostĊpnych przeglądarkach — jest ich zbyt wiele. Obecnie na rynku liczą siĊ gáównie Internet Explorer i Firef
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tworzenie stron WWW. Praktyczny kurs
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ą: