Artykuł
09/28/2011

Samouczek: Formatowanie odnośników - Kurs HTML i CSS

Autor: Norbert Blandzi

Opublikowano: 2011-09-27

Formatowanie odnośników jest ograniczone praktycznie tylko wyobraźnią projektanta strony internetowej. Ważne jest, aby zdawać sobie sprawę, że formatowanie odnośnika nie dotyczy jedynie statycznej postaci, a może określać jego wygląd w zależności od stanu, w jakim się znajduje.

W HTML wyróżniono następujące stany:

odnośnik jeszcze nie odwiedzony,
odnośnik aktywowany – stan, w którym znajduje się odnośnik w momencie kliknięcia w niego myszką prawym lub lewym klawiszem, można go również wyzwolić poprzez wciśnięcie przycisku TAB na klawiaturze,
odnośnik wskazany myszką – kursor myszki znajduje się nad odnośnikiem,
odnośnik wcześniej kliknięty.

Przed wykonaniem zadania powinieneś wiedzieć:

jak umieszczać odnośniki w HTML

Po wykonaniu zadań nauczysz się:

formatować odnośniki w zależności od stanu.

Implementacja

Twoim zadaniem jest:

dodanie odnośnika, który przeniesie użytkownika na stronę www.msdn.pl,
dodanie definicji w taki sposób, aby odnośnik dla odpowiednich stanów wyglądał następująco:
—  odnośnik jeszcze nie odwiedzony (w CSS - a:link) – rozmiar fontu: 50px, kolor fontu: zielony, dekoracja tekstu: brak,
—  odnośnik aktywowany (w CSS - a:active) – grubość fontu: 100, kolor fontu: żółty (format szesnastkowy), dekoracja tekstu: przekreślony,
—  odnośnik wskazany myszką (w CSS - a:hover) – styl fontu: kursywa, kolor: niebieski, dekoracja tekstu: podkreślenie,
—  odnośnik wcześniej kliknięty (w CSS - a:visited) – rozmiar fontu: 60px, kolor fontu: fioletowy (format rgb).

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>Formatowanie odnośników</title>
    </head>
    <body>
    </body>
</html>

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

Dodawanie odnośnika, który przeniesie użytkownika na stronę www.msdn.pl

Ustaw kursor za znacznikiem body i dodaj nową linię.
Wpisz:

<a href="http://www.msdn.pl">Odsyłacz do msdn.pl</a>

Określenie wyglądu odnośnika jeszcze nieodwiedzonego

Odnośnik, który nie został jeszcze odwiedzony jest określony w CSS jako:

a:link

Do pliku index.html w nagłówku dodaj:

<style type="text/css">
    a:link
    {
        font-size: 50px;
        color: green;
        text-decoration: none;
    }
</style>

Zapisz plik index.html. Aktualną zawartość pliku przedstawia Rys. 1.

Rys. 1. Plik index.html po modyfikacjach.

Odśwież w przeglądarce plik index.html i sprawdź, czy odnośnik został sformatowany jak na Rys. 2.

Rys. 2. Odnośnik po przypisaniu formatowania.

Informacja

Zauważ, że link aktualnie nie posiada podkreślenia. Umożliwia to ustawienie atrybutu text-decoration na none.

Określenie wyglądu odnośnika aktywowanego

Odnośnik, który został aktywowany jest określony w CSS jako:

a:active

W nagłówku strony, za dodanym poprzednio stylem, dodaj:

a:active
{
    font-weight: 100;
    color: #FFD700;
    text-decoration: line-through;
}

Zapisz plik index.html. Odśwież go w przeglądarce i po kliknięciu na odnośnik sprawdź, czy został sformatowany jak na Rys. 3.:

Rys. 3. Odnośnik po zastosowaniu stylów w stanie active.

Określenie wyglądu odnośnika, nad którym znajduje się kursor myszki

Odnośnik, nad którym znajduje się kursor myszki, jest określony w CSS jako:

a:hover

W nagłówku strony, za dodanym poprzednio stylem, dodaj:

a:hover
{
    font-style: italic;
    color: blue;
    text-decoration: underline;
}

Zapisz plik index.html. Odśwież go w przeglądarce i po najechaniu myszką na odnośnik sprawdź, czy został sformatowany jak na Rys. 4.

Rys. 4 Odnośnik w stanie hover.

Określenie wyglądu odnośnika wcześniej klikniętego

W nagłówku strony, za dodanym poprzednio stylem, dodaj:

a:visited
{
    font-size: 60px;
    color: rgb(123,0,123);
}

Zapisz plik index.html. Aktualną zawartość pliku przedstawia Rys. 5.

Rys. 5. Ostateczna zawartość pliku index.html.

Odśwież go w przeglądarce. Kliknij na odnośnik prawym klawiszem myszki i otwórz go w nowej karcie, następnie odśwież stronę index.html i sprawdź, czy odnośnik został sformatowany jak na Rys. 6.

Rys. 6. Odnośnik w stanie visited.

Podsumowanie

W tym artykule nauczyliśmy się formatowania odnośników w zależności od stanu, w jakim się znajdują.

W kolejnym artykule nauczymy się wykorzystywać odnośniki graficzne.

Dodatkowo zobacz:

Odnośniki w HTML