Ссылки. Виды ссылок.Якоря.Всплывающие подсказки.

                 Что такое ссылка?

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

Ссылки создаются с помощью очень простого и короткого тега <a>. Например, вот так:

<a href=" http://abcinblog.blogspot.ru/">Простые советы</a>

Задаём адрес ссылки

Тег <a> без адреса бесполезен, так как он описывает ссылку, которая никуда не ведёт. Поэтому при добавлении простого тега текст никак не изменятся.

Адрес ссылки задаётся с помощью атрибута href:

<a href=" http://abcinblog.blogspot.ru/">Простые советы</a>

У ссылки в примере задан адрес http://abcinblog.blogspot.ru/

Значением атрибута является URL, который обычно называют просто адрес. Адреса бывают разные: абсолютные, относительные, указывающие на страницу, на файл, изображение, содержащие якорь и так далее. А значит и ссылка может указывать на любой объект в интернете.

Абсолютные адреса

Поговорим поподробнее об адресах. Они могут быть абсолютными и относительными.

Абсолютные адреса содержат в себе протокол, имя сервера и путь. 
Например, в адресе http://abcinblog.blogspot.ru/ structura-html-documenta.html

http://       — это протокол

abcinblog.blogspot.ru — имя сервера, также называется домен или хост

/ structura-html-documenta.html     — путь

Абсолютный адрес хорош тем, что однозначно указывает расположение документа. Браузер просто запрашивает по указанному протоколу с указанного сервера документ с указанным путём.

Иногда абсолютные адреса записываются в укороченном виде, например вот так: / structura-html-documenta.html     .

В этом случае, браузер подставляет протокол и сервер текущей страницы. 
Например, если на сайте  http://abcinblog.blogspot.ru есть ссылка с адресом / structura-html-documenta.html     то браузер для запроса преобразует её в такую: http://abcinblog.blogspot.ru/ structura-html-documenta.html

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

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

В относительных адресах нет ни протокола, ни имени сервера, а путь не начинается со слэша /. Вот примеры относительных адресов:

courses/1

./courses

../../run/1

В относительных адресах могут использоваться специальные символы, аналогичные символам в путях файловых систем: . и ...

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

Текущий адрес     Адрес в ссылке     Преобразуется в

http://site.ru/news/1       2      http://site.ru/news/2

http://site.ru/news/1       ..      http://site.ru/

http://site.ru/users/profile/1   ../../contacts    http://site.ru/contacts

Использовать относительные адреса для навигации по сайту не рекомендуется. Однако относительные адреса бывают полезны, например, во внешних CSS-файлах.

Ссылка на файл

Ссылка может указывать на любую веб-страницу, на любой файл. Если щёлкнуть по ссылке, ведущей на файл, то браузер предложит его скачать.

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

Ссылка с якорем

Ссылки с якорем обычно используются для создания навигации внутри страницы. Например, оглавления в начале страницы с большой статьёй.

Ссылка с якорем содержит символ #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега.

Можно задать адрес, состоящий из одного якоря, например:

<a href="#glava1">Глава 1</a>

При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом id со значением glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.

Якорь можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу произойдёт прокрутка к заданной части этой страницы

Я могу вам посоветовать очень простое использование якоря вот таким образом. В нужном месте документа ставим вот такой код:

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

Я, обычно, ставлю сразу после нужного текста.

Здесь top- можно заменить на любое из наименований.
А для ссылки на этот якорь в нужном месте документа (обычно внизу) можно прописать:

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

Следует отметить, что в блогспоте при добавлении якоря к любой абсолютной ссылке, его следует добавлять сразу после адреса ссылки без пробела!


<span style="font-family: &quot;times new roman&quot; , &quot;serif&quot;; font-size: 18.0pt;">Самый простой способ выравнивания фото для блогспота <a href="http://abcinblog.blogspot.com/2016/03/blog-post.html#vfoto" target="_blank">здесь!</a><br />
 Узнать больше о якорях можно здесь: htmlbook.ru

Всплывающая подсказка

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

<a title="Подсказка" href="#">

Подсказка появится, когда курсор задержится над ссылкой некоторое время.

Подсказки помогают разъяснить назначение непонятных ссылок, а также ссылок-изображений.

Добавим изображение

Чтобы добавить на страницу изображение, нужно использовать одиночный тег <img> с атрибутом src, в котором указан адрес картинки. Например:

<img src="logo.png">

Кстати, самыми распространёнными форматами изображений в сети являются JPEG и PNG.

https://ru.wikipedia.org/wiki/JPEG

Размеры изображения

Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height. Пример:

<img width="100" src="...">

В примере изображению задана ширина 100px. Обратите внимание, что в атрибуте width после цифры нет px. Если вы задаёте размер картинки в пикселях, то используйте просто цифры. Добавлять px не нужно, таков стандарт.

Во втором примере изображению задана относительная ширина, 50 процентов:

<img width="50%" src="...">

Высоту в процентах обычно не задают.

А теперь маленькая фишка к посту «Как выравнивать изображения в блогспоте»

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

Если же задать и ширину, и высоту для картинки:

<img width="100" height="100" src="...">

то браузер может нарушить пропорции исходного изображения.

Альтернативный текст

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

Альтернативный текст изображения задаётся с помощью атрибута alt. Пример:

<img src="cat.png" alt="Кот в полном расцвете сил">

Изображение-ссылка

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

<a href="http://keksby.ru">

  <img src="cat.png" alt="Кекс">

</a>

Часто ссылки-изображения используются в галереях, когда с уменьшенной версии изображения ставится ссылка на полноразмерное изображение.

А здесь вы сможете узнать о том, как сделать много ссылок с одной картинки.