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