HTML+CSS Ссылки

Уроки HTML+CSS: Ссылки

HTML-ссылки создаются с помощью элементов <a><area> и <link>. Ссылки представляют собой связь между двумя ресурсами, одним из которых является текущий документ. Ссылка может вести на страницу стороннего ресурса или может использоваться для подключения сторонних файлов.

Ссылки можно поделить на две категории:
ссылки на внешние ресурсы — создаются с помощью тега <link> и используются для расширения возможностей текущего документа при обработке браузером;
гиперссылки — ссылки на другие ресурсы, которые пользователь может посетить или загрузить.

Гиперссылки создаются с помощью парного тега <a></a>. Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.

Обязательным параметром тега <a> является атрибут href, который задает URl-адрес веб-страницы.

Абсолютный и относительный путь

Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
1) протокол, например, http (опционально);
2) домен (доменное имя или IP-адрес компьютера);
3) папка (имя папки, указывающей путь к файлу);
4) файл (имя файла).

http://site.ru/pages/tips/tips1.html

Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http://, он выполняет поиск указанного документа на том же сервере.

Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу);
2) файл (имя файла).

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

Это основная информация по ссылкам. Но не смотря на это ссылки могу иметь разный вид и разное значение. Одни будут вести просто на страницу сайта, другие могут переходить в приложение (допустим для телефона).

Виды ссылок

Якорь

Ссылка-якорь используется для перехода к определенному разделу на сайте. Такие ссылки хорошо подойдут для одностраничных сайтов.

Для создание такой ссылки вам нужно прописать путь к странице http://site.ru/about. В конце ссылки вам нужно прописать id блока к которому эта ссылка будет вести. Например http://site.ru/about/#test.

Примечание: Идентификатор блока нужно указывать вместе со знаком #.

Ссылка для номера телефона, скайп, электронную почту.

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

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

ссылка на телефонный номер
<a href="tel:+74951234567">+7 (495) 123-45-67</a>

ссылка на адрес электронной почты 
<a href="mailto:example@mail.ru">example@mail.ru</a>

ссылка на скайп (позвонить)
<a href="skype:имя-пользователя?call">Skype</a>

ссылка на скайп (открыть чат)
<a href="skype:имя-пользователя?chat">Skype</a>

ссылка на скайп (добавить в список контактов)
<a href="skype:имя-пользователя?add">Skype</a>

ссылка на скайп (отправить файл)
<a href="skype:имя-пользователя?sendfile">Skype</a>

выбор приложения на андройд

Атрибуты для ссылок

download Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения:<a href="/images/logo.png" download><img src="/images/logo.png" alt="logo"></a>

<a href="/images/logo.png" download="logo"><img src="/images/logo.png" alt="logo"></a>

<a href="files/20022014.pdf" download="Отчет Февраль 2014.pdf">Загрузить отчет за Февраль 2014</a>

href Значением атрибута является URL-адрес документа, на который указывается ссылка.
hreflang Определяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка, например:<a href="http://www.anysite.ru" hreflang="en">Anysite</a>
media Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
rel Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
target Указывает на то, в каком окне должен открываться документ, к которому ведет ссылка. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
type Указывает MIME-тип файлов ссылки, т.е. расширение файла. На данный момент носит больше справочную информацию.

Оставить комментарий

avatar
  Подписаться  
Уведомление о