Ссылки

HTML тег

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

Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей․

Синтаксис тега
Атрибуты тега

Атрибут href

a href="url">текст ссылкиa> a href="#a">текст ссылкиa>

Пример использования тега

html> html> head> title>Заголовок окна веб-страницы title> head> body> a href="https://ru.w3docs.com/">W3docs.com a> body> html>

Результат

Нажав на ссылку, вы будете перенаправлены на домашнюю страницу нашего сайта.

Атрибут target

Атрибут target указывает браузеру, в каком окне открывать документ (по умолчанию ссылки открываются в текущем окне).

Для атрибута target существуют следующие значения:

• _blank открывает ссылку в новом окне.
• _self открывает ссылку в текущем окне
• _parent открывает документ в родительском фрейме.
• _top cancels all frames, and opens in full browser window.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> a href="https://ru.w3docs.com/" target="_blank">W3docs.com a> body> html>

Результат

Атрибут rel

Этот атрибут устанавливает отношения текущего документа к ссылке. Возможными значениями атрибута могут быть:

• alternate — указывает альтернативную версию документа.
• author — ссылка на автора документа или статьи
• bookmark — постоянная ссылка, которая используется для закладок.
• nofollow — сообщает поисковым системам, что не следует передавать по ссылке ТИЦ и PR

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

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

Атрибут download позволяет скачать файл по ссылке вместо его открытия в браузере. Это иногда полезно для типовых файлов браузера — изображений, текстовых файлов, HTML-документов, PDF. В примере 1 показаны две ссылки на одно и то же изображение. При этом обычная ссылка просто открывает картинку в браузере, а вторая, с атрибутом download , выводит окно для сохранения файла на жёстком диске компьютера.

Пример 1. Использование download

Результат данного примера при щелчке по ссылке для скачивания зависит от настроек браузера (рис. 1). Если установлена галочка «Всегда выдавать запрос на сохранение файлов», то при щелчке откроется окно для указания места сохранения. Если эта галочка не стоит, то файл будет сохранён автоматически в указанную папку.

Рис. 1. Настройки браузера для сохранения файлов

Ссылка с атрибутом download по внешнему виду никак не отличается от рядовых ссылок, поэтому, чтобы как-то обозначить ссылку для скачивания, к ней можно добавить одиночный символ или текст. Для этого мы воспользуемся селектором a[download] , который будет задавать стиль всех элементов с атрибутом download . Сам вывод текста делается с помощью комбинации псевдоэлемента ::before (выводит до ссылки) или ::after (выводит после ссылки) и свойства content (пример 2).

Пример 2. Стилизация ссылок с download

Различные иконки для своих задач можно взять на сайте utf8icons.com. Достаточно найти подходящий символ, скопировать и вставить его как обычный текст в значение свойства content .

Вместо текста можно использовать и картинку в любом подходящем формате. Свойство content позволяет задать адрес изображения через функцию url() . В примере 3 показано как вставить картинку после текста ссылки.

Пример 3. Добавление картинки после текста

Результат данного примера показан на рис. 2.

Рис. 2. Иконка возле ссылки для скачивания

Бесплатно картинки в формате SVG можно взять с сайта svgrepo.com.

У этого метода есть существенный минус — картинка показывается исходного размера и её нельзя масштабировать через CSS. Чтобы обойти это ограничение, будем выводить картинку как фоновую через свойство background-image, а масштабировать её через background-size (пример 4).

Пример 4. Вывод картинки через фон

Псевдоэлементу, созданному через ::after, задаём фиксированные размеры через свойства width и height. Ширина и высота элемента не применяется к строчному элементу, которым здесь является псевдоэлемент, поэтому мы добавляем свойство display со значением inline-block . Сама картинка выводится как фон через свойство background-image, а масштабируется этот фон через background-size. Итоговый результат показан на рис. 3.

Рис. 3. Фоновая картинка идёт после ссылки для скачивания

target

Атрибут target позволяет открывать ссылку в новой вкладке браузера или в конкретном фрейме (он создаётся через ).

Открытие ссылки в новой вкладке

По умолчанию любая ссылка открывается в текущей вкладке, но если к элементу добавить атрибут target со значением _blank , то ссылка откроется в новой вкладке:

_blank (именно так, с подчёркиванием впереди) — это зарезервированное значение для открытия новой вкладки браузера. Каждая ссылка с _blank откроет свою отдельную вкладку. К примеру, если открыть 10 таких ссылок, то браузер создаст 10 вкладок и в каждую из них загрузит свою веб-страницу. Опять же, атрибут target не влияет на внешний вид ссылки, поэтому догадаться, как она будет открыта — в текущей или в новой вкладке, можно только по поведению. Чтобы различать ссылки с target и без, воспользуемся селектором a[target=_blank] , который задаёт стиль ссылок с атрибутом target и значением _blank .

Давайте для разнообразия выведем картинку перед ссылкой через библиотеку иконок Font Awesome.

Сперва подключаем стилевой файл со всеми иконками библиотеки через .

Выбираем на сайте fontawesome.com/icons/ подходящую бесплатную иконку для наших задач и щёлкаем по ней. В открывшейся панели нас интересует код иконки, он показывается рядом со словом Unicode (рис. 4).

Рис. 4. Код иконки Font Awesome

Копируем код и вставляем его как значение свойства content.

Заметьте, что перед кодом иконки ставится косая черта, она показывает что это не просто такой текст, а символ Юникода. Полный код приведён в примере 5.

Пример 5. Стилизация ссылки с target через Font Awesome

Для разнообразия добавляем картинку не после, как это делали раньше, а перед ссылкой через псевдоэлемент ::before (рис. 5).

Рис. 5. Фоновая картинка перед ссылкой в новой вкладке

Открытие ссылки во фрейме

Вместо значения _blank можно указать имя фрейма, заданного атрибутом name элемента . Такие ссылки будут открываться в указанном фрейме, а не в текущей вкладке (пример 6).

Пример 6. Открытие ссылки во фрейме

Чебурашка
Крокодил Гена
Шапокляк

Если совершить ошибку и указать несуществующее имя фрейма, то браузер откроет ссылку в новой вкладке. Однако эта вкладка будет именованной и все ссылки с одним значением target будут открываться уже в ней. В примере 7 в качестве значения target используется blank (без подчёркивания, заметьте). Поскольку фрейма с таким именем в коде нет, то все ссылки будут открываться в одной и той же новой вкладке.

Пример 7. Открытие ссылки в именованной вкладки

hreflang

Атрибут hreflang содержит код языка того сайта, на который ведёт ссылка. К примеру, вот как будет выглядеть HTML с указанием языка (пример 8).

Пример 8. Использование атрибута hreflang

В качестве значения hreflang обычно пишется двухбуквенный код языка. В частности, для русского — ru; для английского — en; для французского —fr. Если требуется уточнить страну языка, то она добавляется через дефис. К примеру, для немецкого языка пишем de, но австрийский вариант немецкого уже пишем как de-AT.

Сам hreflang не оказывает влияния на внешний вид ссылок и предназначен в первую очередь для поисковых систем. Однако, используя этот атрибут, мы можем добавить к ссылкам иконку или текст, опять же, через селектор атрибута (пример 9).

Пример 9. Стилизация ссылок с hreflang

Здесь к каждой ссылке с соответствующим значением атрибута hreflang добавляется текст с обозначением языка. Результат данного примера показан на рис. 6.

Атрибуты download , target , hreflang должны добавляться только при наличии атрибута href .

Итоги

• Мы рассмотрели следующие атрибуты элемента :
  • download — позволяет скачать файл по ссылке, а не открывать его в браузере;
  • target — используется для открытия ссылок в новой вкладке или в окне фрейма;
  • hreflang — указывает язык сайта или веб-страницы по ссылке;

  Источник

  HTML Атрибут target

  Атрибут target (от англ. «target» — «цель, мишень») указывает место (фрейм или окно браузера) в которое должен быть загружен, указанный ресурс.

  Для элемента определяет имя фрейма, в котором будут открываться все ссылки.
  Действие target в качестве атрибута элемента распространяется на все ссылки документа, кроме ссылок в которых это действие переопределяется собственными атрибутами target .

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

  Синтаксис

  Значения

  _blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .

  Значение по умолчанию

  Применяется к тегам

  Отличия HTML 4.01 от HTML 5

  В HTML 4.01 атрибут считался устаревшим и не рекомендован к использованию, в HTML 5 он полностью поддерживается.

  Примеры использования:

  Атрибут target (Элемент )

  Пример HTML:

  Открыть пример в фрейме
   

  Атрибут target (Элемент )

  Пример HTML:

  Источник

  Читайте также:  Html iframe and javascript