Урок 8: Ссылки в HTML

В данной статье мы кратко рассмотрим, как создавать ссылки на страницы сайта и ссылки-переходы внутри самих страниц.

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

Для того, чтобы создать ссылку необходимо браузеру сообщить, что является ссылкой, а также указать адрес необходимого документа, на который вы создаете ссылку. Оба этих действия выполняются с помощью тега <a>. Основной синтаксис создания ссылок:

Давайте рассмотрим пример ссылки на главную страницу данного сайта:

Данная ссылка перенаправит вас на главную страницу сайта iTechnologi.ru

Давайте разберем данный код. Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), если рассматривать это иными, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается.

Когда вы создаете ссылки между страницами одного и того же сайта, то вам не обязательно нужно указывать полный адрес  (URL) документа. К примеру, если вы создадите пару страниц (назовем первую страницу stranitsa1.htm, а вторую stranitsa2.htm), которые будут сохранены в одной папке, то вы можете при создании ссылки с одной страницы из них на другую, просто напечатать имя файла в ссылке. Теперь давайте посмотри как будет выглядеть html ссылки со страницы stranitsa1.htm на страницу stranitsa2.htm:

Предположим, что страница stranitsa2 помещена в подпапку с названием «podpapka», тогда ссылка будет выглядеть следующим образом:

Если же создавать ссылку в обратном направлении со страницы stranitsa2 (в подпапке podpapka) на stranitsa1 то она будет выглядеть следующим образом:

Сочетание «../» указывает на то, что файл на который делается ссылка находится в папке, которая расположена на один уровень выше от данной позиции файла. Если вы будете следовать этой логике то наверное догадаетесь, что с помощью данного сочетания «../../» вы сможете создать ссылку на файл расположенный на два уровня больше от данной позиции файла.

Создание ссылок внутри страницы

Так же вы можете создавать ссылки внутри самих страниц. Для этого вам понадобятся такие атрибуты, как id и символ “#”.

Атрибут id используется для создания маркировок элементов, на которые вы хотите совершить переход.

После маркировки, вы можете создать ссылку на данный элемент с помощью символ “#” в атрибуте ссылок. Символ “#” сообщает браузеру, что это переход на этой же странице. После символа “#” должен находится id тег, на который вы совершаете переход.

Для того, чтобы вам стало понятнее, давайте рассмотрим пример:

Ссылка на Заголовок 1

Ссылка на Заголовок 2


Заголовок 1

Некоторый текст

Заголовок 2

Некоторый текст


Запомните: атрибут id всегда должен начинаться с буквы.

Атрибут title

При создании ссылок всегда обязательно используется атрибут href. Так же вы можете поместить в ссылку такой атрибут как title:

iTechnologi.ru

Данный атрибут используют для краткого описания ссылки. Если вы — не щёлкая мышью — поместите её указатель над ссылкой, вы увидите, как появится текст «Следите за выходом новых статей на сайте iTechnologi.ru «.

Урок 9. Изображения в html >>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *