Ćw3. Odsyłacze czyli hiperłącza

Ćwiczenie 3 - Odsyłacze
Ćwiczenie to 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. 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 ć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. Do ćwiczenia będą potrzebne pliki, które znajdują się
spakowane w paczce pliki.zip (do pobrania ze strony). 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:
Krok 1. 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:
1. względna ścieŜka dostępu z miejsca w miejsce
2. naleŜy wpisać drogę uwzględniając wszystkie foldery
3. wchodząc do folderu wpisujemy jego nazwę/
4. wychodząc z folderu wpisujemy ../
5. na końcu podajemy nazwę pliku z rozszerzeniem
6. przykładowa ścieŜka od index.html do plik_mapa.html:
7. struktura folderów i plików
8. pliki/odsylacze_mapa/plik_mapa.html
9. teraz droga odwrotna od plik_mapa.html do index.html:
10. ../../index.html
11. jeszcze ścieŜka od plik_mapa.html do plik_1.html:
12. ../odsylacze_1/plik_1.html
tekst:
1. tekst pomocniczy, który pojawi się po najechaniu kursorem
cel:
1.
2.
3.
4.
"_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 jak poniŜej
na printscreenie:
Krok 2. 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:
1. 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:
1. względna ścieŜka dostępu z miejsca w miejsce
2. naleŜy wpisać drogę uwzględniając wszystkie foldery
3. wchodząc do folderu wpisujemy jego nazwę/
4. wychodząc z folderu wpisujemy ../
5. na końcu podajemy nazwę pliku z rozszerzeniem
6. przykładowa ścieŜka od index.html do plik_mapa.html:
7. struktura folderów i plików
8. pliki/odsylacze_mapa/plik_mapa.html
9. teraz droga odwrotna od plik_mapa.html do index.html:
10. ../../index.html
11. jeszcze ścieŜka od plik_mapa.html do plik_1.html:
12. ../odsylacze_1/plik_1.html
13. za rozszerzeniem html dopisujemy: #"nazwa_etykiety"
14. koniecznie ze znakiem #
15. np.: plik_1.html#etykieta_1
16. albo: ../odsylacze_2/plik_3.html#etykieta_3
Krok 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.
Krok 4. 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 z Kroku 1.
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:
1. miejsce, gdzie chcemy się przenieść
2. względna ścieŜka dostępu z miejsca w miejsce
3. naleŜy wpisać drogę uwzględniając wszystkie foldery
4. wchodząc do folderu wpisujemy jego nazwę/
5. wychodząc z folderu wpisujemy ../
6. na końcu podajemy nazwę pliku z rozszerzeniem
7. przykładowa ścieŜka od index.html do plik_mapa.html:
8. struktura folderów i plików
9. pliki/odsylacze_mapa/plik_mapa.html
10. teraz droga odwrotna od plik_mapa.html do index.html:
11. ../../index.html
12. jeszcze ścieŜka od plik_mapa.html do plik_1.html:
13. ../odsylacze_1/plik_1.html
ścieŜka dostępu do obrazka:
1. obrazek, który ma być linkiem do miejsca
2. względna ścieŜka dostępu z miejsca w miejsce
3. naleŜy wpisać drogę uwzględniając wszystkie foldery
4. wchodząc do folderu wpisujemy jego nazwę/
5. wychodząc z folderu wpisujemy ../
6. na końcu podajemy nazwę pliku z rozszerzeniem
7. przykładowa ścieŜka od plik_3.html do cw_3_1.gif:
8. struktura folderów i plików
9. ../../grafiki/cw_3_1.gif
10. koniecznie z podaniem rozszerzenia pliku graficznego
tekst alternatywny:
1. tekst zastępczy, kiedy nie wyświetla się obrazek
Krok 5. 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 z Kroku 1.
Składnia jest identyczna jak wyŜej:
<a href="adres"><img src="ścieŜka dostępu do obrazka" alt="tekst alternatywny" /></a>
adres:
1.
2.
3.
4.
5.
6.
7.
8.
9.
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
../../grafiki/duze/foto_1.jpg
1. ścieŜka dostępu do obrazka:
2. obrazek - miniatura, który ma być linkiem do miejsca
3. względna ścieŜka dostępu z miejsca w miejsce
4. naleŜy wpisać drogę uwzględniając wszystkie foldery
5. wchodząc do folderu wpisujemy jego nazwę/
6. wychodząc z folderu wpisujemy ../
7. na końcu podajemy nazwę pliku z rozszerzeniem
8. przykładowa ścieŜka od plik_3.html do cw_3_1.gif:
9. struktura folderów i plików
10. ../../grafiki/cw_3_1.gif
11. koniecznie z podaniem rozszerzenia pliku graficznego
tekst alternatywny:
1. tekst zastępczy, kiedy nie wyświetla się obrazek
W przypadku odsyłaczy obrazkowych warto wykonać na stronie alternatywne, zastępcze, zwykłe linki.
Krok 6. 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.
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:
1. obrazek, który ma być mapą odsyłaczy
2. względna ścieŜka dostępu z miejsca w miejsce
3. naleŜy wpisać drogę uwzględniając wszystkie foldery
4. wchodząc do folderu wpisujemy jego nazwę/
5. wychodząc z folderu wpisujemy ../
6. na końcu podajemy nazwę pliku z rozszerzeniem
7. przykładowa ścieŜka od plik_3.html do mapa_odsylaczy.gif:
8. struktura folderów i plików
9. ../../grafiki/mapa_odsylaczy.gif
10. koniecznie z podaniem rozszerzenia pliku graficznego
tekst alternatywny:
1. tekst zastępczy, kiedy nie wyświetla się obrazek
nazwa_mapy:
1. dowolny tekst, taki sam w pierwszej i w drugiej linii
2. w pierwszym wierszu musi być poprzedzony znakiem #
3. na jednej stronie nie mogą powtarzać się mapy o takiej samej nazwie
kształt:
1.
2.
3.
4.
kształt obszaru na mapie odsyłaczy:
"rect" - prostokąt
"poly" - wielokąt
"circle" - koło
współrzędne:
1. lewy-górny wierzchołek obrazka jest punktem zerowym
2. dla prostokąta:
3. "xl,yl, xp,yp"
1. "xl" - współrzędna pozioma lewego-górnego wierzchołka
2. "yl" - współrzędna pionowa lewego-górnego wierzchołka
3. "xp" - współrzędna pozioma prawego-dolnego wierzchołka
4. "yp" - współrzędna pionowa prawego-dolnego wierzchołka
4. dla wielokąta:
5. "x1,y1, x2,y2, x3,y3,..."
1. "xn,yn" - współrzędne poziome i pionowe kolejnych wierzchołków
6. dla koła:
7. "x,y, r"
1. "x,y" - współrzędne środka
2. "r" - promień koła
adres:
1. miejsce, gdzie chcemy się przenieść
2. względna ścieŜka dostępu z miejsca w miejsce
3. naleŜy wpisać drogę uwzględniając wszystkie foldery
4. wchodząc do folderu wpisujemy jego nazwę/
5. wychodząc z folderu wpisujemy ../
6. na końcu podajemy nazwę pliku z rozszerzeniem
7. przykładowa ścieŜka od index.html do plik_mapa.html:
8. struktura folderów i plików
9. pliki/odsylacze_mapa/plik_mapa.html
10. teraz droga odwrotna od plik_mapa.html do index.html:
11. ../../index.html
12. jeszcze ścieŜka od plik_mapa.html do plik_1.html:
13. ../odsylacze_1/plik_1.html
tekst alternatywny:
1. 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.
Krok 7. Kolejny krok jest podobny do poprzedniego. W oparciu o grafikę shape.bmp - naleŜy wykonać mapę odsyłaczy:
1. do podstrony
2. do etykiety w innym pliku
3. do zasobów Internetu
Krok 8. 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:
1. "http://www.adres_strony"
tekst:
1. tekst pomocniczy, który pojawi się po najechaniu kursorem
cel:
1.
2.
3.
4.
"_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
1. "ftp://ftp.adres_serwera"
Składnia dla e-maila wygląda tak:
<a href="mailto:[email protected]" >[email protected]</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. Spakowany cały folder proszę wysłać do mnie
na e-mail.
Powodzenia.