Artykuł
09/27/2011

Samouczek: Odnośniki - Kurs HTML i CSS

Autor: Norbert Blandzi

Opublikowano: 2011-09-26

HyperText Markup Language (HTML) umożliwia tworzenie odnośników do różnych zasobów, zaczynając na tworzeniu odnośników do różnych miejsc na tej samej stronie aż po adresy e-mail. Rozróżnić także można sposób, w jaki zostają one wyświetlone. Najczęściej jest to tekst lub obrazek.

Przed wykonaniem zadań powinieneś przeczytać samouczki:

Po wykonaniu zadań nauczysz się:

tworzyć odnośniki do: podstrony, strony, adresu pocztowego,
tworzyć i formatować mapę odsyłaczy.

Implementacja

Twoim zadaniem jest:

dodanie odnośnika do podstrony znajdującej się w innym folderze,
dodanie odnośnika do innej strony,
dodanie odnośnika do adresu pocztowego,
dodanie odnośnika do etykiety.

Rys. 1. Efekt końcowy zadania.

Przygotowanie strony

Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.

Otwórz edytor HTML i utwórz szkielet strony.

<html>
    <head>
        <title>Odnośniki</title>
    </head>
    <body>
    </body>
</html>

Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej.

Dodawanie odnośnika do podstrony, która znajduje się w innym folderze na serwerze

Tworząc odnośnik do podstrony korzystamy z adresu względnego. Więcej informacji o adresowaniu względnym znajdziesz w encyklopedii Jak określać adresy względne i bezwzględne.

Wstaw odnośnik do pliku podstrona.html.
Ustaw kursor za znacznikiem body, dodaj nową linię i wpisz:

<a href="strona/podstrona.html">Odnośnik do podstrony</a>

Dodaj plik podstrona.html.

W katalogu, w którym znajduje się plik index.html, utwórz folder o nazwie strona i wejdź do niego.
Utwórz nowy plik tekstowy i nazwij go podstrona.html
Otwórz go w edytorze i wpisz:

<html>
   <head>
      <title>Podstrona</title>
   </head>
   <body>
         <h1>Utworzyłem odnośnik do podstrony</h1>
   </body>
</html>

Ustaw kursor za znacznikiem h1, dodaj nową linię i wpisz:

<a href="../index.html">Powrót do poprzedniej strony</a>

Zapisz plik podstrona.html. Sprawdź, czy pliki index.html i podstrona.html wyglądają tak, jak na Rys. 2.

Rys. 2. Pliki index.html i podstrona.html po pierwszym kroku.

Odśwież plik index.html w przeglądarce i sprawdź, czy po kliknięciu w Odnośnik do podstrony zostaniesz przekierowany do pliku podstrona, przedstawionego na Rys. 3.

Rys. 3. Widok pliku podstrona.html po kliknięciu na link.

Kliknij na link Powrót do poprzedniej strony i sprawdź, czy zostałeś przekierowany na stronę index.html.

Dodawanie odnośnika do innej strony

Często odnosimy się do stron, które znajdują się na innym serwerze. W tym celu najlepiej używać adresów bezwzględnych. Więcej informacji o adresowaniu bezwzględnym znajdziesz w encyklopedii Jak określać adresy względne i bezwzględne.

Ustaw kursor za wcześniej dodanym odnośnikiem i dodaj nową linię.

Wpisz:

<br />
<a href="http://www.microsoft.pl">Odnośnik do strony Microsoft</a>

Zapisz plik index.html i otwórz go w przeglądarce. Sprawdź, czy wygląda tak, jak na Rys. 4.

Rys. 4. Odnośnik do strony www.microsoft.pl.

Sprawdź, czy po kliknięciu w Odnośnik do strony Microsoft zostaniesz przeniesiony na stronę www.microsoft.pl.

Informacja

Standardowo, po kliknięciu na odnośnik, nowa strona jest otwierana w tym samym oknie. W przypadku adresów zewnętrznych warto otworzyć ten adres w nowym oknie tak, aby nasz użytkownik miał cały czas dostęp do naszych treści. W tym celu do odnośnika należy dodać atrybut: target="_blank"

Więcej o tym atrybucie przeczytasz w Jak otworzyć stronę w nowym oknie.

Dodawanie odnośnika do adresu pocztowego

Aby utworzyć odnośnik, umożliwiający wysłanie wiadomości e-mail, wykorzystaj schemat:

<a href="mailto:adres_pocztowy?subject=Tytuł&body=treść”>opis</a>

Zamiast "adres_pocztowy" wpisz adres e-mail skrzynki pocztowej, na którą mają przychodzić wiadomości, "Tytuł" uzupełnij wybranym przez siebie tytułem maila, a "treść" zamień na treść maila. Więcej informacji na temat odnośników znajduje się w encyklopedii Jak wysłać maila za pomocą odnośnika.

Ustaw kursor za wcześniej dodanym odnośnikiem i dodaj nową linię.
Wpisz:

<br />
<a href="mailto:mój@adrespocztowy.pl?subject=Odnośniki&body=To jest treść przykładowego maila">Wyślij e-mail</a>

Zapisz plik index.html. Sprawdź, czy wygląda on tak, jak na Rys. 5.

Rys. 5. Widok pliku index.html po dodaniu odnośnika do poczty e-mail.

Odśwież plik index.html w przeglądarce. Kliknij w Wyślij e-mail i sprawdź, czy odpowiednie pola w kliencie pocztowym są uzupełnione zgodnie z podanymi powyżej.

Dodawanie odnośnika do zakładki na stronie

Aby utworzyć odnośnik, umożliwiający odwołanie się do dowolnego elementu na naszej stronie, musimy najpierw go zdefiniować, nadając mu nazwę wg schematu:

<a name="nazwa_etykiety">Opis etykiety</a>

W miejscu, które ma przenosić do etykiety wpisz wg schematu:

<a href="#nazwa_etykiety">Opis</a>

Ustaw kursor za znacznikiem body, dodaj nową linię i wpisz:

<a name="gora">To jest początek dokumentu</a>
<br />

Ustaw kursor po ostatnio dodanym odnośniku i wklej 6 razy następujący fragment:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a condimentum augue. Vestibulum ligula erat, congue eu interdum at, mollis non turpis. Phasellus luctus, enim in fermentum fringilla, nisl erat sodales dolor, eget convallis nibh nibh a nisi.</p>

Na końcu wpisz:

<a href="#gora">Przejdź na górę dokumentu</a>
<br />
<a name="koniec">A to jest koniec</a>

Przejdź do pliku podstrona.html i wpisz po ostatnim odnośniku:

<br />
<a href="../index.html#koniec">Powrót do poprzedniej strony na koniec</a>

Zapisz pliki index.html i podstrona.html. Sprawdź, czy wyglądają tak, jak na Rys. 6.

Rys. 6. Plik index.html i podstrona.html po pierwszym kroku.

Odśwież w przeglądarce plik index.html. Zmniejsz okno przeglądarki tak, abyś nie widział końca dokumentu. Przejdź na koniec i kliknij w odnośnik Przejdź na górę dokumentu. Sprawdź, czy znalazłeś się na górze dokumentu.
Kliknij na Odnośnik do podstrony. Na podstronie kliknij Powrót do poprzedniej strony na koniec. Sprawdź, czy zostałeś przekierowany na koniec pliku index.html.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod pliku index.html:

<html>
<head>
    <title>Odnośniki</title>
</head>
<body>
    <a name="gora">To jest początek dokumentu</a>
    <br />
    <a href="strona/podstrona.html">Odnośnik do podstrony</a>
    <br />
    <a href="http://www.microsoft.pl">Odnośnik do strony Microsoft</a>
    <br />
    <a href="mailto:mój@adrespocztowy.pl?subject=Odnośniki&body=To jest treść przykładowego maila">Wyślij e-mail</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a condimentum augue. Vestibulum ligula erat, congue eu interdum at, mollis non turpis. Phasellus uctus, enim in fermentum fringilla, nisl erat sodales dolor, eget convallis nibh nibh a nisi. Nam augue leo, rutrum at gravida eu, aliquam ac ligula. Praesent consectetur, erat congue feugiat suscipit, turpis sapien lacinia urna, vitae laoreet erat elit ac dolor. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a condimentum augue. Vestibulum ligula erat, congue eu interdum at, mollis non turpis. Phasellus luctus, enim in fermentum fringilla, nisl erat sodales dolor, eget convallis nibh nibh a nisi. Nam augue leo, rutrum at gravida eu, aliquam ac ligula. Praesent consectetur, erat congue feugiat suscipit, turpis sapien lacinia urna, vitae laoreet erat elit ac dolor. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a condimentum augue. Vestibulum ligula erat, congue eu interdum at, mollis non turpis. Phasellus luctus, enim in fermentum fringilla, nisl erat sodales dolor, eget convallis nibh nibh a nisi. Nam augue leo, rutrum at gravida eu, aliquam ac ligula. Praesent consectetur, erat congue feugiat suscipit, turpis sapien lacinia urna, vitae laoreet erat elit ac dolor. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a condimentum augue. Vestibulum ligula erat, congue eu interdum at, mollis non turpis. Phasellus luctus, enim in fermentum fringilla, nisl erat sodales dolor, eget convallis nibh nibh a nisi. Nam augue leo, rutrum at gravida eu, aliquam ac ligula. Praesent consectetur, erat congue feugiat suscipit, turpis sapien lacinia urna, vitae laoreet erat elit ac dolor. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a condimentum augue. Vestibulum ligula erat, congue eu interdum at, mollis non turpis. Phasellus luctus, enim in fermentum fringilla, nisl erat sodales dolor, eget convallis nibh nibh a nisi. Nam augue leo, rutrum at gravida eu, aliquam ac ligula. Praesent consectetur, erat congue feugiat suscipit, turpis sapien lacinia urna, vitae laoreet erat elit ac dolor. </p>
    <a href="#gora">Przejdź na górę dokumentu</a>
    <br />
    <a name="koniec">A to jest koniec</a>
</body>
</html>

Poniżej możesz zobaczyć końcowy kod pliku podstrona.html:

<html>
<head>
    <title>Podstrona</title>
</head>
<body>
    <h1>Utworzyłem odnośnik do podstrony</h1>
    <a href="../index.html">Powrót do poprzedniej strony</a>
    <br />
    <a href="../index.html#koniec">Powrót do poprzedniej strony na koniec</a>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się dodawać odnośniki do podstrony, innej strony, adresu pocztowego, a także tworzyć mapy odsyłaczy, wykorzystując odnośniki umiejscowione w różnych obszarach danej podstrony.

W kolejnym artykule nauczymy się, jak używać i formatować Odnośniki.