Przejdź do treści

#4 Odsyłacze HTML

Odsyłacze HTML (linki, hiperłącza): naucz się tworzyć przejścia do innych stron WWW, etykiety (kotwice), linki pocztowe (mailto), odsyłacze obrazkowe oraz mapy odsyłaczy. Kontroluj SEO, blokując indeksowanie za pomocą rel="nofollow", "ugc" i "sponsored".

Zobacz więcej...

Odsyłacze HTML (hiperłącza)

Odsyłacze (hiperłącza, odnośniki hipertekstowe, linki) stanowią istotę Internetu, powiązując dokumenty ze sobą. Są wykorzystywane głównie do tworzenia spisu treści w serwisie oraz do linkowania do innych ciekawych miejsc w Internecie. Linki te mogą prowadzić do stron w tym samym serwisie lub na drugim końcu świata.

Podstawowe odsyłacze nawigacyjne (wewnętrzne i zewnętrzne)

Obejmuje to linki w obrębie tego samego serwisu oraz standardowe odsyłacze do innych stron w Internecie. Odsyłacze do podstron są pomocne przy tworzeniu spisu treści serwisu.

  • Odsyłacz do podstrony: przenosi użytkownika do innej podstrony w ramach tego samego serwisu, gdzie każda podstrona jest osobnym plikiem HTML: <a href="...">.
  • Odsyłacz do adresu internetowego (WWW): wstawia linki do dowolnych stron w obrębie całego Internetu: <a href="https://...">.
  • Odsyłacz do etykiety (kotwice/zakładki): służy do tworzenia elektronicznej zakładki na stronie: <a href="#...">. Pozwala na bezpośrednie przeniesienie użytkownika do konkretnego, zaznaczonego miejsca w dokumencie, co ułatwia nawigację.

Odsyłacze funkcjonalne i protokolarne

Ta grupa obejmuje linki, które inicjują specyficzne działania klienta (np. wysyłanie poczty, połączenia, transfer plików) przy użyciu różnych protokołów.

  • Odsyłacz pocztowy (e-mail): umożliwia użytkownikom wysłanie listu poprzez otwarcie domyślnego programu pocztowego: <a "mailto:...">.
  • Odsyłacz FTP: pozwala na bezpośredni odsyłacz do pliku na serwerze FTP (ang, File Transfer Protocol): <a href="ftp://...">.
  • Inne protokoły: obejmujące usługi takie jak połączenia zdalne (ssh) czy skrypty (javascript).

Odsyłacze graficzne

Odsyłacze wykorzystujące obrazy jako elementy aktywne, w tym złożone struktury z wieloma klikalnymi obszarami.

  • Odsyłacz obrazkowy (graficzny przycisk): zamiast tekstu, wewnątrz znacznika odsyłacza (<a href>) umieszcza się znacznik obrazka (<a href="..."><img></a>).
  • Mapa odsyłaczy (image map): umożliwia dodanie kilku odnośników na jednym obrazku poprzez podział go na klikalne obszary: <map><area></map>.
  • Serwerowa mapa odsyłaczy: używana w przypadku bardzo skomplikowanych obszarów: <img ismap>.

Kontrola indeksowania (SEO)

Atrybuty używane w celu zablokowania lub sklasyfikowania wybranych odnośników przez wyszukiwarki sieciowe, takie jak Google.

  • Blokada indeksowania (rel="nofollow"): powoduje, że roboty wyszukiwarek nie podążają za tym linkiem, co jest często stosowane np. w systemach komentarzy, aby zniechęcić spamerów.
  • Treść tworzona przez użytkowników (rel="ugc"): wskazuje, że link został umieszczony przez użytkownika serwisu (ang. user generated content), co pomaga chronić reputację strony.
  • Linki sponsorowane (rel="sponsored"): konieczne do oznaczania płatnych linków reklamowych, zgodnie z wytycznymi Google, w celu uniknięcia kar.

Zobacz więcej...

📅 

Autor:

Czytaj dalej

Aby kontynuować kurs, przejdź do poprzedniego lub następnego artykułu:

Zobacz także

  • HTML
    Podcast HTML / #2 Nagłówek i treść HTML

    Twórz profesjonalne strony WWW! Kompleksowy przewodnik po strukturze HTML, znaczeniu metatagów, SEO i RWD. Opanuj robots, canonical, viewport i obowiązkowe UTF-8, aby osiągnąć optymalne wyniki w Google.

  • HTML
    Podcast HTML / #3 Tekst HTML

    Wprowadzenie do tekstu HTML. Poznaj znaczniki blokowe (p, div, h1) i liniowe (b, i). Odkryj, dlaczego kod poprawny semantycznie (używający strong, em, abbr) jest niezbędny dla robotów wyszukiwarek, SEO i syntezatorów mowy.

Tematy:  (4)

Facebook