Obserwuj, słuchaj, rzadko osądzaj i nie chciej za dużo
Ćwiczenie 4 - Odsyłacze
Zadania do wykonania:
- spakowane pliki do zadań: pliki_4.zip (818KB)
Ćwiczenie 4 poświęcone jest odsyłaczom czyli powiązaniu plików wewnętrznych i zewnętrznych na różne sposoby. Linki, które natychmiast przenoszą w określone miejsce to istota stron WWW.
Ćwiczenie 4 polega na wykonaniu małej witryny kilkuplikowej i powiązaniu jej wzajemnymi linkami różnego typu: zwykłymi, obrazkowymi i mapą odsyłaczy, a także wywołaniu konkretnego miejsca w pliku i miejsca w zasobach internetu.
W tym ćwiczeniu bardzo ważne jest właściwe adresowanie i zapisywanie ścieżki dostępu do pliku.
Ćwiczenie należy rozpocząć od przygotowania właściwej struktury folderów i plików. Proszę przygotować odpowiednie foldery i umieścić w nich właściwe pliki, odpowiednio nazwane. Pliki na razie niech zawierają tylko szablon HTML 4.01 Transitional. Grafiki umieszczone są w oddzielnym folderze nazwanym grafiki. Struktura folderów i plików na załączonym zrzucie:
Następne zadanie polega na wykonaniu poziomego menu w każdym z plików. Należy to zrobić wykorzystując znacznik <a>...</a>. Znacznik ten obejmuje tekst, który będzie podkreślonym linkiem. Znacznik posiada kilka atrybutów, które należy uwzględnić: <a href="adres" title="tekst" target="cel">...</a>
- adres:
- względna ścieżka dostępu z miejsca w miejsce
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- przykładowa ścieżka od index.html do plik_mapa.html:
- struktura folderów i plików - patrz: Krok 1
- pliki/odsylacze_mapa/plik_mapa.html
- teraz droga odwrotna od plik_mapa.html do index.html:
- ../../index.html
- jeszcze ścieżka od plik_mapa.html do plik_1.html:
- ../odsylacze_1/plik_1.html
- tekst:
- tekst pomocniczy, który pojawi się po najechaniu kursorem
- cel:
- "_blank" - załadowanie do nowego okna
- "_parent" - do ramki nadrzędnej
- "_self" - do tej samej, w której znajduje się element
- "_top" - do pełnego oryginalnego okna
W pliku należy zrobić też odsyłacz do niego samego. Gotowe menu w każdym pliku z działającymi łączami powinno wyglądać tak:
Kolejny krok w tym ćwiczeniu polega na zrobieniu łączy w tekście w tym samym pliku i w innym. W plikach: plik_1.html i plik_2.html należy przygotować kilka długich akapitów tekstu, tak aby strona się przewijała.
Następnie w kilku akapitach obu plików należy wstawić etykiety, które będą miejscami wywoływanymi z innych miejsc. Etykieta ma postać: <a name="nazwa">...</a>.
- nazwa:
- dowolna, niepowtarzająca się nazwa
W dalszej części, w innych miejscach należy wstawić odsyłacze do etykiet, w tym samym pliku i do drugiego pliku.
Odsyłacz do zakładki - etykiety ma postać: <a href="adres/nazwa_pliku.html#nazwa_etykiety">...</a>
- adres:
- względna ścieżka dostępu z miejsca w miejsce
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- przykładowa ścieżka od index.html do plik_mapa.html:
- struktura folderów i plików - patrz: Krok 1
- pliki/odsylacze_mapa/plik_mapa.html
- teraz droga odwrotna od plik_mapa.html do index.html:
- ../../index.html
- jeszcze ścieżka od plik_mapa.html do plik_1.html:
- ../odsylacze_1/plik_1.html
- za rozszerzeniem html dopisujemy: #"nazwa_etykiety"
- koniecznie ze znakiem #
- np.: plik_1.html#etykieta_1
- albo: ../odsylacze_2/plik_3.html#etykieta_3
Następnie w obu plikach z tekstem proszę u góry strony wstawić etykietę i w dwóch miejscach w tekście: między akapitami i u dołu strony wstawić odsyłacz do góry.
W pliku z tekstem proszę wstawić jeszcze odsyłacz do innego pliku otwieranego w nowym oknie. Zobacz tutaj.
Kolejny krok to odsyłacze obrazkowe. Proszę w pliku 3 wstawić odsyłacze obrazkowe do wszystkich plików. Grafiki znajdują się w osobnym folderze. Należy je umieścić w folderze, zgodnie ze strukturą folderów i plików - patrz: Krok 1. Spakowane pliki do zadań: pliki_4.zip (818KB).
Składnia odsyłacza obrazkowego wygląda następująco: <a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>.
- adres:
- miejsce, gdzie chcemy się przenieść
- względna ścieżka dostępu z miejsca w miejsce
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- przykładowa ścieżka od index.html do plik_mapa.html:
- struktura folderów i plików - patrz: Krok 1
- pliki/odsylacze_mapa/plik_mapa.html
- teraz droga odwrotna od plik_mapa.html do index.html:
- ../../index.html
- jeszcze ścieżka od plik_mapa.html do plik_1.html:
- ../odsylacze_1/plik_1.html
- ścieżka dostępu do obrazka:
- obrazek, który ma być linkiem do miejsca
- względna ścieżka dostępu z miejsca w miejsce
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- przykładowa ścieżka od plik_3.html do cw_4_1.gif:
- struktura folderów i plików - patrz: Krok 1
- ../../grafiki/cw_4_1.gif
- koniecznie z podaniem rozszerzenia pliku graficznego
- tekst alternatywny:
- tekst zastępczy, kiedy nie wyświetla się obrazek
Następny krok to podobne zadanie: odsyłacze obrazkowe w postaci miniatur zdjęć do oryginalnych rozmiarów. Proszę umieścić miniatury i zdjęcia duże w odpowiednich folderach - patrz: Krok 1. Spakowane pliki do zadań: pliki_4.zip (818KB).
Składnia jest identyczna jak wyżej: <a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>.
- adres:
- miejsce, gdzie znajdują się zdjęcia w oryginalnych rozmiarach
- względna ścieżka dostępu z miejsca w miejsce
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- przykładowa ścieżka od plik_3.html do foto_1.jpg:
- struktura folderów i plików - patrz: Krok 1
- ../../grafiki/duze/foto_1.jpg
- ścieżka dostępu do obrazka:
- obrazek - miniatura, który ma być linkiem do miejsca
- względna ścieżka dostępu z miejsca w miejsce
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- przykładowa ścieżka od plik_3.html do cw_4_1.gif:
- struktura folderów i plików - patrz: Krok 1
- ../../grafiki/cw_4_1.gif
- koniecznie z podaniem rozszerzenia pliku graficznego
- tekst alternatywny:
- tekst zastępczy, kiedy nie wyświetla się obrazek
W przypadku odsyłaczy obrazkowych warto wykonać na stronie alternatywne, zastępcze, zwykłe linki.
Kolejny krok tego ćwiczenia to mapa odsyłaczy. Wykonuje się ją na pliku graficznym. Wyznacza się miejsca, które będą reagowały na kursor i będą aktywnymi łączami. Grafika do ćwiczeń: mapa_odsylaczy.gif. Spakowane pliki do zadań: pliki_4.zip (818KB).
Składnia mapy odsyłaczy wygląda następująco:
- <img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" usemap="#nazwa_mapy" />
- <map id="nazwa_mapy" name="nazwa_mapy">
- <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" />
- <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" />
- (...kolejne kształty...)
- </map>
- ścieżka dostępu do obrazka:
- obrazek, który ma być mapą odsyłaczy
- względna ścieżka dostępu z miejsca w miejsce
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- przykładowa ścieżka od plik_3.html do mapa_odsylaczy.gif:
- struktura folderów i plików - patrz: Krok 1
- ../../grafiki/mapa_odsylaczy.gif
- koniecznie z podaniem rozszerzenia pliku graficznego
- tekst alternatywny:
- tekst zastępczy, kiedy nie wyświetla się obrazek
- nazwa_mapy:
- dowolny tekst, taki sam w pierwszej i w drugiej linii
- w pierwszym wierszu musi być poprzedzony znakiem #
- na jednej stronie nie mogą powtarzać się mapy o takiej samej nazwie
- kształt:
- kształt obszaru na mapie odsyłaczy:
- "rect" - prostokąt
- "poly" - wielokąt
- "circle" - koło
- współrzędne:
- lewy-górny wierzchołek obrazka jest punktem zerowym
- dla prostokąta:
- "xl,yl, xp,yp"
- "xl" - współrzędna pozioma lewego-górnego wierzchołka
- "yl" - współrzędna pionowa lewego-górnego wierzchołka
- "xp" - współrzędna pozioma prawego-dolnego wierzchołka
- "yp" - współrzędna pionowa prawego-dolnego wierzchołka
- dla wielokąta:
- "x1,y1, x2,y2, x3,y3,..."
- "xn,yn" - współrzędne poziome i pionowe kolejnych wierzchołków
- dla koła:
- "x,y, r"
- "x,y" - współrzędne środka
- "r" - promień koła
- adres:
- miejsce, gdzie chcemy się przenieść
- względna ścieżka dostępu z miejsca w miejsce
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- przykładowa ścieżka od index.html do plik_mapa.html:
- struktura folderów i plików - patrz: Krok 1
- pliki/odsylacze_mapa/plik_mapa.html
- teraz droga odwrotna od plik_mapa.html do index.html:
- ../../index.html
- jeszcze ścieżka od plik_mapa.html do plik_1.html:
- ../odsylacze_1/plik_1.html
- tekst alternatywny:
- tekst zastępczy, kiedy nie wyświetla się obrazek
Kształty na mapie mogą być różne i może być ich więcej.
W przypadku mapy odsyłaczy warto wykonać na stronie alternatywne, zastępcze, zwykłe linki.
Pomocnym w określaniu współrzędnych na mapie może być program Paint.
Podczas wyznaczania wielokąta należy uwzględnić kilka wierzchołków, aby obszar aktywny był w miarę dokładnie odwzorowany.
W grafice mapa_odsylaczy.gif należy uaktywnić te województwa, na których są nazwy plików i powiązać je z odpowiednimi plikami HTML.
Kolejny krok jest podobny do poprzedniego. W oparciu o grafikę shape.bmp - należy wykonać mapę odsyłaczy:
- do podstrony
- do etykiety w innym pliku
- do zasobów Internetu
Spakowane pliki do zadań: pliki_4.zip (818KB).
Ostatni krok polega na wykonaniu w ostatnim pliku nazwanym plik_mapa.html mapy serwisu czyli aktywnego spisu treści odsyłającego do wszystkich plików wraz z ewentualnymi etykietami.
Następnie należy wstawić kilka linków do zasobów Internetu: HTTP i FTP oraz link do kontaktu z autorem poprzez e-mail.
Składnia odsyłaczy do HTTP jest następująca: <a href="adres" title="tekst" target="cel">...</a>
- adres:
- "http://www.adres_strony"
- tekst:
- tekst pomocniczy, który pojawi się po najechaniu kursorem
- cel:
- "_blank" - załadowanie do nowego okna
- "_parent" - do ramki nadrzędnej
- "_self" - do tej samej, w której znajduje się element
- "_top" - do pełnego oryginalnego okna
Składnia dla FTP wygląda tak: <a href="adres" >...</a>
- adres
- "ftp://ftp.adres_serwera"
Składnia dla e-maila wygląda tak: <a href="mailto:adres_e-mail" >...</a>
Oceniany będzie cały folder: odsylacze wraz z podfolderami i plikami HTML umieszczonymi w odpowiednich miejscach i z wykonanymi wszystkimi działającymi odsyłaczami: zwykłymi i obrazkowymi, zgodnie z krokami ćwiczenia.
Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.