Урок №5. Ссылки.

Ссылка.
Виды адресации.
Ссылка в новом окне.
Якорь.
Title.


 

Ссылка.

После того, как Вы научились форматировать текст, самое время научится вставлять ссылки в html-документ.

Ссылки – это 90% составляющая интернета. Без них Вы не сможете посетить ни один сайт.

За создание ссылок отвечает тег <a> </a> и атрибут тега — href, который отвечает за то, куда Вы направитесь после щелчка по ссылке.

Пример:

Ссылка на поисковую систему

<a href="http://www.google.com">Google</a>

 

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


 

 

Виды адресации.

    Виды адресации делятся на два типа:

  1. Абсолютная
  2. Относительная

 

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

    Абсолютные ссылки применяются при указании документа на другом сетевом ресурсе. Однако можно применять данный способ и внутри сайта, но это не очень удобно, так как этот вид ссылок очень длинный, а это значит что запутаться в ссылках очень легко. Абсолютные ссылки начинаются с протокола (обычно http://) и содержат имя сайта.

Пример:

<a href=http://www.htmlless.com>Как создать сайт.</a>

 

    Относительная адресация

При относительной адресации путь к файлу указывается от места, в котором размещен исходный файл.

Если файл, на который Вы ссылаетесь, находится в папке с исходным файлом, тогда код будет иметь вид:

<a href="lesson_5.html">Урок №5</a>

Если исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже:

<a href="../lesson_5.html ">Урок №5</a>

 

Две точки означают что нужно выйти из текущей папки на уровень выше.
Если файл хранится в нескольких папках, тогда две точки и слэш (/) нужно ставить для каждой папки.

Если исходный документ и ссылаемый документ находятся в разных папках, тогда код будет иметь следующий вид:

<a href="Папка/lesson_5.html">Урок №5</a>

Как видите, в данном случае нет никаких точек и слэшей, а если папка не одна, а несколько, код будет следующим:

<a href="Папка 1/Папка 2/lesson_5.html ">Урок №5</a>

 


 

 

Ссылка в новом окне.

Мне кажется, Вы не раз замечали на том или ином сайте, ссылки открываются как на текущей странице, так и в качестве новой вкладки.

Делается это с помощью параметра target=»_blank». Данный параметр прописывается внутри тега <a>.

Пример:

Ссылка на поисковую систему

<a href=http://www.google.com target=”_blank”>Google</a>

Щелкните, и посмотрите, что у Вас получится.


 

Якорь.

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

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

Пример:

<p><a name="top">Раздел №1</p>

<p> Раздел №2</p>

<p> Раздел №3</p>

<p> Раздел №4</p>

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

 

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

Вот по такому принципу и делаются якоря.

Практикуйтесь.


 

Title.

Параметр title это своего рода подсказка, которую вы получаете при наведении курсора на ссылку.

Пример:

Ссылка на поисковую систему

<a href=http://www.google.com target="_blank" title="Переход на Google">Google</a>

Google

Данный урок подошел к концу. Практикуйтесь. До встречи на следующем уроке. Удачи.

 

Закрыть меню