1. Adres URL lub „adres” strony w Internecie
2. Tag <A> i jego podstawowa składnia
3. Odniesienie bezwzględne i względne
4. Względny link do katalogu wyższy niż bieżący
5. Atrybuty znacznika <A>. Jak otworzyć dokument przez odniesienie w nowym oknie
6. Link do tytułu. Atrybut title dla znacznika <A>
7. Hiperłącze atrybutu nofollow. Zakaz przekazywania „zaufania” strony przez odniesienie
8. Wewnętrzny link lub kotwica wewnątrz dokumentu
9. Link Anchor - Obraz
10. Kontynuacja

Odniesienia (lub hiperłącza) przenikają Internet jak naczynia krwionośne. Gdyby nie było linków, nie byłoby Internetu.

Jak utworzyć link w dokumencie HTML i poprawnie zarejestrować jego atrybuty, jaki jest adres URL i jak wyszukiwarki odnoszą się do linków - w tej następnej lekcji dla początkujących do nauki HTML.

Adres URL lub „adres” strony w Internecie

Każdy dokument HTML w Internecie ma swój własny „dokładny adres”. Nazywa się „URL” z angielskiego. URL - Uniform Resource Locator

Struktura adresu URL jest często widoczna na pasku adresu przeglądarki. Obejmuje:

1. Nazwa protokołu to http: // lub https: //
2. Domena witryny
3. folder lub ścieżka do folderu, w którym znajduje się ten dokument,
4. Nazwa pliku (nie zawsze musi być).

Dzięki temu „dokładnemu adresowi” możliwe było odniesienie się do tego dokumentu z tekstu innego dokumentu.

Tag <A> i jego podstawowa składnia

Mam nadzieję, że słowo „składnia” już cię nie przeraża 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> tekst linku </a>

Jak widać, po rozpoczęciu tagu <A> musi istnieć obowiązkowy atrybut href określający adres dokumentu, do którego chcesz się udać.

Wewnątrz znacznika kontenera <A> sam jest tekstem (chociaż może być obraz), który jest tekstem łącza. Jest również nazywany „ kotwicą ” lub po prostu - kotwicą.

Odniesienie bezwzględne i względne

W powyższych przykładach użyto bezwzględnych odniesień. Te, które zawierają pełny adres URL dokumentu.

W niektórych przypadkach atrybut href nie zawiera pełnego adresu URL z nazwą protokołu i domeną witryny. Jeśli dokument, do którego prowadzi link, znajduje się w tej samej witrynie - możesz użyć względnego linku prowadzącego z miejsca, w którym znajduje się dokument.

Schemat, gdy stosowane jest odniesienie względne

Przykład: link z dokumentu first.html prowadzi do pliku second.html, który znajduje się w folderze wiadomości.

Względny link do katalogu wyższy niż bieżący

Kod:

<a href="../first.html"> jest to względny link do pliku w pierwszym katalogu </a>

Ten link prowadzi do pliku first.html w katalogu „nadrzędnym”, tj. jeden poziom wyżej .

Kombinacja ../ wskazuje folder o jeden poziom wyżej od podanej pozycji pliku, z którego tworzone jest łącze.

Atrybuty znacznika <A>. Jak otworzyć dokument przez odniesienie w nowym oknie

Aby otworzyć dokument w nowej karcie przeglądarki, musisz użyć atrybutu target = "_ blank"

Atrybut link target = "_ blank"

Nie nadużywaj tego. Nie ma potrzeby tworzenia wewnętrznych linków do witryny z tym atrybutem. Użytkownicy będą zirytowani „iskrzącym oknem”.

Ogólnie rzecz biorąc, z tym atrybutem docelowym - cała historia. Nadal istnieje wiele jej znaczeń, ale wszystkie z nich są dziś rzadko używane.

Dzieje się tak dlatego, że są one zaprojektowane do współpracy z witryną na ramkach , które nie są już popularne i wraz z pojawieniem się HTML5 , stają się przeszłością.

Link do tytułu. Atrybut title dla znacznika <A>

Innym przydatnym atrybutem jest title = „Tekst wyjaśniający, dokąd prowadzi ten link”

Składnia:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="the pop-up hint"> jest to link podpowiedzi </a>

Jak widać, przeglądarka wyświetla ją jako podpowiedź. A jednak uwzględnia wyszukiwarki.

Wskazówka do atrybutu dla tytułu łącza

Hiperłącze atrybutu nofollow. Zakaz przekazywania „zaufania” strony przez odniesienie

Istnieje jeszcze jeden niejednoznaczny atrybut dla linków rel = "nofollow"

Mówi wyszukiwarkom, że dokument linku może nie być godny zaufania. Jednocześnie wskaźniki zaufania („zaufania”) z witryny źródłowej nie są przesyłane do witryny przez odniesienie.

Temat „zaufania” i rankingi linków jest wciąż przed nami, ale jeśli jest krótki, „los” witryn w wyszukiwarkach będzie również zależał od liczby linków prowadzących do tej strony. Im więcej z nich, tym więcej autorytatywnych stron łączy - im większa wiarygodność witryny.

W niektórych przypadkach warto „przeglądać” linki z tym atrybutem. Na przykład, jeśli napiszesz negatywną recenzję na temat jakiejkolwiek usługi.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> zła witryna </a>

Wewnętrzny link lub kotwica wewnątrz dokumentu

W dużych tekstach często wymagana jest instalacja tak zwanych „kotwic” w logicznych częściach dokumentu. Wtedy jest w tym miejscu, możesz się odwołać.

Najprostszym sposobem użycia jest utworzenie lokalnego spisu treści z hiperłączy prowadzących do tych kotwic. Takie spisy treści są zwykle umieszczane na samym początku artykułu.

Podczas tworzenia takiej kotwicy używany jest atrybut name zamiast atrybutu href.

Składnia tworzenia kotwicy to:

<a name="top"> </a>

Podczas tworzenia linku na końcu adresu URL dodaj znak # - nazwa „kotwicy”:

<p> <a href="#top"> Góra </a> </ p>

Przejście nastąpi dokładnie w to miejsce, tj. Przeglądarka umieści to miejsce w górnej widocznej części.

Często w długich dokumentach na samym dole umieszczają taki link „Góra”.

... podróżując po świecie pachnących ziaren, znaleźli najwyższą jakość tych, z których słyną Afryka, Azja, Ameryka Środkowa i Południowa. Dlatego dziś w kawiarniach marki Ziarna kawy Znajdziesz najlepsze odmiany kawy uznanych producentów.

? Na górę ?

Z innego dokumentu możesz także wyjść do tego miejsca, jeśli dodasz na końcu adresu URL znak # nazwa_

<a href="http://domen-saita.ru/dokument.html#top"> tekst linku prowadzi do kotwicy „top” w tym dokumencie </a>

Link Anchor - Obraz

Każde zdjęcie może być linkiem.

Kod:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>

Domyślnie linki są podkreślane przez przeglądarkę ciągłą niebieską linią, a obrazy linków uzyskują niebieską ramkę.

Linki-zdjęcia otrzymują niebieską ramkę

Aby się go pozbyć, do pliku CSS dla witryny dodawana jest prosta reguła:

a {border: 0px;}

Jest to instrukcja, aby ustawić grubość obramowania na zero dla wszystkich łączy obrazu.

Kontynuacja

W następnym poście omówię linki e-mail, ich atrybuty i metody „ochrony” przed złymi spamerami