HTML Урок 3. Оформление ссылок html

Внутренние ссылки в HTML (якорная ссылка)

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

В таком случае обычно в самом начале страницы делается оглавление из гиперссылок. В HTML такие ссылки, которые организовывают переходы внутри одной страницы, называются внутренними или якорными ссылками.

Рассмотрим механизм создания внутренних ссылок в HTML. Он состоит из двух шагов:

1. Создание закладок или якорей (на которые необходимо переходить по ссылкам):

1 способ:

<a name="название_закладки"></a> <p>Текст для закладки</p>

<a name="название_закладки"></a> <p>Текст для закладки</p>

В качестве якоря служит тег a с атрибутом name — название якоря (закладки)

2 способ:

<p id="название_закладки">Текст для закладки</p>

<p id="название_закладки">Текст для закладки</p>

Для обозначения якоря используется атрибут id, добавляемый к тегу (теги могут быть практически любые: div, span, p, h…)

2. Создание ссылок на якоря (на закладки):

<a href="#название_закладки">Текст ссылки</a>

<a href="#название_закладки">Текст ссылки</a>

Знак шарп или решетка (#) ставится обязательно перед названием якоря

Решение:

1
2
3
4
5
6
7
8
9
10
11
12
13

<ol>
<!-- создание ссылок -->
<li><a href="#glava1">Глава 1</a></li>
<li><a href="#glava2">Глава 2</a></li>
</ol>
<!-- создание якоря -->
<h1 id="glava1">Глава 1. "Язык HTML - история"</h1>
<p>Текст главы</p>
...
<!-- создание якоря -->
<h1 id="glava2">Глава 2. "Структура HTML-страницы"</h1>
<p>Текст главы</p>
...

<h2>CatPhotoApp</h2>
<main>
  <а href="http://cats.ru/cat1.jpg" target="_blank" rel="noopener noreferrer">Фото кота</а>
  <img src="https://bit.ly/fcc-relaxing-cat" alt="Симпатичный оранжевый кот.">
  <p>Ко́шка, или дома́шняя ко́шка (лат. Félis silvéstris cátus), — домашнее животное, одно из наиболее популярных[1] (наряду с собакой) «животных-компаньонов»[2][3][4].</p>
  <p>С точки зрения научной систематики, домашняя кошка — млекопитающее семейства кошачьих отряда хищных. Ранее домашнюю кошку нередко рассматривали как отдельный биологический вид. С точки зрения современной биологической систематики домашняя кошка (Felis silvestris catus) является подвидом лесной кошки (Felis silvestris).
  </p>
  <p>Являясь одиночным охотником на грызунов и других мелких животных, кошка — социальное животное, использующее для общения широкий диапазон звуковых сигналов, а также феромоны и движения тела.</p>
 <p>В настоящее время в мире насчитывается около 600 млн домашних кошек[8], выведено около 200 пород, от длинношёрстных (персидская кошка) до лишённых шерсти (сфинксы), признанных и зарегистрированных различными фелинологическими организациями.</p>
</main>
 
<footer>Copyright Сайт про котов и кошек</footer>

Оформление ссылок HTML для переходов к другим документам

Синтаксис:

<а href="имя_файла">текст</а>

<а href="имя_файла">текст</а>

переход к другому документу с якорем

Иногда необходимо организовать ссылку не просто на другой документ, а на конкретное место — якорь — другого документа.

Синтаксис:

<а href="имя_файла#якорь">текст</а>

<а href="имя_файла#якорь">текст</а>

Выполнение:
Файл с ссылкой:

...
<а href="1.html#a">Ссылка</а>
...

Файл 1.html:

...
<p id="a">Якорь</p>
...

Абсолютные ссылки HTML

Синтаксис:

<а href="протокол://имя_сервера:порт/путь">текст</а>

<а href="протокол://имя_сервера:порт/путь">текст</а>

Рассмотрим примеры:

Ссылка на html-файл по протоколу HTTP:

<а href="http://www.site.ru/doc1.html">текст</а>

Ссылка на zip-файл по протоколу HTTP:

<а href="http://www.site.ru/test.zip">текст</а>

Ссылка на e-mail по протоколу mailto:

<а href="mailto://name@site.ru">текст</а>

Относительный путь ссылок HTML

Рассмотрим примеры того, как правильно должны быть оформлены относительные ссылки.

На изображении файлом для ссылки является target.html. Сама же ссылка оформляется в файле current.html.
Атрибут href гиперссылки должен иметь таковое значение (как на картинке) при указанных расположениях файлов.

Рассмотрим более сложный вариант расположения файлов:

В каком окне открывать ссылку?

За это отвечает атрибут тега гиперссылки — target.

Рассмотрим возможные значения атрибута:
_blank — открывает документ в новом окне
_self — открывает документ в том же окне
_parent — открывает документ в родительском окне
_top — открывает документ на весь экран

Изменение цвета гиперссылки

За цвет гиперссылки отвечают ее атрибуты: link, alink, vlink