Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Proste linki

Konstrukcja odsyłacza w formie podstawowej wygląda następująco:
<a href="ścieżka do pliku lub adres URL" >opis</a>. Jak widać znacznikiem jest tutaj <a>...</a>. Litera a wzięła się od anchor - po agielsku kotwica. Skoro nawet słowniki podają, że serfowanie to także przeglądanie stron WWW, więc jak się pływa, to można od czasu do czasu zarzucić kotwicę...

Link do strony WWW - ćwiczenie 2_4_1_1

Wykonaj stronę, na której umieścisz link do strony na której znajduje się walidator W3C. Kod do wykonania tego zadania wygląda następująco:
<a href="http://validator.w3.org/">Tutaj znajduje się walidator organizacji W3C</a>. Tak powinna wyglądać wykonana strona:

Zwróć uwagę, że strona została otworzona w tym samym oknie - u nas będzie to ramka - jak zauważyłeś, ramki są w tym opracowaniu stosowane prawie w każdym ćwiczeniu, do pokazania prawidłowo wykonanych stron.

Odsyłacz do strony WWW, który otwiera wskazaną stronę w nowym oknie - ćwiczenie 2_4_1_2

Możemy otworzyć wskazaną stronę w nowym oknie lub nowej zakładce przeglądarki. Wystarczy dodać atrybut target="_blank". Jest to bardzo wygodny sposób prezentowania dodatkowych informacji, kiedy nie chcemy zamykać strony na której jesteśmy.
Wykonaj zadanie z poprzedniego ćwiczenia otwierając tym razem docelową stronę w nowym oknie. Kod do wykonania tego zadania wygląda następująco:
<a href="http://validator.w3.org/" target="_blank">Tutaj znajduje się walidator organizacji W3C</a>. Tak powinna wyglądać wykonana strona:

Kliknij pokazany link i zobacz w jaki sposób zostanie otwarta strona z walidatorem. Powinna być pokazana na nowej zakładce przeglądarki.

Link do wskazanego miejsca na stronie WWW - ćwiczenie 2_4_1_3

Możemy przenieść się na jakąś stronę i jeszcze na dokładnie wskazane miejsce na tej stronie. Aby taki link zadziałał, napierw należy to miejsce zdefiniować. Takie miejsce nazywamy etykietą, zakładką lub kotwicą, więc możemy mówić np. o odsyłaczu do kotwicy. Jak wstawia się kotwice w dokumencie dowiesz się podczas realizacji tematu Kotwice. Teraz przetestujemy działanie linków do przygotowanych wcześniej kotwic. W tym celu:

  1. Ściągnij spakowany plik definicja_kotwicy.zip dokumentu HTML, w którym zdefiniowane są dwie kotwice: a_top oraz a_bottom.
  2. Rozpakuj ten plik i umieść w folderze swojego ćwiczenia.
  3. Wykonaj stronę stosując następujący kod: <a href="definicja_kotwicy.html#a_bottom" target="_blank">Owórz dokument docelowy w zdefinowanym miejscu</a>.

Tak powinna wyglądać wykonana strona:

Kliknij pokazany link i zobacz w jak przeglądarka otworzyła przykładowy dokument definicja_kotwicy.html.

  1. Dokument powinien być pokazany na nowej zakładce przeglądarki
  2. Powinien zostać przewinięty do miejsca zdefiniowania zakładki o nazwie a_bottom
  3. Można umieścić link do innego miejsca tej samej strony. W dokumencie, który otworzyłeś znajdują się dwa takie linki: <a href="#a_top">To jest link do kotwicy górnej</a> oraz <a href="#a_bottom">To jest link do kotwicy dolnej</a>. Znajdź te linki w źródle dokumentu definicja_kotwicy.html. Zwróć uwagę, że odsyłacz do innego miejsca tej samej strony, zamiast adresu ma nazwę kotwicy poprzedzoną znakiem # (ang. hash, znak zwany po polsku kratką, krzyżykiem lub płotkiem).

Odsyłacz do pliku - ćwiczenie 2_4_1_4

Jeżeli atrybut href zawiera adres do pliku, który nie jest dokumentem HTML, to działanie przeglądarki może być następujęce:

  • od razu otworzy ten plik - jak na przykład w przypadku plików .pdf,
  • przedstawi opcje po ściągnięciu - plik otworzyć czy zapisać,

Jeżeli chcesz na stronie umieszczać linki typu Pobierz, czy Ściągnij, to po prostu umieść link do pliku spakowanego , najlepiej .zip.

Utwórz stronę na której umieścisz link do stosowanego w poprzednim ćwiczeniu pliku definicja_kotwicy.zip. W tym celu przekopiuj ten plik do folderu bieżącego ćwiczenia. Zastosuj kod <a href="definicja_kotwicy.zip">Pobierz plik</a>.

Kliknij pokazany link i zobacz odpowiedź przeglądarki.

Odsyłacz pocztowy - ćwiczenie 2_4_1_5

Posiada następującą postać: <a href="mailto:adres e-mail">opis</a>, dzie jako adres e-mail należy podać adres poczty elektronicznej osoby, do której ma zostać wysłany list, np.: jan_kowalski@gmail.com. Dzięki temu odsyłaczowi, goście odwiedzający Twoją stronę, będą mogli łatwiej wysłać list e-mail pod adres podany w poleceniu. Po kliknięciu takiego odnośnika, list nie jest wysyłany, otwierany jest domyślny program pocztowy zainstalowany w komputerze gościa (np. Outlook Express), z otwartym oknem nowej wiadomości, w którym jest automatycznie wstawiany adres e-mail. Jak widzimy, ten osyłacz różni się od pozostałych, jedynie dopiskiem mailto:.

Wykonaj stronę, na której umieścisz odsyłacz pocztowy do swojego adresu e-mail. Tak powinna wyglądać wykonana strona:

Kliknij pokazany link - co wykonał system operacyjny?

Praca domowa

Wykonaj ponownie ćwiczenia z zajęć. Samodzielnie pisz kod tworzący odsyłacze, przykłady wykonane podczas zajęć wykorzystaj tylko do sprawdzenia.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.