Ссылки

Target = «_blank» и другие значения атрибута target

target strong»>target HTML ? Почему он должен быть blank ? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.

Атрибут target

По умолчанию ссылки открываются в том же окне, в котором они были нажаты. Но иногда нужно, чтобы они открывались в новом окне. Это можно сделать, используя атрибут HTML target blank .

Значения target

Четыре наиболее распространенных значения атрибута target :

_self

Значение _self открывает ссылку в том же окне, в котором она была нажата. Это состояние по умолчанию для всех ссылок, так что это значение используется очень редко.

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

_blank

Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .

Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.

_parent

Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов и не поддерживаются в HTML5 . Тем не менее, это значение по-прежнему можно использовать внутри тегов .

_top

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

framename

Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target . Например, открывается во фрейме с именем frame1 , то есть . iframe также поддерживают это значение атрибута. Но вряд ли вы когда-нибудь столкнетесь с такими вариантами использования. Когда framename выбирается пользователем, это имя может начинаться только с буквы, а не с цифры или другого символа.

Символ подчёркивания

Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank» , то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ и разместите на нем код следующей ссылки:

Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank :

Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой ( собственной вкладке ).

Это связано со значением framename , которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “ blank ” интерпретируется как значение типа framename . В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “ blank ”.

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

Источник

Как вставить ссылку в HTML и оформить ее в CSS?

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

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

Навигация по статье:

Как вставить ссылку в HTML?

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

Кроме атрибута href, который задает адрес перехода, тегу можно задавать следующие атрибуты:

• download – указывает на файл для скачивания.
• name – якорь.
• title — всплывающая подсказка при наведении.
• accesskey — активация ссылки с помощью комбинации клавиш.
• coords – задает координаты расположение активной области.
• hreflang – определяет язык текста по ссылке.
• rel — отношения между ссылаемым и текущим документами.
• rev — отношения между текущим и ссылаемым документами.
• shape — указывает форму области ссылки для изображений.
• tabindex — последовательность переключения между ссылками при нажатии на клавишу Tab.
• target — имя окна или фрейма, куда браузер будет загружать документ.
• type — тип документа, на который осуществляется переход.

Большинство из данных атрибутов используются достаточно редко. Наиболее часто используемыми атрибутами являются href, download, target и name.

Как открыть ссылку в новой вкладке HTML?

Для открытия новой вкладке мы можем использовать атрибут target с атрибутом _blank.

Как делается картинка-ссылка HTML?

Если вам нужно сделать картинку-ссылку в HTML, то для этого вам нужно просто поместить тег с адресом картинки в тег .

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

Как сделать ссылку на скачивание файла HTML?

Если вы хотите сделать на своем сайте ссылку для скачивания какого либо файла, то можете использовать HTML-код ссылки:

При клике по такой ссылке будет появляться всплывающее окошко с предложением сохранить файл на компьютере:

Как сделать якорь на странице html?

Не редко бывают случаи когда нужно сделать прокрутку на какое-то место на странице. Особенно часто такая задача встречается при создании посадочных страниц (Lending Page). Для этого мы можем использовать атрибут name.

Давайте рассмотрим как сделать якорь на странице html на примере создания кнопки для быстрого перехода наверх сайта.

В начале страницы, после открытия тега делаем ссылку с атрибутом name, которая будет являться якорем, а в конце документа поставим ссылку с переходом на этот якорь.

Источник

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

Атрибут 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 — указывает язык сайта или веб-страницы по ссылке;

  Источник