Вставка гиперссылок в html документ. Как сделать ссылку

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

Открытие ссылки в новой странице

Существует еще один интересный атрибут который вам может пригодится:

Перейти на другую страницу

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

Ссылки изображения

Результат в браузере:

Подчеркивание в ссылках

Перейти на другую страницу
Перейти на другую страницу

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

Ссылки внутри документа

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

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

Моя почта< /a>

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

Дата публикации:2014-04-23

1. Чтобы создать ссылку на другой документ - используя атрибут href
2. Чтобы сделать закладку внутри документа - используя атрибут name

HTML Синтаксис Ссылки

Пример

это отобразится браузером так:

HTML Ссылки - Атрибут Target

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

Пример ниже откроет залинкованный документ в новом окне браузера или на новой вкладке:

HTML Ссылки - Атрибут Name

Атрибут name используется для создания закладки ("якоря" / "анкера") внутри HTML документа.

Замечание:
Грядущий в обозримом будущем стандарт HTML5 предлагает использовать атрибут id вместо атрибута name для указания имени ссылки.
Использование атрибута id фактически работает и в HTML4 во всех современных браузерах.

Закладки не отображаются каким-либо специальным образом. Они не видимы для читателя.

Замечание: Всегда добавляйте замыкающий слэш к ссылкам на поддиретории. Если вы создаете ссылку так: href="http://сайт/html", то генерируется два запроса к серверу, сначала сервер добавляет слэш к адресу, и затем создает новый запрос: href="http://сайт/html/".

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

Совет: Если браузер не находит указанную именованную ссылку, он идет в начало документа. Никаких ошибок не возникает.

Г лавным признаком HTML-документа является наличие в нём гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т. д. Именно возможность вставлять в страницы ссылки на объекты вне неё и сделала Интернет столь популярным и удобным для использования. Поэтому при создании своего сайта всегда помни про «магию» ссылок.

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

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

Термины

§ 1. Ссылка на файл, ссылка на сайт, ссылка на страницу

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

Д абы не растекаться мыслью по древу, покажу всё на примере.

В браузере мы увидим вот, что:

В браузере мы увидим вот, что:

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

§ 2. Создание внешних ссылок

М ежду собой ссылки различаются на внешние и внутренние , а также на текстовые и графические . Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега (сокращение от англ. anchor - якорь). Рассмотрим его поподробнее.

Д ля создания внешней ссылки на сайт, страницу или файл служит атрибут тега - href . В качестве значения этот атрибут принимает URL-адрес сайта, страницы или файла (об этом мы говорили выше). Между тегами и располагается видимая часть ссылки (анкор ссылки), т. е. то, что мы видим на экране браузера. Анкор ссылки может быть как обычным текстом (текстовая ссылка), так и графическим изображением (ссылка-картинка). Ссылка-картинка создаётся вставкой знакомого нам тега между тегами и . В общем, синтаксис создания ссылки выглядит так:

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

http://www.seoded.ru/">Главная страница сайта сайт

В браузере это будет выглядеть так:

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

§ 2.1 Графические ссылки (ссылки-картинки)

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

А браузер покажет:

П о-умолчанию, браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0:

border="0">

Главная страница

§ 3. Внутренние ссылки

Д ля комфортного перемещения по страницам с большим количеством контента используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается «якорь» ссылки. «Якорь» создаётся атрибутом name :

name="имя якоря">текст

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

«Я корь» располагается в тех местах страницы, в которые должен попасть пользователь после щелчка по ссылке.

К ак я уже сказал выше, в атрибуте href внутренней ссылки вместо адреса указывается имя нужного «якоря» с обязательным символом решётки (# ) перед ним. Разберём на примере.

Я создал «якорь» с именем zagolovok и разместил его в коде страницы рядом с заголовком этого урока («Гиперссылки в HTML»). Код «якоря» следующий:

name="zagolovok">

href="#zagolovok">К заголовку

А в браузере так:

Е сли ты заметил, то после перехода по внутренней ссылке к заголовку изменился URL-адрес в адресной строке браузера:

К изначальному адресу:

http://www..html

http://www..html#zagolovok

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

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

Главная страница

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

Д опустим нам нужно сослаться на страницу klienty.html , которая лежит в одной папке с главной страницей сайта. Тогда код относительной ссылки примет вид:

/klienty.html">Клиенты

А теперь предположим, что в одной папке с главной страницей лежит папка zakazy и уже в ней лежит страница klienty.html Тогда код относительной ссылки станет таким:

/zakazy/klienty.html">Клиенты

Т еперь рассмотрим создание гиперссылок относительно исходной страницы . Допустим, у нас есть страница price.html (исходная страница) и с неё нужно сослаться на страницу klienty.html Тут бывают следующие типовые варианты:

1. Страницы price.html и klienty.html находятся в одной папке .

klienty.html">Клиенты




2. в корневой папке сайта , страница price.html лежит в папке zakazy на один уровень выше ).

Код станет таким:

../klienty.html">Клиенты

Две точки показывают, что нужно выйти из текущей папки на уровень выше.




3. Страница klienty.html и папка zakazy находятся в корневой папке сайта , папка mebel лежит в папке zakazy , страница price.html лежит в папке mebel (т. е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше ).

../../klienty.html">Клиенты

Т. е. каждый уровень обозначается двумя точками и слешем «/ ».




4. в корневой папке сайта , страница klienty.html лежит в папке zakazy (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже ).

zakazy/klienty.html">Клиенты

В этом случае точки и слеши не ставятся.




5. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта , папка mebel лежит в папке zakazy , страница klienty.html лежит в папке mebel (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже ).

zakazy/mebel/klienty.html">Клиенты




6. В корневой папке сайта лежат две папки : zakazy и oplata. Страница klienty.html лежит в папке zakazy , исходная страница price.html лежит в папке oplata (т. е. обе страницы лежат в разных папках на уровень ниже от корневой папки сайта).

../zakazy/klienty.html">Клиенты

§ 5. Ссылка на электронную почту

Д ля того, чтобы создать ссылку на электронную почту , нужно вместо URL-адреса в значении атрибута href написать адрес электронной почты с указанием протокола (mailto: ). И тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» адресом электронной почты. В HTML-коде это выглядит так:

mailto:[email protected]">Моя почта

А в браузере так.

Здравствуйте уважаемые читатели блога сайт. Сегодня мы поговорим о том как создавать гиперссылки в html , узнаем как использовать тег «А» и его атрибуты href и target, научимся делать картинку ссылкой.

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

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

Создание текстовых гиперссылок

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

В этом фрагменте html-кода создается абзац, который содержит ссылку. Ссылка указывает на web-страницу page15.html, которая находится в папке catalog, хранящейся в корневой папке сайта www.site.ru.

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

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

Интернет адреса

Полный адрес содержит содержит интернет-адрес 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]". Причем после двоеточия перед почтовым адресом не должно быть пробелов.

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

Так как является строчным элементом html-страницы, то просто вставляем этот тег внутрь тега «А» вместо текста:

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

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

Изображение-карта создается в три этапа:

Примерно так выглядит полный html-код, создающий карту изображения:

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

Якоря

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

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

Якоря создают, как и обычные гиперссылки, с помощью парного тега A, только вместо атрибута href в него помещают атрибут name или id, значение которых задает уникальный идентификатор метки. При этом сам тег «A» обычно не имеет никакого содержимого:

Есть второй способ создания якоря, при котором не надо создавать пустые элементы «А». А можно использовать уже имеющиеся в веб-странице элементы, например . Для этого в нужный элемент добавляем универсальный атрибут id: