linki HTML

Linki inaczej zwane odsyłaczami, służą tak w dużym skrócie do przemieszczania się po internecie.
Umożliwiają przechodzenie od strony do strony.

Skrócona nazwa link (ang. łącze, połączenie) pochodzi od ang. hyperlink (ang. hiperłącze).
Linki zwane są również odsyłaczami lub odwołaniami do różnych miejsc w sieci.
To one sprawiają, że internet jest zbiorem połączonych ze sobą dokumentów, występujących najczęściej w postaci stron internetowych.

Linki możemy podzielić na wewnętrzne oraz zewnętrzne.

Linki wewnętrzne mają również dwojaki podział, na linki prowadzące do:

• sekcji na tej samej stronie np. podsumowanie lekcji
• innych podstron w ramach tej samej domeny np. rrogacz.pl/html-listy/

Linki zewnętrzne zaś, prowadzą na strony tzw. zewnętrzne, tzn. znajdujące się na innych domenach np. google.pl.

Do tworzenia linków używamy elementu <a> (ang. anchor – kotwica, bądź zakotwiczenie).
Pomiędzy znacznikami wpisujemy tekst odsyłacza, tzn. tekst który zostanie wyświetlony na ekranie, może to być również grafika.

<a>rrogacz</a>

Po "najechaniu" na link nic się nie dzieje - musimy dodać atrybut - adres strony.
Atrybutem tym jest href (ang. hypertext reference – odniesienie w hipertekście), któremu przypisujemy adres.

<a href="http://rrogacz.pl">rrogacz</a>

• atrybuty celu target=

  _blank - otwiera dokument w nowym oknie
  _self - otwiera dokument w aktualnym oknie (wartość domyślna)
  _parent - otwiera dokument w ramce "rodzica" - obiekt nadrzędny
  _top - otwiera dokument w widoku pełnoekranowym
  framename - otwiera dokument w ramce o podanej nazwie

  <a href="http://rrogacz.pl" target=_blank>rrogacz</a>

• linki do podstron

  Elementem docelowym jest tu dokument znajdujący się w tym samym serwisie co strona główna.
  Odwołujemy się do pliku zapisanego na naszym serwerze.

  <a href="podstrona1.html">podstrona 1</a>

  przykład:

  podstrona 1

• linki zewnętrzne

  Elementem docelowym jest w tym przypadku strona zapisana na innym serwerze.
  Adres strony poprzedzamy określeniem protokołu http://, co informuje przeglądarkę, że odwołanie dotyczy adresu zewnętrznego.

  Przy linkach zewnętrznych dobrą praktyką jest stosowanie dodatkowego atrybutu target.
  Określa on sposób otwierania nowej strony.
  Ustawienie wartości target=_blank spowoduje otwarcie nowego okna.

  <a href="http://google.pl" target=_blank>google.pl</a>

  przykład:

  google.pl

• linki sekcje

  Elementem docelowym jest tu miejsce w tym samym dokumencie.
  Odwołujemy się do sekcji w tym samym pliku.
  Sekcja musi mieć nadany atrybut id, do którego będziemy się odwoływać.

  <p id="poczatek"></p>

  Link do tej sekcji wygląda następująco:

  <a href="#poczatek">linki HTML</a>

  przykład:

  linki HTML

• mapa odsyłaczy

  Mapowanie odsyłaczy jest swoistym tworzeniem odnośnika z wybranego obszaru grafiki.
  Określamy obszar grafiki względem górnego, lewego narożnika i przypisyjemy mu adres łącza.

  kod:

  <img src="ścieżka dostępu" 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">
    <area shape="kształt" coords="współrzędne" href="adres" alt="tekst">
    ...
  </map>
  

  gdzie poszczególne atrybuty lub elementy oznaczają:

  • usemap - atrybut definiuje daną grafikę jako mapę odsyłaczy.
    Dla nazwa_mapy można podać dowolny tekst, byleby był on taki sam w pierwszej i drugiej linii.
    Przed nazwą mapy wstawiamy znak #.
    Na jednej stronie nie mogą się znajdować dwie mapy o takiej samej nazwie!
  • map - znacznik definiuje mapę obrazów dla map odsyłaczy, posiada następujące atrybuty:
    • name - wartość atrybutu definiuje nazwę mapy
    • id - nadaje unikatowy identyfikator
  • area - element opisuje pojedynczy obszar, zawiera następujące atrybuty:
    • shape - znacznik określa typ obszaru, dostępne są następujące wartości:
      • poly - wielokąt
      • rect - prostokąt (w tym również kwadrat)
      • circle - koło
      • default - cały obraz
    • coords - określa punkty definiujące obszar, wartości podawane są w pikselach i po przecinku:
      • dla shape="rect" coords="x1, y1, x2, y2", gdzie:
        x1 - współrzędna pozioma lewego górnego wierzchołka prostokąta
        y1 - współrzędna pionowa lewego górnego wierzchołka prostokąta
        x2 - współrzędna pozioma prawego dolnego wierzchołka prostokąta
        y2 - współrzędna pionowa prawego dolnego wierzchołka prostokąta
        
      • dla shape="circle" coords="x, y, r", gdzie:
        x i y - współrzędne środka okręgu
        r - promień okręgu
      • dla shape="poly" coords="x1,y1, x2,y2, x3,y3...xn, yn", gdzie:
        x1,y1, x2,y2, x3,y3...xn, yn - współrzędne poziome i pionowe kolejnych wierzchołków wielokąta
    • href - wartością jest adres URI łącza
    • nohref - obszar, z którym nie jest powiązany żaden odnośnik, umożliwia to wycinanie powierzchni nieaktywnych z aktywnych.
    • alt - wyświetla tekst alternatywny skojarzony z danym obszarem

    Tworzenie mapy odsyłaczy w programie GIMP - video