HTML (ang. HyperText Markup Language) hipertekstowy język
Transkrypt
HTML (ang. HyperText Markup Language) hipertekstowy język
Laboratorium Informatyki HTML (ang. HyperText Markup Language) hipertekstowy język znaczników Ćwiczenie 3. 1. Wprowadzenie Ważną cechą stron WWW i dokumentów hipertekstowych jest możliwość przełączania (linkowania) dokumentów. Cecha ta jest wykorzystywana przy nawigowaniu w obrębie treści strony, pomiędzy stronami, adresowaniu do plików umieszczonych w sieci. W ramach ćwiczenie przedstawione zostaną właściwości znacznika odpowiedzialnego za linkowanie oraz omówione metody mapowania obrazków i budowy układu ramkowego. 2. Linowanie Język HTML dostarcza dwóch znaczników zapewniających realizację zadań związanych z tworzeniem linków: <a> </a> - definicja linku Znacznik ten sterowany jest właściwościami atrybutów zestawionych w poniższej tabeli. Nazwę linku lub adresowanie do pliku graficznego reprezentującego link umieszcza się pomiędzy znacznikami <a></a>. Atrybut download Wartość filename href URL name section_name target _blank _parent _self _top frame_name Opis Wskazany plik zostanie pobrany na dysk i zapisany pod nazwą filename Adres pliku docelowego (adresowanie względne lub bezwzględne) lub miejsca w tym samym dokumencie wskazanym atrybutem name Definicja sekcji dokumentu, umożliwiająca budowę nawigacji wewnątrz dokumentu Definiuje miejsce lub sposób otwarcia dokumentu docelowego Otwiera w nowym oknie lub zakładce Otwiera w głównej ramce Otwiera w tym samym miejscu do dokument pierwotny Otwiera w trybie pełnego okna Otwiera w ramce o podanej nazwie 1 Jednym z istotnych elementów definicji linku jest właściwe adresowanie pliku celu. Wykorzystuje się adresowanie względne i bezwzględne. Sposób adresowania zobrazowano na podstawie schematu strony WWW pokazanego poniżej. Adresowanie względne Adres budowany jest poprzez wskazanie drogi od pliku w którym aktualnie się znajdujemy do pliku docelowego. Przejście w strukturze katalogowej o poziom wyżej realizowane jest za pomocą „..”. Przykładowo jeżeli linkujemy w pliku html.php do pliku php.php należy wpisać: Adresowanie bezwzględne W atrybucie href podaje się pełny adres internetowy do pliku docelowego: http://webmade.org/porady/html_css/html.php http://webmade.org/artykuly/index.php „../php_mysql/php.php” Linkowanie wewnątrz jednego dokumentu jest możliwe za pomocą atrybutu name który definiuje punkt docelowy. Technikę tą stosuje się w rozbudowanych dokumentach HTML w celu ułatwienia nawigacji w nich. Przykładem mogą być rozbudowane hasła w Wikipedi. Przykładową składnie pokazano poniżej. <a href=”#Sekcja_1”>Czytaj w sekcji 1</a> … <a name=”Sekcja_1”>Sekcja 1</a> <nav> </nav> - definicja grupy linków Znacznik ten grupuje linki. <nav> <a href="/html/html.php">HTML</a> | <a href="/css/css.php">CSS</a> | <a href="/js/jscript.php">JavaScript</a> | <a href="/jquery/jquery.php">jQuery</a> </nav> 2 3. Mapowanie obrazka Techniką wspierającą tworzenie linków za pomocą obiektów graficznych jest mapowanie obrazków i przypisywanie linków do określonych obszarów wyświetlanej grafiki. Kliknięcie na tym obszarze aktywuje linki. Zadanie realizowane jest za pomocą trzech znaczników: <img> - umieszcza w dokumencie html grafikę do zmapowania <map> - definiuje mapowanie <area> definiuje obszar aktywacje linku na grafice o trzech kształtów (prostokąt, koło lub wielobok) W znaczniku <img> wykorzystuje definicji mapowania usemap=”#nazwa”. się dodatkowo atrybut jednym z wskazania Znacznik <map> ma tylko jeden atrybut definicji nazwy name=”nazwa”. Natomiast znacznik <area> opisany jest trzema atrybutami, wyboru kształtu shape=”rect/circle/poly”, współrzędnych kształtu podawanych po przecinku coords=”12,12,12” i adresu href. W przypadku prostokąta podaje się współrzędne lewego górnego rogu i prawego dolnego, dla okręgu współrzędne środka i promień, a dla wieloboku współrzędne kolejnych wierzchołków. Współrzędne podawane są w pikselach o wartościach wynikających z rozmiaru obrazka. Poniżej zapisano przykład mapowania grafiki. <img src="zamek.jpg" usemap="#mapka"> <map name="mapka"> <area shape="rect" coords="257,316,289,351" href="../Opis/Sekcja_A.html" alt="Sekcja A"> <area shape="circle" coords="250,85,25" href="../Opis/Sekcja_B.html" alt="Sekcja B"> <area shape="poly" coords="354,269,384,269,393,242,369,226,344,241" href="../Opis/Sekcja_C.html" alt="Sekcja C"> </map> W przykładzie dodatkowo użyto atrybutu alt w celu wyświetlenia na obrazku w momencie najechania na zmapowany obszar ramki z tekstem podpowiedzi. 4. Ramki Układ ramkowy w konstrukcji stron internetowych stosuje się w celu optymalizacji i wygody użytkowania strony. W poszczególnych ramkach umieszcza się wybrane elementy strony i razie konieczności wczytuje lub odświeża tylko wybrany element. W osobnych ramkach umieszcza się wiec menu, baner, reklamy, tytuł strony lub prezentowane treści. Definicję układu ramkowego umieszcza się pomiędzy znacznikami </HEAD> a <BODY>. Układ ramkowy buduje się za pomocą dwóch znaczników <frameset> i <frame>. 3 Ramki można definiować w układzie kolumn lub wierszy. Bardziej złożone układy konstruuje się osadzając ramkę w ramce. Składnie obu znaczników zestawiono w tabeli poniżej. Znacznik Atrybut frameset cols=”a,b,..,z” frame Właściwości Definiuje podział kolumnowy, parametrem są szerokości poszczególnych kolumn podawane jako wymiar w pikselach, procentowo w stosunku do szerokości ekranu i * jako automatycznie dobierana wartość zapewniające wypełnienie 100% szerokości ekranu rows=”a,b,..,z” Definiuje podział wierszowy, parametrem są wysokość poszczególnych wierszy podawane jako wymiar w pikselach, procentowo w stosunku do wysokości ekranu i * jako automatycznie dobierana wartość zapewniające wypełnienie 100% wysokości ekranu bordercolor=”xxx” Definicja koloru brzegu układu ramkowego name=”nazwa_ramki” Definiuje nazwę ramki wykorzystywaną jako cel (target) w adresowaniu znacznikiem <a> src=”adres” Adres do domyślnie przypisanego dokumentu html do ramki noresize Blokowanie możliwości zmiany wymiaru ramki w oknie przeglądarki scroling=”xxx” Ustawia możliwość przesuwania zawartości ramki w oknie przeglądarki (auto, yes, no) bordercolor=”xxx” Definiuje kolor ramki <frameset cols="250,*,10%"> <frame name="menu" src="menu.html" noresize scroling="no"> <frameset rows="90%,*"> <frame name="tresc_1" src="tresc_1.html" scroling="yes"> <frame name="tresc_2" src="tresc_2.html" scroling="no"> </frameset> <frame name="koment" src="koment.html" scroling="auto" bordercolor="green"> </frameset> 5. Zadania a. W oparciu o dowolne rozbudowane hasło w Wikipedi utworzyć dokument HTML i wykorzystać linki do nawigacji wewnętrznej. b. Korzystając z funkcji mapowania utworzyć galerię realizującą wyświetlanie powiększenia wybranych fragmentów obrazka. c. Zaprojektować dowolny złożony ale odmienny od przykładowego układ ramkowy. d. Utworzyć stronę realizującą sterowania zawartością wybranej ramki w zaprojektowanym przez siebie układzie ramkowym, wykorzystać adresowanie względne i bezwzględne. 4