HTML ссылки.



Ссылки - это базовый элемент сайта. Без ссылки невозможно представить интернет. HTML ссылки связывают между собой миллиарды web-страниц и миллионы сайтов. Бродя по интернету, мы щелкаем по кнопочкам или выделенным надписям, и попадаем на тот или другой сайт или просто переходим с одной страницы на другую.

Ссылка - тег a


<a></a> текст заключенный внутри этих тегов, будет текстом ссылки. Атрибутом является <href>, который направляет посетителя на нужный сайт или страницу. Узнать как определить куда перейти можно визуально (цвет ссылки другого цвета и подчеркнут), или по курсору мыши, который превращается в ладошку.
Пример записи кода:

<html> <head> <title></title> </head> <body> Посетите<a href="https://www.google.ru/">поисковую систему Google</a> </body> </html>

РЕЗУЛЬТАТ:

Посетите поисковую систему Google


Если щелкните по ссылке, вы перейдете на сайт https://www.google.ru. Внизу (в строке состояния браузера) отображается адрес, на который ведет ссылка.

И так: между тегами <a></a> пишем текст для перехода, а атрибут <href> указывает адрес перехода.

Рассмотрим подробнее что такое URL-адрес.

Итак, вы набираете в адресной строке браузера http://www.valvas.ru/Pozitiv/Pozitiv2.html. Браузер видит http:// и понимает, что данный адрес является адресом web-страницы. Далее он видит www.valvas.ru и понимает, что данная страница находится на сервере с этим именем и находит соответствующий этому имени IP-адрес компьютера. Затем он видит Pozitiv и понимает, что искомая страница лежит в папке Pozitiv компьютера с именем www.valvas.ru. И, наконец, он видит Pozitiv2.html и понимает, что с компьютера www.valvas.ru из папки Pozitiv нужно взять файл с именем Pozitiv2.html.

Сайт на сервере представляет собой древо папок.

При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы. Если мы делаем ссылку на Pozitiv1.html, то запись в HTML-коде будет такой

Пример записи ссылки :

<html> <head> <title></title> </head> <body> <a href="http://www.valvas.ru/index.html">Главная</a> </body> </html>

РЕЗУЛЬТАТ:

Главная

Если мы делаем ссылку на poleznoe2.html, то запись в HTML-коде будет такой.

Пример записи ссылки :
<html> <head> <title></title> </head> <body> <a href="http://www.valvas.ru/Poleznoe/Poleznoe2.html">Ссылка</a> </body> </html>

РЕЗУЛЬТАТ:

Ссылка

При относительной адресации путь указывается от того каталога, в котором хранится исходный файл. Если мы хотим разместить ссылку с pozitiv1.html (исходный файл) на страницу pozitiv2.html, то ссылка будет выглядеть с учетом того, что оба файла лежат в одном каталоге (один уровень).

Пример записи ссылки :

<html> <a HREF="http://www.valvas.ru/Pozitiv/Pozitiv2.html">ССЫЛКА1</a> </html>

РЕЗУЛЬТАТ:

ССЫЛКА 1

При ссылке с pozitiv1.html на poleznoe2.html, учитывая что они лежат в разных каталогах выглядеть будет так. Две точки в начале < ../ > говорят о том, что файл лежит в другом уровне.

Пример записи ссылки:

<html> <head> <title></title> </head> <body> <a HREF="../Poleznoe/Poleznoe2.html">ССЫЛКА 2</a></body> </html>

РЕЗУЛЬТАТ:

ССЫЛКА 2

Ссылки в новом окне


Если вы хотите, чтобы ваш документ при щелчке на ссылку открывался в новом окне используйте параметр target="_blank".

Пример записи ссылки :

<html> <head> <title></title> </head> <body> Посетите<a href="https://www.google.ru" target="_blank">поисковую систему Гугл</a> </body> </html>

РЕЗУЛЬТАТ:

Посетите поисковую систему Гугл

Ссылки якорь


Иногда необходимо сделать ссылку на определенный раздел. Для этого создают пустую ссылку name там куда нужно перейти и ссылку с указанием этого имени (после знака #) в качестве адреса параметра href там, откуда следует перейти.

Пример записи ссылки :

<html> <head> <title></title> </head> <body> <p><a name="top"></a>первый абзац, в котором стоит пустая ссылка - якорь</p> <p>второй абзац</p> <p>третий абзац</p> <p><a href="#top">Наверх</a></p> </body> </html>

РЕЗУЛЬТАТ:

первый абзац, в котором стоит пустая ссылка - якорь

второй абзац

третий абзац

Наверх



В результате, щелкнув по ссылке "Наверх", вы попадете в начало первого абзаца.


Далее рассмотрим: "Создание списков".