A href html атрибуты. Внешние ссылки, атрибут HREF
(HTML Anchor Element ).
Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания.Поддержка браузерами
Тег | Opera | IExplorer | Edge |
|||
---|---|---|---|---|---|---|
Да | Да | Да | Да | Да | Да |
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
charset | char_encoding | Не поддерживается в HTML5.
Определяет кодировку, связанного документа. |
coords | coordinates | Не поддерживается в HTML5.
Определяет координаты ссылки. |
filename | Если атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки. | |
href | URL | Задает URL страницы, или документа на которую ведёт ссылка. |
hreflang | language_code | Определяет язык связанного документа на который ведёт ссылка. |
media | media_query | Указывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств. |
name | section_name | Не поддерживается в HTML5.
Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут . |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | |
rev | text | Не поддерживается в HTML5.
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка). |
shape | default rect circle poly | Не поддерживается в HTML5.
Определяет форму ссылки (использовался с атрибутом coords ). Используйте вместо данного тега элемент . |
target | _blank _parent _self _top framename | Указывает, где открыть документ. |
type | media_type | Указывает MIME-тип документа на который осуществляется переход. |
Пример использования
В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё .
Атрибут href (аббревиатура от hyper reference ) - это основной атрибут тега , указывающий браузеру, URL-адрес страницы , куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator , ) - единообразный локатор (определитель местонахождения) ресурса.
Относительные и абсолютные пути ссылок
В приведенном выше примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу. Ниже приведены примеры указания абсолютных путей:
Содержимое элемента href = "http://www.yandex.ru" > Содержимое элемента href = "//www.yandex.ru" > Содержимое элементаОбращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).
Если страница или файл на который ссылаются расположен на том же сервере, что и страница с которой ссылаются, то, как правило используются относительные адреса ссылок. Основная особенность относительных ссылок заключается в том, что они размещаются относительно корня сайта или относительно текущего HTML документа.
Путь относительно текущего документа
Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла.
Пример подключения файлов:
Перейдем к следующему примеру, допустим у нас есть файл index.html , в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html :
Обратите внимание, как мы указываем путь к нашим файлам - мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл ).
Ну и заключительный пример, в котором нам необходимо подключить к нашей странице изображение, которое находится в каталоге, который расположен на два уровня выше текущей страницы и необходимо добавить ссылку, которая находится на один уровень выше текущей страницы:
Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы../ это позволит подняться на один уровень вверх. Вы можете, используя символы../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.
Путь относительно корня сайта
Хочу сразу обратить ваше внимание, чтобы путь относительно корня сайта работал на локальном компьютере, то у вас должна быть установлена программная среда, которая позволяет эммулировать веб-сервер.
Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server , он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac , могу предложить MAMP , если он вам не подойдет, можете попробовать выбрать другой.
Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:
Как и при использовании абсолютных адесов, способ задавать путь относительно корня сайта довольно-таки прост. Разница заключается лишь в том, что у нас отпадает необходимость указывать имя домена, ну и соответственно относительные пути используются только в рамках одного сервера.
Обратите внимание, что необходимо указывать прямой слэш в начале пути, это сообщает браузеру пользователя, что путь начинается с корневого каталога.
Атрибут target
Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:
ПоискНиже представлены все значения этого атрибута:
Работа с фреймами будет рассмотрена позднее в статье учебника " ".
Атрибут mailto
Использование атрибута "mailto" в HTML документе позволяет создать ссылку для отправки письма:
Написать авторуВ значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:
> Написать автору- subject -тема письма.
- cc -копия письма.
- bcc -скрытая копия письма.
- body -тело письма.
Допустимо указывать несколько адресов (либо не указывать вовсе):
" mailto:mail_1@some.com, mailto:mail_2@some.com " > Написать авторуИзображение как ссылка
Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами .
Простой генератор ссылок
Атрибут ссылки href
Всегда ли URL в ссылке начинаются с http://?
В теге a URL можно сокращать согласно установленным правилам . Сокращённую ссылку называют относительной. Она приведёт на страницу относительно точки отправления.
Когда используется слеш (символ /) в конце URL
Эти страницы для поискового робота являются разными. Они дублируют содержание друг друга ().
Из них выбирается основная. На Шпаргалке блоггера со слешем (http://shpargalkablog.. С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel="canonical" . Если ссылка будет иметь вид
Главная страница Шпаргалки блоггера то посетитель или, в случае rel="canonical" только поисковый робот, сначала попадёт на http://shpargalkablog..
Можно уменьшить время ожидания загрузки веб-документа, если пользователя сразу перемещать на нужную страницу. Чтобы не допускать ошибок, желательно копировать URL из адресной строки браузера.
Веб-документы, имеющие окончание, скажем, .html , .png , .css , считаются конечным файлом и косую черту после них писать не желательно. То есть
Http://сайт/2010/09/postroenie-ssylok-v-html.html
Ссылка к заданному месту текста
На странице каждое значение идентификатора (id) должно употребляться только один раз. В CSS распознаётся благодаря хэшу (символ #) перед значением идентификатора.
Если в адресной строке браузера к URL без пропусков добавить селектор идентификатора, то страница без перезагрузки сама прокрутится к тегу. С помощью скрипта можно .
Поисковые системы не рассматривают дубликатами друг друга URL вида
Http://сайт/2010/09/postroenie-ssylok-v-html.html #tut #zdes
Ссылка для отправки почты
В качестве URL следует указать mailto:адрес_электронной_почты. Несколько адресов можно перечислить через запятую. Параметры cc=копия, bcc=скрытая_копия, subject=тема, body=письмо не являются обязательными и объединены с помощью & .
href="mailto:email?cc=копия&bcc=скрытая_копия&subject=тема&body=письмо" > анкор | |
Пример: | mailto:n.mitra@yandex.ru "> n.mitra@yandex.ru |
---|---|
Результат: | n.mitra@yandex.ru |
Пример: | mailto:n.mitra@yandex.ru,n.mitra@yandex.ru?subject=Вопрос по коду ссылки "> служба поддержки |
Результат: | служба поддержки |
Пример: | href="mailto:?.html">http://сайт/2010/09/postroenie-ssylok-v-html.html" > поделитесь ссылкой с друзьями |
Результат: |
Звонок по телефону
Ссылка на скачивание файла
Открыть ссылку в новом окне, новой вкладке, фрейме
* на странице есть указанный код ссылки | * на странице есть фрейм, который содержит другой фрейм со страницей, на которой есть указанный код ссылки |
target="_self" > анкор | |
---|---|
target="_self" > или текущем iframe | |
target="_parent" > анкор | |
target="_parent" > | |
показать смайлик в текущей вкладке или во фрейме-родителе | |
target="_top" > анкор | |
target="_top" > показать смайлик в текущей вкладке | |
показать смайлик в текущей вкладке | |
target="_blank" > анкор | |
target="_blank" > | |
показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя) | |
target="name" > анкор | |
target="raz" > | |
показать смайлик в iframe с указанным name |
Игнорируя желания пользователя, с помощью JavaScript можно , а не в новой вкладке. Но в таком окне нельзя будет поменять URL в адресной строке браузера.
Ссылка «Сохранить в закладки браузера» (HTML)
rel может иметь несколько значений, разделённых пробелом, например, rel="nofollow noreferrer" . У whatwg.org список значений несколько больше. В таблице указаны только те, которые имеют практическое применение, так как часто устройства учитывают лишь тег link: rel="prefetch" в Mozilla Firefox и Google Chrome , rel="next" и rel="prev" для Google .
Закрыть ссылку в nofollow
- ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
- платные ссылки.
Не нужно закрывать в nofollow абсолютно все внешние ссылки. Не нужно закрывать в nofollow внутренние ссылки, допустим, расположенные в меню. Если есть необходимость, то их лучше .
Поясняющий текст к ссылке при наведении курсора мышки
Ссылка в CSS коде
Как изменить цвет ссылки
В атрибуте style нельзя работать с псевдоклассами, то есть, скажем, нельзя изменить цвет конкретной ссылки при наведении курсора мышки. Поэтому нужно установить значение атрибута id (для одной ссылки) или class (для нескольких) и .
Значение свойства color может быть указано ключевым словом, например, red , green (список поддерживаемых ) или в форматах RGB и HSL. Узнать код цвета: #ff0000
Подчёркивание ссылки
За подчёркивание текста отвечает свойство text-decoration , элемента — .
Пример: | style="text-decoration: none; border-bottom: 1px dashed; " > подчеркивание ссылки пунктиром |
---|---|
Результат: | |
Пример: | подчеркивание ссылки появляется только после наведения на неё |
Результат: | |
Пример: | красивые текстовые ссылки |
Результат: | трам-пам-пам трам-пам-пам-пам-пам |
Ссылка, как правило, выделяется нижним подчёркиванием и синим цветом. Однако в качестве ссылки могут выступать ссылки других цветов, изображения и области сайта.
Перейти на Яндекс