HTML HTML (ang. Hyper Text Markup Language, pl. hipertekstowy język znaczników), to język składający się ze znaczników (ang. tags) oraz reguł ich poprawnego stosowania (gramatyki, syntaktyki), stosowany do pisania stron WWW. 1
EDYTOR Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie bezpłatnych (freeware). 2
Struktura dokumentu Dokument HTML jest zwykłym dokumentem tekstowym o ustalonym kodowaniu znaków składającym się z elementów /tagów/ znaczników. Element zwykle składa się z trzech części: a) znacznika początkowego (w formie <znacznik>), b) zawartości elementu (tekst lub inne elementy), c) znacznika końcowego (w formie </znacznik>) Znacznik nie jest widoczny na ekranie, widoczne są tylko efekty jego działania (np. wstawienie obrazka). 3
Struktura dokumentu W języku XHTML wszystkie znaczniki muszą być pisane obowiązkowo małymi literami. Dlatego zalecam już od początku uczyć się właśnie tej zasady! Znaczniki mogą też mieć przypisane atrybuty precyzujące opis danego elementu. Atrybuty wraz z ich wartościami wpisuje się wewnątrz znacznika początkowego : <znacznik atrybut="wartość" atrybut2="wartość2"... atrybutn="wartośćn"> 4
OSNOWA DOKUMENTU Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, które szkieletu nie zawierają (czasem tylko jego część), ale odradzamy taką praktykę, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami. 5
OSNOWA DOKUMENTU Wygląda to następująco: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta name="description" content="tu wpisz opis zawartości strony" /> <meta name="keywords" content="tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <title>tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> Większość edytorów HTML przy tworzeniu nowego dokumentu automatycznie wpisuje własny szablon dokumentu (jak powyżej lub zbliżony) 6
OSNOWA DOKUMENTU Pierwszy znacznik <!DOCTYPE html PUBLIC to deklaracja typu dokumentu (DTD - document type declaration) określająca poziom użytego na stronie języka HTML. Może występować w 3 wersjach: 1. Strict DTD - (ścisła) zawiera wszystkie elementy i atrybuty, które nie są zdeprecjonowane (nie deprecated) oraz nie pojawiają się w dokumentach z ramkami (ponadto nie obejmuje elementu IFRAME ani atrybutu target="...") <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> lub <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 7
OSNOWA DOKUMENTU 2. Transitional DTD - (przejściowa) lub inaczej loose DTD ("luźna") - zawiera wszystko co w Strict DTD plus elementy i atrybuty zdeprecjonowane oraz element IFRAME i atrybut target="... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3. Frameset DTD - (dla ramek) zawiera wszystko co w Transitional DTD plus elementy odnoszące się do ramek: FRAME, FRAMESET oraz NOFRAMES (używane na stronach startowych ramek) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> lub <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> 8
POLECENIE <title> Między znacznikami <head> i </head> powinno się znaleźć polecenie <title> </title>. <head> <title>tytuł strony</title> </head> TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład: <head> <title>kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</title> </head> 9
ZADANIE 1 Plik szablon.html otwórz w edytorze ked. Skopiuj poniższy tekst między znaczniki <title> i </title> i zapisz plik pod nazwą zadanie1.html. Otwórz plik przy pomocy przeglądarki Internet Explorer lub Firefox i zaobserwuj gdzie pojawił się tekst Podstawy języka HTML - poradnik webmastera: HTML dla bardzo początkujących". Tekst do skopiowania Podstawy języka HTML - poradnik webmastera: HTML dla bardzo początkujących 10
INFORMACJA META Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu. Zaleca się stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to międzynarodowy standard, a "przy okazji" także Polska Norma. Zapis informacji wygląda następująco: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> Można też stosować zapis: <meta http-equiv="content-language" content="pl" /> 11
ZADANIE 2 Wróć do edytora ked i popraw w pliku zadanie1.html ustawienia dotyczące języka - w znaczniku meta zmień stronę kodową charset=iso-8859-1 na charset=iso-8859-2 W treści strony wprowadź polskie znaki diakrytyczne. Zapisz plik i sprawdź, czy polskie litery są poprawnie wyświetlane w przeglądarce. 12
KOLOR TŁA DOKUMENTU Gdy w dokumencie znajduje się para znaczników <body> i </body>, możemy zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj biały). Możemy wstawić polecenie: <body bgcolor="kolor"> przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Sugerujemy używanie wartości heksadecymalnych, jako bardziej uniwersalnych (tabela kolorów) 13
KOLOR TŁA DOKUMENTU Atrybut bgcolor jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów. Lepiej zatem użyć polecenia: <body style="background-color: kolor; "> Pamiętaj, że nie powinno się używać barw bardzo jaskrawych jako kolory tła. Sprawiają one, że oczy szybko się męczą i dodatkowo zaciemniają treść strony. Dodatkowo należy pamiętać, aby na ustalonym kolorze tła, tekst był dobrze widoczny. 14
ZADANIE 3 Otwórz plik zadanie1.html i zapisz go pod nazwą zadanie3.html. Pomiędzy znacznikami <body> </body> zdefiniuj kolor żółty tła strony i obejrzyj efekt w przeglądarce. Następnie zdefiniuj inny kolor przy pomocy kodu RGB. Skorzystaj z tabeli kolorów. 15
OBRAZ JAKO TŁO DOKUMENTU Tłem dokumentu może być również obraz. Należy pamiętać, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie. Postać polecenia: <body style="background-image: url(ścieżka dostępu do obrazka/nazwa_obrazka);"> Jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek (jeśli jest to inny katalog niż ten w którym zapisaliśmy stronę). Dzięki atrybutowi background-repeat możliwe jest powtarzanie obrazka w pionie lub poziomie. Zainteresowanym polecam stronę kursu html: http://www.kurshtml.edu.pl/css/powtarzanie,tlo.html 16
ZADANIE 4 Otwórz plik zadanie3.html i zapisz go pod nazwą zadanie4.html. Pomiędzy znacznikami <body> </body> zdefiniuj obrazkowe tło strony. Jako tło wykorzystaj plik kotschred.jpg z folderu grafika. Obejrzyj efekt w przeglądarce. 17
Tytuł W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <hn> </hn>. Znak h oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <h1> i zamykającego </h1>. Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością znaków. Wprowadzamy je za pomocą poleceń h1, h2 itd. 18
Tytuł Tytuł stopnia pierwszego Tytuł stopnia drugiego Tytuł stopnia trzeciego Tytuł stopnia czwartego Tytuł stopnia piątego Tytuł stopnia szóstego 19
ZADANIE 5 Otwórz plik zadanie3.html i zapisz pod nazwą zadanie5.html. Pomiędzy znacznikami body zdefiniuj tytuły stopnia od 1 do 6. 20
AKAPIT I WIERSZ Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <p> (p = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Znacznik akapitu zamykamy ma postać </p>. 21
AKAPIT I WIERSZ Przykład: <p>to jest treść pierwszego akapitu</p> <p>to jest treść drugiego akapitu</p> Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <br />, które przenosi tekst o jeden wiersz w dół wprowadzając dodatkową interlinię. To jest pierwszy wiersz <br /> To jest drugi wiersz <br /> To jest trzeci wiersz <br /> To jest czwarty wiersz <br /> Ponadto polecenie <br /> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <br /> pozwala poszerzyć pionowy odstęp między elementami. 22
ZADANIE 6 Otwórz plik zadanie5.html i zapisz go pod nazwą zadanie6.html. Pomiędzy znacznikami <body> </body> pozostaw tylko tytuł pierwszego poziomu, a pod nim wklej teksty z pliku teksty.txt. Teksty podziel na 4 akapity oddzielone jedną linią odstępu. 23
POZIOMA LINIA Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <hr /> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Linii możemy nadać atrybuty: o grubość w pikselach <hr size= 5 /> o długość określoną w pikselach <hr width= 300 /> o lub w procencie szerokości strony <hr width= 50% /> o wyrównanie na stronie (domyślnie na środku) <hr align= left /> Atrybuty można łączyć, np.: <hr align= right size= 8 width= 200 color= red /> 24
ZADANIE 7 Otwórz plik zadanie6.html Między akapity wstaw poziomą linię o następującym formatowaniu: o linia 1: o grubości 4px, w kolorze brązowym, 100% szerokości strony, o linia 2: o grubości 2 px, w kolorze zielonym, 50% szerokości strony, wyrównana do prawej strony, o linia 3: o grubości 10px, w kolorze czerwonym, szerokości 300px, wyrównana do lewej strony. Zapisz plik jako zadanie7.html. 25
ATRYBUTY CZCIONKI Gdyby autorowi strony znudził się tekst, w którym czcionka ma ten sam kolor i wielkość, zawsze może się posłużyć dodatkowymi poleceniami, zmieniającymi obie cechy. W dokumentach HTML stosuje się nieco inną definicję wielkości czcionki niż przyjęta w edytorach tekstów. Podstawowa czcionka ma wielkość 3 jednostek (nie mylić z wielkością w punktach typograficznych) i jest zazwyczaj wyświetlana w przeglądarkach WWW jako czcionka 10-12-punktowa. Przeglądarki pozwalają na ogół zdefiniować, jaka wartość punktowa odpowiada czcionce o wielkości 3. W dokumencie możemy stosować czcionkę o wielkości od 1 do 7. Im większa wartość, tym większa czcionka w przeglądarce. 26
ATRYBUTY CZCIONKI Atrybuty czcionki Rozmiar, kolor, tło i krój czcionki można określić w stylach znacznika <p>...</p> o o o o font-size - rozmiar czcionki można podać w wielkościach absolutnych (od xx-small do xx-large), punktach - pt, pikselach - px i jednostkach metrycznych, np. 1cm color - kolor czcionki background-color kolor tła font-family - krój czcionki Przykład <p style= color: navy; background-color: gray; font-size: 15pt; font-family:helvetica;"> jakiś tekst </p> 27
WYRÓŻNIANIE TEKSTU Wciąż można korzystać ze starych znaczników wyróżniania tekstu: o <b> tekst pogrubiony </b> o <i> tekst pochylony </i> o <u> tekst podkreślony </u> o <strike> tekst przekreślony </strike> o <tt> tekst maszynowy </tt> o <sup> indeks górny </sup> o <sub> indeks dolny </sub> o <blink> tekst migający </blink> 28
WYRÓŻNIANIE TEKSTU Wyróżnienie tekstu o text-decoration: dekoracja gdzie jako "dekoracja" należy podać: none - bez zmian underline - podkreślenie line-through - przekreślenie overline - nadkreślenie blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7) Przykład <p style= color: navy; font-size: 15pt; font-decoration: underline;"> jakiś tekst </p> 29
WYRÓŻNIANIE TEKSTU Wyróżnienie tekstu wygląd czcionki o font-style: wartości gdzie jako wartości" można podać: normal - bez zmian italic - kursywa oblique - pochylony Przykład <p style= color: black; font-style: italic; > jakiś tekst </p> 30
WYRÓŻNIANIE TEKSTU Wyróżnienie tekstu grubość czcionki o font-weight: wartości gdzie jako wartości" można podać: normal bold - pogrubiona wartość liczbowa 100, 200,, 900 Przykład <p style= color: grey; font-weight: bold; > jakiś tekst </p> 31
WYRÓWNANIE TEKSTU Wyrównanie tekstu z użyciem styli ma postać: o text-align: wyrównanie gdzie jako wyrównanie" należy podać: left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie) Przykład <p style= color: blue; text-align: justify; font-decoration: underline;"> jakiś tekst </p> 32
ZADANIE 8 Otwórz plik zadanie7.html i zapisz go pod nazwą zadanie8.html. Korzystając ze styli nadaj akapitom następujące formatowanie: o akapit 1: czcionka Times New Roman, rozmiar small, kolor tekstu biały, tło niebieskie, wyrównanie tekstu do lewej strony, test pogrubiony; o akapit 2: czcionka Arial, rozmiar 14 pt, kolor tekstu czerwony, tło szare, wyrównanie tekstu do prawej strony, tekst pochylony; o akapit 3: czcionka Courier, rozmiar 0.5cm, kolor tekstu zielony, tło żółte, wyrównanie do obu marginesów (tekst wyjustowany), tekst podkreślony. 33
ZADANIE 9 Otwórz plik zadanie8.html i zapisz pod nazwą zadanie9.html. o Wpisz dowolny tekst i nadaj mu formatowanie indeksu dolnego. o Wpisz dowolny tekst i nadaj mu formatowanie indeksu górnego. o Wstaw tekst z pliku kod.txt i otocz go znacznikami <pre> </pre>. Obejrzyj efekt w przeglądarce. Znacznik <pre> wprowadza tekst preformatowany, czyli napisany czcionką monotypiczną (o stałej szerokości znaku), który uwzględnia dodatkowe spacje, tabulację i znaki końca linii (nie trzeba stosować znaczników <br />) oraz nie jest automatycznie zawijany. 34
CYTATY o Odniesienie do źródła <cite>...</cite> Zwykle jest napisany kursywą. Można w nim umieścić np. imię i nazwisko autora, którego cytujemy (ale nie sam cytat!) albo tytuł książki, do której się odnosimy. o Krótki cytat <q>...</q> Umieszcza się w nim treść krótkich cytatów, które nie zawierają żadnych akapitów. Przeglądarki zwykle automatycznie ujmują tekst tego znacznika w znaki cudzysłowu. o Blok cytatu <blockquote>...</blockquote> Stosowany do dłuższych cytatów z kilkoma paragrafami. 35
ZADANIE 10 Otwórz plik zadanie9.html i zapisz go pod nazwą zadanie10.html. Akapit 4 zawiera kocie przesądy i przysłowie o kotach. Wykonaj następujące polecenia: o Tytuły Kocie przesądy i Przysłowie o kotach otocz znacznikami <cite> </cite>. o Pierwszy cytat umieść w znaczniku krótkiego cytatu <q>...</q>. o Drugi cytat umieść w znaczniku bloku cytatu <blockquote>...</blockquote>. 36
Grafika na stronie Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów WWW, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w Sieci. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a realiami technicznymi z drugiej strony. Pamiętajmy też, że trzeba zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi. Wiele ciekawych efektów graficznych można dziś osiągnąć za pomocą stylów, bez udziału samej grafiki. 37
Grafika na stronie W Internecie zostały przyjęte trzy podstawowe standardy graficzne GIF, JPG, a w ostatnich latach także PNG (Portable Network Graphics) które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. W ostatnim okresie spotyka się też grafiki w wektorowym, opartym na XML, formacie SVG (Scalable Vector Graphics). Ten typ grafiki obsługuje natywnie Opera i Firefox. 38
Grafika na stronie Grafikę możemy wprowadzić za pomocą polecenia: <img src="nazwa_pliku" alt= " nazwa alternatywna " /> W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. <img src="/ścieżka_dostępu/nazwa_pliku " alt=" nazwa alternatywna" /> Na przykład: <img src="grafika/obrazek_1.jpg" alt= "obrazek" /> 39
Wielkość obrazka Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane. <img src="grafika/kot.jpg" width="342" height="353" alt=" kotek" /> Możemy też ręcznie zmienić wielkość obrazka, podając arbitralnie inne rozmiary <img src="grafika/kot.jpg" width= "200" height= "150" alt="kotek" /> Należy przy tym pamiętać, ze zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarkę. 40
Obramowanie obrazka Obramowanie obrazka określa się w stylach podając np. rodzaj linii, jej grubość i kolor. Styl obramowania o border-style: styl obramowania gdzie jako styl obramowania można podać: none, dotted, dashed, solid, double, groove, ridge, inset, outset Przykład <img src="grafika/kot.jpg" style="border-style: solid; border-width: 2px; border-color: red; " /> 41
Obramowanie obrazka Grubość obramowania o border-width: wartość gdzie jako wartość można podać: thin (cienkie), medium (średnie), thick (grube), wartość w jednostkach Grubość obramowania o border-color: kolor Przykład <img src="grafika/kot.jpg" style="border-style: double; border-width: thin; border-color: blue; " /> 42
ZADANIE 11 Otwórz plik zadanie10.html i zapisz go pod nazwą zadanie11.html. Z folderu grafika wstaw trzy pliki graficzne przed trzema pierwszymi akapitami. Nadaj obrazkom następujące formatowanie: obraz1.jpg wymiary 256x192, obramowanie grube, kropkowane w kolorze zielonym, obraz2.jpg wymiary 288x216, podwójne obramowanie szerokości 6px w kolorze ciemnoniebieskim, obraz3.jpg wymiary 160x120, obramowanie cienkie, kreskowane w kolorze fioletowym. 43
Otaczanie obrazka Dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi elementami otrzymujemy dodając w stylach marginesy: o globalne margin, o cząstkowe: margin-top, margin-bottom, margin-left, margin-right. Przykład <img src="grafika/kot.jpg" style="margin-left: 50px; margin-right: 50px;" /> 44
Pozycjonowanie obrazka Pozycjonowanie grafiki przy prawym lub lewym marginesie strony (lub nadrzędnego bloku) uzyskamy stosując w stylach atrybut float. o float: wartość gdzie jako wartość można podać: left - grafika wyrównana do lewego marginesu right - grafika wyrównana do prawego marginesu Grafika jest swobodnie oblewana z lewej strony przy definicji float: right i z prawej strony przy definicji float: left. Przykład <img src= "grafika/kot.jpg" style=" float: left;" /> 45
Pozycjonowanie pionowe Do pionowego pozycjonowania elementów względem siebie wykorzystujemy polecenie stylów vertical-align, które zastąpiło przestarzały atrybut align. o vertical-align: wartość gdzie jako wartość można podać: top, middle, bottom Przykład <img src="grafika/kot.jpg" style=" vertical-align: bottom;" /> 46
ZADANIE 12 Plik zadanie11.html zapisz pod nazwą zadanie12.html. Usuń tło pod tekstem z pierwszych trzech akapitów. Teksty wyrównaj do obu marginesów (justify). Obrazkom z poprzedniego zadania nadaj następujące formatowanie: obraz1.jpg wyrównanie do lewego marginesu, prawy i dolny margines wokół grafiki wynosi 30px, obraz2.jpg wyrównanie do prawego marginesu, lewy i dolny margines wokół grafiki wynosi 15px, obraz3.jpg wyrównanie do lewego marginesu, wyrównanie względem tekstu w pionie do dołu (bottom). 47
Na stronie można umieszczać również tzw. mapy obrazkowe, czyli obrazy ze zdefiniowanymi obszarami, których kliknięcia powoduje wyświetlenie innego pliku. Są to tzw. hot-spots. Definicja obrazka będącego mapą: Definicja obszarów hot-spots: <map name="mapa1"> <img src="obraz.gif" usemap="#mapa1" /> <area shape="circle" coords="193,86,36" href= plik1.html" > <area shape="rect" coords="114,96,161,157" href= plik2.html" > <area shape="poly" coords="92,72,153,94,144,37" href= plik3.html" > <area shape="circle" coords="92,132,24" href= plik4.html" > </map> Mapy odsyłaczy 48
Mapy odsyłaczy usemap informuje przeglądarkę, że obrazek "obraz.gif" jest mapowany, i że mapa nosi nazwę "mapa1". Polecenie map zapoczątkowuje definicję mapy. Wiersze <area shape definiują cztery kolejne fragmenty mapy odsyłaczy. Kształty obszarów aktywnych określa atrybut shape i może przyjmować wartości: rect prostokąt circle koło poly wielokąt href stanowi przywołanie jakiegoś dokumentu HTML. Ostatni wiersz </map> stanowi zakończenie definicji mapy. 49
Mapy odsyłaczy coords informuje o współrzędnych aktywnego obszaru i w zależności od kształtu oznacza: shape="rect" coords="114,96,161,157" pierwsze dwie liczby 114,96 podają lewy górny róg prostokąta, a dwie następne 161,157 prawy dolny shape="circle" coords="193,86,36" pierwsze dwie liczby informują o położeniu środka okręgu, ostatnia - o długości promienia shape="poly" coords="92,72,153,94,144,37" przynajmniej trzy pary współrzędnych definiujących "rogi" obszaru Aplikacja on-line pozwalająca tworzyć mapy odsyłaczy: http://www.maschek.hu/imagemap/imgmap 50
ZADANIE 13 Plik zadanie12.html zapisz pod nazwą zadanie13.html. Na końcu pliku zadanie 13.html wstaw obrazek obraz4.jpg i utwórz na nim mapę obrazkową. Miejsca aktywne, różnych kształtów umieść na psich łepkach. Odsyłacze powinny prowadzić do: http://www.crazynauka.pl/erwin-schrodinger-i-jego-kot-126- rocznica-urodzin-schrodingera/ http://www.skr.org.pl/encyklopedia-kotow-rasowych.html http://webmaster.helion.pl/index.php/html-dla-poczatkujacych Do odczytania współrzędnych na obrazie możesz użyć programu Paint. 51