WITRYNY INTERNETOWE

LABORATORIUM

TEMAT: FAVICONY I MAPY

ODSYŁACZY
przygotowała: inż. Lidia Mamet

CELE LEKCJI:
• zdefiniujesz favicon
• zdefiniujesz mapę odsyłaczy ze zdjęcia
Zaliczeniem ćwiczeń będzie plik twojenazwisko.zip w którym umieścisz:
1. WŁASNY FAVICON
2. Wyjaśnienie elementów area i map w pliku tekstowym
3. Prostą stronę podobną do tej której znajdziesz przekazanych od nauczyciela plików
wraz ze zdefiniowaną mapą odsyłaczy.

1. FAVICON
FAVICON to malutka ikona widoczna na pasku adresowym lub karcie przeglądarki
internetowej. Nazwa favicon wywodzi się z favorite icon i oznacza ikonę ulubionych
Favicon definiuje się za pomocą znacznika <link> w nagłówku strony. Atrybuty to:
• ref – tu przypisz słowo kluczowe icon
• href – nazwa pliku z obrazem
• type – typ MIME (od ang. Multipurpose Internet Mail Extensions- Internet media type
zwany czasem Content-Type – dwuczęściowy identyfikator formatu plików w
Internecie) obrazu – dla ikon image/x--icon.
• Dla ikony ulubionych o nazwie favicon.ico składania wygląda następująco:
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

Uwaga! W przypadku Edge lub IE favicon może wyświetlić się dopiero po publikacji strony
Jeśli jako favicony używasz: gif, png, jpg atrybut href ma być nazwa.gif, nazwa.png lub
nazwa.jpg natomiast jako typ MIME musi być image/ico
<link rel=”icon” href=”favicon.gif” type=”image/ico”>

ZADANIE 1
1. Wykorzystamy zadanie z poprzedniej lekcji. Uzupełnisz stronę o ikonę ulubionych
Uruchom edytor NOTEPAD++ i otwórz w nim plik index.html. W części nagłówkowej (
head) wstaw znacznik <link> w postaci:
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

1
 2. Zapisz swój plik i uruchom w przeglądarce. Powinien wyglądać podobnie do tego na
zdjęciu

TWORZENIE WŁASNEJ IKONY ULUBIONYCH

Do utworzenia własnej ikony możesz wykorzystać narzędzia:
• https://favicon.cc
• https://tools.dynamicdrive.com/favicon
• https://www.freefavicon.com
• http://www.xiconeditor.com

ZADANIE 2
Posługując się jednym z narzędzi powyżej utwórz własny favicon i umieść na stronie. Utwórz
własny favicon dla witryny internetowej którą tworzysz.
Favicon umieść w pliku zip

2. MAPY ODSYŁACZY
Mapa odsyłaczy – obraz złożony z wielu obszarów łącz do innych stron internetowych.
Przyjmują one kształty:
• prostokąta
• koła
• wielokąta
Wykorzystując narzędzia internetowe poszukaj definicji następujących elementy potrzebne do
utworzenia mapy odsyłaczy:
<map> definicję oraz jej źródło podaj w pliku txt
<area> definicję oraz jej źródło podaj w pliku txt

2
Współrzędne obszarów łącz przedstawia tabela

Prostokątna mapa odsyłaczy przykład

Dla takiej mapy atrybut shape przyjmuje wartość rect, a wartości współrzędnych są wyznaczane w
sposób następujący:

x1 — odległość lewego górnego rogu prostokąta od lewej krawędzi obrazu;

y1 — odległość lewego górnego rogu prostokąta od górnej krawędzi obrazu;

x2 — odległość prawego dolnego rogu prostokąta od lewej krawędzi obrazu;

y2 — odległość prawego dolnego rogu prostokąta od górnej krawędzi obrazu.

Na zdjęciu widać kuter rybacki. Przykład mapy odsyłaczy wykonanej na bazie tego zdjęcia jest zawarty
w pliku mapa.html Prostokąt narysowany linią przerywaną wyznacza położenie hotspotu.

Współrzędne (24, 188) oznaczają, że lewy górny róg prostokąta znajduje się w odległości 24 pikseli od
lewej krawędzi obrazu i 188 pikseli od krawędzi górnej. Para współrzędnych przy prawym dolnym
rogu prostokąta (339, 283) wskazuje, że ten róg znajduje się w odległości 339 pikseli od lewej
krawędzi obrazu i 283 piksele od krawędzi górnej. Kod HTML definiujący tę mapę odsyłaczy
przedstawia się następująco:

<map name=”boat” id=”boat”>

<area href=”http://www.fishingdoorcounty.com”
shape=”rect” coords=”24,188,339,283”
alt=” Rejsy połowowe w hrabstwie Door”
<title=” Rejsy połowowe w hrabstwie Door”>

3
</map>
<img src=”fishingboat.jpg” usemap=”#boat” alt=”Hrabstwo Door” width=”416”
height=”350”>
Zwróć uwagę na użycie atrybutu alt w elemencie area. Jeśli chcesz zadbać o dostępność
opracowywanej strony, nie zapomnij o przypisaniu każdemu elementowi area tekstu objaśniającego
znaczenie danego obszaru.

Twórcy stron internetowych z reguły nie piszą ręcznie kodu definiującego mapę odsyłaczy, lecz
używają do tego celu wyspecjalizowanych programów, takich jak Adobe Dreamweaver, które potrafią
automatycznie wygenerować tego typu mapę.

Istnieją też darmowe generatory map odsyłaczy dostępne online:

http://www.maschek.hu/imagemap/imgmap

http://image-maps.com

Mobilefish.com - HTML image map creator

Używając jednego z tych narzędzi stwórz mapę dla dowolnego obrazu graficznego i umieść w pliku zip