Jak wstawić link?

Mamy już bloga lub stronę na temat jaków. Czasem warto dodać linki do stron internetowych, które często odwiedzamy. Dzięki temu zgromadzimy razem nasze ulubione miejsca w sieci. Jak to zrobić?



a href - co to jest?

Jeżeli zdarzyło Ci się podglądać źródła stron internetowych lub wiesz już co nieco na temat języka HTML to prawdopodobnie natknąłeś się na tag <a> wyglądający np. tak:

<a href="strona.html">przejdź do strony</a>

Z pomocą taga <a> (ang. anchor - kotwica) możemy wstawić na swoją stronę internetową:
- linki do podstron lub innych stron internetowych
- linki do plików do ściągnięcia, np dokumentów .pdf lub obrazków
- linki do adresu email otwierające po kliknięciu klienta pocztowego
- tak zwane zakładki wewnątrz strony z wykorzystaniem znaczku hash'a #


Link do strony, podstrony internetowej.

Aby stworzyć link do strony internetowej musimy znać jej URL.
O adresach URL rozpisałem się tutaj.
Jeżeli znamy URL to wpisujemy go w atrybucie href znacznika <a>.

<a href="podstrony/podstrona-o-mnie.html">Kim jestem?</a>

<a href="http://html-jak.blogspot.com">Blog o języku HTML</a>

Jak podlinkować obrazek lub dokument pdf ?

Linkowanie do plików wygląda tak samo jak do stron internetowych. W atrybucie href wpisujemy URL pliku, np.:

<a href="pliki/ksiazka.pdf">Pobierz książkę - plik pdf</a>

<a href="http://i33.tinypic.com/2qa73oi.jpg">Zobacz zdjęcie jaka</a>

Po kliknięciu na takim linku mogą być dwie rekacje w zależności od rodzaju pliku i możliwości przeglądarki. Jeżeli przeglądarka jest w stanie odczytać plik (przeglądarki odczytują większość obrazków, także PDFy jeżeli są odpowiednie wtyczki) wówczas otwiera plik samodzielnie. W przeciwnym razem pojawia się komunikat z pytaniem "Czy otworzyć czy zapisać plik?". Jeżeli chcemy aby po kliknięciu na link plik otworzył się w nowym oknie (lub nowej karcie) przeglądarki powinniśmy wykorzystać atrybut target.


Atrybut target - otwórz w nowym oknie

Załóżmy, że umieściliśmy na swoim blogu kilka linków do naszych ulubionych stron internetowych. Niestety osoby, które kliknięły na takim linku otwierają nową stronę w miejscu naszego bloga. Wykorzystując atrybut target i nadając mu wartość target="_blank" możemy nakazać przeglądarce aby linki zewnętrzne otwierane były w nowym oknie, np.:

<a href="podstrony/podstrona-o-mnie.html">Kim jestem?</a>

<a href="http://html-jak.blogspot.com" target="_blank">Blog o języku HTML</a>

<a href="http://i33.tinypic.com/2qa73oi.jpg" target="_blank">Zobacz zdjęcie jaka</a>

Atrybut target może mieć specjalne wykorzystanie przy stronach z ramkami lub gdy używamy małych okienek, tzw. pop-up'ów. To jednak trochę szerszy temat. Dodam jeszcze, że gdy link nie posiada atrybutu target wówczas przeglądarki internetowe domyślnie otwierają wszystkie linki w tym samym oknie. To samo dzieje się gdy ustawimy target="_self".

<a href="podstrony/podstrona-o-mnie.html">Kim jestem?</a>

<a href="podstrony/kontakt.html" target="_self">Napisz do mnie?</a>

Mailto: link do adresu email

Umieszczając w atrybucie href specjalny wyraz mailto oraz adres email sprawimy, że po kliknięciu na linku uruchomiony zostanie klient pocztowy (np. Mozilla Thunderbird lub Microsoft Outlook itp. - w zależności od systemu operacyjnego) przygotowany do wysłania maila na podany adres.

<a href="mailto:ktos@gdzies.pl">napisz do mnie</a>

id + link z # = przewijanie strony do zakładki

Atrybut id ma wiele zastosowań. Wykorzystywany jest przez HTML, style CSS oraz język JavaScript. Należy zapamiętać, że id jest unikalny w obrębie dokumentu HTML, czyli jeżeli np. przypisaliśmy do obrazka id o wartości "zdjecie-jaka" ...

<img src="zdjecia/jak.jpg" id="zdjecie-jaka" />

... to nie możemy przypisać takiego samego id do żadnego innego elementu (taga) na tej stronie. Można powiedzieć, że to taki numer PESEL dla języka HTML. ;)

I co to ma wspólnego z linkami? Otóż możemy linkować do każdego elementu, który ma ustawiony id. Klikając później na takim linku strona jest przewijana tak, aby pokazać użytkownikowi element z podanym id. Jest to często wykorzystywane w serwisach internetowych w działach POMOCY lub FAQ, które przeważnie zawierają dużo treści. W uproszczeniu może to wyglądać tak:

<a href="#odpowiedz-spacer">Jak często wyprowadzać jaka na spacer?</a>
<a href="#odpowiedz-aport">Jak nauczyć jaka aportować?</a>
<a href="#odpowiedz-chory-jak">Mój jak zachorował - co zrobić?</a>



Jaki lubią spacery bla bla bla ...
Niełatwo nauczyć jaka aportowania, ale bla bla bla ...
Jeżeli jak ma objawy choroby to bla bla bla ...

Dzięki takiej konstrukcji umieszczamy linki na samej górze i osoba odwiedzająca stronę ma możliwość szybkiego przewinięcia strony do interesującej ją treści. Wspomnę jeszcze, że choć standardy przewidują różne znaki to ja radzę, aby wartości id zaczynały się od litery i składały się z liter, cyfr oraz znaków - lub _, np: odpowiedz-spacer, OdpowiedzSpacer odpowiedz_spacer_10 itp.


a title - więcej informacji o linku

Załóżmy, że nasza strona posiada prostą nawigację z czterema linkami:

<a href="index.html">start</a>
<a href="o-mnie.html">o mnie</a>
<a href="jak.html">jak</a>
<a href="kontakt.html">kontakt?</a>

Osoba, która weszła na naszą stronę prawdopodobnie domyśli się do czego prowadzą linki "o mnie" lub "kontakt", ale może być problem np z linkiem "jak". Aby dołożyć informację, która wyświetli się po najechaniu kursorem myszki nad link dołożymy atrybut title.

<a href="index.html" title="strona główna">start</a>
<a href="o-mnie.html" >o mnie</a>
<a href="jak.html" title="moje ulubione zwierzęta - jaki">jak</a>
<a href="kontakt.html" title="napisz do mnie">kontakt?</a>