Новое окно

Ссылки

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

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

Атрибут href определяет адрес документа, на который следует перейти, а содержимое элемента является ссылкой. Текст, расположенный между тегами и , по умолчанию становится синего цвета и подчёркивается. В примере 1 показано создание нескольких ссылок на разные веб-страницы.

Пример 1. Добавление ссылок

В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в окне браузера откроется документ dog.html, а при щелчке на «Кошки» — cat.html.

Результат примера показан на рис. 1. Обратите внимание, что при наведении курсора мыши на ссылку меняется вид курсора, а в строке состояния браузера отображается полный путь к документу.

Рис. 1. Вид ссылок на веб-странице

Если указана ссылка на документ, которого не существует, к примеру, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется «битая». Битых ссылок следует избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из примера 1 в браузере Firefox откроется не сам документ, а окно с предупреждением (рис. 2).

Рис. 2. Результат при открытии битой ссылки

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

Абсолютные и относительные ссылки

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать имя домена. Относительные ссылки ведут отсчёт от корня сайта или текущего документа.

Протокол для сайта можно не указывать, в таком случае ссылка будет начинаться сразу с // без протокола. Браузер сам подставит нужный протокол, на котором работает сайт. В примере 2 показано создание подобной ссылки.

Пример 2. Использование ссылки

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

Когда в адресе указывается только домен (//webref.ru) или после домена идёт имя папки (//webref.ru/css/), то веб-сервер автоматически загружает документ, обычно с именем index.html или index.php. Таким образом, полный путь к сайту будет https://webref.ru/index.php, а сокращённый — //webref.ru.

Абсолютные ссылки обычно применяются для указания на другой ресурс, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 3).

Необходимо сделать ссылку из исходного документа source.html на target.html. В таком случае код будет следующий.

2. Файлы размещаются в разных папках (рис. 4).

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

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 5).

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

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 6).

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

Заметьте, что никаких дополнительных точек перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

5. Файлы размещаются в разных папках (рис. 7).

Каждый файл располагается в своей папке и чтобы перейти из одной папки в другую ссылка будет следующей.

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/folder/target.html». Так, запись Курсы означает, что ссылка ведёт в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить файл index.html.

Опять же, такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Виды ссылок

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

Обычная ссылка

Такое состояние характеризуется для ссылок, которые ещё не открывали. По умолчанию обычные текстовые ссылки изображаются синим цветом и с подчёркиванием.

Посещённая ссылка

Как только пользователь открывает документ, на который ведёт ссылка, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию.

Активная ссылка

Ссылка помечается как активная при щелчке по ней. Поскольку щелчок происходит достаточно быстро, подобное состояние ссылки весьма кратковременно. Цвет такой ссылки по умолчанию красный.

Атрибут target

При переходе по ссылке документ по умолчанию открывается в текущей вкладке браузера. При необходимости это условие может быть изменено атрибутом target . Синтаксис следующий.

Такая ссылка открывается в новой вкладке или окне браузера. Где именно откроется ссылка, зависит от настроек браузера и не может быть задано через HTML. Как правило, ссылки открываются в новой вкладке.

В примере 3 показано, как сделать, чтобы ссылка открывалась в новой, а не в текущей вкладке браузера.

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

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

Скачивание файла

Браузер самостоятельно определяет тип документа и открывает его, если может прочитать. К примеру, при переходе по ссылке к текстовому документу он откроется в браузере, а вот zip-архив браузер открыть не может, поэтому предложит пользователю скачать его на свой компьютер. Для HTML, PDF, текстовых документов, изображений, видеофайлов и т. д. такое поведение браузера можно изменить и заставить его не открывать файл по ссылке, а скачивать его. Для этого к ссылке достаточно добавить атрибут download , как показано в примере 4.

Пример 4. Атрибут download

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

Другие ссылки

Мы рассмотрели ссылки на документы по протоколу HTTP или HTTPS, но кроме этого существуют и другие ссылки — на адрес электронной почты, номер телефона и др.

Ссылка на адрес электронной почты

Создание ссылки на адрес электронной почты делается почти также, как и ссылка на веб-страницу. Только вместо протокола http указывается mailto, после которого через двоеточие идёт сам адрес почты (пример 5).

Пример 5. Ссылка на адрес электронной почты

Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject с темой сообщения, как показано в примере 6.

Пример 6. Задание темы сообщения

При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.

Ссылка на Skype

Для вызова программы Skype вы можете использовать протокол callto , после которого через двоеточие следует номер телефона или логин пользователя (пример 7).

Не все браузеры поддерживают такой формат ссылок.

Ссылка на телефон

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

Пример 8. Ссылка на телефон

При щелчке по такой ссылке откроется приложение для телефона и начнётся вызов абонента.

Источник

Как открыть ссылку в новой вкладке — объяснение HTML атрибута target

Будут времена, когда вы захотите, чтобы ваш пользователь щелкнул ссылку на веб-сайт и открыл ее в новой вкладке браузера. Но как это сделать в HTML?

В этой статье я покажу вам, как использовать target=»_blank» атрибут на примерах кода. Я также расскажу о том, когда следует рассмотреть возможность использования этого атрибута.

Как открыть новую вкладку браузера с помощью target=»_blank»

Атрибут target=»_blank» используется внутри открывающего тега привязки следующим образом:

Когда пользователь нажимает на ссылку, новая вкладка браузера автоматически открывается на этой странице.

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

Когда вы нажмете на ссылку FrontendColors, она откроет для вас новую вкладку браузера.

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

Что такое noopener ключевое слово?

Ключевое noopenerслово в rel атрибуте используется в первую очередь из соображений безопасности, чтобы злоумышленники не могли вмешиваться в исходную веб-страницу через Window.opener свойство. Если злоумышленник получит доступ к вашему оконному объекту, он может перенаправить вашу страницу на вредоносный URL-адрес.

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

Обновления noopener ключевого слова

В 2021 году было сделано обновление, в котором современные браузеры теперь устанавливают rel=noopenerлюбую ссылку с использованием target=_blank атрибута. Даже с этим обновлением многие разработчики по-прежнему будут использовать атрибут rel=noopener для ссылок target=_blank

Следует ли вам использовать target=»_blank» атрибут все время?

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

Вы должны тщательно подумать о том, когда будет подходящее время для использования этого target=»_blank» атрибута. Хорошим примером может быть случай, когда пользователь работает на странице и не хочет покидать эту страницу, если нажмет на ссылку.

Источник

Атрибут target

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

_blank — загружает страницу в новое окно браузера;

_self — загружает страницу в текущее окно;

_parent — загружает страницу во фрейм-родитель;

_top — отменяет все фреймы и загружает страницу в полном окне браузера.

В примере 1 показано создание ссылки на сайт, который открывается в новом окне.

Пример 1. Открытие документа в новом окне

      
Ссылка открывает новое окно на сайт htmlbook.ru
  

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

Если на сайте используются фреймы, то в качестве значения target можно использовать имя фрейма (пример 2).

Пример 2. Открытие документа во фрейме

      
Сайт htmlbook.ru
  

Ссылка в примере 2 ведет на сайт htmlbook.ru, открывающийся во фрейме с именем newframe .

Когда у target указано неизвестное значение, например, имя фрейма набрано с ошибкой, то это приводит к тому, что ссылка открывается в новом окне.

Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом окне, нет необходимости добавлять во все теги target=»_blank» . Код можно сократить, если вначале страницы добавить строку , как показано в примере 3.

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

     
Ссылка откроется в новом окне
 
Ссылка откроется в текущем окне
  

Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно, если добавить к тегу атрибут target=»_self» , как показано в данном примере.

Источник