Tworzenie stron WWW w praktyce [3 ed.] 9788328304918, 9788324665389, 8324665382, 8328304910

Citation preview

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. Wszy stkie 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: Michał Mrowiec Projekt okladki: Studio Gravite / Olsztyn Obarek,Pokoński,Pazdrijowski,Zaprucki Fotografia na okładce została wykorzystana za zgodą Shutterstock.com Wydawnictwo HELION ul. Kościuszki l c,44-100 GLIWICE tel. 32 231 22 19,32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa,katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę,zajrzyj pod adres http://he lion.pl/user/opinie/twstp3 ebook _

Możesz tam wpisać swoje uwagi,spostrzeżenia,recenzję. ISBN: 978- 83- 283- 0491-8 Copyright © Helion 2014

•

Poleć książkę na Facebookcom

•

Księgarnia internetowa

•

Kup w wersji papierowej

•

Lubię to!}} Nasza społeczność

•

Oceń książkę

Spis treści Wstęp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Rozdział 1.

Podstawowe informacje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . 9

Czym jest internet? Czym jest strona WWW,a czym witryna? Dlaczego warto prowadzić własną stronę WWW? Oprogramowanie potrzebne przy tworzeniu stron WWW Edytory tekstowe Edytory graficzne Programy do przygotowywania grafiki sieciowej Klient FTP Etykieta i prawo autorskie Wybór usługodawcy,u którego zamieścimy stronę WWW Własna domena .

. ..................................................................... .

........................................................ . .............................................

.............................................................................................................. ............................................................................................................. . ..........................................................

. ....................................................................................................................... . ..............................................................................................

.

Rozdział 2.

Język HTML

. ..........................................

..............................................................................................................

-

9 10 10 13 13 14 14 15 16 17 18

...........................................................................................................

od tego wszystko się zaczyna . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . 21

Nowości wprowadzone przez język HTML5 .................................................................. 23 Żelazne zasady używania języka HTML ......................................................................... 24 Zasada l. Nigdy nie krzyżuj znaczników . ....................................................................... 24 Zasada 2. Zawsze zamykaj wszystkie znaczniki 24 Zasada 3. Wpisując znaczniki i atrybuty,zawsze używaj małych liter 25 Zasada 4. Używaj cudzysłowów dla wszystkich atrybutów 25 Zasada 5. Uważaj ze znakami specjalnymi w skryptach 25 Struktura dokumentu,znacznik i jego konstrukcja 25 Znaczniki i atrybuty 25 Podstawowa struktura dokumentu 26 Nagłówek strony 27 Ciało i sekcje dokumentu HTML 32 Elementy blokowe 35 Elementy wstawiane 44 Elementy osadzone (grafika,multimedia,aplikacje) 51 Hiperłącza 61 Tabele 72 Formularze 79 Komentarze 97 . ............................................................

. .........................

.

.

.

..........................................

...............................................

........................................................

. ................................................................................................. . ............................................................................

. ......................................................................................................

. . ............................................................................

. ....................................................................................................

. ................................................................................................. . ...............................................

.

.

. ...............................................................................................................

....................................................................................................................... .

...............................................................................................................

.

Rozdział 3.

..............................................................................................................

Grafika sieciowa . .. . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Format lal GIF ........................................................................................................................... lal JPG 115 PNG 117 ............................................................................................................................

........................................................................................................................... ..........................................................................................................................

Tworzenie stron WWW w praktyce

4

Inne metody redukcji rozmiaru zdjęć i grafIki Pozostałe formaty publikacji grafiki na stronie WWW Wygładzanie krawędzi -antyaliasing Tworzenie gotowych rozwiązań na potrzeby stron WWW Prostokątne i owalne przyciski Przyciski o nieregulamych kształtach Cięcie grafIki na nmiejsze elementy Mapa odsyłaczy

. . ............................................................. .................................................

. ........................................................................ . ..........................................

. ............................................................................... . . ...................................................................

. . ......................................................................

. ......................................................................................................

Rozdział 4.

117 120 121 124 124 129 131 134

Wprowadzenie do CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

Podstawowe pojęcia Budowa stylu Osadzanie stylów na stronie Jednostki miar stosowane w CSS Nazewnictwo kolorów używane w CSS Selektory Selektory proste Selektory uniwersalne Selektory potomka Selektory dziecka Selektory rodzeństwa Selektor ogólnego rodzeństwa Selektor atrybutu Selektor atrybutu z możliwością dopasowania ciągu znaków Identyfikatory Klasy Pseudoklasy Pseudoelementy Grupowanie selektorów Dziedziczenie Kaskadowość Właściwości tekstu Wyrównanie tekstu Pionowe wyrównanie Wcięcie pierwszego wiersza akapitu Odstępy pomiędzy literami Odstępy pomiędzy wyrazami Odstępy między liniami Łamanie długiego ciągu znaków Dekoracja tekstu Przekształcanie -małe i duże litery Kontrola pustej przestrzeni Cieniowanie tekstu Właściwości czcionki Rodzina czcionek Rozmiar czcionki Waga czcionki Style czcionki Wariant czcionki Osadzanie czcionki na stronie Zbiorczy zapis właściwości czcionki Właściwości list Typ listy Dowolny obraz jako wypunktowanie listy Zawijanie tekstu Zbiorczy zapis właściwości list

. .....................................................................................................

.................................................................................................................. . ......................................................................................... . ................................................................................. . .......................................................................

.

....................................................................................................................... . . ............................................................................................................ .

.

.

..................................................................................................

........................................................................................................

......................................................................................................... .

................................................................................................... . ......................................................................................

.

.......................................................................................................... .

.....................................

. . ...............................................................................................................

. ............................................................................................................................. . . .................................................................................................................. .............................................................................................................. .

.

.

................................................................................................

. ..............................................................................................................

. ............................................................................................................... . .......................................................................................................

.

....................................................................................................... .

................................................................................................... . ............................................................................

. ........................................................................................... . .......................................................................................

.

................................................................................................ . ..................................................................................

............................................................................................................. . ...........................................................................

. ...........................................................................................

.

....................................................................................................... . ...................................................................................................

.

.

.........................................................................................................

..........................................................................................................

. . ..............................................................................................................

................................................................................................................. .

.......................................................................................................... . ...................................................................................... . ...........................................................................

. ............................................................................................................

.

................................................................................................................. .

............................................................

. ..................................................................................................... . ..............................................................................

136 136 137 141 143 144 144 145 146 147 148 149 150 151 152 153 155 174 176 178 181 182 183 184 185 186 187 187 188 189 190 190 191 192 192 194 196 197 198 198 200 200 201 203 203 204

5

Spis treści

Kolor,tło i przezroczystość Nowe modele barw i przezroczystości w CSS3 Kolor elementu Kolor tła Element graficzny jako tło Rozmiar tła Zatrzymanie tła Kontrola powielania tła Pozycjonowanie tła Wieloelementowe tło Kontrola styku tła i obramowania Zbiorczy zapis właściwości tła Marginesy,obramowanie i dopełnienia Pudełkowy model formatowania elementów Marginesy Dopełnienie Obramowanie Wymiary Tabele Odstępy we wnętrzu tabeli Pojedyncze obramowanie Kontrola pustych komórek Generowanie tabeli Podpis tabeli Pozycjonowanie elementów Rodzaje pozycjonowania Określanie pozycji Warstwy Pływanie i tamowanie elementów Pływanie elementów Tamowanie elementów Efekty wizualne Kadrowanie Ukrywanie elementów Sterowanie wymiarowanymi elementami Cytaty

. .......................................................................................... . . ..........................................................

...............................................................................................................

. ........................................................................................................................ . ...........................................................................................

. .................................................................................................................... ............................................................................................................... .

.

................................................................................................

...................................................................................................... .

.................................................................................................... . ................................................................................

. ..................................................................................... . ........................................................................ . ................................................................

. . ..................................................................................................................... . . .................................................................................................................. . . ...............................................................................................................

. ........................................................................................................................

. . ........................................................................................................................... . ...........................................................................................

.

............................................................................................. . ...........................................................................................

.

.......................................................................................................

. . ................................................................................................................. . .........................................................................................

.

.

..............................................................................................

........................................................................................................

. ........................................................................................................................ . ................................................................................

.

.................................................................................................... .

.

.................................................................................................

............................................................................................................

. . .................................................................................................................. .

.................................................................................................. . .....................................................................

. . ...........................................................................................................................

Rozdział 5.

205 205 209 209 211 212 212 214 215 217 218 219 220 220 220 224 225 230 232 235 235 236 237 237 238 238 242 242 244 244 246 247 247 248 249 251

Praktyczny projekt. Moja strona domowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Dlaczego potrzebna jest strona WWW? Gromadzę materiały Struktura witryny Przygotowuję poszczególne elementy witryny Strona główna Sekcja Książki Sekcja Artykuły Sekcja O nmie Sekcja Przyjazne strony Sekcja Sklep Sekcja Kontakt Nazwy plików Testowanie gotowego projektu Testy w różnych przeglądarkach Testy rozdzielczości Testy zgodności kodu ze specyfikacją. Wnioski

. ........................................................................

. ......................................................................................................

.

........................................................................................................... .

.............................................................

. ................................................................................................................. ................................................................................................................. ...............................................................................................................

................................................................................................................. .

.................................................................................................

.................................................................................................................... . . ..............................................................................................................

.

................................................................................................................ . ...................................................................................... . ...................................................................................

.

...................................................................................................... ...........................................................................

. . .........................................................................................................................

253 254 257 258 258 272 278 279 279 281 284 285 286 286 287 290 293

Tworzenie stron WWW w praktyce

6 Rozdział 6.

Darmowe usługi dostępne w sieci . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . 295

Komentarze Status komunikatorów Gadu- Gadu oraz Tlen na stronie WWW Sonda Statystyki Instalacja darmowej wersji statystyk Wnioski .

.................................................................................................................. . .................................

.............................................................................................................................. .

...................................................................................................................... . ......................................................................

..........................................................................................................................

Rozdział 7.

Przydatne skrypty, których można użyć na stronie WWW . . . . . . . . . . .. . . 307

Nowe okno Zamykanie otwartego okna Rollover Drukowanie zawartości strony Zmiana zawartości paska statusu Dodawanie strony do "Ulubionych" Strona startowa Zmiana tła całej komórki tabeli Wczytywanie arkusza w zależności od używanej przeglądarki .

................................................................................................................... . ...........................................................................................

.

........................................................................................................................ . ..................................................................................... . .................................................................................. . . ............................................................................

.

............................................................................................................. . ....................................................................................

Rozdział 8.

. ...................................

307 308 308 308 309 309 309 309 310

Publikacja i utrzymanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . 313

Wybór serwera -hosting Zakładanie konta Publikacja strony Rejestracja domeny

. ............................................................................................

. ..........................................................................................................

.

.......................................................................................................... . ......................................................................................................

Rozdział 9.

295 299 299 301 302 305

313 315 317 319

Promocja serwisu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

Popularne sposoby promocji strony Podpis poczty elektronicznej Listy mailingowe Inne formy promocji Podstawy optymalizacji stron pod kątem wyszukiwarek Domena i hosting Metaznaczniki Treść publikowana na stronie Nagłówki i wyróżnienia Opis linków na stronie Prawidłowa indeksacja strony Zdobywanie pozycji i kontrola efektów Integracja strony z mediami społecznościowymi

. ..............................................................................

. ........................................................................................

............................................................................................................ .

.

..................................................................................................... . .............................................

.........................................................................................................

................................................................................................................ .

.

.

.......................................................................................

...............................................................................................

.................................................................................................. . ...................................................................................... . ....................................................................... .

........................................................

323 323 324 324 324 324 327 329 330 331 331 337 338

Rozdział 10. Praca z systemem CMS na przykładzie platformy WordPress . . . . . . . . 343

Instalacja i wstępna konfiguracja WordPressa Instalacja i wstępna konfiguracja Wstępna konfiguracja Instalacja i modyfikacja szablonu Instalacja szablonu i dopasowanie ukladu strony Dopasowanie ukladu strony do własnych potrzeb Publikacja treści Rozbudowa możliwości za pomocą wtyczek .

.............................................................

. .................................................................................

.

................................................................................................... . .................................................................................

.

. ......................................................... . . .......................................................

............................................................................................................ .................................................................

343 344 350 352 352 356 360 366

Podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . 371 Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372

Wstęp Projektowanie stron WWW w ciągu ostatnich lat bardzo się zmieniło i wciąż ewolu­ uje. Kiedyś strony tworzyli naukowcy w celu prezentacji własnych osiągnięć pracow­ nikom innych uczelni. Ze względu na spore ograniczenia internetu oraz ubogie moż­ liwości języka

HTML publikacje te były mało interesujące od strony wizualnej.

Charakteryzowały się dość prostą konstrukcją - bloki tekstu rozdzielano za pomocą poziomych linii. Strony mogły zawierać listy wypunktowane lub numerowane oraz nagłówki. W miarę pojawiania się kolejnych wersji języka

HTML (XHTML) oraz

rozwoju internetu strony wyglądały coraz lepiej. Obecnie witryny to w bardzo wielu przypadkach prawdziwe dzieła sztuki, tworzone w oparciu o najnowsze rozwiązania, takie jak język

HTML5, CSS3, Ajax czy też bazy danych i języki skryptowe działają­

ce po stronie serwera. Przygotowanie strony WWW nie jest rzeczą skomplikowaną. Śmiem twierdzić, że stronę WWW może zbudować każdy, kto będzie miał odrobinę chęci. Niestety, strona stronie nierówna. Wielu początkujących popełnia koszmarne błędy i raczy świat mniej­ szymi lub większymi potworkami. Dlatego zdecydowałem się kolejny już raz odświe­ żyć niniejszą książkę i przygotować jej trzecie wydanie. Książka pozwoli Ci zdobyć solidne podstawy, dzięki którym będziesz mógł tworzyć wła­ sne witryny internetowe. Czytając kolejne rozdziały, poznasz najnowszą odsłonę języka

HTML5 oraz arkuszy CSS3, które wytyczają nowe standardy tworzenia stron WWW. Przedstawię Ci proces tworzenia dwóch kompletnych stron WWW - prywatnej i firmo­ wej. Dowiesz się, jakimi kryteriami należy kierować się przy wyborze konta - wirtu­ alnego serwera, niezbędnego do publikacji gotowego projektu. Poznasz tajniki przygoto­ wania grafIki na potrzeby internetu i nauczysz się pracować z gotowymi, darmowymi szablonami dostępnymi w sieci. Dowiesz się również, w jaki sposób sprawnie zain­ stalować popularny WordPress, jak go skonfigurować i używać. Jest on jednym z lep­ szych rozwiązań ułatwiających prowadzenie własnej strony WWW. Nie nauczę Cię jednak, jak pisać własne skrypty, ponieważ wiedzę tę znajdziesz w innych książkach. Uważam, że do przygotowania dobrze wyglądającej strony nie jest potrzebna znajomość PHP, gdyż wszystko, co jest konieczne, możemy znaleźć w internecie.

8

Tworzenie stron WWW w praktyce

Wydaje mi się, że dzięki temu książka będzie przydatna dla szerszego grona Czytel­ ników. Jeżeli po jej przeczytaniu zbudujesz dobre strony i uznasz, że zawarte tutaj infor­ macje to zbyt malo, by sprostać Twoim już sprecyzowanym wymaganiom, będziesz mógł świadomie sięgnąć po inne, szczegółowe opracowania dostępne na polskim rynku. Moim założeniem było praktyczne przedstawienie tworzenia stron WWW, dlatego w książce nie ma opisów o charakterze czysto teoretycznym - ich miejsce zajęły konkretne porady i rozwiązania. Jeżeli podczas lektury lub po jej zakończeniu będziesz mial jakieś pytania albo po prostu postanowisz podzielić się uwagami na temat książki, możesz to zrobić za pośrednic­ twem mojej strony WWW lub poczty e-mail. Odpowiednie adresy znajdziesz poniżej.

Bartosz Danowski

[email protected] http://danowski.pl

Rozdział 1.

Podstawowe informacje Czym jest internet? Ocena i jakakolwiek charakterystyka internetu jest dość trudna. Dlatego spróbuję opi­ sać, czym jest internet w moim odczuciu. Otóż kilka lat temu, gdy stawiałem swoje pierwsze kroki na "cybernetycznej drodze", uważałem, że to kolejna chwilowa moda i że kwestią czasu jest, by pomysł zniknął z naszego globu. Gdyby dzisiaj świat był bez dostępu do sieci i oferowanych przez nią możliwości, nie potrafiłbym w nim znaleźć miej­ sca dla siebie. Dzięki internetowi mogę na bieżąco śledzić notowania giełdowe, czytać ga­ zety, zarządzać swoimi pieniędzmi, a także pracować i pisać książki. Nie wyobrażam so­ bie chwili, w której ktoś miałby "wyłączyć" sieć - straciłbym pracę, błyskawiczny dostęp do informacji, a nawet wielu przyjaciół. Czasem zastanawiam się, czy już nie je­ stem uzależniony i czy nie powinienem się leczyć w specjalistycznych poradniach, ale mam nadzieję, że tak nie jest - bo przecież stracilbym wtedy dostęp do sieci. W moim odczuciu internet to jedno z największych osiągnięć współczesnej cywiliza­ cji. Potrafię sobie wyobrazić świat bez ciepłej wody, restauracji czy samochodu, ale nie widzę możliwości jego istnienia bez sieci. Oczywiście opisane zalety nie wyczerpują zagadnienia i nie uwzględniają drugiego aspektu sprawy. Mam tutaj na myśli fakt, że w internecie możemy aktywnie zaistnieć i pozostawić cząstkę siebie. Jeżeli poznamy język HTML i przyswoimy sobie podstawy korzystania z sieci, to możemy brać udział w jej tworzeniu, rozrastaniu się - nasza praca będzie jak tlen niezbędny do życia. Łatwość dostępu do internetu i prostota korzystania z niego umożliwiają każdemu prowadzenie własnej strony domowej, zawierającej informacje o jego zainteresowa­ niach czy rodzinie, a nawet stworzenie gazety elektronicznej. W sieci nie mamy żadnych ograniczeń i jeżeli tylko chcemy, to możemy zrobić wszystko. Prowadzenie poczyt­ nego portalu czy strony o hodowli rybek akwariowych to tylko dwie z wielu możli­ wości. Poznanie języka HTML bardzo często prowadzi do spełnienia marzeń. Wielu autorów doskonałych serwisów zarobiło dzięki nim spore pieniądze lub otrzymało cieka­ we propozycje pracy.

Tworzenie stron WWW w praktyce

10

Musisz pamiętać o jednej podstawowej zasadzie - anonimowość w sieci jest tylko pozorna. Do chwili, gdy nie naruszysz obowiązujących norm, możesz być anonimo­ wy. W przypadku złamania prawa lub dobrych obyczajów prędzej czy później spo­ dziewaj się odkrycia Twojej tożsamości - dlatego zanim popełnisz głupstwo, zasta­ nów się dwa razy. Moim zdaniem internet to piękne osiągnięcie i nie powinniśmy niszczyć go przez brak ogłady. Zwróć uwagę, że to dzięki błyskawicznemu rozwojowi sieci powstały idee tworzenia darmowego oprogramowania, a nawet całych systemów operacyjnych. To właśnie sieć pozwala walczyć z uprzedzeniami oraz przedstawiać prawdę. Oczywiście usłyszę głosy, że sieć jest źródłem wszelakiego zła (pornografia, treści o charakterze nazistowskim czy też piractwo). Nie sposób nie zgodzić się z takimi argu­ mentami, ale weź pod uwagę to, że wina za taki stan rzeczy leży po naszej stronie. Gdyby nie było zainteresowania pornografią, to nie powstawałyby nowe strony jej poświęco­ ne, a ludzie nie zarabialiby na tym procederze. Dlatego pamiętaj, że nikt nie zmusza Cię do korzystania z ciemnej strony sieci.

Czym jest strona WWW, a czym witryna? Znasz już moje zdanie na temat sieci. Zakładam, że skoro kupiłeś tę książkę, to miałeś bądź masz styczność z internetem i zainteresowało Cię tworzenie własnych, dobrze wyglądających i działających stron WWW. Zanim zajmiemy się konkretami, niezbędne jest wyjaśnienie dość często spotykanych pojęć strona WWW oraz witryna. Otóż pierwsze z nich określa pojedynczy plik tekstowy zawierający odpowiednie polecenia języka HTML. Utarło się, żeby nazwę tę stoso­ wać w odniesieniu do całego zbioru stron, jakim bez wątpienia jest witryna. Na pew­ no spotkałeś się z pytaniem: " Czy masz stronę WWW?". Taka forma jest z pewnością bardzo wygodna, chociaż nie do końca zgodna z prawdą. Nie będę jednak zmieniał Twojego sposobu nazewnictwa.

Dlaczego warto prowadzić własną stronę WWW? Odpowiedź na to z pozoru proste pytanie nie jest taka oczywista. Może wyjaśnię, dlaczego zdecydowałem się wykonać swoją stronę WWW. Otóż pomysł narodził się już dość dawno, a pierwsze wydanie tej książki pozwoliło mi go zrealizować. Pisanie książek oraz inne prace pochłaniały mnie tak, że nie miałem czasu, by zaprojektować cieka­ wie wyglądającą stronę, a następnie ją opublikować. Na szczęście pojawiła się propo­ zycja napisania książki o praktycznym tworzeniu stron WWW. Przyznam się, że od razu

Rozdział 1 . • Podstawowe i nformacje

11

zgodziłem się pisać, gdyż na jednym ogniu mogłem upiec dwie pieczenie. Po pierw­ sze, dorobiłem się swojej własnej strony WWW; po drugie, napisałem - mam na­ dzieję - ciekawą książkę. Pora przytoczyć poważne argumenty, które skłoniły mnie do posiadania strony domowej. Było mi potrzebne miejsce, gdzie mógłbym rozwijać myśli i przykłady zaprezento­ wane w książkach lub artykułach. Książka czy też gazeta mają do siebie to, że po ich wydrukowaniu nie mamy już wpływu na zawartość, a bardzo często wraz z pojawieniem się nowej przeglądarki czy programu zyskujemy nowe możliwości. Dzięki stronie, której adres znajdzie się w książce, Czytelnik będzie mógł na bieżąco uzupełniać wiedzę. Strona WWW daje mi możliwość pisania o różnych innych ciekawych sprawach, któ­ re niekoniecznie nadają się na temat książki czy też artykuł do gazety. Jeżeli pewnego dnia obudzę się po ciężkiej nocy spędzonej na przymuszaniu przeglądarki do tego, by mnie słuchała, i będę chciał się komuś wyżalić, to strona mnie wysłucha i pozwoli udostępnić moje wnioski innym. Posiadanie strony może zaowocować ciekawymi propozycjami udziału w różnych projektach. Moje pierwsze kroki i przygotowanie strony WWW zostały uwieńczone kil­ kanaście lat temu artykułem w miesięczniku "Cyber" (pewnie starsze pokolenie pamięta takie czasopismo). Od tamtego czasu zmieniły się moje zainteresowania i poglądy na wiele spraw - dorosłem, jednak to doskonały przykład, jaki wpływ na nasze życie może mieć strona domowa. Dzisiaj również nie mogę narzekać na brak ofert współpracy. Zale­ dwie kilka dni temu dostałem propozycję napisania kilku książek wraz z innym autorem, w przeszłości oferowano mi napisanie książki na zamówienie pewnej znanej firmy działającej na rynku open source, nie wspominam tutaj o dziesiątkach propozycji pi­ sania artykułów do mniej lub bardziej znanych gazet. Gdy patrzę na powyższe argumenty z perspektywy czasu i pracy nad trzecim wydaniem książki, nasuwa mi się kilka dodatkowych myśli, którymi chcę się z Tobą podzielić. Przez te wszystkie lata moja strona stała się podstawową platformą kontaktu z Czy­ telnikiem. To właśnie na stronie domowej Czytelnik sprawdza, jakie książki napisa­ łem, szuka odpowiedzi na swoje pytania, nawiązuje ze nmą kontakt, a także korzysta z dodatkowych materiałów. Druga wersja strony, która jest widoczna na rysunku 1 . 1 , była efektowna i budziła zainteresowanie, jednak dopiero obecna forma i rozwiązania spowodowały, że mam nie skrępowane możliwości realizacji głównych celów, które stawiałem sobie kilka lat temu. To wszystko zasługa minimalistycznego szablonu oraz wygodnego systemu CMS (w dalszej części książki znajdziesz szerszy opis tego rozwią­ zania) do zarządzania treścią. Można powiedzieć, że stałem się minimalistą w kwestii wyglądu witryny WWW i żarliwym zwolennikiem maksymalnej jej przejrzystości i funk­ cjonalności. W dalszej części niniejszej książki z całą pewnością zobaczysz efekty zmiany mojego nastawienia do witryny WWW. Mam nadzieję, że spodoba Ci się to nowe podejście do tego tematu. Pamiętaj, że minimalistyczny wygląd wcale nie idzie w parze z unikaniem stosowania ciekawych rozwiązań w kodzie strony. Nieco inaczej wygląda sprawa internetowej wizytówki firmy. Instytucja taka może mieć charakter handlowy, usługowy, produkcyjny, etc. Również i strona WWW spełnia różne funkcje. W przypadku firmy handlowej na stronie możemy zamieścić informa­ cje o firmie, jej działalności, ofercie, promocjach oraz sklep internetowy. Taka witryna

Tworzenie stron WWW w praktyce

12

Rysunek 1.1. Droga wersja witryny danowskipl

--....

_.-

.......... 1-

....

PrlWIamtSU.-v 1_.

• • • • • • • • • •

....

T . moż.azbyć •.,ym bezwyd.w.,,",��zy

ili}iiił'

M"" ""zlcIo Mo"'" pakiecie O_OIIitemny ""

Przeczytajtę�.jeŚI cl\CIZ IU IcłK>W.Ćpehll, .... koIetc;I. eylrowyChZdjęĆ

ltontroIę

")10.-.,..'" ".�"�imOt _Regt>IIIrnin

.....i_. _....",••

stat.pl

'2.1"1

Whj "'Vllny wędrowczew mo;'; $krkazaloo.ę,uodwiedn ...... w..... pci I .Iymczn ow o$ci POW$"'" eiIlu _. Ot>e/:lię.o.teo o wlt'\(llt>ył(l





W ramach przypomnienia zamieściłem przykładowy kod odpowiedzialny za określenie strony kodowej w dokumencie wykorzystującym poprzednie wersje języka HTML. Jak zapewne już zauważyłeś, również w tym aspekcie twórcy nowej specyfIkacji upro­ ścili i skrócili zapis.

Tytuł strony Następnym znacznikiem, który zalicza się do stałych elementów strony WWW, jest . Odpowiada on za ustawienie tytułu strony, widocznego na belce tytułowej w oknie przeglądarki. Znacznik ten powinien znajdować się pomiędzy '-+.

< t i t l e>Bartosz Danows ki - strona domowa



Tytuł jest jedynym elementem strony, który znajduje się w nagłówku dokumentu, i jest widoczny bez konieczności analizy zawartości kodu strony (rysunek 2. 1). Rysunek 2.1.

Tytuł strony zwykle widoczny jest na górnej belce okna przeglądarki

�

.,..

)(

Ba rtosz Danowski

+ � da nowski .p l

Zakład ki

[j

Prywatne

UJ

eBookpoint

U

Do

Jeżeli zapomnisz o dodaniu tego znacznika, nic się nie stanie, chociaż podczas promocji i pozycjonowania strony możesz mieć problemy z osiągnięciem zadowalających wy­ ników. Pamiętaj również, że za pomocą informacji zawartych między tymi znaczni­ kami stronajest opisywana w Ulubionych przeglądarki.

Rozdział 2 . • Język HTML

-

od tego wszystko się zaczyna

29

Słowa kl uczowe i opis strony Skoro zainteresowałeś się tworzeniem stron WWW, to musiałeś już poszukiwać in­ formacji w internecie, dlatego z całą pewnością miałeś kontakt z wszelkiej maści wy­ szukiwarkami i katalogami. Wszystkie one funkcjonują dzięki ogronmym bazom da­ nych, zawierającym informacje o stronach zamieszczonych w sieci. Oczywiście dane te muszą być w jakiś sposób pogrupowane - w przeciwnym razie nie byłoby możli­ we znalezienie poszukiwanych stron WWW. Jeżeli chcesz, by Twoja strona trafiła do bazy wyszukiwarki, musisz zadbać o odpo­ wiednią promocję (więcej miejsca temu zagadnieniu poświęciłem w innych moich książkach). Teraz ważne jest, abyś zapamiętał, że zawartość Twojej strony jest indek­ sowana przez specjalnego robota, który ją sprawdzi i doda do bazy danych. To bardzo skrócona i uproszczona metoda działania. W zależności od wyszukiwarki robot sprawdza w kodzie strony kilka elementów i na tej podstawie dodaje ją do bazy. Pierwszym elementem jest znacznik , o którym wspominałem nieco wcześniej . Następnym są słowa kluczowe (keywords) witryny oraz opis (description) strony. Poniżej zamieszczam odpowiednie znaczniki zawierające słowa kluczowe oraz opis strony. Konstrukcja znacznika jest stosunkowo prosta, mimo że składa się on z kilku elementów.

Znacznik może przybierać przeróżne formy, o których wsponmę na następ­ nych stronach, jednak nigdy nie zawiera elementu zamykającego. Zwróć uwagę, że słowa kluczowe zostały oddzielone od siebie za pomocą przecinków i mogą składać się z kilku wyrazów. Opis strony zawiera jedno - dwa zdania na temat jej zawartości, które pojawią się jako wynik szukania. Najczęściej na podstawie tych zdań internauta podejmuje decyzję o odwiedzeniu strony, którą znalazł za pomocą wyszukiwarki. Odpowiednie przygotowanie tytułu, słów kluczowych oraz opisu ma znaczenie dla odpo­ wiedniej indeksacji strony przez wyszukiwarki oraz pozycji, jaką zajmie ona w bazie danych. Dlatego warto zadbać o to, aby niezbędne znaczniki znalazły się wśród obo­ wiązkowych elementów Twojej strony. Poniżej zamieściłem fragment kodu, pocho­ dzący z mojej strony domowej . Dzięki temu będziesz mógł zobaczyć, w jaki sposób przygotowałem opis strony i dokonałem wyboru słów kluczowych.





Tworzenie stron WWW w praktyce

30

Powyższy listing z mojej prywatnej strony dla potrzeb niniejszego przykładu został skrócony, w rzeczywistości jest on bowiem znacznie bardziej rozbudowany. Zwróć uwagę na sposób zapisu słów kluczowych - są one rozdzielone za pomocą przecin­ ków. Poza tym niektóre wpisy są zdublowane, np. nagrywanie płyt i nagrywanie p/yt. Dzięki temu w bazie znajdą się odpowiednie wersje dla wyszukiwarek obsługujących nasze rodzime "ogonki" oraz tych, które ich nie obsługują.

I nne elementy składowe nagłówka strony Nagłówek może zawierać jeszcze kilka innych znaczników pomocnych w określeniu właściwości strony lub spełniających funkcję informacyjną. Tak się składa, że są one związane ze znacznikiem . Poniżej opisałem kilka najważ­ niejszych i najczęściej spotykanych elementów występujących w nagłówku strony.

Podany wpis ma charakter informacyjny i dzięki niemu możemy w kodzie zamieścić informacje o autorze strony. Dane te nie są widoczne na zewnątrz, ale przydają się do ustalenia praw autorskich dla danej strony. Osobiście uważam, że warto korzystać z tego znacznika.

Następny element mogący wchodzić w skład nagłówka zawiera informacje o prawach autorskich. Również w tym przypadku wpisy nie są widoczne na zewnątrz i mają cha­ rakter typowo informacyjny.

Spowoduje ono automatyczne przeniesienie odwiedzającego po upływie

x sekund pod

nowy adres zadeklarowany w sekcji ur1 .

o przydatności tego polecenia nie muszę chyba nikogo przekonywać. Wiersz ten rozwią­ zuje problem ze zmianą adresu i utratą odwiedzających - wystarczy pod starym ad­ resem umieścić plik

index. html

z deklaracją

http-equ i v= " refre s h "

i określonym no­

wym adresem, pod którym umieściliśmy naszą stronę. Każdy, kto wejdzie pod stary adres, zostanie automatycznie przekierowany pod jego aktualną wersję. Polecenie

może

jeszcze przybrać następujące formy:

definiuje adres autora witryny,

określa, kiedy nasza strona została wykonana. Warto wiedzieć, że część serwisów indeksujących korzysta z

,

który określa, czy dana strona powinna być indeksowana oraz czy linki na niej za­ warte również mają być dodane do bazy serwisu katalogującego. Przy zastosowaniu polecenia

robots

atrybut

content

zawiera następujące dyrektywy, informujące o do­

puszczonych operacjach dla naszej strony:

• I i ndex I - strona powinna być zaindeksowana; • I no i ndex I - strona nie powinna być zaindeksowana; • I fo 1 1 ow I - linki z tej strony powinny być zaindeksowane; • I nofo 1 1 ow I - linki z tej strony nie powinny być zaindeksowane; • ' a 1 1 I równa się I i ndex . fo 1 1 ow I - wartość domyślna; • I none I równa się I no i ndex . nofo 1 1 ow I . Dalej przedstawiam przykład zastosowania polecenia

name= " robot s "

dla strony, która

ma być indeksowana wraz ze wszystkimi odnośnikami prowadzącymi do podstron.

Tworzenie stron WWW w praktyce

32

Warto, abyś zapamiętał, że dla większości witryn takie rozwiązanie jest zdecydowa­ nie najlepsze.

Kolejnym znacznikiem występującym w nagłówku jest polecenie

, określające

bazowy adres dla dokumentu i wszystkich odnośników znajdujących się w jego treści.

Przydatność

doskonale widać przy przenoszeniu dokumentów do innych

katalogów. Jak się później dowiemy, odsyłacze mają różne formy, dlatego przy takiej operacji nietrudno o zerwanie odnośników, a pamiętanie przy przenoszeniu o zmianie każdego z nich jest kłopotliwe. Należy jednak pamiętać o tym, że w kodzie strony

może wystąpić tylko jeden raz.

Ostatnim poleceniem wchodzącym w skład nagłówka dokumentu jest

, które

w naszym przypadku będzie odpowiedzialne za dołączanie zewnętrznego arkusza stylów. Element

ma następującą konstrukcję:

Do znacznika

jeszcze wrócimy w jednym z następnych rozdziałów, poświę­

conym kaskadowym arkuszom stylów. Wtedy dowiesz się m.in., że do jednego do­ kumentu można podłączyć kilka różnych arkuszy stylów. Aby utrwalić wiedzę na temat znaczników opisanych w niniejszym podrozdziale, za­ poznaj się z poniższym listingiem, który pokazuje, jak może wyglądać szkielet strony uzupełniony o omówione do tej pory znaczniki.

< ! doctype h tml >



'+. W sytuacji, gdy chcesz oznaczyć jakiś element jako usunięty, należy sko­ rzystać ze znacznika . W obu przypadkach odpowiednio oznaczony tekst jest wyświetlany za pomocą: • czcionki podkreślonej - tekst oznaczony znacznikiem < i ns>, • czcionki przekreślonej - tekst oznaczony znacznikiem .

Przykładowy kod może wyglądać w sposób następujący. Rysunek 2.20 przedstawia efekt działania poniższego przykładu.

Bartosz Danows ki < i ns>Danows ki -Źd z i ebło Rysunek 2.20.

Przykład działania znaczników ins i del

Bartosz D!IDOW�łci DanowslO- Ździebło

Innym typowym przykładem zastosowania znaczników < i n s> i jest prezentacja starej i nowej ceny w sklepie internetowym.

Elementy osadzone (grafika, multi media, aplikacje) Obrazek widoczny na stronie WWW o d wielu lat nikogo nie dziwi. Dzisiaj standardem jest witryna WWW, na której poza statycznymi elementami pojawiaj ą się animacje, filmy, treści audio i rozbudowane aplikacje. Propozycja piątej odsłony języka HTML daje nam znacznie więcej możliwości w zakresie publikacji treści multimedialnych i wiele rozwiązań stosowanych do tej pory znacznie upraszcza (np. publikację wideo i audio). Niniejszy podrozdział nauczy Cię, w jaki sposób osadzić na stronie :

Tworzenie stron WWW w praktyce

52

• obrazki, • filmy wideo, • pliki audio, • pływaj ące ramki, • animacj e Flash.

Publ i kacja obrazków Grafika na stronie może być j ej uzupełnieniem, ale może także stanowić podstawowy składnik strony . Na stronie WWW możesz umieścić obrazki w następuj ących forma­ tach:

jpg, .gif oraz .png.

Na potrzeby niniej szego podrozdziału założyłem, że posia­

dasz dowolny obrazek, który sam przygotowałeś lub pobrałeś z j akiej ś strony w inter­ necie. Pamiętaj j ednak o prawach autorskich - pożyczonego zdjęcia możesz używać do testów i nauki, ale wyniki Twojej pracy nie powinny wyjść poza Twój komputer. Moim zdaniem własnoręczne przygotowanie elementów graficznych strony daje dużo więcej satysfakcj i niż ich " pożyczanie" od innych twórców. Do umieszczenia elementu graficznego na stronie służy znacznik siada atrybuty

al t

src oraz a l t . Src określa źródło,

< i mg l>,

który po­

czyli obrazek, który chcemy wstawić,

natomiast definiuj e alternatywny tekst dla przeglądarek nieobsługuj ących grafiki,

m.in. przeglądarek tekstowych, np.

LYNX, bądź dla przeglądarek, w których użytkownik /> podaj ę poniżej .

wyłączył wyświetlanie grafiki. Przykład użycia znacznika < i mg

Jeżeli obrazek umieszczony na stronie ma kluczowe znaczenie dla jej zawarto ści, obowiązkowo musi posiadać atrybut

al t

wraz z dokładnym opisem. Gdy obrazek nie

ma większego znaczenia i jest na przykład ozdobnikiem, należy wykorzystać pusty atrybut

al t.

W tym miej scu pojawia się bardzo ważna kwestia, związana z wielkością liter używanych przy wpisywaniu znaczników oraz atrybutów. Na początku napisałem, że w przypad­ ku stron korzystających ze starej wersj i j ęzyka HTML wielkość liter w znacznikach oraz atrybutach nie ma znaczenia, natomiast HTML5 wymaga stosowania wyłącznie małych liter. To oczywiście prawda, j ednak od tej zasady istniej e pewne odstępstwo. Mam tutaj na myśli sytuację, w której znacznik zawiera odwołanie do oddzielnego pliku. W moim przykładzie atrybut

src

zawiera informacj e o pliku obrazka i w takim

przypadku sprawą kluczową jest wpisanie nazwy obrazka dokładnie tak samo, jak na­ zwano plik. Chodzi o to, że systemy rodziny MS Windows nie rozróżniają wielkości liter i dla nich

plik. giforaz Plik. gifto j eden i ten sam plik.

Natomiast systemy uniksowe są czułe na

wielkość liter i przykładowe pliki to dwa zupełnie różne pliki. Maj ąc na uwadze fakt, że niemal 95% serwerów internetowych to maszyny uniksowe, musisz wpisywać na­ zwy dokładnie, z uwzględnieniem wielkości liter.

Rozdział 2 . • Język HTML

- od tego wszystko się zaczyna

53

Warto, byś pamiętał również o tym, że nazwy plików (każdy typ używany na stronie) nie powinny zawierać polskich liter oraz znaków spacji. Jeżeli plik ma składać się z nazwy dwuczłonowej , to zamiast przerwy użyj znaku podkreślenia _.

f)

Wskazówka

Musisz pam iętać o tym , że podczas osadza n i a obrazka n a stronie m u s isz zdefi­ n iować ścieżkę dostępu do od powiedn iego p l i ku . W przykładach wykorzystanych w n i n iejszym podrozdziale uznałe m , że p l i k obrazka znajduje się w tym samym m i ejscu co p l i k strony HTML. N iestety, taka sytuacja jest bardzo rzadka i obowi ąz­ kowo m u s isz zapoznać s i ę z podrozdziałem poświęconym odsyłaczo m , gdyż tam u m ieściłem dokładny opis defi n iowa n i a ścieżek dostępu do p l i ków.

W przypadku języka HTML za pomocą kolej nych atrybutów możemy określić wiel­ kość naszego obrazka. Odpowiadaj ą za to atrybuty

w i dt h

i

hei ght.

nia obrazka z podaniem wielkości zamieściłem poniżej , a rysunki

Przykład wywoła­

2.21

i

2.22

przed­

stawiaj ą efekt tego działania.



Rysunek 2.21.

Przykład powiększania obrazka za pomocą atrybutów języka HTML

Obrazek orygjnalny , • •.

n··rt

Obrazek powit;.kslony dwa razy

I•

•

IIO-rL

Obrazek powi!(kszony trzy razy

." Rysunek 2.22.

Przykład pomniejszania obrazka za pomocą atrybutów height i width

Obrazek orygjnalny

Tworzenie stron WWW w praktyce

54

Warto mieć również na uwadze to, że do skalowania rozmiaru obrazków umieszczo­ nych na stronie możesz również wykorzystać kaskadowe arkusze stylów. Rozwiąza­ nie to wydaj e się wygodniej sze i praktyczniej sze.

f!f:

Wskazówka

Skalowanie obrazka za pomocą atrybutów języka

HTML

l u b CSS powoduje pogor­

szenie jego jakości, a dod atkowo - w przypadku zmn iejszania oryginału n ie zmn iejsza wie l kości samego p l i k u . Dl atego zaleca s i ę przygotowanie obrazka o wym iarach zgodnych z potrzebam i konkretnej strony.

Zanim przej dziemy do kolej nego podrozdziału, chciałem zwrócić Twoją uwagę na to, że obrazki można również wykorzystywać w nieco innym charakterze. Jeśli na przykład zależy Ci na tym, by gotowa strona zawierała efektowne tekstowe nagłówki, możesz to uzyskać, tworząc w programie graficznym stosowny obrazek, a następnie umiesz­ czaj ąc go w kodzie . Z uwagi na optymalizacj ę kodu strony, lepszą indeksacj ę strony przez roboty wyszukiwarek oraz stronę semantyczną obrazki zawierające nagłówki warto umieszczać pomiędzy znacznikami . Rodzaj znacznika powinien być dobrany do hierarchii nagłówka w dokumencie. W poniższym przykładzie mamy ob­ razek, który ma pełnić funkcj ę podobnąjak nagłówek stopnia drugiego.

< i mg src=" nag-o- f i rm i e . g i f" al t= " I n formacj e o fi rm i e " j> Na koniec niniej szego podrozdziału chciałbym, abyś zapamiętał, że:

• Obrazek osadzony na stronie może być odnośnikiem do innej podstrony opis graficznych odsyłaczy znaj dziesz w dalszej części niniej szego rozdziału.

• Obrazek osadzony na stronie może być tłem - opis graficznego tła znaj dziesz w kolejnym rozdziale, poświęconym kaskadowym arkuszom stylów.

• Obrazek może być dowolnie oblewany przez tekst - opis tego elementu znaj dziesz w kolej nym rozdziale, poświęconym kaskadowym arkuszom stylów.

Publ i kacja fi lmów Nowoczesne strony WWW to nie tylko statyczne obrazki w formacie

jpg, png czy .gif,

ale również filmy . Propozycja piątej odsłony j ęzyka HTML wprowadza nowy sposób publikacji filmów na stronie, przez co cały proces jest znacznie bardziej uproszczony, niż miało to miejsce do tej pory. Wystarczy j eden znacznik, kilka atrybutów, i po sprawie. W chwili obecnej obrazy wideo publikowane na stronie powinny być zapisane w jed­ nym z dwóch formatów :

• . mp4 - plik kompresowany z a pomocą kodeka wideo H.264 i kodeka audio AAC;

• . ogg - plik kompresowany za pomocą kodeka wideo Thedora i kodeka audio Vorbis. Obsługa przez różne przeglądarki osadzania filmów przy wykorzystaniu HTML5 jest jeszcze w powijakach. Internet Explorer w wersji

8 nie wspiera niezbędnych znaczników.

Rozdział 2 . • Język HTML - od tego wszystko się zaczyna

55

Natomiast pozostałe wiodące przeglądarki mają różne problemy z obsługą obu for­ matów kodowania obrazu wideo. W dniu, w którym pisałem niniej sze słowa, jedynie przeglądarka Google Chrome radziła sobie z osadzonymi filmami zakodowanymi w i

. ogg.

. mp4

Tabela 2.2 widoczna poniżej przedstawia wsparcie dla omawianego znacznika

oraz obu formatów kompresji. Tabela 2.2. Obsługa formatów .ogg i .mp4 w wiodących przeglądarkach I nternet Explorer 8

Mozi lla Firefox 31

Google Chrome 35

ogg

Nie

Tak

Tak

.mp4

Nie

Tak

Tak

.

Na początku przyjrzyj my się prostemu przykładowi, który pozwoli nam osadzić film w kodzie strony. Na rysunku 2.23 widać efekt działania przykładowego kodu w prze­ glądarce Google Chrome.

Twoja przegl ądarka n i e obst uguje znaczn i ka vi deo . c/v i deo> Rysunek 2.23.

Przykładfilmu osadzonego na stronie WWW

�

0: 1 4

•

�,»

_

Za osadzenie obrazu wideo na stronie WWW odpowiada znacznik

III

,

który występuje w parze z kilkoma dodatkowymi atrybutami. Otwierający znacznik

zawiera obowiązkowy atrybut

s re=" " ,

w którym powinno znaleźć się od­

wołanie do konkretnego pliku z filmem. Pomiędzy znacznikami

po­

winniśmy zawrzeć tekst informuj ący o tym, że dana przeglądarka nie wspiera języka HTML5 i nie potrafi wyświetlić filmu. Opcj onalnie w otwierającym znaczniku

możemy zdefiniować wymiary okna,

w którym odtwarzany będzie film. Za określenie wysokości i szerokości odpowiadaj ą atrybuty

height="

" i

wi dth= " " .

Brak zadeklarowanych wymiarów spowoduje, że

przeglądarka domyślnie wyświetli okno filmu w takiej rozdzielczości, w jakiej go za­ kodowano .

Tworzenie stron WWW w praktyce

56

Twoja przegl ądarka n i e obst uguje znaczn i ka vi deo . c/v i deo> Następnym opcjonalnym, ale moim zdaniem istotnym elementem jest atrybut

l s = " cant ra l s " ,

cantra­

który odpowiada za wyświetlenie paska postępu, przycisku odtwarza­

nia oraz zmiany głośności. Brak atrybutu spowoduje, że pod oknem, w którym wy­ świetlany jest film, nie poj awi się belka widoczna na rysunku 2.23 . Rozwiązanie takie może się przydać, gdy na stronie umieszczasz na przykład baner reklamy lub gdy film wideo jest integralnym elementem wyglądu strony WWW.

Twoja przegl ądarka n i e obst uguje znaczn i ka vi deo . c/v i deo> Jeżeli udostępniony film ma być odtwarzany automatycznie po wej ściu na stronę, mu­ sisz skorzystać z kolejnego atrybutu, o nazwie

autap l ay= " autap l ay" .

Dzięki takiemu

rozwiązaniu gość odwiedzający Twoją stronę nie musi podej mować żadnych działań, aby rozpocząć odtwarzanie filmu.

Twoja przegl ądarka n i e obst uguje znaczn i ka vi deo . c/v i deo> Za pomocą atrybutu

prel aad = " prel aad "

możesz wymusić, aby odtwarzanie filmu było

możliwe dopiero po jego pobraniu na komputer osoby odwiedzaj ącej strony . Rozwią­ zanie to pozwoli uniknąć problemów z płynnością w odtwarzaniu obrazu i dźwięku.

Twoja przegl ądarka n i e obst uguje znaczn i ka vi deo . c/v i deo> Ostatnim alternatywnym atrybutem jest

l aap=" l aap " ,

który odpowiada za wymuszenie

ciągłego odtwarzania tego samego filmu. Dokładniej mówiąc, po zakończeniu odtwa­ rzania przeglądarka sama ponownie uruchomi film i czynności będzie powtarzać, do­ póki użytkownik strony nie zatrzyma tego procesu lub j ej nie opuści.

Twoja przegl ądarka n i e obst uguje znaczn i ka vi deo . c/v i deo> Maj ąc na uwadze problemy z odtwarzaniem formatów

. ogg

i . mp4 przez różne prze­

glądarki, warto zadać sobie trud i ten sam fihn zakodować w obu formatach, a następnie oba podłączyć do strony . Można to zrobić, stosuj ąc nieco zmodyfikowany zapis.



Twoj a przegl ądarka n i e obst uguj e znacz n i ka v i de o . c/vi deo>

Rozdział 2 . • Język HTML - od tego wszystko się zaczyna

57

Dzięki takiemu podej ściu przeglądarka sama będzie mogła wybrać format, który wspiera, i poprawnie wyświetli Twój film. Niestety, działanie takie wymaga dodatkowej pracy, polegaj ącej na zakodowaniu filmu w dwóch różnych formatach, ale to jedyny sposób, aby poszerzyć krąg przeglądarek, na których zadziała Twój film.

Publ i kacja plików audio Skoro można na stronie WWW osadzić obrazy wideo, to rzeczą oczywistą jest to, że da się również zrobić to samo w odniesieniu do plików audio . W chwili obecnej pliki audio publikowane na stronie powinny być zapisane w jednym z trzech formatów:

. ogg lub

.mp3,

. w ave.

Obsługa przez różne przeglądarki osadzania plików audio przy wykorzystaniu HTML5 jest jeszcze w powijakach. Internet Explorer w wersji

8.

nie wspiera niezbędnych

znaczników. Natomiast pozostałe wiodące przeglądarki mają różne problemy z ob­ sługą dostępnych formatów kodowania dźwięku. Tabela 2 . 3 widoczna poniżej przed­ stawia wsparcie dla omawianego znacznika oraz dostępnych formatów kompresji. Tabela 2.3. Obsługa formatów . ogg, .wave i .mp3 w wiodących przeglądarkach I nternet Explorer 8

Mozilla Firefox 31

Google Chrome 35

.ogg

Nie

Nie

Nie

.mp3

Nie

Nie

Tak

.wave

Nie

Tak

Tak

Na początku przyjrzyj my się prostemu przykładowi, który pozwoli nam osadzić plik audio w kodzie strony . Na rysunku 2.24 widać efekt działania.

Twoja przegl ądarka n i e obst uguje znaczn i ka aud i o .

Rysunek 2.24.

Przykład pliku audio osadzonego na stronie

... •

O:CO

�»)) �

Za osadzenie obrazu wideo na stronie WWW odpowiada znacznik

,

który występuje w parze z kilkoma dodatkowymi atrybutami. Otwierający znacznik

zawiera obowiązkowy atrybut src=" " , w którym powinno znaleźć się odwołanie do konkretnego pliku audio . Pomiędzy znacznikami powinniśmy zawrzeć tekst informuj ący o tym, że dana przeglądarka nie wspiera języka HTML5 i nie potrafi odtworzyć pliku audio. Opcjonalnym, ale moim zdaniem istotnym, elementem jest atrybut

control s = " control s " ,

który odpowiada za wyświetlenie paska postępu, przycisku odtwarzania oraz zmiany głośności. Brak atrybutu spowoduje, że na stronie nie poj awi się belka widoczna na rysunku 2.24.

Tworzenie stron WWW w praktyce

58

Twoja przegl ądarka n i e obst uguje znaczn i ka aud i o .

Jeżeli udostępniony plik audio ma być odtwarzany automatycznie po wej ściu na stro­ nę, musisz skorzystać z kolej nego atrybutu, o nazwie

autopl ay= " autopl ay " .

Dzięki

takiemu rozwiązaniu gość odwiedzający Twoj ą stronę nie musi podej mować żadnych działań, aby uruchomić odtwarzanie.

Twoja przegl ądarka n i e obst uguje znaczn i ka aud i o .

Za pomocą atrybutu

pre l oad= " pre l oad "

możesz wymusić, aby odtwarzanie pliku au­

dio było możliwe dopiero po j ego pobraniu na komputer osoby odwiedzaj ącej strony . Rozwiązanie to pozwoli uniknąć problemów z płynnością w odtwarzaniu dźwięku.

Twoja przegl ądarka n i e obst uguje znaczn i ka aud i o .

Ostatnim alternatywnym atrybutem jest

l oop= " l oop " ,

który odpowiada za wymusze­

nie ciągłego odtwarzania tego samego pliku audio . Dokładniej mówiąc, po zakończe­ niu odtwarzania przeglądarka sama ponownie uruchomi plik audio i czynności będzie powtarzać, dopóki użytkownik strony nie zatrzyma tego procesu lub j ej nie opuści.

Twoja przegl ądarka n i e obst uguje znaczn i ka aud i o .

Maj ąc na uwadze problemy z odtwarzaniem formatów . mp3,

. w ave

oraz

. ogg

przez

różne przeglądarki, warto zadać sobie trud i ten sam plik zakodować w formatach . mp3 i

. ogg,

a następnie podłączyć je pod stronę. Można to zrobić, stosuj ąc nieco zmodyfi­

kowany zapis.



Twoj a przegl ądarka n i e obst uguj e znacz n i ka aud i o .

Dzięki takiemu podej ściu przeglądarka sama będzie mogła wybrać format, który wspiera, i poprawnie odtworzy Twój plik audio. Niestety, działanie takie wymaga do­ datkowej pracy, polegającej na zakodowaniu dźwięku w dwóch różnych formatach, ale to jedyny sposób, aby poszerzyć krąg przeglądarek, na których zadziała Twoja strona.

Publ i kacja animacj i Flash Wstępna wersja piątej odsłony specyfikacji języka HTML wprowadza nowy znacz­ nik, który znacznie upraszcza osadzanie na stronie animacj i wykonanych w technolo­ gii Adobe Flash. Mam tutaj na myśli znacznik

.

Rozdział 2 . • Język HTML

Znacznik

-

od tego wszystko się zaczyna

59

występuje wraz z atrybutem

src = "

", w którym powinno

maleźć się odwołanie do konkretnego pliku z animacją. Dodatkowo omawiany znacznik może być uzupełniony o atrybuty

w i dth="

" i

height=" " , które odpowiadają za określe­

nie szerokości i wysokości osadzonego elementu. Przykładowy kod HTML odpowie­ dzialny za osadzenie animacj i Flash może mieć następującą postać.



Dla przypomnienia pozwoliłem sobie zamieścić przykładowy kod, który wykorzy­ stywaliśmy w przeszłości w sytuacj i, gdy na stronie miala zostać osadzona animacj a Flash. Różnice widać gołym okiem!





Ram ki osadzone Ramki osadzone (zwane również ramkami pływaj ącymi) to nic innego jak swego ro­ dzaju " okna" na stronie, w których wyświetlana jest zawartość innej strony bądź pliku HTML. Rozwiązanie takie przydaje się w różnych sytuacjach i mimo swoich licznych wad i ograniczeń jest bardzo często stosowane np. do osadzania banerów reklamowych. Za osadzanie ramki pływaj ącej odpowiada znacznik

,

który jest

uzupełniany o kilka dodatkowych atrybutów. Pierwszym i najważniej szym atrybutem jest

s rc="

" , który odpowiada za wskazanie i podłączenie pod ramkę konkretnego

dokumentu lub strony. Listing widoczny poniżej prezentuj e minimalny zapis, który jest niezbędny do tego, aby na stronie osadzić działającą pływaj ącą ramkę . Natomiast na rysunku 2.25 widać efekt działania przykładowego kodu.

. Pierw­ szą nowością jest atrybut seaml es s = " " , który pozwala w taki sposób osadzić ramkę, że stanie się ona częścią dokumentu, a krawędzie i paski przewijania, które są wi­ doczne na rysunku 2.26, znikną. W przeszłości do osiągnięcia tego samego celu uży­ wało się atrybutów frameborder oraz scrol l i ng, które w piątej specyfikacji HTML zostały usunięte. Niestety, gdy pracowałem nad niniejszą książką, przeglądarki, z których korzystałem, nie potrafiły prawidłowo zinterpretować atrybutu seaml ess= " " .

Kolejnym nowym atrybutem, stosowanym w parze ze znacznikiem < i frame>, jest srcdoc= " " , który służy do bezpiecznego osadzania potencjalnie niebezpiecznych treści. Dzięki atrybutowi srcdoc = " " osadzona treść znajdzie się w tzw. piaskownicy i będzie oddzielona od systemu operacyjnego, co pozwoli lepiej chronić system przed zagrożeniami. Poniżej zamieszczam przykład poprawnie użytego atrybutu:

Zwróć uwagę na to, że atrybut srcdoc= " " występuje równolegle z obowiązkowym atry­ butem src= " " . Takie rozwiązanie jest konieczne na wypadek, gdyby przeglądarka nie obsługiwała nowego elementu. Dokładniej mówiąc, jeżeli strona zostanie otwarta w prze­ glądarce zgodnej z piątą odsłoną języka HTML i ze wsparciem dla atrybutu srcdoc= " "

Rozdział 2 . • Język HTML

-

od tego wszystko się zaczyna

61

to zawartość ramki zostanie otwarta przy wykorzystaniu bezpiecznych mechanizmów. Natomiast gdy używamy starszej wersji przeglądarki, bez wsparcia dla nowego atry­ butu, zawartość ramki zostanie otwarta w sposób klasyczny, bez dodatkowej ochrony. Gdy opisywałem osadzanie ramek w dokumencie HTML, wsparcie dla nowego atry­ butu oferowała jedynie naj nowsza wersja przeglądarki Mozilla Firefox. Ostatnim nowym atrybutem powiązanym z osadzonymi ramkami jest sandbox= " " Element ten odpowiada za ustawienie dodatkowych restrykcji dla treści umieszczo­ nych w osadzonej ramce. Atrybut może przybrać następujące wartości: • a 1 1 ow-top-nav i gat i on - umożliwia nawigowanie najwyższego rodzica

kontekstu. Mówiąc prościej, możemy z poziomu ramki kontrolować stronę, na której została ona wykorzystana. • al l ow-same-or i g i n - umożliwia traktowanie treści wyświetlanej

w osadzonej ramce jako elementu o tym samym pochodzeniu. • a 1 1 ow- forms - pozwala na działanie formularzy dostępnych na osadzonej

stronie. • a 1 1 ow- seri pts - pozwala na działanie skryptów dostępnych na osadzonej

stronie. Warto jednak mieć na uwadze, że nadal blokowany jest skrypt odpowiedzialny za otwieranie nowych okienek. Wartości atrybutu sandbox= " " możemy ze sobą dowolnie łączyć, tak jak to widać w poniższym przykładzie:

Hi perłącza Internet nie mógłby istnieć w obecnej formie bez hiperłączy, czyli odnośników. Wyobraź sobie, że wchodzisz na stronę, na której nie ma odnośników - musiałbyś wówczas znać nazwy wszystkich podstron, by móc je ręcznie wczytać w celu dalszego przeglą­ dania. Jest to niewykonalne, ponieważ nie ma możliwości zmuszenia autora strony, by przyjął z góry narzucone nazewnictwo poszczególnych jej części. Poza tym, w jaki sposób sporządzić listę takich nazw? Innym rozwiązaniem problemu braku hiperłączy mogłoby być tworzenie długich po­ jedynczych stron. Wyobraź sobie jednak, jak przy takim rozwiązaniu musiałby wy­ glądać portal internetowy, który z założenia jest zbiorem odnośników. Na szczęście twórcy HTML przewidzieli możliwość umieszczania hiperłączy, dzięki czemu nie ma najmniejszego problemu z tym, by przeglądać każdą ze stron bez względu na to, czym jest i kto ją tworzył. Jak zapewne zauważyłeś podczas swoich sieciowych wędrówek, hiperłącza prowadzą na inne podstrony danego serwisu czy też przenoszą Cię jednym kliknięciem myszy w zupełnie inne miejsce, często leżące na drugiej półkuli. Jest to naprawdę niesamowita

Tworzenie stron WWW w praktyce

62

sprawa, ale to nie wszystkie możliwości odnośników. Otóż możesz jeszcze stworzyć odnośniki do poczty, grup dyskusyjnych, plików, a także programów. Hiperłącze z założenia jest odnośnikiem prowadzącym w inne miejsce - na inną stronę. Zanim wprowadzono możliwość publikacji grafiki na stronie, hiperłącza występowały jedynie w formie tekstowej i domyślnie były oznaczone za pomocą niebieskiego pod­ kreślonego tekstu. Odnośniki już odwiedzone miały kolor fioletowy, dzięki czemu łatwo było odróżnić to, co już widzieliśmy, od tego, co namjeszcze zostało do obejrzenia.

H i perłącza tekstowe Budowa hiperłącza tekstowego jest stosunkowo prosta i wygląda tak: Kl i kn i j t u , by dow i edzi eć s i ę czegoś wi ęcej o mn i e .

Jak łatwo wywnioskować, znacznikiem odpowiedzialnym za odsyłacze jest , wzbogacony o pewne atrybuty. I tak dla odsyłacza takim obowiązkowym atrybutem jest href= " " , określający, do jakiego dokumentu bądź miejsca ma prowadzić odno­ śnik. Nasz odnośnik ma więc postać : Opi s Op i s Opi s

To tylko pierwsza część odsyłacza, informująca o tym, gdzie mamy się przenieść. Teraz należy opisać odsyłacz tak, by był widoczny i dostępny ze strony. Niezbędny opis umieszczamy pomiędzy znacznikiem otwierającym i zamykającym. Strona wydawn i ctwa HELION

Musisz oczywiście pamiętać o znaczniku zamykającym < la>, gdyż bez niego opis na­ szego odsyłacza będzie nieskończenie długi. Znacznik należy do tych elementów, w przypadku których brak domknięcia ma niszczący wpływ na stronę, dlatego bezwzględnie musisz pamiętać o jego zamknię­ ciu. Na rysunku 2.27 przedstawiłem przykład strony, na której nie domknąłem odno­ śnika - zobacz, co się stało. Rysunek 2.27.

Przykłady odnośników. Pierwszy odnośnik został poprawnie wstawiony, natomiast dla drugiego hiperłącza zapomniałem domknąć znacznik

D'ł,;G1l1 CAD MagazvIL Czasopismo poświęcone zagadnieniom CAD/CAlWCAE;

przeznaczone dla inżynietÓW, mechaników i konstruktorów, poświęcone także architektom i udowlańc om,

b

czyli branży AEC.

Można w

nim znaleźć

artykuły

opisujące konkretne programy, porady doświadczonych użytkowników i opisy

wdrożeń w polskich realiach.

C.I\D Magazyn. Czasopismo poś\\�econe zagadnieniom C.I\D/CAM/C.ĄE; przeznaczone dla inżvnietów. mechaników i konstruktorów. poś\�econe także architektom i budowlańcom. czvli branż\' .ĄEC. Można w nim znaleźć

artvkul"

opisujace konkretne program". porady doś\\�adczonych użvtkowników i opisy wdrożeń w polskich realiach.

Rozdział 2 . • Język HTML - od tego wszystko się zaczyna

63

Jak widzisz, na rysunku 2.27 dla pierwszego elementu strony odnośnik obejmuje je­ dynie słowa CAD Magazyn, drugi element przedstawia sytuację, gdy nie domknąłem znacznika , w efekcie czego odsyłaczem jest cały tekst występujący po znacz­ niku otwierającym. Listing dla rysunku 2.27 zamieściłem poniżej , byś mógł dokładnie przyjrzeć się przyczynie powstania problemu. Dodatkowo pogrubiłem fragment od­ powiedzialny za definicję odnośnika. Wystarczy, że porównasz obie części listingu:

CAD Magazyn . Czasopi smo poświ ęcone zagadn i en i om

CADjCAMjCA E ; przeznaczone dl a i nżyn i erów, mechan i ków i kon struktorów , poświ ęcone także arc h i tektom i budowl ańcom , czyl i branży AEC . Można w n i m znal ezc arty kuty opi suj ące konkretne programy , porady doświ adczonych użyt kown i ków i opi sy wdrożeń w pol s k i ch real i ach .

CAD Magazyn . Czasopi smo poświ ęcone zagadn i e n i om CADjCAMjCA E ; przeznaczone dl a i nżyni erów, mechani ków i kon s tru ktorów , poświ ęcone także arc h i tektom i budowl ańcom , czyl i branży AEC . Można w nim znal ezc arty kuty opi s uj ące kon kretne programy , porady doświ adczonych użytkown i ków i opi sy wdrożeń w pol s k i ch real i ach .

Tabela 2.4 przedstawia konstrukcję odsyłaczy do różnych miejsc lub elementów wi­ tryny. Pierwszy to odwołanie do pliku strony, drugi jest odsyłaczem do konkretnego obrazka, kolejny to hiperłącze do innej witryny dostępnej w sieci, a ostatni to łącze z serwerem FTP, na którym możesz przechowywać swoje programy lub inne pliki. Tabela 2.4. Przykłady odsyłaczy

dokumenty HTML,TXT,etc.

Op i s

obrazek

Opi s

adresy URL

Op i s

adresy FTP

Opi s

Nieco inaczej wygląda sprawa odsyłacza do adresu e-mail, który umożliwia otwarcie odpowiedniego okna programu pocztowego w celu wysłania poczty. Musisz jednak pamiętać, że jeżeli oglądający Twoją stronę nie posiada konta e-mail, to w ten sposób nie będzie mógł do Ciebie napisać. Dokładniej mówiąc, by taki odsyłacz zadziałał, osoba, która go klika, musi mieć na swoim komputerze skonfigurowane oprogramowanie do obsługi poczty e-mail, np. Mozilla Thunderbird czy Poczta Systemu Windows. Pocztowe hiperłącze ma następującą postać: Wy ś l i j do mn i e pocz tę Jak widzisz, w cudzysłowie atrybutu h re f= " " znajduje się przed adresem e-mail sło­ wo ma i l to : oraz dwukropek, który oddziela tę deklarację od adresu e-mail.

Tworzenie stron WWW w praktyce

64

Odsyłacz pocztowy możesz nieznacznie rozbudować, dzięki czemu istnieje możli­ wość narzucenia tematu wiadomości. Odpowiednia konstrukcja znajduje się poniżej . Oceń moj ą k s i ąż kę

Zmiana pojawia się również w cudzysłowie atrybutu h ref= " " , jednak tym razem wy­ stępuje po adresie e-mail i ma postać ? s ubj ect=temat wi adomosc i . Po kliknięciu tak skonstruowanego odsyłacza zostanie otwarte okno nowej wiadomości, a w polu te­ matu znajdzie się tekst: Ocena książki - patrz rysunek 2.28. Rysunek 2.28.

Okno służące do wysyłania poczty. Zwróć uwagę na to, jak wygląda zaznaczony obszar (pola Do oraz Temat). Są tam informacje pobrane z pocztowego hiperłącza

I�

- 1 .r . IW .

Wyślij

Pisownia

Na4awca: Do,

lemat: eBook.point.pl ·

Załącz

[8

iI

Zabezpieczenia

.

1iiiI

ZapiSIjako

.

e.lik

�cłycja �idok Qpcje �arzędzia

Pomos.

Bartosz Danowski < b [email protected]>bortek@donowshpl b,rt.k@d,now,k;.pl

I Ocena Icsiążki

Reset konta

*Bartosz Danows ki *

Organizacyjne ·

: :

Powiadomienie o zalożeniu konta - NASBl.pl

http : //danows ki . pl

Va riabies •

Other ·

: :

*Google �* = > http : //danowski . pl/ ? p=394

Rozbudowana postać hiperłącza jest bardzo wygodna w sytuacji, gdy chcesz narzucić stały temat korespondencji - na przykład na stronie masz dział i odnośnik do Twojej poczty, zatytułowany Uwagi o serwisie WWw. Jeżeli ustawisz temat, łatwo będziesz mógł w przyszłości sprawdzić, skąd przyszła poczta. Oczywiście zmiana takiego na­ rzuconego tematu wiadomości jest możliwa w oknie widocznym na rysunku 2.28, jednak zapewniam Cię, że nie jest to częsta sytuacja, gdyż większość intemautów jest bardzo leniwa i nie chce się jej wpisywać nowego tematu wiadomości lub go modyfi­ kować. Sam dostaję codziennie dziesiątki listów i spora ich liczba jest pozbawiona tematu lub ma on postać częściową.

H i perłącza graficzne Skoro już wiesz, w jaki sposób stworzyć odsyłacz tekstowy oraz umieścić grafikę na stronie WWW, pora zastanowić się nad sposobem tworzenia hiperłączy graficznych. Na rysunku 2.29 przedstawiłem odsyłacze graficzne, które mają postać przycisków. Oczywiście nie oznacza to, że tak musi być zawsze, o czym przekonasz się za chwilę. W celu stworzenia graficznego odsyłacza musisz połączyć dotychczas uzyskaną wie­ dzę. Przypomnij sobie znacznik odpowiedzialny za wstawianie obrazka oraz tworzenie hiperłącza. Poniżej zamieściłem prosty przykład odpowiedniego połączenia wspo­ mnianych elementów języka HTML:

Rozdział 2 . • Język HTML

Rysunek 2.29.

Przykład graficznego hiperłącza

-

od tego wszystko się zaczyna

65

M i necraft. Crafting, czary i świetna za bawa Autorzy: Bartosz Danowski, Jakub Danowski

Ocena: Stro n :

104

••

Bądź pierwszym, który oceni tę książkę

Oruk (oprawa: m i ękka)

Cena:

I

24,90 zł

�@

" Tweetnij

5

�

8+1

39



Jak widzisz, dodanie graficznego hiperłącza nie jest niczym skomplikowanym i bez większego problemu sobie z tym poradzisz.

Mapy odsyłaczy Każdy obrazek może być hiperłączem do jakiegoś pliku lub innej strony. Zwróć uwa­ gę, że dotyczy to całego obrazka. Z chwilą umożliwienia publikacji grafiki na stronie i w erze stron opartych na grafice zaistniała potrzeba definiowania mapy odsyłaczy inaczej mówiąc, obrazka, którego różne części są odsyłaczami do innych miej sc. Pierwszym rozwiązaniem, jakie się nasuwa, jest pocięcie naszego obrazka na mniej­ sze części i zadeklarowanie dla każdej z nich innego odsyłacza. Jest to rozwiązanie dobre i często stosowane, ale nie zawsze spełnia ono oczekiwania projektantów. Ko­ lejną metodąjest budowa mapy odsyłaczy. W tym podrozdziale postaram się zbudować mapę za pomocą zwykłego programu graficznego (Paint Shop Pro) oraz edytora tekstowego. Za deklarację mapy odsyłaczy odpowiada znacznik . Zawiera on obowiąz­ kowy atrybut name = " " , który później jest wykorzystywany przy osadzaniu obrazka za pomocą znacznika . Wewnątrz znajduje się znacznik , który definiuje aktywny obszar danego hiperłącza. Jak widzisz na poniższym przykładzie, znacznik zawiera następujące atrybuty : • href= " " - atrybut znany z definicji hiperłączy; • coords=" " - definiuje współrzędne krańcowych punktów aktywnego obszaru; • shape = " " - określa, czy aktywny obszar jest: kołem, kwadratem, obszarem

dowolnym; przyjmuje następujące wartości:

Tworzenie stron WWW w praktyce

66

• c i rcl e - koło, • rect - kwadrat, • po l ygon - wielokąt; • t i t l e = " " - odpowiednik atrybutu a l t, omawianego przy okazji wstawiania

obrazków na stronę. W praktyce musisz otworzyć obrazek w programie graficznym, np. Paint Shop Pro, i odczytać współrzędne obszarów aktywnych. Na rysunkach 2 . 3 0 oraz 2 . 3 1 zazna­ czyłem pewne obszary - przyjrzyj się im. Rysunek 2.30.

t.S Ja!;( Palnt Shop Pro - [Image7'*' [2:1] (Background»

,

Wyznaczanie punktów krańcowych na mapie odsyłaczy - lewy gómy róg

'? / " ./ tp El

; �������.