HTML :: Гиперссылки
Определение гиперссылки в HTML
Для создания гиперссылок в HTML используется элемент ‘a’, который формируется парным тегом <a> (от англ. anchor – якорь). Все, что находится внутри элемента ‘a’ является гиперссылкой.
Гиперссылка (от англ. hyperlink – гиперссылка) – это часть гипертекстового документа, которая ссылается на другие элементы в самом документе (текст, изображение и т.д.) или другие объекты вне данного документа (другой документ, видеофайл и т.д.).
Атрибут href гиперссылки
Чтобы указать адрес объекта, на который будет совершен переход по ссылке, используется атрибут href. В качестве значения он принимает абсолютный или относительный адрес документа. Примером абсолютного адреса может служить http://www.yandex.ru. Абсолютные адреса действительны в любом месте, независимо от сайта, на котором расположена ссылка. А вот относительные адреса формируются относительно текущей папки документа, в котором прописана данная ссылка, или корня сайта. Примеры относительных адресов мы рассмотрим в конце пункта.
Напомним, что в случае использования сборки Xampp для размещения создаваемых в ходе изучения веб-страниц на локальном сервере, их нужно помещать в папку /xampp/htdocs. А еще лучше создать в htdocs отдельную рабочую папку, например, test, и уже в ней сохранять тестируемые страницы. Тогда абсолютный адрес, например, для страницы page_1.html будет иметь вид http://localhost/test/page_1.html. Указывать нужно именно http://localhost/…, а не фактическое расположение файла на компьютере, иначе могут возникнуть проблемы с отображением страницы.
Атрибут target гиперссылки
По умолчанию, при переходе по ссылке браузер открывает документ в текущем окне или фрейме. Чтобы изменить такое поведение браузера, используется атрибут target, который в качестве значения принимает одно из зарезервированных значений «_self | _blank | _parent | _top» или имя целевого окна или фрейма, которое устанавливается их атрибутом name. Если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне. Значение «_self» установлено по умолчанию. Если использовать значение «_blank», то браузер откроет документ в новом окне или фрейме; если «_parent» – в родительском фрейме, а в случае отсутствия такового, в текущем окне; если «_top» – в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как «_self».
Атрибут download гиперссылки
В HTML 5 был введен еще один полезный атрибут download, который не принимает значений, а служит индикатором того, что браузер не совершит переход по ссылке, а предложит закачать файл, указанный в атрибуте href в качестве значения.
Также в элементе ‘a’ могут использоваться атрибуты rel, hreflang и type. Мы их использовать скорее всего не будем. Однако, если информация о них все таки понадобится, то можно обратиться к нашему справочнику здесь.
Рассмотрим применение гиперссылок на примере №1.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Использование гиперссылок</title> </head> <body> <p> Посмотреть спецификацию <em>HTML 5</em> можно <a href="http://www.w3.org/TR/html5/" target="_blank">здесь</a>. <br>Страница откроется в новом окне. </p> <p title="Загрузка начнется автоматически!"> <!-- Работает в новых версиях браузеров --> А скачать таблицы элементов и атрибутов можно <a href="http://www.w3.org/TR/html5/" download>здесь</a>.<br> </p> </body> </html>
Пример №1. Использование гиперссылок
Использование гиперссылок для создания якорей на странице
Элемент ‘a’ может использоваться и в качестве гиперссылки для перехода внутри страницы. Для этого в нужном месте документа необходимо создать якорь (от англ. anchor), т.е. закладку, и указать ее в качестве цели в гиперссылке. Создается якорь при помощи пустого элемента ‘a’, в открывающем теге которого указывается атрибут id. В качестве якоря можно также использовать и требуемый элемент разметки, к которому в дальнейшем будет вести внутренняя гиперссылка. Для этого нужно просто указать в нем атрибут id. Далее в атрибуте href самой гиперссылки в качестве значения указывается символ решетки ‘#’ и значение атрибута id якоря. Чтобы стало понятнее, рассмотрим все на примере №2.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Создание внутренних гиперссылок</title> </head> <body> <!-- Создаем якорь --> <a></a> <p> Я – первый абзац. </p> <p> Посмотреть таблицу атрибутов <em>HTML 5</em> можно <br> на официальном сайте <a href="http://www.w3.org/TR/html5/index.html#attributes-1" target="_blank">здесь</a>. <br>Страница откроется в новом окне и будет <br> прокручена до таблицы с атрибутами. </p> <p> Перейти к первому абзацу можно <a href="#anchor_1">здесь</a>.<br> </p> </body> </html>
Пример №2. Использование внутренних гиперссылок
Обратите внимание на наличие якоря в абсолютном адресе, указанном в качестве значения атрибута href во втором абзаце примера. При использовании такой гиперссылки, браузер сначала перейдет по указанному адресу, а затем прокрутит страницу до места расположения указанного якоря. Если якоря на странице не окажется, страница будет показана с самого начала.
Относительные гиперссылки и построение относительной адресации
В заключение пункта рассмотрим принцип построения относительных адресов. Пусть наша гиперссылка находится в
документе, расположенном на локальном сервере по адресу
http://localhost/site/
- Если нужно, чтобы ссылка вела на целевой документ new_page.html, расположенный в той же папке doc_n, что и наш исходный документ с гиперссылкой, то в качестве значения атрибута href ссылки нужно просто задать имя целевого документа: href=»new_page.html».
- Для перехода к целевому документу new_page.html, расположенному в папке
http://localhost/site/
doc_1/ , значение атрибута href ссылки должно включать только папки, вложенные в doc_n, и, конечно же, имя целевого документа: href=»doc_n_1/ … doc_n_k/doc_2/ … /doc_n/ doc_n_1/ … doc_n_k/ new_page.html» . Таким образом, мы указываем браузеру, что он должен зайти в папку doc_n_1, расположенную в папке doc_n с исходным документом, в котором прописана гиперссылка, затем в папку doc_n_2 и так далее, пока не попадет в папку doc_n_k с находящимся там целевым документом, который он и должен открыть. - Чтобы попасть в папку на уровень выше исходной, используется специальная комбинация символов ‘../’. Для перехода
на n уровней вверх нужно записать комбинацию ‘../’ n раз подряд. Так в нашем
случае, чтобы перейти по ссылке к целевому документу
http://localhost/site/
doc_1/ атрибут href ссылки должен иметь значение «../../../new_page.html». Тем самым мы сообщаем браузеру, что он должен подняться в папку doc_n-1, затем doc_n-2 и doc_n-3, после чего открыть находящийся там целевой документ new_page.html.doc_2/ … /doc_n-3/ new_page.html - Если же необходимо не просто подняться на несколько уровней вверх, но и зайти там в папку (или несколько вложенных папок), для получения доступа
к целевому документу, то в значении атрибута href ссылки сперва нужно прописать требуемое количество
уровней поднятия вверх при помощи символов ‘../’, а затем дописать путь из полученной папки к целевому документу.
Например, если целевой документ расположен в папке new_doc и адресный путь к нему имеет вид
http://localhost/site/
doc_1/ , то атрибут href ссылки должен иметь значение «../../../new_doc/new_page.html». Т.е. мы указываем браузеру, что он должен подняться на три уровня вверх относительно исходной папки doc_n, в которой находится документ с гиперссылкой, а затем зайти в папку new_doc и открыть целевой документ new_page.htmldoc_2/ … /doc_n-3/new_doc/ new_page.html
В качестве примера вы можете скачать учебный минисайт, построенный полностью на основе относительной адресации. После просмотра поэкспериментируйте, изменяя и создавая новые ссылки, папки и страницы.
Относительные гиперссылки очень удобны при разработке браузерных офф-лайн приложений, например, справочных руководств. Однако следует помнить, что при переносе документа из текущей папки в другую, все относительные ссылки в нем перестанут работать. Поэтому их придется переписывать. Если же относительные ссылки указывают на файлы, которые также находятся внутри текущей папки либо во вложенных папках, то после переноса данной папки в другое место все ссылки в документе останутся рабочими.
Если необходимо начать отсчет относительного пути от корня сайта, в начале пути следует прописать слэш ‘/’. Например, ссылка ‘<a href=»/index.html»>Домой</a>’ указывает на документ, который находится в корневой папке сайта (а не в текущей!). Следует иметь в виду, что отсчет от корня сайта работает только под управлением реального веб-сервера. На локальном сервере, например, Xampp, отсчет нужно начинать с имени корневой папки.
Быстрый переход к другим страницам
belarusweb.net
Как создать гиперссылку : WEBCodius
Здравствуйте уважаемые читатели блога webcodius.ru. Сегодня мы поговорим о том как создавать гиперссылки в html, узнаем как использовать тег «А» и его атрибуты href и target, научимся делать картинку ссылкой.
Гиперссылки являются ключевыми элементами web-страницы. Они связывают разрозненные html-страницы воедино, в полноценный web-сайт. Обычно ссылки отображаются как подчеркнутый фрагмент текста, при наведении на который, курсор мыши приобретает вид указывающего пальца.
Кроме того, гиперссылка может иметь вид графического изображения или его фрагмента. При щелчке по ссылке, браузер загружает web-страницу, адрес которой указан в атрибутах данной ссылки. Гиперссылки позволяют ссылаться как на внутренние страницы вашего сайта, так и на любые другие ресурсы в интернете.
Создание текстовых гиперссылок
Начнем с простого и рассмотрим создание обычных текстовых ссылок. Для создания текстовой гиперссылки достаточно любой фрагмент текста, который должен стать ссылкой, заключить в парный тег А. И в атрибуте href этого тега необходимо указать адрес целевой web-страницы в интернете:
Тег «А» или гиперссылка представляет собой встроенный элемент html-страницы, т.е. ссылка должна быть частью блочного элемента, например абзаца. Например:
В этом фрагменте html-кода создается абзац, который содержит ссылку. Ссылка указывает на web-страницу page15.html, которая находится в папке catalog, хранящейся в корневой папке сайта www.site.ru.
Текст, являющийся ссылкой, можно оформлять используя любые строчные теги оформления текста:
Можно создавать пустые гиперссылки, которые никуда не ведут. Для этого достаточно в атрибут href добавить знак #:
Если щелкнуть по такой ссылке ничего не произойдет. Обычно пустые гиперссылки применяются если необходимо при щелчке по ней запустить какой-нибудь javascript-код.
Если на странице не используются стили CSS и не применяются дополнительные атрибуты, то гиперссылки на странице по умолчанию отображаются следующим образом:
- обычные ссылки отображаются синим цветом;
- посещенные ссылки выделяются фиолетовым цветом;
- активная гиперссылка (по которой щелкнули в данный момент) отображается красным цветом, но поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно;
- текст ссылок выводится с подчеркиванием.
Интернет адреса
Далее рассмотрим виды интернет-адресов применяемых в атрибуте href. В коде html применяются полные и сокращенные интернет адреса.
Полный адрес содержит содержит интернет-адрес web-сервера, и путь к файлу, который необходимо получить. Например:
Здесь www.site.ru адрес web-сервера, а /catalog/page15.html — путь к файлу на этом сервере. Вообще, обычно полные интернет-адреса используют только если необходимо создать гиперссылку, указывающую на какие-либо ресурсы находящиеся на другом web-сайте.
При создании гиперссылок указывающих на файлы, входящих в состав того же сайта, что и текущая web-страница, лучше использовать сокращенные интернет-адреса. Сокращенный адрес содержит только путь к файлу на сервере, т.к. адрес web-сервера итак уже известен браузеру.
Сокращенные интернет-адреса бывают абсолютными и относительными. Абсолютный адрес задает путь к целевому файлу относительно корневой папки сайта. Такой адрес начинается с символа /(слэш), который и обозначает корневую папку. Например, адрес «/page15.html» указывает на файл page15.html, который хранится в корневой папке сайта. Или адрес «/catalog/page.html» указывает на файл page.html, который помещен в папку catalog, вложенной в корневую папку сайта.
Относительный адрес задет путь к файлу относительно файла текущей веб-страницы. Относительные адреса не содержат в начале символа слэш. Рассмотрим несколько примеров.
Например адрес «page.html» указывает на файл, который находится в той же папке, что и файл текущей web-страницы. А адрес «catalog/page.html» откроет файл page.html, хранящийся в папке catalog, вложенной в папку, в которой хранится текущая страница.
С помощью двух точек вначале адреса можно указывать папки предыдущего уровня вложенности. Так, например адрес «…/page.html» указывает на страницу page.html, хранящуюся в папке, в которую вложена папка с текущей веб-страницей.
Ссылка на почту
С помощью языка html можно создавать почтовые гиперссылки, щелчок по которым запускает программу почтового клиента. При указании адреса в атрибуте href перед email необходимо поставить «mailto:», т.е. примерно так: href=»mailto:[email protected]». Причем после двоеточия перед почтовым адресом не должно быть пробелов.
Например, я хочу создать ссылку указывающую на почтовый адрес [email protected]. Тогда моя почтовая ссылка в html-коде будет выглядеть так:
написать письмо
Если щелкнуть по этой ссылке, то у вас запустится установленная по умолчанию почтовая программа и откроется диалог создания нового письма, в котором в поле «кому» будет вставлен адрес [email protected].
Как сделать картинку ссылкой
Так как тег img для вставки изображения является строчным элементом html-страницы, то просто вставляем этот тег внутрь тега «А» вместо текста:
Этот html-код создаст изображение-ссылку. В результате на странице отобразится картинка, вся область которой станет кликабельной и при щелчке по ней произойдет переход по указанному в коде адресу.
Кроме этого простого варианта создания картинки-гиперссылки, html позволяет превратить в гиперссылку часть графического изображения. Более того, имеется возможность разбить изображение на части, каждое из которых будет представлять из себя гиперссылку, указывающей на свой интернет-адрес. Такой вариант называется картой изображений.
В настоящее время карта изображений используется редко, так как для этого требуется очень большое число тегов и html-код становится громоздким и запутанным.
Изображение-карта создается в три этапа:
- Создание самого изображения с помощью тега img: img src=»map.jpg»
- Создание карты с помощью парного тега map. С помощью обязательного атрибута name этого тега задается уникальное в пределах страницы имя карты. Далее необходимо привязать карту к изображению с помощью атрибута usemap тега img, значением которого должно состоять из символа # и имени карты:
- Создание описаний областей гиперссылок с помощью одинарных тегов area. Данные тег должен содержать атрибуты: shape — форма области, coords — координаты области и href — адрес гиперссылки. Эти описания помещают внутрь тега map.
Примерно так выглядит полный html-код, создающий карту изображения:
Здесь мы создали одну прямоугольную область, указывающую на главную страницу сайта webcodius, одну круглую область, указывающую на страницу со всеми статьями этого же сайта, и одну многоугольную область не имеющей ссылки.
Якоря
Якорь или метка — это такой вид гиперссылки, которая помечает отдельный фрагмент html-страницы и позволяют перемещаться по содержимому документа.
Возможно, вы уже встречали страницы, где сразу после заголовка шел список названий разделов статьи, щелчок по которым перекидывал вас на интересующий фрагмент записи.
Якоря создают, как и обычные гиперссылки, с помощью парного тега A, только вместо атрибута href в него помещают атрибут name или id, значение которых задает уникальный идентификатор метки. При этом сам тег «A» обычно не имеет никакого содержимого:
Есть второй способ создания якоря, при котором не надо создавать пустые элементы «А». А можно использовать уже имеющиеся в веб-странице элементы, например теги html заголовков и абзацев. Для этого в нужный элемент добавляем универсальный атрибут id:
Далее необходимо сделать ссылку на созданный якорь. Для этого используется обычный тег «А» с обязательным атрибутом href, значение которого формируется из знака решетки (#) и названия метки:
При нажатии по такой ссылке, браузер не открывает новую страницу, а прокручивает текущую до тех пор пока html-элемент с якорем не займет позицию в верху экрана. Соответственно, чтобы все правильно работало, все метки на одной странице имели уникальные имена.
Если при создании ссылки на якорь в значении атрибута href после знака решетки # не поставить никакого значения, то щелчок по такой ссылке прокрутит страницу к началу. Таким образом можно создать простейшую кнопку «Наверх»:
НАВЕРХ
На этом рассказывать о создании гиперссылок я заканчиваю, напомню только основные моменты:
- Для создания ссылок используется парный тег А с обязательным атрибутом href, в значении которого помещается адрес целевой страницы;
- При создании ссылки на почту в атрибуте href перед адресом почты необходимо поставить «mailto:»;
- Если надо создать ссылку изображение, то просто помещаем тег img внутрь тега А.
На этом все, не забывайте подписываться на обновления блога! До новых встреч!
webcodius.ru
Оформление ссылок в html — внешних и внутренних
Цель урока: знакомство с оформлением ссылок в html, абсолютные ссылки и локальные ссылки.
Внутренние ссылки в HTML (якорная ссылка)
Представим себе реферат, состоящий из нескольких глав, изложенный в электронном виде на одной веб-странице. Как бы красиво ни был оформлен текст, для того чтобы искать главы придется использовать полосу прокрутки и спускаться «вниз» по странице в поисках необходимой главы.
В таком случае обычно в самом начале страницы делается оглавление из гиперссылок. В HTML такие ссылки, которые организовывают переходы внутри одной страницы, называются внутренними или якорными ссылками.
Рассмотрим механизм создания внутренних ссылок в HTML. Он состоит из двух шагов:
- Создание закладок или якорей (на которые необходимо переходить по ссылкам):
- Создание ссылок на якоря (на закладки):
1 способ:
<a name=»название_закладки»></a> <p>Текст для закладки</p>
В качестве якоря служит тег
aс атрибутомname— название якоря (закладки)2 способ:
<p>Текст для закладки</p>
Для обозначения якоря используется атрибут
id, добавляемый к тегу (теги могут быть практически любые: div, span, p, h…)
<a href=»#название_закладки»>Текст ссылки</a>
Знак шарп или решетка (
#) ставится обязательно перед названием якоря
Пример: на веб-странице, состоящей из трех глав реферата создать оглавление на 3 главы
Решение:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ol> <!-- создание ссылок --> <li><a href="#glava1">Глава 1</a></li> <li><a href="#glava2">Глава 2</a></li> </ol> <!-- создание якоря --> <h2>Глава 1. "Язык HTML - история"</h2> <p>Текст главы</p> ... <!-- создание якоря --> <h2>Глава 2. "Структура HTML-страницы"</h2> <p>Текст главы</p> ... |
<ol> <!— создание ссылок —> <li><a href=»#glava1″>Глава 1</a></li> <li><a href=»#glava2″>Глава 2</a></li> </ol> <!— создание якоря —> <h2>Глава 1. «Язык HTML — история»</h2> <p>Текст главы</p> … <!— создание якоря —> <h2>Глава 2. «Структура HTML-страницы»</h2> <p>Текст главы</p> …
Лабораторная работа №1: Скачайте файл. Создайте оглавление, с каждого пункта которого осуществляется переход к нужной статье (Каждая статья начинается с тегаh4)Оформление ссылок HTML для переходов к другим документам
Синтаксис:
<a href=»имя_файла»>текст</a>
переход к другому документу с якорем
Иногда необходимо организовать ссылку не просто на другой документ, а на конкретное место — якорь — другого документа.
Синтаксис:
<a href=»имя_файла#якорь»>текст</a>
Пример: организовать ссылку на файл 1.html, а, конкретнее, на якорь, расположенный в данном файле
Выполнение:
Файл с ссылкой:
... <a href="1.html#a">Ссылка</a> ... |
… <a href=»1.html#a»>Ссылка</a> …
Файл 1.html:
... <p>Якорь</p> ... |
… <p>Якорь</p> …
Лабораторная работа №3: Скачайте папку. Запустите файл menu.html. В файле menu.html оформите меню в виде гиперссылок на файл content.html и показом статьи, соответствующий названию пункта менюАбсолютные ссылки HTML
Синтаксис:
<a href=»протокол://имя_сервера:порт/путь»>текст</a>
Рассмотрим примеры:
Ссылка на html-файл по протоколу HTTP:
<a href="http://www.site.ru/doc1.html">текст</a> |
<a href=»http://www.site.ru/doc1.html»>текст</a>
Ссылка на zip-файл по протоколу HTTP:
<a href="http://www.site.ru/test.zip">текст</a> |
<a href=»http://www.site.ru/test.zip»>текст</a>
Ссылка на e-mail по протоколу mailto:
<a href="mailto://[email protected]">текст</a> |
<a href=»mailto://[email protected]»>текст</a>
Относительный путь ссылок HTML
Рассмотрим примеры того, как правильно должны быть оформлены относительные ссылки.
На изображении файлом для ссылки является target.html. Сама же ссылка оформляется в файле current.html.
Атрибут href гиперссылки должен иметь таковое значение (как на картинке) при указанных расположениях файлов.
Рассмотрим более сложный вариант расположения файлов:
В каком окне открывать ссылку?
За это отвечает атрибут тега гиперссылки — target.
Рассмотрим возможные значения атрибута:_blank — открывает документ в новом окне_self — открывает документ в том же окне_parent — открывает документ в родительском окне_top — открывает документ на весь экран
Изменение цвета гиперссылки
За цвет гиперссылки отвечают ее атрибуты: link, alink, vlink
labs-org.ru
HTML5 | Ссылки
Ссылки
Последнее обновление: 08.04.2016
Ссылки, которые представлены элементом <a></a>, играют важную роль — они обеспечивают навигацию между отдельными документами. Этот элемент имеет следующие атрибуты:
href: определяет адрес ссылкиhreflang: указывает на язык документа, на который ведет данная ссылкаmedia: определяет устройство, для которого предназначена ссылкаrel: определяет отношение между данным документом и ресурсом, на который ведет ссылкаtarget: определяет, как документ по ссылке должен открыватьсяtype: указывает на mime-тип ресурса по ссылке
Наиболее важным атрибутом является href:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ссылки</title> </head> <body> <a href="content.html">Учебник по HTML5</a> </body> </html>
Здесь для ссылки используется относительный путь content.html. То есть в одной папке с данным документом должен находиться файл content.html, на который будет идти переход по нажатию на ссылку.
Также мы можем использовать абсолютные пути с полным указанием адреса:
<a href="http://metanit.com/web/html5/">Учебник по HTML5</a>
Навигация внутри документа
И также мы можем задать внутренние ссылки, которые будут переходить к определенным блокам внутри элементов:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Внутренние ссылки</title> </head> <body> <a href="#paragraph2">Параграф 1</a> | <a href="#paragraph3">Параграф 2</a> | <a href="#paragraph4">Параграф 3</a> <h3>Параграф 1</h3> <p>Содержание параграфа 1</p> <h3>Параграф 2</h3> <p>Содержание параграфа 2</p> <h3>Параграф 3</h3> <p>Содержание параграфа 3</p> </body> </html>
Чтобы определить внутреннюю ссылку, указывается знак решетки (#), после которого идет id того элемента, к которому надо осуществить переход. В данном случае переход будет идти к заголовкам h3.
Атрибут target
По умолчанию ресурсы, на которые ведут ссылке, открываются в том же окне. С помощью атрибута target можно переопределить это действие. Атрибут target может принимать следующие значения:
_blank: открытие html-документа в новом окне или вкладке браузера_self: открытие html-документа в том же фрейме (или окне)_parent: открытие документа в родительском фрейме, если ссылка расположена во внутреннем фрейме_top: открытие html-документа на все окно браузераframename: открытие html-документа во фрейме, который называется framename (В данном случае framename — только пример, название фрейма может быть произвольным)
Например, открытие документа по ссылке в новом окне:
<a href="http://metanit.com/web/html5/" target="_blank">Учебник по HTML5</a>
Значение _blank как раз и указывает браузеру, что ресурс надо открыть в новой вкладке.
Стилизация ссылок
По умолчанию ссылка уже имеет некоторый цвет (один из оттенков синего), кроме того она имеет подчеркивание. При нажатии на ссылку она становится активной и приобретает красный цвет, а после перехода по ссылке эта ссылка может окраситься в другой цвет (как правило, в фиолетовый). Подобная стилизация задается многими браузерами по умолчанию, но мы можем ее переопределить. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a:link {color:blue; text-decoration:none}
a:visited {color:pink; text-decoration:none}
a:hover {color:red; text-decoration:underline}
a:active {color:yellow; text-decoration:underline}
</style>
</head>
<body>
<a href="index.html">Учебник по HTML5</a>
</body>
</html>
Здесь определены стили для ссылок в различных состояниях. a:link применяется для ссылок в обычном состоянии, когда они не нажаты и на них не наведен указатель мыши.
a:visited указывает на состояние ссылки, по которой уже был осуществлен переход.
a:hover указывает на состояние ссылки, на которую навели указатель мыши.
a:active указывает на ссылку в нажатом состоянии.
Стиль color устанавливает цвет ссылки. А стиль text-decoration устанавливает подчеркивание: если значение underline, то ссылка поддчеркнута,
если none, то подчеркивание отсутствует.
Ссылка-картинка
Поместив внутрь элемента <a> элемент <img>, можно сделать ссылку-изображение:
<a href="index.html"> <img src="cover.png" alt="HTML tutorial"> </a>
metanit.com
Ссылки. Теги HTML для создания ссылок. Анкор ссылки.
Я считаю, что ни одна HTML-страница не может существовать без хотя бы одной гиперссылки (или просто ссылки). Ссылки могут быть как на другие страницы или сайты, так и на файлы, картинки и т.д.
Ссылка — это один из важных элементов на сайте, без которой бы Интернет был не таким популярным и интересным для людей. Если ты создаешь сайт, то помни про силу ссылок на нем.
Ссылки бывают внешними и внутренними, текстовыми и графическими. Внешние ссылки ссылаются на другие сайты или объекты объекты на них, внутренние же наоборот — на различные части твоего сайта. Текстовая ссылка — это текст, при нажатии на который ты попадаешь на другой объект или открываешь его, а графическая — это некий объект (чаще всего картинка), который служит также для перехода на другую страницу, сайт или, например, изображение. Ссылки в HTML создаются при помощи тега <A></A> (от англ. anchor — якорь). Далее я расскажу тебе подробнее о ссылках.
В теге <A></A> есть важный и главный атрибут href. Его значением выступает путь к объекту или сайту, на который ссылается наша ссылка в виде URL-адреса. В качестве анкора (тела ссылки) может выступать как текст (текстовая ссылка), так и изображение (графическая ссылка). Если тебе надо создать графическую ссылку, надо в качестве анкора использовать тег IMG между тегами <A></A>. Приведу простой пример HTML-код ссылки:
<a href="URL-адрес или имя файла"> текст ссылки (анкор) </a>
Приведу еще один пример, чтобы ты лучше усвоил. За основу возьму мой сайт:
<a href="https://1seo.by/"> Главная страница сайта 1seo </a>
На html-странице в браузере это будет такой вид:
Главная страница сайта 1seo
Цвет текста ссылок задается атрибутами в теге BODY. Если говорить проще, то к ссылкам подходят те же атрибуты для изменения, что и к тексту на странице. Это и выделить жирным, и курсивом, и использовать заголовки и т.п.
Чтобы создать графическую ссылку, как я уже говорил, необходимо в анкоре вставить изображение тегом IMG. HTML-код графической ссылки:
<a href="https://1seo.by/"> <img src="girl.jpg"> </a>
На html-странице появится следующее:
По умолчанию графические ссылки выводятся с рамкой. Если вы хотите убрать рамку в графической ссылке, надо в теге IMG указать значение 0 в атрибуте border:
<a href="https://1seo.by/"> <img src="girl.jpg" border="0"> </a>
Получим результат без рамки:
Текстовые и графические ссылки можно совмещать. Приведу простой пример html-кода:
<a href="https://1seo.by/"> <img src="girl.jpg" border="0"> Главная страница 1seo </a>
Получим вот такую ссылку:
Главная страница 1seo
Как ты заметил, переход на другую страницу осуществляется в этом же окне. Если ты хочешь чтобы ссылка открывалась в другом окне или родительском (по умолчанию стоит в этом же окне), можно применять слудующие атрибут target тега A:
- _blank — открывает страницу в новом окне;
- _parent — загружает ссылку в родительском окне;
- _self — по умолчанию. Открывает ссылку в этом же окне.
Пример атрибута target тега A, где ссылка открывается в новом окне:
<a href="https://1seo.by/" target="_blank"> Главная страница сайта 1seo </a>
Существует еще атрибут title, для создания всплывающей подсказки у ссылки:
<a href="https://1seo.by/" title="Главная страница сайта 1seo"> Главная страница сайта 1seo </a>
Внутренние ссылки создаются тоже легко, только для создания якоря вместо атрибута href применяется атрибут name:
<a name="имя якоря"> текст </a>
Кстати, если указать в URL-адресе ваш почтовый ящик, и указать протокол mailto:, то при нажатии по твоей ссылки откроется почтовая программа, где в поле Кому уже будет вписан твой адрес почтового ящика. На примере HTML-код будет вот такой:
<a href="mailto:твой_почтовый_ящик"> Написать мне сообщение </a>
Я постарался написать основное, что тебе необходимо для создания ссылки в HTML. Кстати, если ты прочитал предыдущие статьи Учебника HTML, то я могу с увереностью сказать, что ты уже знаешь минимум, чтобы создать свою первую полноценную html-страницу. После того, как создашь страничку, ты можешь выложить её на бесплатный хостинг и увидеть плоды своего труда. Поверь, после того как ты это сделаешь, у тебя будет еще больший прилив творческой энергии. Далее я расскажу тебе, как создать таблицу в HTML. Это тоже очень важная информация, постарайся её полностью поглотить и переварить.
Дата публикации: 15 мая, 20121seo.by
Гиперссылки в HTML
«Гиперссылки в HTML» – пятый урок учебника HTML. В этом уроке речь пойдет об использовании гипертекстовых ссылок. На гипертекстовых связях основан любой web документ, поэтому уметь работать со ссылками обязан каждый веб мастер.
Правила использования гипертекстовых ссылок.
Гиперссылки в HTML необходимы для связи различных документов, как в пределах одного сайта, так и в пределах всей сети интернет. Для создания гипертекстовых связей (гиперссылок) используется дескриптор <a>:
<a href=»адрес_документа»>текст ссылки</a>
При помощи атрибута href передается адрес документа, на который указывает ссылка.
В качестве гиперссылок могут выступать самые разнообразные объекты, в том числе изображения:
– мета–теги в HTML .
Ссылаться можно не только на разные документы, но и на различные части этих документов. Для этого в некоторой части документа необходимо разместить так называемый якорь – конструкцию вида <a name=»название якоря «></a>, а затем сослаться на нее, указав в атрибуте href следующий код:
href=»http://www.eltisbook.ru.#название якоря»
Нажав на ссылку ниже вы попадете в нижнюю часть главной страницы:
<a href=»../index.php#1″>Как создать свой сайт БЕСПЛАТНО </a>
Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход просто произойдет на начало документа, при этом не возникнет никаких ошибок.
Гипертекстовые связи могут осуществляться по множеству протоколов. Наиболее часто используемые представлены ниже:
- HTTP – протокол – стандартный протокол гипертекстовых связей, предназначенный для разовой передачи блоков информации.
- FTP – протокол – универсальный протокол передачи файлов. Требует авторизации.
- MAILTO – стандартный протокол передачи почты.
Настройка гиперссылок в HTML.
Атрибут target, тега <a> определяет как откроется новая страница и принимает следующие значения:
- _self – документ откроется в текущем окне
- _parent – во фрейме – родителе текущего фрейма
- _top – в главном окне всей фреймовой структуры
- _blank – документ откроется в новом окне
Например для открытия страницы с контактами в новом окне необходимо использовать следующий код:
<a href=»http://www.eltisbook.ru/contact/contact.php» target=»_blank»>Контакты</a>
Придать гиперссылкам особенный вид можно при помощи атрибутов LINK, ALINK, VLINK, где:
- Link – определение внешнего вида еще не посещенных ссылок.
- Alink – определение внешнего вида уже посещенных ссылок.
- Vlink – определение внешнего вида выделенных ссылок.
Данный урок по праву можно считать одним из основных в учебнике html, ведь именно здесь рассказано о работе с гиперссылками в HTML. Теперь вы самостоятельно умеете создавать гипертекстовые связи между различными документами.
В следующем уроке мы поговорим о работе с графикой в HTML: научимся вставлять изображения, настраивать их внешний вид и т. д.
www.eltisbook.ru
Ссылка в html. Работа с тегами a и link
Ссылки html — это некие конструкции которые определяются тегами a, area, link и предоставляют связь между двумя ресурсами, одним из которых является документ на котором размещена ссылка.
Различают два типа ссылок в html:
Ссылки на внешние ресурсы
Это ссылки на ресурсы, которые используются для расширения и дополнения страницы, их автоматически обрабатывает браузер при загрузке документа.
Гиперссылки
С данным типом ссылок напрямую взаимодействует пользователь. Они обычно связывают между собой страницы, к примеру навигация по сайту реализована с помощью гиперссылок. Текст или картинка может быть ссылкой.
Ссылка в html элемент <a>
Чтобы создать гиперссылку мы должны использовать тег a этот тег является парным и выглядит следующим образом.
<a href=»webupblog.ru»>Текст ссылки</a>
<a href=»webupblog.ru»>Текст ссылки</a> |
Атрибут href
Тег a имеет несколько атрибутов, самый основной, это атрибут href его значением является путь к файлу или странице на которую должна вести ссылка при клике.
Различают несколько видов путей:
Относительный — путь к странице указывается относительно текущего документа или сайта. К примеру если файлы или картинки находятся в одной папке или соседних нет необходимости в указании домена (имени сайта). Ниже пример.
<a href=»/about.html»>О сайте</a>
<a href=»/about.html»>О сайте</a> |
Абсолютный — наоборот указывает полный путь к странице. Такая страница может находится на другом сервере и относится к другому сайту. Обязательно указывать домен сайта.
<a href=»http://webupblog.ru/ob-avtore/»>Об авторе</a>
<a href=»http://webupblog.ru/ob-avtore/»>Об авторе</a> |
Якорь — ссылка на html элемент, с помощью данного типа пути мы можем осуществлять навигацию по странице на которой находимся.
Очень часто это используется для создания оглавления по статье, и возврата на начало страницы. Урлом выступает id элемента и перед ним ставится знак решетки.
<a href=»#top»>Вверх</a>
<a href=»#top»>Вверх</a> |
Атрибут title
Используется для дополнительного описания ссылки. Заголовок мы можем увидеть когда наведем курсор на гиперссылку. Этот атрибут не обязательный, но иногда бывает полезным.
<a href=»#top» title=»После клика вы перейдете к шапке сайта.»>Вверх</a>
<a href=»#top» title=»После клика вы перейдете к шапке сайта.»>Вверх</a> |
Атрибут target
Этот атрибут управляет поведением при открытии ссылки, по умолчанию ссылка открывается в текущем окне. Рассмотрим его основные значения.
_blank — открывает ссылку html в новом окне
_self — открывает в текущем окне
Атрибут rel
Определяет отношение между текущим и связанным документом. Ниже приведены основные значения атрибута.
rchives — Указывает на архив страниц или записей на сайте.
author — Указывает на страницу об авторе.
bookmark — Указывает на категории или записи.
first — Ссылка указывает на первую страницу сайта.
help — Указывает на страницу помощи.
index — Ссылка на содержание.
last — Ссылка указывает на последнюю страницу сайта.
license — Указывает на страницу с лицензией или с информацией об авторских правах.
me — Указывает на страницу автора статьи на другом сайте.
next — Указывает на следующую страницу или категорию.
nofollow — Запрещает поисковым роботам передавать вес по ссылке.
prev — Указывает на предыдущую страницу или категорию.
search — Ссылка на поиск.
sidebar — Добавить ссылку в избранное браузера.
up — Указывает что ссылка ведет на родительскую страницу.
<a href=»http://webupblog.ru/ob-avtore/» rel=»author» >Об авторе</a>
<a href=»http://webupblog.ru/ob-avtore/» rel=»author» >Об авторе</a> |
Ссылка html тег link
Этот тег относится к первому типу ссылок и устанавливает связь с внешним документом. К примеру это может быть файл стилей или файл со шрифтами. Тег link должен размещаться внутри тега head. Если есть необходимость можем использовать его неоднократно.
<head> <link rel=»stylesheet» type=»text/css» href=»theme.css» /> </head>
<head> <link rel=»stylesheet» type=»text/css» href=»theme.css» /> </head> |
Основные атрибуты
charset — Кодировка документа.
href — Путь к файлу.
media — Задает устройство, для которого применять стили.
rel — Определяет отношения между документом и файлом, на который ведет ссылка.
type — Тип данных файла который подключается.
Статьи по теме:
Как сделать картинку ссылкой?
Как убрать подчеркивание ссылки?
Hover эффект ссылки с анимацией
Статья оказалась полезной? Поделись с друзьями, и подпишись на нашу группу в вк и канал на youtube.
comments powered by HyperCommentswebupblog.ru