Html target: Атрибут target | htmlbook.ru

Leave a Comment / Html / By /

Содержание

target атрибут HTML теґа a

  • Головна
  • html
  • теґи
  • <a>
  • target

Атрибут target вказує, де відкрити документ при переході за посиланням. За замовчуванням, при переході за посиланням документ відкривається в поточній вкладці браузера. Це поведінку можна змінити за допомогою атрибута target елементу <a> .

Як значення використовується ім’я фрейма, задане атрибутом name елемента <iframe> , або зарезервоване ключове слово. У назві фрейму посилання буде відкриватися у фреймі.

Нотатка:

Використання цього атрибута засуджується специфікацією HTML, валідний код виходить тільки при використанні перехідного <! DOCTYPE> .

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

<a target="_blank|_self|_parent|_top|framename">

Атрибут target може отримувати 5 значень :

_blank

Відкриває пов’язаний документ в новому вікні або вкладці.

_self

Відкриває пов’язаний документ в той же фрейм, в якому він був викликаний (це без задання).

_parent

Відкриває пов’язаний документ в батьківському фреймі.

_top

Відкриває пов’язаний документ в повному тілі вікна

framename

Відкриває пов’язаний документ в зазначеному фреймі.

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач

1+

1+

1+

2. 1+

1+

12+

Переглядач

1+

1+

1+

1+

Приклади

  • Приклад 1

Найпростіший приклад використання HTML атрибута target теґа <a>




  See the Pen 


  a. target_css_in_ua by css.in.ua (@css_in_ua)


  on CodePen.

Різниця між HTML 4.01 та HTML5

Немає жодної різниці.

Різниця між XHTML та HTML

Немає жодної різниці.

Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде

Обновлено 29 декабря 2020 Просмотров: 63 382 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поподробнее поговорить про то, что такое гиперссылка в языке Html, как можно размещать их в тексте на сайте, как сделать ссылкой картинку, как правильно использовать тег «A» и его атрибуты «Href» и «Target blank» (открыть в новом окне).

P.S. Как бы я не хотел, но всего необходимого в одну (или даже несколько публикаций) не впихнешь (а дьявол, как говорится, кроется в деталях). В общем, есть вариант пройти онлайн-обучение по теме «Как создать сайт самостоятельно от TexTerra«. Все же, за 20 часов рассказать можно, наверное, все. Но это платно, само собой.

Что такое гиперссылка и якорь (anchor)

Итак, мы с вами уже успели познакомились с устаревшими и не рекомендуемыми для повседневного использования тэгами Font, Pre и Blockquote. Продолжим дальнейшее знакомство.

Для того, чтобы сделать гиперссылку в Html коде, нам тоже понадобится использовать тег A. Для него можно будет использовать различные атрибуты, задающие, например, URL адрес цели перемещения по этой ссылке (href) или же предписывающий открывать ее в новом окне (target=_blank). Но давайте поговорим обо все по порядку.

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

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

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

Служебные гиперссылки создаются не с помощью тега „A“ (как обычные), а с помощью тега „Link“. Задач, ими выполняемых, довольно много, например, с помощью них к Html документу подключаются внешние файлы с таблицами каскадных стилей CSS или, например, подключается иконка Фавикон.

Но сегодня рассматривать то, как можно их создавать, мы не будем (до них еще дойдет время), а остановимся подробно на видимых ссылках, которые можно создать внутри области Body и, соответственно, они будут отображаться на web-странице.

Но, тем не менее, у всех гиперссылок (и видимых, и служебных) есть одно общее — все они имеют в своем составе обязательный атрибут Href. В нем, в качестве его значения, прописывается определенное место в документе (если оно было заранее помечено якорем) или же адрес самого документа в интернете (в Href прописывается URL адрес или, другими словами, путь до страницы или же какого-либо другого файла).

Гиперссылки являются элементами навигации, которые призваны вас переносить на другие документы в сети, либо осуществлять перемещение по содержимому уже просматриваемой вами web-страницы с помощью заранее сделанных в теле документа меток, которые называются еще Html якорями (anchor).

Тут может возникнуть некоторая путаница, т.к. в SEO под словом „анкор“ понимают текст ссылки, но в языке Html под „anchor“ подразумевают именно якорь (перевод слова anchor) или же метку в тексте, на которую потом можно будет сослаться.

Зачем в Html используются якоря (anchor)? Это довольно удобно при создании навигации по довольно длинной web-странице. Наверное, вы встречали в сети, когда на открытой вами страничке сразу под ее заголовком приведены названия разделов статьи, опубликованной на этой странице.

Как создаются якоря и хеш ссылки

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

<a name="якорь_метка"></a>

Т. е. для того, чтобы сделать anchor, нужно в пустой тег гиперссылки „А“ прописать единственный атрибут „Name“, в качестве значения которого использовать уникальную метку, которая не должна содержать пробелов и в которой можно использовать символы латиницы, цифры, дефис и подчеркивание (в полной аналогии с правилами, по которым можно создавать Урлы — [0-9],[a-z],[A-Z],[_],[-]).

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

В этом случае не нужно создавать пустой тег „А“, а можно использовать любой из уже имеющихся в нужном месте текста элемент. Например, это могут быть теги заголовков h2-H6 или абзацев P.

Т.е. для создания аналога якоря достаточно прописать к любому тегу универсальный атрибут ID (его можно будет использовать для всех тегов, и на его основе, кстати, работают селекторы Id в CSS коде), например, так:

<h3> Текст заголовка </h3>

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

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

Оказывается, что для этого нужно будет, как обычно, внутри гиперссылки „А“ вставить обязательный атрибут „Href“, но значение которого будет формироваться из имени нужной метки (якоря) с предваряющим его знаком решетки „#“, которая еще имеет название хеш (отсюда, кстати, и растут ноги у часто используемого названия: хеш ссылки):

<a href="#якорь_метка"> перекинет на место страницы, помеченной якорем </a>

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

Если вы делаете якорь с помощью атрибута ID в удобно расположенном для этого теге, то нужно учитывать, что кроме ограничения по типу используемых символов ([0-9],[a-z],[A-Z],[_],[-]), значение ID обязательно должно начинаться с символа латинской буквы.

Потом могут располагаться все допустимые символы в любом количестве, но первым символом метки якоря в значении атрибута ID обязательно должна быть буква (латинская, естественно). В противном случае такой якорь, вставленный в Html код, работать не будет (в большинстве браузеров).

<a href="#"><img src="https://ktonanovenkogo.ru/wp-content/themes/Organic/images/seo.png" /></a>

Href — обязательный атрибут тега любой гиперссылки

Теперь давайте перейдем от навигации внутри документа (с помощью якорей) к навигации внешней, т.е. нам нужно будет сделать ссылки, ведущие на другие документы нашего или же другого сайта. Теперь в атрибуте Href нам нужно прописывать уже не метки якорей, а путь до открываемого файла (страница по своему замыслу является файлом, подгружаемым в браузер для последующего отображения).

<a href="путь до файла или web страницы">анкор</a>

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

Однако, напомню, при создании Урлов предпочтительнее использовать только следующие символы: ([0-9],[a-z],[A-Z],[_],[-]) и не использовать пробелы. Если мы рассматриваем содержимое атрибута Href для абсолютных ссылок, то схематично это можно будет представить так:

Если отбросить то, что вы редко будете использовать, то можно представить все то же самое в несколько упрощенном виде:

протокол(обычно http)://доменное_имя (например, ktonanovenkogo.ru)/путь_до_файла (web страницы)

Кроме простого протокола http на просторах интернета вы можете встретить ссылки с протоколом https, который отличается тем, что в нем применяется шифрование. Последний применяется на сайтах, где есть необходимость защитить канал обмена данными между сервером и браузером клиента. Например, он используется на сервисах электронных денег Веб Мани.

В интернете вы можете встретить различные варианты содержимого Href, например, такой:

https://ktonanovenkogo.ru/videokursy

Или такой (с расширением для файла):

https://ktonanovenkogo.ru/seo/kak-raskrutit-sajt.html

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

Точно таким же образом можно сделать ссылку для скачивания файла:

<a href="/wp-content/uploads/Collor.zip">Скачать что-то по ссылке</a>

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

Создать ссылку для скачивании файла по протоколу Ftp (тут можете почитать что такое Ftp) можно по аналогии, заменив только тип протолкала в самом начале содержимого атрибута Href:

<a href="ftp://ktonanovenkogo.ru/wp-content/uploads/Collor.zip">Скачать с Ftp сервера</a>

Можно еще, например, создать гиперссылку с псевдопротоколом Mailto (почтовый), добавив в Href соответствующий Url:

<a href="mailto:[email protected]">Написать письмо</a>

Напиши мне письмецо

При переходе по такой ссылке у вас на компьютере откроется используемая вами по умолчанию почтовая программа (в браузере можно настроить, чтобы линки с mailto в Href открывались в Gmail, в почтовом сервисе Яндекса и др.) и появится диалог создания нового письма, в котором в поле «Кому» будет вставлен приведенный в Href почтовый адрес.

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

Как открыть ссылку в новом окне (target blank)

При создании ссылок в Html коде перед нами часто встает вопрос — в каком окне браузера открывать тот документ, на который она ведет? По умолчанию он будет открываться в уже имеющемся окне, перекрывая собой ту страницу, с которой была проставлена данная гиперссылка.

Лично я большой сторонник атрибута Target со значением blank, который позволяет открывать страницу в новом окне, оставляя открытой и тот документ, где была проставлена данная ссылка. Не знаю, как это влияет на юзабилити моего блога, но мне этот вариант нравится больше и я его использую практически во всех случаях.

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

<a href="https://ktonanovenkogo. ru" target="_self">Откроет документ в этом же окне</a>

Хотя, конечно же, target=»_self» в теге «A» никто не прописывает, ибо это значение используется по умолчанию, а вот если нужно открыть страницу в новом окне, то нужно будет прописать :

<a href="https://ktonanovenkogo.ru" target="_blank">Откроется в новом окне</a>

Прописан атрибут

Обратите внимание, что значения атрибута Target пишутся со знаком подчеркивания вначале (_blank), ибо так оговорено в валидаторе Wc3, содержащем норы языка гипертекстовой разметки. Что примечательно, в Html предусмотрена возможность изменить вариант открытия ссылки принятый по умолчанию.

Например, если вы захотите, чтобы все гиперссылки вашего сайта открывались в новом окне, то нужно будет в области Head, используемого вами шаблона, прописать тег Base с атрибутом :

<head>
<base target="_blank">
что-то там еще
</head>

И теперь, если какую-то из ссылок вы захотите открывать в этом же окне, то в ее тег «A» вам уже нужно будет добавить target=»_self», ибо по умолчанию сейчас у вас теперь используется _blank.

О, как.

Цвета гиперссылок при наведении и переходе — как их поменять

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

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

По умолчанию, в чистом Html (без использования свойств CSS) ссылки выделяются подчеркиванием и могут иметь три варианта цвета:

  1. Синий — цвет для неотработанных ссылок, по которым пользователь еще не кликал
  2. Красный — его принимает гиперссылка сразу после щелчка по ней и до тех пор, пока запрошенный документ не будет загружен в браузер пользователя по сети (в современных условиях уловить этот момент бывает совсем не просто и всему виной повсеместно возросшая скорость интернета)
  3. Пурпурный — цвет для отработанных линков, по которым уже прошелся пользователь

В Html 4. 01 эти цвета для ссылок приняты по умолчанию, но их можно изменить при помощи специальных атрибутов, которые прописываются в тег Body, который вы сможете найти в одном из файлов используемого вами шаблона. Для изменения всех трех цветов используются, соответственно, три атрибута:

  1. Link — задается цвет не посещенной ссылки
  2. Alink — цвет активной в данный момент, которая отрабатывается браузером
  3. Vlink — цвет уже посещенной пользователем гиперссылки

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

<body link="#0000ee" alink="#ee0000" vlink="#800080">

Как сделать картинку ссылкой — два способа

Ну, тут совсем все просто. Т.к. тег вставки картинки (img) является строчным элементом, то по большому счету любое изображение можно считать просто буквой, разве что только большего размера.

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

<a href="https://ktonanovenkogo.ru"><img src="https://ktonanovenkogo.ru/image/webcamxp.png" /></a>

В случае чистого Html вокруг картинки, которую вы сделали ссылкой, у вас появится рамочка шириной в три пикселя. Причем цвет этой рамочки будет полностью соответствовать цветам ссылок принятым для вашего сайта (о них мы говорили чуть выше по тексту).

Чтобы удалить добавление рамочки к картинке, которую вы сделали гиперссылкой, вам нужно добавить атрибут Border со значением ноль в тег Img:

<a href="https://ktonanovenkogo.ru"><img border=0 src="https://ktonanovenkogo.ru/image/webcamxp.png" ></a>

Это очень простой способ сделать картинку ссылкой, но есть и более сложный вариант, называемый картой изображений. В этом случае, благодаря использованию довольно-таки большого числа Html тегов и атрибутов, можно сделать из одной картинки целую карту ссылок с активными областями (кликабельными и имеющими различные формы — прямоугольник, окружность, многоугольник).

Например, вы можете разместить большое фото у себя на странице и сделать так, чтобы при щелчке по разным его частям открывались бы различные страницы по различным гиперссылкам. На самом деле, описывать карту изображений довольно долго, да и вряд ли кто-то в современной верстке сайтов будет ее использовать, поэтому я этого делать не буду, ибо «овчинка выделки не стоит».

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Целевой атрибут HTML

❮ Предыдущий Все атрибуты HTML Далее ❯

Определение и использование

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

Для <базовых> элементов, Атрибут target указывает цель по умолчанию для всех гиперссылок и форм на странице.

Для

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

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

Атрибут target может использоваться для следующих элементов:

Элементы Атрибут
<а> цель
<область> цель
<базовый> цель
<форма> цель

Примеры

A Пример

Атрибут target указывает, где открыть связанный документ:

Посетить W3Schools

Попробуйте сами »

Пример области

Карта-изображение с интерактивными областями и целевым атрибутом:

Планеты usemap=»#planetmap»>

<карта имя="карта планеты">
Sun target=»_blank»>
htm» alt=»Mercury»>
Venus

Попробуйте сами »

Базовый пример

Укажите цель по умолчанию для всех гиперссылок и форм на странице:



Попробуйте сами »

Пример формы

Показать полученный ответ в новом окне или вкладке:


Имя:

Фамилия:


Попробуйте сами »

Поддержка браузера

Атрибут target имеет следующую поддержку браузера для каждого элемента:

Элемент
и Да Да Да Да Да
область Да Да Да Да Да
основание Да Да
Да		 Да Да
форма Да Да Да Да Да

❮ Предыдущий Все атрибуты HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML

Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

H83: Использование целевого атрибута для открытия нового окна по запросу пользователя и указание этого в тексте ссылки

H83: Использование целевого атрибута для открытия нового окна по запросу пользователя и указание этого в тексте ссылки | Методы для WCAG 2.0

Методы для WCAG 2.0

Перейти к содержимому (нажмите Enter)

  • Содержание
  • Введение
  • Предыдущий: Техника H81
  • Следующая: Technique H84

On this page:

  • Important Information about Techniques
  • Applicability
  • Description
  • Examples
  • Resources
  • Related Techniques
  • Tests

—

Important Information about Techniques

See Understanding Techniques для критериев успеха WCAG за важную информацию об использовании этих информативных методов и о том, как они соотносятся с нормативными критериями успеха WCAG 2. 0. В разделе «Применимость» объясняется область применения метода, и наличие методов для конкретной технологии не означает, что эту технологию можно использовать во всех ситуациях для создания контента, соответствующего WCAG 2.0.

Применимость

HTML5, HTML 4.01 Transitional и XHTML 1.0 Transitional

Этот метод относится к:

  • Критерий успеха 3.2.5 (изменение по запросу)
    • Как встретиться 3.2.5 (изменение по запросу)
    • Понимание критерия успеха 3.2.5 (изменение по запросу)

Описание

Цель этого метода — избежать путаницы, которая может быть вызвана появлением новых окон, которые не были запрошены пользователем. Внезапно открывающиеся новые окна могут дезориентировать пользователей или быть полностью пропущенными некоторыми. В HTML5, HTML 4.01 Transitional и XHTML 1.0 Transitional 9Атрибут 0008 target можно использовать для открытия нового окна вместо автоматических всплывающих окон. (Атрибут target удален из HTML 4. 01 Strict и XHTML 1.0 Strict.) Обратите внимание, что отсутствие использования target позволяет пользователю решить, следует ли открывать новое окно или нет. Использование атрибута target обеспечивает однозначное машиночитаемое указание на то, что откроется новое окно. Пользовательские агенты могут информировать пользователя, а также могут быть настроены так, чтобы не открывать новое окно. Для тех, кто не использует вспомогательные технологии, указание также будет доступно из текста ссылки.

Примеры

Пример 1

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

Пример кода: 

 Показать справку (открывается в новом окне)

Ресурсы

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

  • Целевой атрибут HTML5

  • SCR24: Использование прогрессивного улучшения для открытия новых окон по запросу пользователя

Тесты

Процедура

  1. Активируйте каждую ссылку в документе, чтобы проверить, открывает ли она новое окно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *