Linki HTML

HTML używa hiperłączy do połączenia z innymi dokumentami w sieci.

Hyperłącza można znaleźć prawie na każdej stronie internetowej. Kliknięcie linku przenosi użytkownika do innej strony.

Przykład

Tworzenie hiperłączy
Ten przykład pokazuje, jak tworzyć linki w dokumencie HTML.
Używanie obrazów jako linków
Ten przykład pokazuje, jak używać obrazów jako linków.

(Więcej przykładów można znaleźć w dolnej części tej strony)

Hyperłącza HTML (linki)

Hyperłącze może być jednym słowem, grupą słów, lub obrazem, który można kliknąć, aby przejść do nowego dokumentu lub do pewnej części bieżącego dokumentu.

Kiedy wskazówka myszy przenosi się na link w stronie internetowej, strzałka zmienia się w małą rękę.

Używamy tagu <a> do tworzenia linków w HTML.

Istnieją dwa sposoby użycia znacznika <a>:

  1. Poprzez użycie atrybutu href - tworzenie linków do innego dokumentu
  2. Poprzez użycie atrybutu name - tworzenie zakładek w dokumencie

Przeczytaj więcej:Co to jest hipertekst?

Gramatyka HTML linku

Kod HTML linku jest prosty. Wygląda podobnie do tego:

<a href="url">Tekst linku</a>

Atrybut href określa cel linku.

Tekst między znacznikami startowymi i końcowymi jest wyświetlany jako hiperłącze.

Przykład

<a href="http://www.codew3c.com/"">Odwiedź CodeW3C.com</a>

Powyższy kod wyświetla się jako:Odwiedź CodeW3C.com

Kliknięcie tego hiperlinku przeniesie użytkownika do strony głównej CodeW3C.com.

Komentarz:"Tekst linku" nie musi być tekstem. Obraz lub inny element HTML może również być linkiem.

HTML link - atrybut target

Używając atrybutu Target, możesz zdefiniować, gdzie ma być wyświetlany linkowany dokument.

To zdanie otworzy dokument w nowym oknie:

<a href="http://www.codew3c.com/" target="_blank">Odwiedź CodeW3C.com!</a>

Spróbuj sam!

HTML link - atrybut name

Atrybut name określa nazwę założenia.

Możesz użyć atrybutu name do utworzenia zakładki w dokumencie HTML.

Zakładki nie są wyświetlane w żaden specjalny sposób, są niewidoczne dla czytelnika.

Kiedy używamy założenia (named anchors), możemy utworzyć link, który przeniesie użytkownika bezpośrednio do tego założenia (np. do małej sekcji na stronie), dzięki czemu nie będzie musiał on nieustannie przewijać strony w poszukiwaniu potrzebnych informacji.

Gramatyka założenia:

<a name="label">Założenie (tekst wyświetlany na stronie)</a>

Komentarz:Nazwa założenia może być dowolna.

Komentarz:Możesz użyć atrybutu id zamiast atrybutu name, nazwanie założenia jest równie skuteczne.

Przykład

Najpierw nazwijmy założenie w dokumencie HTML (utwórz zakładkę):

<a name="tips">Podstawowe uwagi - przydatne wskazówki</a>

Następnie tworzymy link do tego założenia w tym samym dokumencie:

<a href="#tips">Przydatne wskazówki</a>

Możesz również utworzyć link do tego założenia na innych stronach:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">有用的提示

">Przydatne wskazówki</a>

W powyższym kodzie dodajemy znak # i nazwę kotwicy na końcu URL, aby bezpośrednio linkować do kotwicy o nazwie 'tips'.Specyficzne efekty:

Przydatne wskazówki

Podstawowe uwagi - przydatne wskazówki:Komentarz:

Komentarz:Zawsze dodawaj kreskę poziomą do podfolderów. Jeśli napiszesz link w ten sposób: href="http://www.codew3c.com/html", serwer wygeneruje dwie prośby HTTP. To dlatego, że serwer doda kreskę poziomą do tego adresu i utworzy nową prośbę, tak jak tutaj: href="http://www.codew3c.com/html/".

Komentarz:Nazwane kotwice są często używane do tworzenia spisu treści na początku dużych dokumentów. Można przypisać każdej rozdziałowi nazwaną kotwicę i umieścić linki do tych kotwic w górnej części dokumentu. Jeśli często odwiedzasz Wikipedię, zauważysz, że prawie każdy artykuł ma taką nawigację.

Wskazówka:

Jeśli przeglądarka nie znajdzie zdefiniowanej nazwanej kotwicy, będzie lokalizować się na górze dokumentu. Nie będzie występować błąd.
Więcej przykładów
Otwieranie linków w nowym oknie przeglądarki
Ten przykład pokazuje, jak otworzyć stronę w nowym oknie przeglądarki, tak aby odwiedzający nie musieli opuszczać Twojej strony.
Przejście do innej części dokumentu
Ten przykład pokazuje, jak przejść do innej części dokumentu za pomocą linku.
Tworzenie linku e-mail
Ten przykład pokazuje, jak linkować do e-maila. (Ten przykład działa po zainstalowaniu klienta e-mail.)
Tworzenie linku e-mail 2
Ten przykład pokazuje bardziej złożony link e-mail.

Etykieta linku HTML

Etykieta Opis
<a> Definiowanie kotwicy.