1. 1. Struktura łącza
2. 2. Ścieżka bezwzględna i względna
3. 2.1. Absolutny sposób
4. 2.2. Ścieżka względna
5. 3. Kotwice
6. 4. Jak utworzyć obraz linku
7. 5. Jak utworzyć łącze do numeru telefonu, Skype lub adresu e-mail
8. 6. Linki do atrybutów

Linki HTML są tworzone za pomocą elementów <a>, <area> i <link>. Linki są łączem między dwoma zasobami, z których jeden jest aktualnym dokumentem.

Linki można podzielić na dwie kategorie:
linki do zasobów zewnętrznych - utworzone za pomocą tagu <link> i używane do zwiększenia możliwości bieżącego dokumentu podczas przetwarzania przez przeglądarkę;
hiperłącza - linki do innych zasobów, które użytkownik może odwiedzić lub pobrać.

1. Struktura łącza

Hiperłącza są tworzone przy użyciu pary tagów <a> </a>. Wewnątrz tagu znajduje się tekst, który będzie wyświetlany na stronie internetowej. Tekst linku jest wyświetlany w przeglądarce z podkreśleniem, kolor czcionki jest niebieski, po najechaniu na link kursor myszy zmienia wygląd.

Wymaganym parametrem znacznika <a> jest atrybut href, który określa adres URL strony internetowej.

<a href="http://site.ru"> indeks linków </a>

Łącze składa się z dwóch części - wskaźnika i części adresu . Wskaźnik łącza to fragment tekstu lub obrazu widoczny dla użytkownika. Część adresu łącza nie jest widoczna dla użytkownika, jest to adres zasobu, do którego chcesz się udać.

Część adresowa łącza składa się z URl. URl (Uniform Resource Locator) - jednolity adres zasobu. Podczas tworzenia adresów zaleca się używanie łącznika zamiast znaku podkreślenia w celu oddzielenia słów. Ogólnie rzecz biorąc, URl ma następujący format:

metoda dostępu: // nazwa serwera: port / ścieżka

Metoda dostępu lub protokół komunikuje się między stacjami roboczymi w różnych sieciach. Najczęstsze protokoły przesyłania danych to:

plik zapewnia odczyt pliku z dysku lokalnego:

plik: /gallery/pictures/summer.html

http zapewnia dostęp do strony internetowej za pośrednictwem protokołu HTTP:

http://site.ru/

https to specjalna implementacja protokołu HTTP, który używa szyfrowania (zwykle SSL lub TLS)

https://site.ru/

ftp żąda, aby serwer FTP odebrał plik:

ftp: // pgu / katalog / biblioteka

mailto uruchamia sesję pocztową z określonym miejscem docelowym i hostem:

mailto: [email protected]

Nazwa serwera opisuje pełną nazwę komputera w sieci, na przykład site.ru. Jeśli nazwa serwera nie jest określona, ​​łącze jest uważane za lokalne, tj. odnosi się do tej samej maszyny co dokument html zawierający link.

Numer portu TCP, na którym działa serwer WWW. Jest to liczba, którą należy określić, jeśli metoda wymaga numeru portu (poszczególne serwery mogą mieć swój własny numer portu wyróżniającego). Jeśli port nie jest określony, używany jest domyślny port 80. Standardowe porty to:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP

Ścieżka zawiera nazwę folderu, w którym znajduje się plik.

2. Ścieżka bezwzględna i względna

Gdy w linku wskazana jest tylko nazwa pliku, przeglądarka zakłada, że ​​plik znajduje się w tym samym folderze, co dokument zawierający hiperłącze. W praktyce strony internetowe zawierają setki dokumentów umieszczonych w oddzielnych folderach, aby ułatwić zarządzanie nimi. Aby utworzyć łącze do pliku poza folderem zawierającym bieżący dokument, musisz określić lokalizację pliku lub ścieżkę. HTML obsługuje dwa rodzaje ścieżek: absolutną i względną.

Rys. 1. Przykładowa struktura folderów

2.1. Absolutny sposób

Ścieżka bezwzględna wskazuje dokładną lokalizację pliku w całej strukturze folderów na komputerze (serwerze). Bezwzględna ścieżka do pliku daje dostęp do pliku z zasobów innych firm i zawiera następujące składniki:
1) protokół, na przykład http (opcjonalnie);
2) domena (nazwa domeny lub adres IP komputera);
3) folder (nazwa folderu wskazującego ścieżkę do pliku);
4) plik (nazwa pliku).

Istnieją dwa typy bezwzględnych wpisów ścieżki - z protokołem i bez niego:

http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Jeśli plik znajduje się w folderze głównym, ścieżka do pliku będzie następująca:

http://site.ru/index.html

Jeśli nie ma nazwy pliku, strona internetowa ustawiona domyślnie w ustawieniach serwera WWW (tak zwany plik indeksu) zostanie załadowana.

http://site.ru/

Zazwyczaj dokument o nazwie index.html działa jako plik indeksu. Obecność końcowego ukośnika / oznacza, że ​​odwołanie trafia do folderu, jeśli nie istnieje - bezpośrednio do pliku.

2.2. Ścieżka względna

Ścieżka względna opisuje ścieżkę do określonego dokumentu względem bieżącego. Ścieżka jest określona przez lokalizację strony internetowej, na której znajduje się link. Łącza względne są używane podczas tworzenia łączy do innych dokumentów w tej samej witrynie. Gdy przeglądarka nie znajdzie protokołu http: // w łączu, wyszukuje określony dokument na tym samym serwerze.

Ścieżka względna zawiera następujące składniki:
1) folder (nazwa folderu wskazującego ścieżkę do pliku);
2) plik (nazwa pliku).

Ścieżka dla linków względnych ma trzy specjalne oznaczenia:
/ wskazuje na katalog główny i mówi, że musisz uruchomić ścieżkę z głównego katalogu dokumentów i przejść do następnego folderu
./ wskazuje na bieżący folder
../ w górę o jeden folder (katalog) powyżej

Główną różnicą między ścieżkami względnymi i bezwzględnymi jest to, że ścieżka względna nie zawiera nazwy folderu głównego i folderów nadrzędnych, co sprawia, że ​​adres jest krótszy, aw przypadku przejścia z jednej domeny do innej nie trzeba rejestrować nowego adresu bezwzględnego. Ale jeśli zasób innej firmy będzie odnosił się, na przykład, do twoich obrazów z adresami względnymi, nie będą one wyświetlane w innej witrynie.

3. Kotwice

Kotwice lub linki wewnętrzne tworzą skoki do różnych sekcji bieżącej strony internetowej, umożliwiając szybkie przechodzenie między sekcjami. Jest to bardzo wygodne, gdy na stronie jest zbyt dużo tekstu. Linki wewnętrzne są również tworzone za pomocą znacznika <a> z tą różnicą, że atrybut href zawiera nazwę wskaźnika - tak zwaną kotwicę , a nie adres URl. Nazwa wskaźnika jest zawsze poprzedzona znakiem #.

Następujący znacznik utworzy spis treści z szybkimi przejściami do odpowiednich sekcji:

<h1> Pory roku </ h1> <h2> Spis treści </ h2> <a href="#p1"> Lato </a> <! - utwórz kotwicę, określając element #id -> <a href = " # p2 "> Jesień </a> <a href="#p3"> Zima </a> <a href="#p4"> Wiosna </a> <p id =" p1 "> ... </ p> <! - dodaj odpowiedni identyfikator do elementu -> <p id = "p2"> ... </ p> <p id = "p3"> ... </ p> <p id = "p4" > ... </ p>

Jeśli chcesz utworzyć link z jednej strony witryny do określonej sekcji innej strony , musisz ustawić identyfikator dla tej sekcji strony, a następnie dodać ją do adresu bezwzględnego łącza:

<th id = "about-color"> kolor </ th> <a href="https://html5book.ru/css-shrifty/#about-color" class="site" target="_blank"> kolor < / a>

4. Jak utworzyć obraz linku

Aby utworzyć klikalny obraz, musisz umieścić element <img> wewnątrz znacznika <a>. Aby link został otwarty w innym oknie, dodaj atrybut target = "_ blank" dla łącza.

<a href="http://www.fast-torrent.ru/film/gran-za-granyu-tv.html" target="_blank"> <img src = "// html5book.ru/wp-content/ uploads / 2014/07 / Fringe.jpg "alt =" Fringe "> </a> Rys. 2. Link do obrazu

5. Jak utworzyć łącze do numeru telefonu, Skype lub adresu e-mail

Linki mają nowe funkcje - kliknięcie umożliwia nie tylko przejście do innych stron i pobieranie plików, ale także wykonywanie połączeń z telefonami, wysyłanie wiadomości lub wykonywanie połączeń Skype.

link do numeru telefonu <a href="tel:+74951234567"> +7 (495) 123-45-67 </a> link do adresu e-mail <a href="mailto:[email protected]"> przykład @ link do mail.ru </a> do skype (call) <a href="skype:username?call"> skype </a> link do skype (otwórz czat) <a href = "skype: nazwa użytkownika? czat „> Skype </a> link do Skype (dodaj do listy kontaktów) <a href="skype:username?add"> Skype </a> link do Skype (wyślij plik) <a href =" skype: nazwa użytkownika? sendfile "> Skype </a>

6. Linki do atrybutów

Element <a> obsługuje atrybuty globalne i własne.

Tabela 1. Atrybuty znacznika <a> Atrybut Opis, akceptowana wartość pobrania Uzupełnia atrybut href i informuje przeglądarkę, że zasób powinien zostać załadowany w momencie, gdy użytkownik kliknie łącze, zamiast na przykład otworzyć go (jako plik PDF) ). Ustawiając nazwę atrybutu, ustawiamy w ten sposób nazwę ładowanego obiektu. Dozwolone jest użycie atrybutu bez określenia jego wartości:

<a href="/images/logo.png" download> <img src = "/ images / logo.png" alt = "logo"> </a>

<a href="/images/logo.png" download="logo"> <img src = "/ images / logo.png" alt = "logo"> </a>

<a href="files/20022014.pdf" download="Report February 2014.pdf"> Pobierz raport z lutego 2014 r. </a>

href Wartość atrybutu to adres URL dokumentu, do którego się odwołuje. hreflang Określa język powiązanego dokumentu internetowego. Używany tylko z atrybutem href. Akceptowane wartości - skrót składający się z pary liter oznaczających kod języka na przykład:

<a href="http://www.anysite.ru" hreflang="en"> Dowolna witryna </a>

media Określa, dla jakich typów urządzeń plik zostanie zoptymalizowany. Wartością może być dowolne zapytanie o media. ping Śledzi adresy URL zasobów, do których trafił użytkownik. rel Uzupełnia atrybut href o informacje o relacji między bieżącym a powiązanym dokumentem. Akceptowane wartości:
alternate - link do alternatywnej wersji dokumentu (na przykład drukowanej strony strony, tłumaczenia lub lustra).
autor - link do autora dokumentu.
zakładka jest stałym adresem URL używanym do zakładek.
pomoc - link do pomocy.
licencja - link do informacji o prawach autorskich tego dokumentu internetowego.
next / prev - wskazuje łącze między poszczególnymi adresami URL. Dzięki tej marży Google może stwierdzić, że treść tych stron jest połączona logicznie.
nofollow - zabrania wyszukiwarkom klikania linków na tej stronie lub konkretnego linku.
noreferrer - wskazuje, że łącze nie powinno być wysyłane przez przeglądarkę w celu wysłania nagłówka żądania HTTP (referrer), który rejestruje informacje o tym, z której strony pochodzi użytkownik witryny.
prefetch - wskazuje, że dokument docelowy powinien być buforowany, tj. przeglądarka w tle ładuje zawartość strony do pamięci podręcznej.
wyszukiwanie wskazuje, że dokument docelowy zawiera narzędzie wyszukiwania.
tag - wskazuje słowo kluczowe dla bieżącego dokumentu. cel Wskazuje, które okno powinno otworzyć dokument, do którego prowadzi łącze. Akceptuje następujące wartości:
_self - strona jest ładowana do bieżącego okna;
_blank - strona otwiera się w nowym oknie przeglądarki;
_parent - strona jest ładowana do rodzica ramki;
_top - strona jest ładowana do pełnego okna przeglądarki. wpisz Określa Typ MIME pliki dowiązań, tj. rozszerzenie pliku. W tej chwili ma więcej informacji referencyjnych.