Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу поподробнее поговорить про то, что такое гиперссылка в языке Html, как можно размещать их в тексте на сайте, как сделать ссылкой картинку, как правильно использовать тег «A» и его атрибуты «Href» и «Target blank» (открыть в новом окне).
Вообще, гиперссылка является ключевым элементом . Кроме того, ссылки сейчас являются одним из трех основных факторов, влияющих на успешное продвижение сайта. Правильное их применение и понимание того, например, как влияет на их учет поисковыми системами, может существенно повлиять на посещаемость вашего ресурса.
Что такое гиперссылка и якорь (anchor)Итак, мы с вами уже успели познакомились с устаревшими и не рекомендуемыми для повседневного использования тэгами . Продолжим дальнейшее знакомство.
Для того, чтобы сделать гиперссылку в Html коде, нам тоже понадобится использовать тег A. Для него можно будет использовать различные атрибуты, задающие, например, URL адрес цели перемещения по этой ссылке (href) или же предписывающий открывать ее в новом окне (target=_blank). Но давайте поговорим обо все по порядку.
Как мы уже упомянули чуть выше, гиперссылки являются ключевым элементом языка Html и они позволяют ссылаться как на внутренние страницы своего же сайта, так и на другие ресурсы интернета. Скажу банальность — переход по ссылке осуществляется посредством щелчка мыши по ней (а вы как думали?).
Кроме того, что они могут подразделяться на внутренние или внешние, они еще могут быть служебными и использоваться исключительно только для нужд браузера, с помощью которого будут открываться страницы вашего сайта.
В этом случае они не будут видны на странице, т.к. прописываются в области Head исходного кода документа, содержимое которой на странице не отображается (про структуру кода языка гипертекстовой разметки я упоминал в статье про ).
Служебные гиперссылки создаются не с помощью тега «A» (как обычные), а с помощью тега «Link» . Задач, ими выполняемых, довольно много, например, с помощью них к Html документу подключаются внешние файлы с таблицами каскадных стилей CSS или, например, .
Но сегодня рассматривать то, как можно их создавать, мы не будем (до них еще дойдет время), а остановимся подробно на видимых ссылках , которые можно создать внутри области Body и, соответственно, они будут отображаться на web-странице.
Но, тем не менее, у всех гиперссылок (и видимых, и служебных) есть одно общее — все они имеют в своем составе обязательный атрибут Href . В нем, в качестве его значения, прописывается определенное место в документе (если оно было заранее помечено якорем) или же адрес самого документа в интернете (в Href прописывается или, другими словами, путь до страницы или же какого-либо другого файла).
Гиперссылки являются элементами навигации, которые призваны вас переносить на другие документы в сети, либо осуществлять перемещение по содержимому уже просматриваемой вами web-страницы с помощью заранее сделанных в теле документа меток, которые называются еще Html якорями (anchor).
Тут может возникнуть некоторая путаница, т.к. в SEO под словом , но в языке Html под «anchor» подразумевают именно якорь (перевод слова anchor) или же метку в тексте, на которую потом можно будет сослаться.
Зачем в Html используются якоря (anchor)? Это довольно удобно при создании навигации по довольно длинной web-странице. Наверное, вы встречали в сети, когда на открытой вами страничке сразу под ее заголовком приведены названия разделов статьи, опубликованной на этой странице.
Таким образом читатель сможет сразу перейти к тому месту на странице, где находится интересная ему информация, а не заморачиваться с прокруткой текста и визуальным поиском нужного места. Удобно и повышает .
Как создаются якоря и хеш ссылкиИтак, наша задача в этом случае будет заключаться в установке в нужных местах страницы (документа) якорей, которые в общем случае будут выглядеть так:
Т.е. для того, чтобы сделать anchor, нужно в пустой тег гиперссылки «А» прописать единственный атрибут «Name», в качестве значения которого использовать уникальную метку, которая не должна содержать пробелов и в которой можно использовать символы латиницы, цифры, дефис и подчеркивание (в полной аналогии с правилами, по которым можно создавать Урлы — ,,,[_],[-]).
При этом, якорь не будет виден на самой странице, т.к. внутри элементов «A» мы не прописали никакого текста. Однако, созданные таким вот образом anchor будут загрязнять Html код, и поэтому сейчас гораздо чаще чем якоря используют другой способ создания метки .
В этом случае не нужно создавать пустой тег «А», а можно использовать любой из уже имеющихся в нужном месте текста элемент. Например, это могут быть .
Т.е. для создания аналога якоря достаточно прописать к любому тегу универсальный атрибут ID (его можно будет использовать для всех тегов, и на его основе, кстати, работают ), например, так:
Текст заголовка
Так, теперь вместо создания нужного количества anchor, загрязняющих код и являвшихся на данный момент не валидными (не рекомендуемыми консорциумом W3C, который и разрабатывает язык Html), мы просто добавляет Id.
Оказывается, что для этого нужно будет, как обычно, внутри гиперссылки «А» вставить обязательный атрибут «Href», но значение которого будет формироваться из имени нужной метки (якоря) с предваряющим его знаком решетки «#» , которая еще имеет название хеш (отсюда, кстати, и растут ноги у часто используемого названия: хеш ссылки):
перекинет на место страницы, помеченной якорем
Обратите внимание, что при переходе по такой гиперссылке, открытия нового документа не произойдет. Браузер прокрутит уже открытую страницу до такого положения, чтобы место в тексте, куда вы вставили anchor, заняло позицию в самом верху экрана. Логично было бы предположить, что значения всех меток (якорей) на одной странице должно быть уникальным во избежании непоняток для браузера.
Если вы делаете якорь с помощью атрибута ID в удобно расположенном для этого теге, то нужно учитывать, что кроме ограничения по типу используемых символов (,,,[_],[-]), значение ID обязательно должно начинаться с символа латинской буквы .
Потом могут располагаться все допустимые символы в любом количестве, но первым символом метки якоря в значении атрибута ID обязательно должна быть буква (латинская, естественно). В противном случае такой якорь, вставленный в Html код, работать не будет (в большинстве браузеров).
Если вы не пропишите после символа решетки «#» никакого названия метки якоря (href="#"), то такая гиперссылка прокрутит страницу к началу . Именно так можно будет создать простейшую кнопку «Наверх», сделав ссылку с картинки (поговорим об этом чуть ниже) и вставив ее в шаблоне своего сайта, например, так:
Теперь давайте перейдем от навигации внутри документа (с помощью якорей) к навигации внешней, т.е. нам нужно будет сделать ссылки, ведущие на другие документы нашего или же другого сайта. Теперь в атрибуте Href нам нужно прописывать уже не метки якорей, а путь до открываемого файла (страница по своему замыслу является файлом, подгружаемым в браузер для последующего отображения).
анкор
Тут дальше речь должна пойти об , но я о них уже более чем подробно писал в упомянутом материале, поэтому повторяться, наверное, не имеет смысла. Но знать, как можно задать путь до файла в атрибуте Href сделанной вами гиперссылки, нужно обязательно. Поэтому не примените ознакомиться с приведенным материалом.
Однако, напомню, при создании Урлов предпочтительнее использовать только следующие символы : (,,,[_],[-]) и не использовать пробелы. Если мы рассматриваем содержимое атрибута Href для абсолютных ссылок, то схематично это можно будет представить так:
Если отбросить то, что вы редко будете использовать, то можно представить все то же самое в несколько упрощенном виде:
Протокол(обычно http)://доменное_имя (например, сайт)/путь_до_файла (web страницы)
Кроме простого протокола http на просторах интернета вы можете встретить ссылки с протоколом https, который отличается тем, что в нем применяется шифрование. Последний применяется на сайтах, где есть необходимость защитить канал обмена данными между сервером и браузером клиента. Например, он используется на сервисах электронных денег Веб Мани.
В интернете вы можете встретить различные варианты содержимого Href, например, такой:
Https://сайт/videokursy
Или такой (с расширением для файла):
Https://сайт/seo/kak-raskrutit-sajt.html
Сути это не меняет, а вот если в конце содержимого атрибута Href внутри гиперссылки будет стоять слэш, то это значит, что обращение идет уже не к файлу, а к папке, в которой будет искаться соответствующий индексный объект (подробнее об этом читайте в статье по url адресам упомянутой выше).
Скачать что-то по ссылке
Как видите, данная гиперссылка ничем не отличается от обычной, просто браузер понимает, что файл с расширение zip ему нужно именно скачать, а не пытаться открыть для просмотра, как, например, файлы документа с расширением html. Хотя, вы все это можете настроить сугубо индивидуально в своем браузере под свои личные нужды.
Скачать с Ftp сервера
Можно еще, например, создать (почтовый), добавив в Href соответствующий Url:
Написать письмо
При переходе по такой ссылке у вас на компьютере откроется используемая вами по умолчанию почтовая программа (в браузере можно настроить, чтобы линки с mailto в Href открывались в Gmail, в и др.) и появится диалог создания нового письма, в котором в поле «Кому» будет вставлен приведенный в Href почтовый адрес.
На самом деле, можно сделать довольно сложные почтовые ссылки, с помощью которых будут заполняться и другие поля в диалоге отправки письма, но используется это довольно редко.
Да и вообще, вебмастера последнее время практически перестали использовать гиперссылки с mailto в Href из-за того, что их парсят спамеры со всеми вытекающими последствиями. Лучше создать на сайте , хотя у меня по-прежнему все представлено в классическом виде на странице с контактами. Надо бы поменять на досуге (или не надо... подумаю).
Как открыть ссылку в новом окне (target blank)При создании ссылок в Html коде перед нами часто встает вопрос — в каком окне браузера открывать тот документ, на который она ведет? По умолчанию он будет открываться в уже имеющемся окне, перекрывая собой ту страницу, с которой была проставлена данная гиперссылка.
Лично я большой сторонник атрибута Target со значением blank , который позволяет открывать страницу в новом окне, оставляя открытой и тот документ, где была проставлена данная ссылка. Не знаю, как это влияет на юзабилити моего блога, но мне этот вариант нравится больше и я его использую практически во всех случаях.
В поисковиках мне тоже нравится настраивать открывание ссылок в новом окне , чтобы выдача всегда была под рукой и всегда можно было бы в нее вернуться. Для этих целей, как уже упомянул, в Html используется специальный атрибут Target, который по умолчанию имеет значение Self:
Откроет документ в этом же окне
Хотя, конечно же, target="_self" в теге «A» никто не прописывает, ибо это значение используется по умолчанию, а вот если нужно открыть страницу в новом окне, то нужно будет прописать target="_blank":
Откроется в новом окне
Обратите внимание, что значения атрибута Target пишутся со знаком подчеркивания вначале (_blank), ибо так оговорено в валидаторе Wc3, содержащем норы языка гипертекстовой разметки. Что примечательно, в Html предусмотрена возможность изменить вариант открытия ссылки принятый по умолчанию.
Например, если вы захотите, чтобы все гиперссылки вашего сайта открывались в новом окне, то нужно будет в области Head, используемого вами шаблона, прописать тег Base с атрибутом target="_blank":
что-то там еще
И теперь, если какую-то из ссылок вы захотите открывать в этом же окне, то в ее тег «A» вам уже нужно будет добавить target="_self", ибо по умолчанию сейчас у вас теперь используется _blank. О, как.
Кстати, элемент Base я использовал описанным выше способом, но и заключал в него область кода с несколькими гиперссылками, которые нужно было открыть в новом окне. Т.е. я использовал еще и закрывающий тег Base внутри области Body, и все работало. Хотя такой код, конечно же, получается не валидным.
Цвета гиперссылок при наведении и переходе — как их поменятьВ языке Html было так задумано, чтобы пользователю легко было ориентироваться в том, какую ссылку он уже открывал, а какая еще осталась нетронутой.
Для этой цели используется цвет, который будет изменяться в том случае, когда пользователь щелкнет по гиперссылке и подвешенный на нее документ успешно откроется. Вернувшись обратно на исходную страницу пользователь обнаружит, что посещенная им ссылка поменяла цвет. Такой фокус умеют проделывать все браузеры.
По умолчанию, в чистом Html (без использования свойств CSS) ссылки выделяются подчеркиванием и могут иметь три варианта цвета :
В Html 4.01 эти цвета для ссылок приняты по умолчанию, но их можно изменить при помощи специальных атрибутов, которые прописываются в тег Body, который вы сможете найти в одном из файлов используемого вами шаблона. Для изменения всех трех цветов используются, соответственно, три атрибута:
Помните, я уже писал о том, как задаются . В соответствии с этим упомянутые атрибуты могут выглядеть так:
Естественно, что здесь имелся в виду вариант чистого Html, когда по каким-либо причинам не удобно или не возможно использовать стилевое оформление, в противном случае все эти цвета можно будет легко задать и поменять с помощью .
Как сделать картинку ссылкой — два способаНу, тут совсем все просто. Т.к. является строчным элементом, то по большому счету любое изображение можно считать просто буквой, разве что только большего размера.
В случае чистого Html вокруг картинки, которую вы сделали ссылкой, у вас появится рамочка шириной в три пикселя . Причем цвет этой рамочки будет полностью соответствовать цветам ссылок принятым для вашего сайта (о них мы говорили чуть выше по тексту).
Чтобы удалить добавление рамочки к картинке, которую вы сделали гиперссылкой, вам нужно добавить атрибут Border со значением ноль в тег Img:
Это очень простой способ сделать картинку ссылкой, но есть и более сложный вариант, называемый картой изображений . В этом случае, благодаря использованию довольно-таки большого числа Html тегов и атрибутов, можно сделать из одной картинки целую карту ссылок с активными областями (кликабельными и имеющими различные формы — прямоугольник, окружность, многоугольник).
Например, вы можете разместить большое фото у себя на странице и сделать так, чтобы при щелчке по разным его частям открывались бы различные страницы по различным гиперссылкам. На самом деле, описывать карту изображений довольно долго, да и вряд ли кто-то в будет ее использовать, поэтому я этого делать не буду, ибо «овчинка выделки не стоит».
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
MailTo - что это и как в Html создать ссылку для отправки Емейла
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Списки в Html коде - теги UL, OL, LI и DL
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Здравствуйте, уважаемые читатели блога сайт. Сегодняшнюю публикацию я решил посвятить важнейшему аспекту вебмастеринга, где со всеми подробностями попытаюсь объяснить, что представляет из себя гиперссылка, неразрывно связанная с , который, в свою очередь, без преувеличения, является основой интернета.
Но для того, чтобы правильно создавать гиперссылки и вставлять их в код вебстраниц (например, своего сайта), необходимо изучить соответствующую область языка гипертекстовой разметки (), поскольку эти элементы образуются с помощью HTML-тега a, который имеет , позволяющие модернизировать ссылку до нужного вида.
Итак, сегодня мы разберем, из каких частей состоит гиперссылка, каким образом использование атрибута target blank дает возможность открывать страницу в новом окне (вкладке), как любую картинку делать ссылкой и много других важных подробностей. Кроме всего прочего, эта информация продвинет вас в изучении языка HTML.
Что такое гиперссылка и можно ли ее называть ссылкой?Отвечая на вопрос, заданный в заголовке, скажу, что термин «ссылка» имеет более широкий смысловой спектр (ссылка в Сибирь, банковская для идентификации плательщика, текстовая в книге и т.д.), включая и значение, заложенное в понятие «гиперссылка», которое связано только с гипертекстом, дающим возможность нелинейного восприятия информации.
Таким образом, гиперссылка это частный случай ссылки , поэтому вполне возможно употреблять их в сегодняшней темы на равных основаниях. Этим я и воспользуюсь в своих "шкурных интересах" в ходе сегодняшней публикации, применяя оба этих термина, чтобы избежать излишнего спама ключевых слов.
Но существуют еще и невидимые служебные, создаваемые при помощи и находящиеся в пределах , в задачу которых входит подача многочисленных сигналов и команд браузерам для выполнения той или иной функции.
Например, с помощью служебных гиперссылок возможно отображение иконки . Их можно увидеть только в составе HTML-кода (для этого нажмите для любой открытой в браузере страницы):
Сейчас пока оставим в покое служебные линки и рассмотрим общую закономерность создания гиперссылок. Общее заключается в том, что все они имеют обязательный атрибут href , в качестве значения которого указывается адрес документа (). Ссылка HTML может вести как на внутреннюю страницу сайта, так и на внешний документ.
Еще одно важное замечание. Применение атрибута href делает гиперссылки кликабельными, то есть дает возможность пользователям в результате клика по ним автоматически переходить на соответствующую страницу веб-сайта.
Как сделать гиперссылку в HTML с помощью hrefИтак, мы уже знаем, что для создания ссылки необходим в обязательном порядке тег a и атрибут href, параметрами которого могут быть URL различного вида. Поскольку a это , то между открывающим и закрывающим расположено содержание, которое и будет отображаться на web-странице.
Это содержимое называется анкором и может быть представлено в виде текста или изображения (о том, как сделать картинку ссылкой, поговорим подробнее ниже). Как я уже отмечал, анкор будет кликабельным. Рассмотрим пример гиперссылки с текстовым содержанием. Вот как будет выглядеть ее конструкция в HTML-коде:
немного об анкорах
Помимо HTTP может быть использован защищенный протокол HTTPS. Линк не обязательно должен вести на вебстраницу. Все зависит от значения href, в качестве которого может быть указан путь до какого нибудь файлика:
//сайт/wp-content/uploads/2012/05/giperssylqi-v-html.jpg
скачать
На вебстранице данный линк примет такое обличье:
Браузер "понимает", что объект с расширением.zip может быть предназначен только для скачивания, что и предлагает сделать юзеру.
Кстати, путь до любого файла иногда указывается через ФТП (). Тогда в URL адресе, который применяется в качестве параметра атрибута href, следует просто заменить протокол HTTP (HTTPS) на FTP. Ссылка на файл будет выглядеть следующим образом:
скачать с сервера
Но и это не все. Подобным образом создается ссылка на электронную почту с использованием псевдо-протокола mailto для быстрого доступа к средству написания письма:
пишите письма
После нажатия на подобную ссылку должно появиться окно установленного по умолчанию почтового клиента, в котором можете составить текст сообщения и отправить его по уже указанному адресу, взятому, как вы, наверное, догадались, из href.
На практике гиперссылки на почту очень часто ранее использовались вебмастерами и владельцами крупных ресурсов для обеспечения удобства пользователей и клиентов, которые могут в один клик получить доступ к форме почтовой связи.
Но этот вид коммуникации на веб-ресурсах сейчас уже не столь популярен (тем более, что можно установить, например, ), потому как открытые таким образом почтовые адреса активно перехватывается с помощью софта и используются разного рода спамерами.
Я привел в пример только самые распространенные протоколы, входящие в состав URL, который, в свою очередь, является параметром атрибута href при формировании гиперссылки. Кроме HTTP (HTTPS), FTP и mailto существуют и другие для решения задач более узкого профиля. Возможно, мы их рассмотрим поподробнее в других публикациях.
Виды гиперссылокА теперь попробуем классифицировать линки по тем или иным признакам.
По области их действия:
1. Внешние — ведут на страницы, располагающиеся вне сайта, на котором они проставлены;
2. Внутренние — связывают вебстраницы, находящиеся в пределах одного веб-ресурса.
По формату:
2. Графически е — в этом случае анкором гиперссылки является изображение (в том числе миниатюра), баннер, кнопка и т.п.
По типу URL, выступающего в качестве значения атрибута href:
1. Абсолютные , которые содержат явное указание протокола передачи данных (например, HTTP) и доменное имя сайта (в все о доменах).
Такие линки чаще используют, когда ссылаются на страницы внешних ресурсов. В этом случае значение href будет включать в себя полный путь до нужного файла либо вебстраницы. Вот пример абсолютной гиперссылки:
Контекст - что это такое
2. Относительные , одним из вариантов создания которых будет путь, указанный относительно корневой папки веб-сайта (отсюда и название этого вида гиперссылок). При этом из URL адреса будет изъят протокол (HTTP) и домен сайта:
Контекст - что это такое
Относительные гиперссылки на web-странице могут обеспечить переходы на внутренние странички. В таком виде они короче, что облегчает HTML-код. Конечно, все не так просто, и требует более широкого освещения, в чем вы сможете убедиться, ежели перейдете по предоставленной ссылке.
Атрибуты тега aТеперь посмотрим, какие еще атрибуты, кроме обязательного href, существуют, и как они могут повлиять на создание гиперссылки. Наиболее полные данные в этом отношении, так сказать, "из первых рук" вы можете найти на официальном сайте Международного Консорциума W3C, на котором актуальная информация появляется быстрее всего.
Они являются полностью идентичными и инициируют открытие веб-страницы в текущей вкладке. Если же вы хотите, чтобы странички открывались в новой вкладке при переходе по ссылкам, то следует добавить при формировании линка атрибут target с параметром blank :
Контекст - что это такое
Хотя некоторые вебмастера и сеошники считают, что лучше, если посетителю дать возможность выбора (то есть не прописывать target blank), ведь при необходимости в новой вкладке страницу можно открыть и с помощью контекстного меню (подвести курсор к линку, щелкнуть правой кнопкой мышки и нажать на соответствующий пункт):
Причем, как видите, в этом случае у юзера преимущество в том, что есть возможность открыть вебстраницу не только в новой вкладке, но и в новом окне (такой вариант нельзя реализовать посредством HTML, только с помощью скриптов).
Но я считаю, что не все начинающие пользователи в полной мере знакомы с возможностями и настройками популярных браузеров (). Вполне вероятна ситуация, когда читатель, перейдя по внешней гиперссылке и, потеряв из виду страницу-источник (вместо нее появится документ-реципиент), в сердцах просто закроет вкладку.
Таким образом владелец веб-ресурса вполне может не только потерять перспективного посетителя, но и получить в придачу ухудшение поведенческих факторов (), что повлечет за собой потерю позиций страницы при ранжировании.
Кроме этого, открытие страницы в соседней вкладке очень удобно с точки зрения юзабилити (). Юзер перебирается по гиперссылке на вебстраничку, получает дополнительную информацию и, как ни в чем не бывало, продолжает изучение основного материала.
Для создания объективной картины следует добавить, что применение «target="_blank"» к любым внешним ссылкам, оказывается, таит в себе некоторую угрозу безопасности. Если кому интересно, то можете почитать , где даны рекомендации по устранению проблем при использовании target blank, а также представлены альтернативные варианты реализации задачи по открытию вебстраницы в новой вкладке.
Вроде бы отметил все плюсы и минусы применения значения blank для открытия гиперссылки в новой вкладке. Ежели вы читаете статьи на моем блоге, то, наверное, уже догадались о моем отношении к этому параметру атрибута target.
На данный момент для меня его плюсы перевешивают минусы, и я являюсь его безусловным сторонником. На основании приведенных фактов у вас может сформироваться свое мнение по этому вопросу. Хотя...с учетом появления новых обстоятельств и оно может измениться.
Как создать хеш-ссылки, якоря и зачем они нужны?Далее акцентирую ваше внимание на еще одной разновидности гиперлинков, которые могут быть полезны, если материал, расположенный на веб-странице, довольно объемный, и его следует структурировать для улучшения навигации.
За примером далеко ходить не надо, просто взгляните на оглавление данной публикации в самом начале. Видите, там присутствует список разделов статьи? Гиперлинки на эти разделы как раз и являются хеш-ссылками. После нажатия на любую из них браузер прокрутит страницу до того места, где начинается соответствующая часть.
Оформляются подобные линки довольно просто. Для начала нужно создать якорь (anchor) , проставив в необходимом месте страницы соответствующую метку в виде идентификатора ID, являющегося одним из глобальных атрибутов, применяемых к любому HTML-тегу.
Благодаря универсализму ID подобные метки-якоря можно установить практически в любом месте вебстраницы. Поскольку обычно текст разделяется на абзацы, то их можно применить и к . Я в основном проставляю якоря , которыми статьи разделены на логические части:
Отметив таким образом все нужные места в HTML коде, далее создаем гиперлинки на них. Для этого в конце после последнего слэша «/» в URL (являющегося, как вы уже знаете, значением атрибута href) прописываем последовательно знак решетки «#» и имя метки (ID):
Как формировать хеш-ссылки и якоря?
Причем, если подобная якорная ссылка проставлена на той же странице, что и якоря, то часть урла до последнего слеша перед решеткой включительно может быть опущена и в качестве параметра href использованы только «#» плюс наименование ID (в сущности, это один из вариантов относительной ссылки):
Как формировать хеш-ссылки и якоря?
То есть при составлении оглавления мануала для оптимизации HTML кода вы вполне можете воспользоваться этим облегченным вариантом. Если в качестве URL вы поставите лишь один знак решетки, без названия идентификатора, то с места, где находится такая ссылка, страничка будет прокручиваться до конца вверх:
Наверх
Собственно, это простейший вариант , которая опять же служит дополнительным плюсом юзабилити ресурса, поскольку облегчает жизнь его посетителям. В качестве анкора для создания кнопки можно использовать привлекательную картинку.
Как убрать подчеркивание и изменить цвет ссылкиРазработчики HTML продумали практически все нюансы, которые могут помочь в оптимизации того или иного аспекта, это же касается и гиперлинков. Например, переходя по какой-нибудь гиперссылке на другую веб-страницу, а затем вернувшись обратно, юзер увидит, что гиперссылка изменила цвет.
Если ему требуется повторять такие действия неоднократно, то он сможет быстро определять, какие ссылки он уже нажимал, а какие нет. Такая опция заложена практически в каждом браузере. Нет нужды объяснять, насколько это удобно и сколько времени экономит.
По умолчанию и без применения средств CSS гиперссылки выделены подчеркиванием и тремя вариантами цвета , каждому из которых соответствует свой атрибут для :
- link — задает цвет гиперлинка на вебстранице (по умолчанию синий, который в обозначается #0000ff);
- alink — цвет активной гиперссылки на тот промежуток времени, пока она обрабатывается веб-браузером (красный #ff0000);
- vlink — цвет посещенной юзером ссылки (фиолетовый, #800080).
Как же заменить цвета ссылок, отображаемых браузерами для вашего сайта? Ну, для простого HTML-сайта, где странички формируются вручную (а полнофункциональных ресурсов такого рода в современных реалиях, думаю, практически не осталось, разве что простенькие дневники и лендинги) нужно просто найти открывающий тег и прописать для него нужные параметры (кстати для обозначения цвета можно использовать и его название), например:
Если вы установили для администрирования своего веб-ресурса систему управления контентом (), то, независимо от типа движка, который вы используете, необходимо открыть на редактирование файл, отвечающий за вывод хидера (шапки), где присутствует открывающий тег .
Если ваш ресурс работает под управлением Вордпресс, то для практической реализации этой задумки в качестве инструмента для автоматической вставки картинки внутрь гиперссылки можно воспользоваться , где сначала выбираете из библиотеки или загружаете нужное изображение и вставляете его в текст:
Затем выделяете полученный код картинки и нажимаете кнопку «link» редактора, после чего в появившемся окне вставляете нужный скопированный гиперлинк:
По умолчанию, при переходе по ссылке документ открывается в текущей вкладке браузера. Это поведение можно изменить с помощью атрибута target элемента . В качестве значения используется имя фрейма, заданное атрибутом name элемента , или зарезервированное ключевое слово. При указании имени фрейма ссылка будет открываться во фрейме.
В XHTML применение этого атрибута запрещено.
СинтаксисЗначенияВ качестве значения используется имя фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыта новая вкладка браузера. В качестве зарезервированных имен используются следующие.
Blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчаниюПримерА, атрибут target
Открыть в новой вкладке
БраузерыВ таблице браузеров применяются следующие обозначения.
- - элемент полностью поддерживается браузером;
- - элемент браузером не воспринимается и игнорируется;
- - при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
От автора: У ссылки может быть атрибут target, контролирующий то, что происходит при клике по ней. Одним из возможных значений этого атрибута является _blank, который говорит браузеру при клике по этой ссылке открыть новое окно (или вкладку, если пользователь предпочтет ее).
Это считалось «неправильным» в HTML (может, только в XHTML?), но все равно применялось, потому что работало. В HTML5 все стало абсолютно законным. Но имеются ли значимые причины поступать подобным образом?
Плохой повод: потому что вам так нравитсяНравится вам это или нет, target=»_blank» изменяет поведение по умолчанию. Ссылки, открывающиеся в той же странице – вот поведение по умолчанию (как будто в ссылке имеется target=»_self»). Возможно, вы вошли во вкус и открываете все ссылки в новых окнах/вкладках. Отлично, но лучше предположите, что большей части пользователей более удобно поведение по умолчанию. И, таким образом, они чувствуют себя менее уютно, когда вы навязываете им другое.
Если это внутренний инструмент исключительно для вас, то делайте что пожелаете. Если сайтом пользуются другие люди, оставьте все как есть. Также стоит отметить, что пользователи могут открыть ссылку в новом окне/вкладке, щелкнув по ссылке правой кнопкой мыши (и выбрав нужный пункт). Это значит, что для ссылок доступны оба типа поведения. Это также значит, что если вам нравится открывать новые вкладки, то вы как хотите, но не следует навязывать кому-либо такое поведение. А при использовании target=»_blank» возможно только оно.
Плохой повод: вам хочется, чтобы пользователи вообще не покидали вашу страницу Плохой повод: «внутренние» и «внешние» ссылки различаются.Наши «внутренние» ссылки (указывающие на наш собственный сайт) ведут себя обычным образом, но «внешние» (указывающие на другие сайты) открываются в новом окне/вкладке. Это связано с двумя вышеприведенными причинами, только это еще хуже. Вы прекрасно понимаете, что идеальны обычные ссылки, но если они означают, что пользователю придется покинуть ваш сайт, вам хочется разрушить этот идеал. Я слышал от множества людей, что это «традиция». Типа подразумевается, что это нужно делать именно так. Но это неверно.
Плохой повод: ссылка на PDFИли любой другой вид несетевого ресурса. Почему требуется сделать ее по-другому? Можно же вернуться назад с помощью кнопки возврата. Если хотите помочь пользователям скачать файл, не открывая его, то это достойная задача для удобства пользования, но добиться ее можно разными путями. Начинающие могут применить атрибут download.
Плохой повод: так хочет мой клиентЯ понимаю довод: «Не хочу за это сражаться», так как у вас не так много энергии. Но странно, что это вообще оказывается битвой. Если клиент не доверяет вам в этом деле, то в чем же он вам вообще доверяет? Можно зайти с такой стороны:
По умолчанию ссылки открываются обычным образом. Существует несколько причин, по которым можно менять такое поведение, и это увенчается успехом, но для большинства ссылок это невозможно. Мы ведь не хотим навязывать пользователю свои желания и потенциально расстроить его этой мелочью. Нам нужно, чтобы наши пользователи были о нас хорошего мнения.
И надеемся, что ваш спокойный и обоснованный подход поможет вашему клиенту хорошо думать о вас.
Плохой повод: страница с бесконечной прокруткойБесконечная прокрутка – коварная штука. С одной стороны, она может оказать хорошее пользовательское впечатление, потому что способна беспрерывно доставлять содержимое. И может оказать плохое впечатление, будучи неправильно выполненной. Возврат «назад» на странице с бесконечной прокруткой в большинстве случаев должен отправлять туда, где вы остановились. Решение этой сложной проблемы – ваша работа. Просто заставить ссылки открываться в новых вкладках для того, чтобы эта проблема никогда не возникала – означает избегать своей работы.
Хорошая причина: пользователем инициируется проигрывание медиаконтентаНапример: музыки, видео, подкаста… Пользователь начал проигрывание. Перемещение страниц остановит его. В этот момент пусть ссылки либо открываются в новых вкладках, либо спрашивайте, уверен ли пользователь, что хочет покинуть страницу. Так вы постараетесь и сделать хорошо для него, и не дать ему покинуть страницу.
Мы уже раскрывали эту идею. Если проигрывается медиасреда, обрабатывайте ссылки особым образом. Если не проигрывается, ссылки должны быть в обычном состоянии. Несмотря на то, что я говорю, посмотрите на YouTube’е – при смене видеороликов вас не достают этим вопросом.
Хорошая причина: пользователь работает на этой странице с чем-то, что может потеряться при ее сменеВозможно, пользователь что-то пишет. Или приводит в порядок. Делает что угодно. Щелчок по ссылке и смена страниц может оказаться волнительным, ужасным моментом. Я что, потерял все, что делал? Даже если вами предусмотрена гарантия того, что он не потеряет свою работу, следует избегать введения пользователя в подобное паническое состояние. Я подумал о CodePen, где пользователи часто пишут код. Чтобы помочь им, мы делаем следующее:
У обычных ссылок (например, ссылок нижнего колонтитула) нормальное поведение, но мы определяем, есть ли в редакторе несохраненные изменения и предлагаем сохранить их перед выходом со страницы.
Если вы все же уходите на другой сайт (или ваш браузер падает), мы сохраняем состояние редакторов в localStorage и вы не теряете свою работу.
Окончание работы – совсем другое дело. Конечно, вам не хочется терять клиентов при выходе из сайта. Ссылки на что-то вроде «Информации о доставке» должны открываться без необходимости покидать сайт. «Прочтение статьи», по моему мнению, не даст вам никакого опыта. Так как (обычно) вернуться обратно очень легко (большинство браузеров даже делают прокрутку до того места, где вы перед этим находились), то на самом деле риск потерять что-то отсутствует.
Хорошая причина: некая техническая точка зренияЯ создаю электронную почту, которую нужно открывать в Outlook Kangaroo 2009 Enterprise Edition, и ссылки должны иметь target=»blank», иначе они станут открываться в окне просмотра боковой колонки и … Отлично.
Технический аспектВдруг вам придется…
Как заставить пользователя подтвердить свое желание покинуть страницу.
Доброго времени суток, уважаемые читатели. Давно не выходил выпуск Ответов на вопросы, думаю, многие уже заждались ответов на свои вопросы. Кто-то из вас уже нашел ответ на свой вопрос без моей помощи, прошу прощения, что не я дала вам ответ. Буду исправляться. К сожалению, сегодня я также не отвечу на все вопросы, а только на один.
Мне показался этот вопрос достаточно интересным и полезным, поэтому я решила уделить ему особое внимание. Итак, вопрос.
Можно ли пользоваться тегом target="_blank" для того, чтобы ссылка открывалась в новом окне браузера? Не вредно ли это? Влияет ли это на что-нибудь?
Очень интересный вопрос, дело в том, что атрибут тега , открывающий ссылку в новом окне или в новой вкладке браузера, target="_blank", один из самых неоднозначных в HTML. Хоть я сама пользуюсь только им и не раз использовать своим читателям, стоит все таки разобраться в этом вопросе и постараться придти к какому-то мнению.
Тут стоит рассматривать ситуацию с двух сторон, использование target с точки зрения валидации и открытие ссылки в новом окне или вкладке браузера с точки зрения юзабилити. Начну с первого.
Атрибут target="_blank" является невалидным атрибутом и его использование допускается только в переходных Transitional документах:
Для сравнения, в Blogger является таким:
содержит информацию о типе документа, является обязательным элементом веб-страницы, который сообщает браузеру, как интерпретировать данную страницу. Я не буду вдаваться в историю создания HTML, XML, XHTML – все это материал не для одной статьи. Но суть я постараюсь передать.
Если речь идет о Blogger, то наш шаблон является смесью двух языков – HTML и XML, именно в таких случаях необходимо указывать - XHTML 1.0 Strict. Документы данного типа обязаны иметь четкий синтаксис, а в спецификации для документов данного типа отсутствует атрибут target="_blank". Именно поэтому для нас данный атрибут является невалидным и по сути его запрещено использовать.
Если же речь идет о других сайтах, можно ли там использовать атрибут target="_blank", то надо смотреть исходный код страницы, именно запись .
Тип документа задается разработчиком конкретного сайта, в зависимости от того, какой язык или его версия используется при верстке сайта.
Что делать в такой ситуации?
Я знаю только два разрешения данной ситуации. И оба варианта далеки от идеала.
Первый вариант – для того, чтобы документ был валидным, можно использовать специальные JavaScript или JQuery скрипты, которые будут выполнять открытие страниц в новой складке браузера.
Минус данного способа: если в настройках браузера отключен JavaScript, то страница соответственно не откроется в новом окне.
Второй вариант – использовать target="_blank" и больше не мучиться данным вопросом. Не смотря на то, что данный атрибут является невалидным, он все равно поддерживается всеми браузерами. И его использование никак не влияет на индексацию сайта поисковыми системами.
Первую часть вопроса мы с вами рассмотрели, но как уже сказала, есть и другая сторона вопроса – юзабилити, удобство для посетителя. Удобно ли нашим читателям открывать ссылки в новой вкладке.
Определенная часть (я не могу сказать на сколько много) разработчиков считают дурным тоном лишать пользователя возможности самому решить, как ему открыть страницу, в той же вкладке или в новой. А также, больша я часть продвинутых (опытных) пользователей, считают, что они сами в состоянии решить, как им открыть ссылку, ведь это предусмотрено, хотя бы в той же мышке. С другой же стороны, в интернете очень много пользователей с уровнем ниже среднего, и многие не знают, что с помощью той же мышки можно открывать любую ссылку в новом окне.
Если вы ещё не знаете, как это сделать, я вам расскажу. У каждой мышки обязательно есть колёсико, так вот если вы, наведя курсор мыши на ссылку, нажмете на колесико, то ссылка откроется в новом окне. Либо, есть мышки с тремя кнопками, и данную функцию выполняет средняя клавиша. Но как я сказала, далеко не все пользователи интернета знают о такой приятной мелочи.
Также, с точки зрения многих пользователей, удобно, чтобы внутренняя ссылка открывалась в том же окне (вкладке) браузера, а внешние ссылки – в новой вкладке, для многих это просто и логично.
Именно из-за таких противоположных мнений и из-за разного уровня знаний пользователей, атрибут target="_blank" и вообще вопрос открытия ссылок в новом окне, являются самой горячо обсуждаемой темой.
Какое мое мнение на этот счет? Я сама была новичком, я знаю много людей, которые все, что знают об интернете – это Яндекс и Одноклассники, а уж о том, что такое монитор, зачем столько кнопок на клавиатуре, а зачем вообще нужно колесико мышке, просто понятия не имеют (конечно, такие пробелы быстро восполняются). Я сама считаю, что открывать новый сайт в той же вкладке, где я сейчас нахожусь – это крайне неудобно. Даже если я действительно собираюсь уйти с сайта, я не сильно напрягусь, если закрою предыдущую вкладку. Я хочу, чтобы ссылка внутри сайта открывалась в той же вкладке, а внешняя в новой. Это мое личное мнение и на истину я не претендую.
Если вы серьезно задумались над этим вопросом, и приняли решение использовать специальный скрипт, я постаралась найти для вас решение. Данный скрипт подойдет для любого сайта, CMS и для платформы Blogger, на примере Blogger и покажу.
Заходим в Дизайн – Изменить HTML, находим код и перед ним вставляем код:
Если вы хотите предупредить своих пользователей о том, что ссылка будет открыта в новой вкладке, можно к ссылке применить стиль, как это сделано у меня. Для этого в шаблон перед строкой ]]> добавляем такой стиль:
External {
padding: 0 10px 2px 0;
background: url(http://lh6.googleusercontent.com/_G92voTj-yF0/TcFG68RdfLI/AAAAAAAABfA/QJM25G6lInk/externallink.gif) no-repeat right center;
}
Я выложила свои значения поля padding. В зависимости от используемого вами шрифта и настроек отображения текста, вам нужно будет подогнать эти цифры под себя. Также вы можете загрузить картинку в свой альбом или вообще использовать другую.
Хочу сказать, что я тестировала три разных скрипта, и предложенный выше не везде работает. Если у вас не работает скрипт, предложенный выше, то можете попробовать следующие варианты:
http://sites.google.com/site/seobiblioteka/extlinks.js
http://sites.google.com/site/seobiblioteka/external.js
Но последние два скрипта не поддерживают автоматическую загрузку стилей, поэтому, если вы хотите использовать стиль для внешней ссылке отличным от внутренней, то не забывайте присваивать ссылке класс class="external".
На этом про использование target="_blank" и открытие ссылки в новой вкладке все. Надеюсь, я ответила на вопрос читателя и всем остальным эта информация также пригодится.
Уважаемые блоггеры, если ваш вопрос связан с Blogger, настоятельно рекомендую задавать его на форуме . В блоге ответы публикуются не так часто, и не совсем регулярно, и ответ на достаточно элементарный вопрос приходится ждать несколько недель. Задав же вопрос на форуме, вы в течении пары часов уже получите ответ от меня или от других пользователей.
Желаю хороших выходных.
