Урок 9. Ссылки в HTML.

Содержание урока:

Ссылка - тег a

Абсолютная и относительная адресация

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

Использование якорей

Подсказки

Ссылка - тег a

Ссылка - одно из важнейших понятий для html-документов. Бродя по интернету, вы щелкаете по кнопочкам и текстам и попадаете на нужные вам страницы. Эти страницы могут находиться на том же сервере, а могут и на сервере, находящемся на другом конце планеты. Но в обоих случаях переход осуществляется практически мгновенно. А как вы узнаете, куда надо щелкнуть, чтобы перейти на другую страницу? Либо визуально (цвет ссылки другого цвета и подчеркнут), либо по курсору мыши, который превращается в ладошку. За все эти преображения отвечает тег-контейнер < a> < /a>. А за то, куда направить пользователя по щелчку - его атрибут -href. Рассмотрим подробнее:

< html>

< head>

< title> Ссылки в html< /title>

< /head>

< body>

Посетите

< a href=" https://www.yandex.ru" >

поисковую систему Яндекс

< /a>

< /body>

< /html>

Результат:

Посетите поисковую систему Яндекс

Если вы щелкните по ссылке, то перейдете на сайт www.yandex.ru. Обратите внимание, когда вы подводите курсор мыши к ссылке, внизу (в строке состояния) отображается адрес, на который ведет ссылка. Итак, между тегами < a> < /a> пишется текст, при щелчке по которому осуществляется переход. А в качестве значения атрибута href выступает адрес страницы, на которую будет осуществлен переход. Об адресе следует поговорить подробнее. Абсолютная и относительная адресация Существуют два способа задания URL-адреса: абсолютный и относительный. О том, что такое URL читайте на странице что такое URL. Рассмотрим на примере. Пусть у нас есть сайт с зарегистрированным доменом - mysite.ru. Все страницы сайта у нас хранятся на сервере в двух папках public и private. При этом в папке public содержатся файлы index.html и articles.html, а в папке private - price.html и cinema.html. Т.е. наш сайт имеет следующую структуру.

При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы. В нашем примере абсолютный адрес страницы index.html следующий:

< a href=" https://www.mysite.ru/public/index.html" >

А страницы cinema.html:

< a href=" https://www.mysite.ru/private/cinema.html" >

При относительной адресации путь указывается от того каталога, в котором хранится исходный файл. Например, если мы хотим разместить ссылку со страницы index.html (исходный файл) на страницу articles.html, то, учитывая, что обе страницы лежат в одном каталоге (т.е имеют один уровень), она будет выглядеть следующим образом:

< a href=" articles.html" >

Если же мы захотим сделать ссылку со страницы index.html на страницу price.html, то, учитывая, что страницы лежат в разных каталогах, она будет выглядеть следующим образом:

< a href="../private/price.html" >

Две точки вначале означают подняться в иерархии папок на уровень выше. Все ссылки на внешние источники имеют абсолютный адрес. Внутренние ссылки (в пределах сайта) можно задавать любым способом. Какой способ задания адреса выбрать решать вам. У каждого есть свои плюсы и минусы. Если, используя абсолютную адресацию, вы решите поменять домен, то вам придется переделывать все ссылки на вашем сайте. При относительной адресации этого делать не придется, при условии сохранения структуры папок. Ссылки в новом окне Вы знаете, что при щелчке по ссылки, документы могут открываться как в текущем окне, так и в новом. Этим процессом можно управлять. По умолчанию ссылки загружаются в то же окно, но если указать параметр target=" _blank", то ссылка загрузится в новое окно.

< html>

< head>

< title> Ссылки в новом окне< /title>

< /head>

< body>

Посетите

< a href=" https://www.yandex.ru" target=" _blank" >

поисковую систему Яндекс

< /a>

< /body>

< /html>

Результат:

Посетите поисковую систему Яндекс

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

< html>

< head>

< title> Ссылки в html< /title>

< /head>

< body>

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

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

< /p>

< p> второй абзац< /p>

< p> третий абзац< /p>

< p> < a href=" #top" > Наверх< /a> < /p>

< /body>

< /html>

В результате, щелкнув по ссылке " Наверх", вы попадете в начало первого абзаца. Чтобы результат был виден, сделайте тексты второго и третьего абзацев длинными. Подсказки У ссылок есть параметр title, в качестве значения которого можно указать текст, который будет выводиться в качестве подсказки, если подвести курсор мыши к ссылке. Пример ссылки со всеми ее параметрами:

< html>

< head>

< title> Ссылки в html< /title>

< /head>

< body>

Посетите

< a href=" https://www.yandex.ru"

target=" _blank"

title=" переход на Яндекс" >

поисковую систему Яндекс

< /a>

< /body>

< /html>

Результат:

Посетите поисковую систему Яндекс

На этом урок, посвященный ссылкам, закончен. На следующем уроке будем учиться работать со списками.