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

Что такое гиперссылка и якорь (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)

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

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

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

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

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

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

Обратите внимание, что значения атрибута Target пишутся

Например, если вы захотите, чтобы все гиперссылки вашего сайта открывались в новом окне, то нужно будет в области 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

ссылки | Новое окно или вкладка? — Дизайн на vc.ru

Источник

2195 просмотров

Jacob Nielsen и Anna Kaley

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

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

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

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

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

Студент-медик готовится к экзамену, параллельно используя два окна браузера. После того как ссылки из материалов курса открылись в новом окне, он изменил размер окон, чтобы поместить их на одном экране. Можно также заметить, что в правом окне браузера открыто несколько вкладок, что позволяет быстро переключаться между необходимой информацией.

Обычно в пользу открытия ссылок в новой вкладке или окне браузера приводится два аргумента:

• Ссылка на контент другого типа. Этот аргумент небезупречен, так как подразумевает, что пользователи всегда выполняют одни и те же задачи с файлами определенных форматов. Например, в одном случае пользователю необходимо распечатать PDF файл, чтобы повесить его на стену офиса, а в другом — открыть PDF файл с инструкциями по сборке мебели на мобильном устройстве. В первом случае открытие PDF файла в новой вкладке будет предпочтительней, так как пользователь просто закроет вкладку с файлом, после того, как его распечатает. Во втором случае пользователю, который просматривает информацию на мобильном устройстве, может понадобиться вернуться на предыдущую страницу, что будет удобно совершить с помощью кнопки «Назад». Поэтому в этом случае открытие PDF файла в той же вкладке будет предпочтительней — оно соответсвует контексту и задаче пользователя.
• Удержать пользователей на веб-сайте. Этот аргумент подразумевает, что вкладка или окно, в котором открыт изначальный веб-сайт, послужит пользователям напоминаем вернуться. Даже если это действительно так, стоит иметь ввиду, что:

• Дополнительные вкладки/окна создают дополнительную информационную нагрузку.
• После того как пользователи переключатся на новую вкладку/окно, чтобы выполнить необходимую задачу, нет гарантий того, что они вернутся на изначальный веб-сайт.
• Пользователи не глупы и могут понять, зачем нужны дополнительные окна и вкладки. Это может повлиять на уровень их доверия к сайту и бренду.
• Если пользователи захотят покинуть сайт, приложение или документ, они в любом случае это сделают.

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

Факторы, которые следует учитывать

В недавнем исследовании было выяснено, что реакция пользователей на открытие ссылок в новом окне/вкладке зависят от следующих факторов:

• Контекст: Пользователей, выполняющих повседневные, непринужденные задачи, гораздо меньше беспокоили новые вкладки или окна браузера, чем пользователей, которые находились в сценариях с высокой нагрузкой или срочностью.
• Устройство: Пользователи на мобильных устройствах больше раздражались, когда ссылки открывались в новых вкладках, поскольку они не могли использовать кнопку «Назад» для возврата к предыдущему экрану, в то время как доступ к предыдущей вкладке был затруднен.
• Задача: Страницы, открытые на новой странице/вкладке, положительно воспринимались пользователями, когда задача включала один из следующих типов действий:

• Сравнивание содержимого вкладок или окон браузера.
• Объединение информации из разных вкладок или окон.

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

— Использование нескольких вкладок браузера для отслеживания элементов.

— Использование исходной вкладки браузера в качестве отправной точки для других.

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

Когда не стоит открывать новые окна и вкладки

Для следующих типов задач пользователи не оценили переход на новую вкладку или окно браузера:

• Быстрый просмотр новой страницы, за которым следует возврат на предыдущую вкладку/окно.
• Многоступенчатые рабочие процессы. В этих случаях пользователи предпочтут нажать кнопку «Назад», чтобы перейти к предыдущим этапам процесса.
• Больше количество уже открытых вкладок/окон.

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

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

PDF и другие не-HTML документы

Зачастую пользователи сбиваются с толку, когда веб-сайты перенаправляют на документы, отличные от HTML, такие как PDF-файлы, документы Word, электронные таблицы и презентации, вместо контента непосредственно на веб-странице. Это связано с тем, что такие форматы файлов предлагают значительно отличающийся пользовательский интерфейс от обычных HTML-страниц. Поэтому рекомендуется не использовать другие форматы файлов, а размещать всю информацию на HTML веб-сайтах.

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

• Загрузка файлов в исходном формате напрямую по ссылкам. Скачав документ напрямую по ссылке, пользователи смогут открыть и редактировать документ в выбранном ими программном обеспечении. Однако в случае с PDF файлами возможен и вариант открытия документа в новой вкладке/окне. Окончательное решение зависит от того, какую именно задачу хочет выполнить пользователь с PDF файлом.
• Открытие ссылок на PDF документы в новых вкладках на компьютере. Обычно пользователи либо объединяют информацию в PDF файле с информацией на исходной вкладке, либо распечатывают PDF файл. Для таких сценариев лучше всего подойдет PDF файл, открытый в новой вкладке или окне. Однако если пользователь взаимодействует с документом на мобильном устройстве, рекомендуется открывать PDF файл в той же вкладке, что позволит пользователю вернуться на исходную страницу с помощью кнопки «Назад».

Итоги: что и когда делать

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

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

Практическое руководство с использованием примеров кодирования

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

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

Содержание

• Как открыть ссылку в новой вкладке HTML
• Создание синтаксиса
  • – Вложение привязки HTML в другой элемент HTML
  • – Добавление HTML Href и целевых атрибутов в открывающий тег привязки
  • 1
  • Знакомство с основами
  • Элемент привязки HTML — контейнер для всех атрибутов ссылок
  • Атрибут цели HTML — указание способа открытия ресурса
  • Почему полезно открывать ссылки в новых вкладках?
  • Список всех важных моментов

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

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

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

  Создание синтаксиса

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

  Два обязательных шага для создания синтаксиса:

  1. Вложение привязки HTML в другой элемент HTML
  2. Добавление атрибутов HTML href и target в открывающий тег привязки

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

  – Вложение привязки HTML в другой элемент HTML

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

  Следующий пример покажет вам, что первый шаг прост и занимает всего одну строку кода:

  Проверить эту веб-страницу .

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

  — Добавление атрибутов HTML Href и Target в тег открывающей привязки

  Двумя важными атрибутами при создании ссылки, которая будет открываться в новой вкладке, являются атрибуты href и target. Порядок не важен, но обычно первым включается атрибут href; вы должны просто добавить URL-адрес связанного ресурса в качестве значения атрибута HTML href.

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

  .AnyWebPage.org/” target=»_blank»> эта веб-страница .

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

  Основы

  После того, как мы предоставили вам подробные примеры создания синтаксиса новой вкладки href, мы собираемся узнать больше обо всех задействованных элементах и ​​атрибутах. Мы собираемся в начните с HTML-элемента , потому что он представляет собой основу для правильного синтаксиса ссылки.

  Элемент привязки HTML – контейнер для всех атрибутов ссылки

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

  • hreflang — атрибут HTML, используемый для указания языка связанного ресурса
  • загрузка — HTML-атрибут, используемый для указания браузеру загрузить определенный ресурс, а не открывать его
  • target — HTML-атрибут, используемый для указания контекста открытия связанного ресурса
  • title — элемент HTML, используемый для определения определенного заголовка, который будет отображаться в виде всплывающей подсказки
  • href — элемент HTML, используемый для указания местоположения или ресурса связанного документа

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

  Целевой атрибут HTML — указание способа открытия ресурса

  Ранее мы объясняли, что целевой атрибут HTML используется для указания того, как браузер будет открывать ресурс. Это означает, что браузер будет реагировать в соответствии с конкретным значением , которое вы включаете в синтаксис. Цель HTML представляет собой основной атрибут после создания конкретной ссылки на вашу веб-страницу. Значения, которые вы можете включить в целевой атрибут HTML, показаны в следующем списке:

  • _blank — целевое значение HTML, которое будет открывать связанный документ в новой вкладке
  • _parent — целевое значение HTML, которое будет открывать связанный документ в родительском фрейме
  • _self — целевое значение HTML, которое будет открывать ссылку в текущем фрейме
  • _top — целевое значение HTML, которое будет открывать связанный документ в самом верхнем фрейме
  • имя кадра — целевое значение HTML, которое будет открывать ссылку в кадре с определенным именем

  Стоит отметить, что только два из значений, показанных в этом списке, удалось по-прежнему будет использоваться в HTML5 . Значения HTML parent, top и frame name больше не поддерживаются HTML5, что означает, что вы можете использовать HTML self и пустые целевые значения. Знайте, что вы полностью знаете все, что нужно знать, чтобы открыть ссылку в новой вкладке.

  Почему полезно открывать ссылки в новых вкладках?

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

  Список всех важных моментов

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

  • Создание HTML-ссылки для открытия в новой вкладке — простой процесс
  • Есть два основных атрибута HTML, которые вы должны включить в синтаксис
  • Два атрибута вложены в открывающий элемент привязки HTML
  • Элемент привязки HTML вводит связанный ресурс
  • В открывающий тег привязки можно включить несколько атрибутов.
  • Целевой атрибут HTML имеет несколько значений, которые можно включить в синтаксис
  • Порядок атрибутов внутри открывающего HTML-элемента привязки не важен
  • Вы можете открыть для себя множество преимуществ, используя функцию новой вкладки

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

  • Автор
  • Последние сообщения

  Должность решает все

  Должность решает все: ваш ресурс для изучения и создания: CSS, JavaScript, HTML, PHP, C++ и MYSQL.

  Последние сообщения пользователя Position is Everything (просмотреть все)

  Открытие ссылок в новых окнах и вкладках браузера

  Сводка: внешние сайты в той же или новой вкладке браузера.

  Автор: Якоб Нильсен, Анна Кейли

  • Якоб Нильсен и
  • Анна Кейли

  на 2020-09-27 27 сентября 2020 г.

  Темы:

  Взаимодействие человека с компьютером, удобство использования Интернета, интранет

  • Взаимодействие человека и компьютера Взаимодействие человека с компьютером,
  • Веб-юзабилити,
  • Интранет

  Поделиться этой статьей:

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

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

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

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

  Следующие два обобщения часто используются в качестве обоснования для открытия ссылок в новых вкладках или окнах браузера:

  1. Это ссылка на контент другого типа. Однако этот аргумент проблематичен, поскольку предполагает, что пользователи всегда будут делать одни и те же действия с определенными форматами файлов, что не всегда так. Например, в одном случае мне может понадобиться распечатать листовку в формате PDF, чтобы повесить ее на стену в моем офисе, но в другом случае я могу обратиться к многостраничному PDF-файлу с инструкциями на своем мобильном телефоне, чтобы собрать кусок мебель. В первом случае открытие PDF-файла в новой вкладке было бы благоприятным, так как я, скорее всего, закончу документ после печати и закрою его. Во втором случае мне может понадобиться сослаться на информацию на веб-сайте, где изначально были ссылки на направления. Поскольку я пользуюсь мобильным телефоном, открытие PDF-файла на той же вкладке сохранило бы кнопку «Назад» и лучше соответствовало бы моему каналу, контексту и задаче. Однако, если бы я был на рабочем столе и мне нужно было сослаться как на PDF, так и на веб-сайт вместе, открытие его в новом окне могло бы быть лучше.
  2. Он будет удерживать пользователей на нашем сайте. Эта цепочка рассуждений предполагает, что вкладка или окно, содержащее ваш сайт, останется открытым и будет служить долгосрочным напоминанием для пользователей. Несмотря на то, что это может быть правдой, а иногда даже полезной (особенно, как упоминалось ранее, если пользователям необходимо вернуться на ваш сайт, чтобы завершить свою задачу), вы также должны помнить следующее:
     • Беспричинно добавляя дополнительное окно или вкладку, вы увеличиваете нагрузку пользователей на управление информацией.
     • Пользователям придется переключиться на новое окно или вкладку, чтобы выполнить свою задачу, и нет никакой гарантии, что после этого они вернутся на ваш сайт.
     • Люди не тупые: они поймут смысл лишних окон и вкладок и могут начать не доверять вашему сайту и бренду.
     • Если люди захотят покинуть веб-сайт, приложение или документ, они сделают это на своих условиях.

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

  Факторы, которые следует учитывать

  В нашем недавнем исследовании пользователей мы заметили, что реакция участников на открытие ссылок в новой вкладке или окне зависит от:

  1. Контекст: Пользователей, выполняющих обычные, непринужденные задачи, гораздо меньше беспокоили новые вкладки или окна браузера, чем пользователей, которые находились в условиях высокой нагрузки или срочных сценариев.
  2. Устройство: Мобильный пользователей больше раздражало, когда ссылки открывались в новых вкладках, так как они не могли использовать Назад Кнопка возврата к предыдущему экрану и доступ к предыдущей вкладке были затруднены.
  3. Задача: Открытие страницы в новом окне или вкладке было хорошо воспринято, если задача включала один из следующих типов действий:

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

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

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

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

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

  д. Использование исходной вкладки браузера в качестве отправной точки для других (например, изучение нескольких альтернатив, перечисленных на исходной странице). Например, один пользователь просматривал папку на Google Диске, содержащую ссылки на различные формы и документы. Поскольку каждая ссылка открывалась в новой вкладке, она могла легко закрыть ее, когда закончила, и вернуться на исходную вкладку Google Диска, чтобы получить доступ к следующему документу или форме, которая ей нужна.

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

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

  Когда не следует открывать новые окна и вкладки

  Для следующих типов задач пользователям НЕ нравится переход на новую вкладку или окно браузера:

  • Быстрый просмотр новой страницы с последующим возобновлением активности в исходной вкладке или окне. Например, когда один пользователь заполнял отчет о расходах, он не мог вспомнить, разрешает ли его организация чаевые в размере 18 % или 15 % на питание, оплачиваемое компанией. Ссылка на политику расходов компании сразу показала ответ, но он открылся в новой вкладке. Пользователь расстроился, когда заметил, что браузер Кнопка «Назад» не работала, чтобы вернуть его к отчету о расходах.
  • Многошаговые рабочие процессы , в которых новые шаги появлялись в другом окне или вкладке. В этих случаях пользователи предпочитали нажимать кнопку Назад , чтобы перейти к предыдущим этапам процесса, независимо от того, находились ли они на одном или разных сайтах. Например, один пользователь пытался отправить ИТ-заявку, чтобы починить сломанный принтер. Сначала он просмотрел страницу интранета, чтобы понять, какой тип тикета открывать. Затем он щелкнул ссылку, которая, как он думал, приведет его к форме, чтобы фактически открыть билет. Вместо этого в новой вкладке появилась домашняя страница совершенно другого сайта. Наконец, когда он нашел ссылку для инициирования запроса на новом сайте, в еще одной новой вкладке открылась форма. Излишне говорить, что он изо всех сил пытался вернуться на исходную страницу интрасети, с которой начал. Открытие ссылок в новых вкладках было намного меньше проблематично, если не было следующего шага, а задача пользователя завершалась вскоре после перехода по ссылке. Пользователи могли просто закрыть вкладку, не опасаясь потерять историю сеансов.
  • Многие вкладки или окна уже открыты. У занятых пользователей часто одновременно открыто много вкладок браузера, когда они работают, совершают покупки или просматривают страницы. Если у пользователей уже было открыто много вкладок, их часто раздражало открытие еще одной. Когда пользователи неоднократно сталкивались со ссылками, которые открывались в новых вкладках, они часто хотели останавливаться и делать паузы между задачами, чтобы очистить свои многочисленные вкладки браузера. Такое хозяйственное поведение указывало на то, что они чувствовали, что интерфейс стал загроможденным и неуправляемым.

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

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

  PDF-файлы и другие документы, отличные от HTML

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

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

  В свете соображений, обсужденных выше и в других местах, вот наши рекомендации относительно этих документов:

  • Непосредственная загрузка собственных файлов по ссылкам, размещенным в Интернете. Лучше всего использовать страницы шлюза HTML для обобщения и ссылки на такие файлы, как PDF-файлы, документы Word или Pages, электронные таблицы Excel или Numbers, а также презентации PowerPoint или Keynote. По щелчку ссылки прямая загрузка файла на компьютер пользователей позволит им открывать и редактировать документ в выбранном ими программном обеспечении. В некоторых случаях этот подход может быть более эффективным, чем открытие документа PDF в браузере. Однако это решение, а также то, открывать ли PDF-файл на той же вкладке или в новой вкладке или окне браузера, полностью зависит от того, что пользователю нужно сделать с ним. В общем, избегайте PDF для чтения с экрана, насколько это возможно. PDF хорош для печати документов, вот и все.
  • Открытие ссылок на PDF-документы в новых вкладках на рабочем столе. Обычно , участникам нашего исследования нужно было объединить информацию в PDF-файле с информацией на исходной вкладке, поэтому им часто приходилось переключаться между ними. Или они хотели распечатать PDF. В любом случае, когда они были закончены, они часто закрывались из PDF, а не нажимали кнопку Назад . Однако опять же, если ваши пользователи в основном выполняют задачу на мобильных устройствах, не используйте PDF-файл в первую очередь, или, если вам необходимо, по крайней мере, откройте его на той же вкладке, чтобы им было легче вернуться.

  Подведение итогов: что делать и когда

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

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

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

  • Поделиться: 

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

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

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

  Содержание

  Открытие ссылки в новой вкладке с помощью клавиатуры и мыши/трекпада

  Как на ПК, так и на Mac выбор ссылок в сочетании с определенной клавишей или клавишами на клавиатуре заставляет браузер открывать ссылку в новая вкладка. Это работает в любом браузере, будь то Google Chrome, Mozilla Firefox, Safari, Microsoft Edge или Opera. Кроме того, вы можете использовать только мышь или трекпад для загрузки ссылок на новые вкладки браузера.

  Использование клавиатуры с мышью/трекпадом

  Вы можете загрузить любую ссылку в новую вкладку браузера, щелкнув или коснувшись ее, удерживая нажатой клавишу Control (Windows) или клавишу Command (Mac). Каждая вкладка загружается в фоновом режиме, поэтому это идеальный способ открыть несколько ссылок при перемещении по веб-странице.

  Можно также щелкнуть ссылку, удерживая нажатой Shift + Ctrl (ПК) или Shift + Команда (Mac). Это должно не только открыть ссылку в новой вкладке, но и переключить на нее внимание.

  Использовать только мышь или трекпад

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

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

  Трекпады MacBook не поддерживают жест среднего щелчка. Однако вы можете использовать сторонние приложения, такие как MiddleClick или Middle, чтобы добавить поддержку этого. Они также должны работать с Magic Mouse Mac.

  Как использовать расширения для принудительного открытия ссылок в новых вкладках

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

  Google Chrome

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

  Расширение Открыть в новой вкладке, например, позволяет легко открывать ссылки в фоновом режиме. После добавления его в Chrome просто выберите расширение в меню «Расширения» браузера и включите переключатель, чтобы активировать его для просматриваемого сайта.

  Другое расширение, получившее название «Щелчок правой кнопкой мыши открывает ссылку в новой вкладке», позволяет настроить правую кнопку мыши или жест трекпада для открытия ссылок в фоновом или переднем плане.

  Если вы хотите расширить поддержку предпочитаемого расширения, включив в него окна в режиме инкогнито в Chrome, откройте меню Расширения и перейдите в раздел Управление расширениями > Подробности . Затем включите переключатель рядом с Разрешить в режиме инкогнито .

  Mozilla Firefox

  Магазин дополнений для браузера Firefox также содержит несколько расширений, которые могут открывать ссылки в новых вкладках. Например, «Открыть ссылку с помощью новой вкладки». Просто установите его, и каждая ссылка, которую вы встретите, должна открываться в новой вкладке. Чтобы управлять тем, как работает расширение, перейдите на страницу Дополнения и темы > Расширения .

  Кроме того, Firefox предоставляет встроенную опцию, позволяющую принудительно загружать ссылки во вкладках вместо новых окон. Чтобы активировать его, откройте Параметры в Firefox, выберите вкладку Общие и установите флажок рядом с Открывать ссылки во вкладках вместо новых окон .

  Safari

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

  Однако он обеспечивает контроль над ссылками, которые открываются в новых окнах. Перейти к Safari > Настройки > Вкладки и набор Открывать страницы во вкладках вместо окон с по Автоматически . Это должно побуждать такие ссылки открываться только как вкладки.

  Браузеры на основе Chromium (Edge, Opera и Vivaldi)

  В отличие от Google Chrome, браузеры на основе Chromium, такие как Microsoft Edge, Opera и Vivaldi, не имеют специальных расширений, которые могут помочь принудительно открывать ссылки в новых вкладках. Однако они используют тот же движок, что и Google Chrome. Это означает, что вы можете установить расширения Chrome, такие как «Щелчок правой кнопкой мыши открывает ссылку в новой вкладке», чтобы получить аналогичную функциональность.

  Microsoft Edge: Перейдите на страницу Microsoft Edge Extensions и включите переключатель рядом с Разрешить расширения из других магазинов . Затем посетите Интернет-магазин Chrome и установите предпочитаемое расширение.

  Opera: Добавьте дополнение «Установить расширения Chrome» в Opera. Затем перейдите в Интернет-магазин Chrome, чтобы установить любое расширение Chrome.

  Вивальди: Ничего не нужно делать! Просто зайдите в Интернет-магазин Chrome и добавьте нужное расширение.

  Открытие ссылок в новых вкладках: выберите свой метод

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

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

  Дилум Сеневиратне — независимый технический писатель и блогер с трехлетним опытом написания статей для онлайн-изданий о технологиях. Он специализируется на темах, связанных с iOS, iPadOS, macOS и веб-приложениями Google. Когда он не работает на своей Magic Keyboard, вы можете застать его за просмотром советов по продуктивности на YouTube. Прочитать полную биографию Дилума

  Подписывайтесь на YouTube!

  Вам понравился этот совет? Если это так, загляните на наш канал YouTube на нашем родственном сайте Online Tech Tips. Мы охватываем Windows, Mac, программное обеспечение и приложения, а также предлагаем множество советов по устранению неполадок и обучающих видеороликов. Нажмите на кнопку ниже, чтобы подписаться!

  Подписывайся

  Как использовать WordPress для открытия внешних ссылок в новой вкладке или окне

  • Фейсбук
  • Твиттер
  • LinkedIn

  У вас возникли проблемы с открытием внешних ссылок в новой вкладке в WordPress? К сожалению, WordPress не позволяет легко узнать, как это сделать. Однако есть несколько способов открыть внешние ссылки в новой вкладке.

  И это жизненно важно, особенно для SEO и удобства использования посетителями.

  Фактически, Yoast SEO рекомендует включать одну внешнюю ссылку в каждую создаваемую вами статью.

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

  Сегодня я покажу несколько способов открытия внешних ссылок в новой вкладке или окне WordPress.

  Важность внешних ссылок

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

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

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

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

  Редактор Гутенберга

  Гутенберг теперь является редактором по умолчанию для платформы WordPress, и с его помощью очень легко открыть внешнюю ссылку на новой вкладке.

  Выделите нужные слова и нажмите кнопку «Связать».

  Введите URL-адрес веб-сайта, ссылка на который должна открываться, и нажмите кнопку «Настройки ссылки».

  Теперь вы увидите ползунок «Открыть в новой вкладке». Просто нажмите на нее, чтобы ссылка открылась на новой вкладке. Он будет синим, если он включен.

  Это самый простой способ открыть внешнюю ссылку на новой вкладке в WordPress при использовании редактора Gutenberg.

  Классический редактор

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

  Классический редактор разделен на визуальный и текстовый макеты. Оба позволяют создать ссылку и открыть ее в новой вкладке. Разница лишь в том, что кнопка «Связать» выглядит по-другому.

  Выделите слова, которые вы хотите сделать ссылкой, и нажмите кнопку «Вставить/редактировать ссылку» в визуальном редакторе.

  Введите URL-адрес веб-сайта, ссылка на который должна открываться, и нажмите кнопку «Параметры ссылки».

  Установите флажок «Открыть ссылку в новой вкладке» и нажмите кнопку «Обновить».

  Если вы используете текстовый редактор, нажмите кнопку «ссылка».

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

  Это самый простой способ открыть внешнюю ссылку на новой вкладке в WordPress при использовании классического редактора.

  Метод плагина

  В WordPress есть плагин для всего. Плагин «Открывать внешние ссылки в новом окне» делает именно то, что говорит, но автоматически. Плагин не требует настройки и работает после установки.

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

  Однако я буду настаивать на том, чтобы в данном случае не использовать плагин.

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

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

  Метод HTML

  Последний метод, о котором я расскажу, включает в себя очень простой код HTML. И Гутенберг, и классический редактор позволяют добавлять HTML-код в ваш пост или содержимое страницы. Хотя многие новые разработчики стараются не использовать код в WordPress, в данном случае это простой вариант.

  Вместо того, чтобы устанавливать какие-либо флажки или нажимать кнопки, вам просто нужно скопировать и вставить строку кода и изменить URL-адрес. Простой не так ли?

   Внешняя ссылка 

  Обратите внимание на область: target=»_blank» . Это часть HTML, которая указывает веб-браузеру открыть ссылку в «пустой» вкладке или окне.

  Замените «URL ЗДЕСЬ» фактическим URL-адресом и замените «внешнюю ссылку» фактическим текстом ссылки. Это гораздо более быстрый вариант, и его может сделать каждый.

  Например, ссылка на YouTube с текстом «видео» будет выглядеть так:

    Видео 

  Попробуйте, если вам нравится использовать HTML.

  Держите посетителей на своей странице

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

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

  Какой метод вы использовали для открытия внешних ссылок в новой вкладке или окне? Сколько внешних ссылок вы используете на пост?

  • Фейсбук
  • Твиттер
  • LinkedIn

  Открыть в новой вкладке или окне не работает — Браузеры

  Редактировать

  Твиттер LinkedIn Фейсбук Эл. адрес

  • Статья
  • 25.01.2022
  • 2 минуты на чтение

  Важно

  Настольное приложение Internet Explorer 11 больше не поддерживается и не поддерживается с 15 июня 2022 г. для определенных версий Windows 10.

  Вы по-прежнему можете получить доступ к старым, устаревшим сайтам, для которых требуется Internet Explorer с режимом Internet Explorer в Microsoft Edge. Узнать, как.

  Настольное приложение Internet Explorer 11 будет постепенно перенаправляться на более быстрый и безопасный браузер Microsoft Edge и в конечном итоге будет отключено через Центр обновления Windows. Отключите IE сегодня.

  Часто из-за установки других приложений, которые либо перерегистрируют, либо обновляют существующие регистрации интерфейса, Internet Explorer не может выполнить Открыть в новом окне и Открыть в новой вкладке работает правильно. Эта статья поможет вам перерегистрировать вспомогательные двоичные файлы, чтобы попытаться восстановить недостающую функциональность.

  Исходная версия продукта:   Internet Explorer 8 и более поздние версии
  Исходный номер базы знаний:   2574731

  Симптомы

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

  3, либо Открыть

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

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

  Обратите внимание, что сочетания клавиш для создания новых вкладок (Ctrl+T) и новых окон (Ctrl+N) не могут быть затронуты.

  Причина

  Информация реестра, используемая для запуска этих функций, отсутствует, недействительна или назначена другому двоичному файлу.

  Разрешение

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

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

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

  Совет

  В Windows Vista и более новых операционных системах это можно сделать, щелкнув правой кнопкой мыши ярлык командной строки и выбрав функцию «Запуск от имени администратора». .

  Для установки Internet Explorer в 64-разрядных версиях Windows:
  В командной строке введите следующие команды (не копировать/вставлять), нажимая клавишу Enter после каждой:

   %SystemRoot%\System32\regsvr32 '%programfiles%\Internet Explorer\ieproxy.dll'
  %SystemRoot%\Syswow64\regsvr32 '%programfiles(x86)%\Internet Explorer\ieproxy.dll'
  %SystemRoot%\System32\regsvr32 /i /n ieframe.dll
  %SystemRoot%\Syswow64\regsvr32 /i /n ieframe.dll
   

  Для установки Internet Explorer в 32-разрядных версиях Windows:
  В командной строке введите следующие команды (не копировать и не вставлять), нажимая клавишу Enter после каждой:

   regsvr32 '%programfiles%\Internet Проводник\ieproxy.dll'
  regsvr32 /i /n 'ieframe.dll'
   

  Напоминание: нет необходимости добавлять перед regsvr32 %SystemRoot%\System32 в 32-разрядных системах.

  Примечание

  При выполнении каждой команды regsvr32 вы должны получить окно сообщения, указывающее, что регистрация прошла успешно. Если вы получили сообщение о статусе, отличном от успешного, рекомендуется обратиться в службу поддержки продуктов Майкрософт для получения дополнительной помощи. Дополнительные сведения об использовании regsvr32 см. в следующей статье:
  Объяснение использования Regsvr32 и сообщение об ошибке

  Ручная перерегистрация этих файлов Internet Explorer может потребоваться в следующих случаях:

  • Регистрация установочных файлов Internet Explorer была заблокирована или отложена до перезапуска.
  • При установке пакета обновления Internet Explorer не удалось завершить регистрацию файлов до перезагрузки.
  • Одно или несколько приложений перезаписывают регистрационную информацию Internet Explorer альтернативными данными.

  Как открывать внешние ссылки в новом окне или вкладке с помощью WordPress

  Хотите открывать внешние ссылки из сообщений блога в новом окне?

  Открытие внешних ссылок в новом окне позволяет вашим пользователям переходить по ссылке, не покидая ваш сайт.

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

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

  Почему и когда следует открывать внешние ссылки в новом окне?

  Внешние ссылки — это ссылки на веб-сайты, которыми вы не владеете и не контролируете. Обычно, если вы добавите ссылку на внешний веб-сайт, ваши посетители просто покинут ваш сайт, нажав на ссылку.

  Хотя некоторые эксперты по пользовательскому опыту говорят, что внешние ссылки не следует открывать в новом окне, мы с этим не согласны.

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

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

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

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

  При этом давайте посмотрим, как легко открывать внешние ссылки в новом окне в WordPress.

  Видеоруководство

  Подписаться на WPBeginner

  Если вы предпочитаете письменные инструкции, просто продолжайте читать.

  Открыть внешнюю ссылку в новом окне в редакторе Gutenberg

  Новый редактор блоков WordPress имеет встроенную функцию, позволяющую открывать внешние ссылки в новом окне. Однако опция скрыта за кнопкой, поэтому новички часто ее не замечают.

  Просто отредактируйте сообщение в блоге или страницу, на которую вы хотите добавить внешнюю ссылку. Затем выберите текст, который вы хотите связать, а затем нажмите кнопку вставки ссылки (или нажмите CTRL + K в Windows / Command + K в Mac).

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

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

  Открыть внешнюю ссылку в новом окне с помощью классического редактора

  В WordPress 5.0 появился новый редактор блоков. Многие пользователи предпочитают использовать старый редактор, установив плагин классического редактора.

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

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

  Во-первых, вам нужно отредактировать пост или страницу, куда вы хотите добавить ссылку. Затем выберите текст, который вы хотите связать, а затем нажмите кнопку «Добавить ссылку».

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

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

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

  Открытие ссылки в новой вкладке с помощью вкладки «Текст» в классическом редакторе

  Если вы используете редактор HTML с пометкой «Текст» в старом классическом редакторе, то вот как открыть внешнюю ссылку в новом окне.

  Просто выберите текст, который вы хотите связать, а затем нажмите кнопку «Добавить ссылку». Это вызовет расширенное всплывающее окно «Вставить ссылку».

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

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

  Как открывать внешние ссылки в новом окне с помощью HTML

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

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

  Текст ссылки
   

  Просто замените example.com URL-адресом внешней ссылки, а Текст ссылки — текстом, который вы хотите связать.

  Параметр target в этом коде указывает браузерам открывать ссылку в новом окне или вкладке.

  Открыть ссылки меню навигации в новой вкладке

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

  Чтобы открыть исходящие ссылки в меню на новой вкладке, перейдите к Внешний вид » Меню из вашей админки WordPress.

  Затем нажмите кнопку «Параметры экрана» в правом верхнем углу.

  Когда вы нажмете кнопку, вы увидите больше вариантов. Идите вперед и установите флажок «Цель ссылки» в разделе «Показать дополнительные свойства меню».

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

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

  Когда вы закончите, нажмите кнопку «Сохранить меню».

  Автоматически открывать все внешние ссылки в новом окне с помощью плагина WordPress

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

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

  Во-первых, вам необходимо установить и активировать плагин «Открыть внешние ссылки в новом окне». Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

  Плагин работает из коробки, внешние ссылки автоматически открываются в новом окне.

  На самом деле это не изменяет внешние ссылки в ваших сообщениях в блоге. Вместо этого он использует JavaScript для открытия внешних ссылок в новом окне.

  Примечание: Имейте в виду, что деактивация плагина перестанет открывать внешние ссылки в новом окне.

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

  No related posts.