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

Простые ссылки

В языке HTML для создания ссылок используется тег и его атрибуты.

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

- это тег, отвечающий за создание ссылки.

- закрывающий тег.

Между символами > и < расположен текст Ссылка. Его будет видеть открывший страницу пользователь, на него он будет щёлкать, чтобы перейти по заданному в ней адресу.

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

Пусть якорь будет называться begin. Тогда в тег, к содержимому которого будет вести ссылка, нужно добавить атрибут id со значением begin .

Начало страницы

Якорь установлен, и теперь остаётся только добавить ведущую на него ссылку. В нашем случае она будет выглядеть так:

Наверх

Обратите внимание: перед названием якоря стоит решётка - это отличительная черта внутренних ссылок.

Графические ссылки

С появлением HTML 5 тег превратился в контейнер, способный вмещать в себя блочные элементы, так что ссылкой теперь может быть не только текст или картинка, но даже таблица, список или целая страница.

Ссылки на e-mail и Skype

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

Пишите на почту!

Позвонить мне в Skype

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

Да, без таких гиперссылок интернет был бы не таким удобным. Нет, вру. Он был бы вообще не удобным в плане навигации. Вы можете представить интернет без них? Я лично нет.

И сегодня мы с вами узнаем, как вставить гиперссылку в html. Но сначала я хотел бы вас спросить: Знаете ли вы, что такое вообще гиперссылка и чем она отличается от обычной ссылки? Тут на самом деле всё просто: ссылка — это простое написание информации ссылающееся на какой-нибудь документ. При этом нажать вы на этот текст не можете (ничего не будет), но зато вы знаете, где искать информацию.

Пример: О том как выделять волосы в фотошопе вы можете узнать по адресу //сайт/adobe-photoshop/kak-vydelit-volosy/

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

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

Ну да ладно. Хорош теории. Теперь перейдем к практике и посмотрим какие и отвечают за все эти дела.

За гиперссылку отвечает парный тег , но сам по себе он ничего из себя не представляет. Он всегда идет в связке с атрибутом. И в данном случае нам нужно постоянно прописывать этот самый href. В значении атрибута мы ставим саму ссылку на желаемый ресурс. А в самом содержимом мы пишем сам текст, который должен стать кликабельным (работать по нажатии). Посмотрите пример и думаю, что вы всё поймете.

Поисковая система Яндекс

Как вы поняли, в этом примере я написал, что при нажатии на кусок текста «Поисковая система Яндекс», человек направится по адресу, написанному в значении атрибута href .

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

Внутренние переходы

Файл в той же папке

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

Файл в другой папке

1. Откройте в Notepad++ файл pushkin.html
2. Теперь найдите слово фото и заключите его в теги<a href> .
3. А теперь внимание! В значении атрибута прописываем путь относительно редактируемого файла, то есть самого pushkin.html. У вас должно будет получиться так:

Что мы сейчас сделали? А сделали мы следующее: так как путь к фотографии лежит в отдельной папке img, которая находится в одной папке с файлом pushkin.html, то в значении атрибута нам приходится сначала написать название папки, а потом через слеш (/) полное название документа (в нашем случае фотографии).

А вот теперь сохраните и запустите файл pushkin.html в браузере. Вы увидите, что слово «Фото» стало выделено синим цветом и стало кликабельным, а это значит, что нажав на эту ссылку мы попадем на файл fofo.jpg, который находится в папке img.

Ну как? Всё понятно? Вы в случае чего спрашивайте, не стесняйтесь.

Внешние переходы

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

Я буду учиться на мастера социальных проектов .

Здесь мы попадаем на конкретную страницу конкретного сайта.

Открытие в новом окне

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

В этом нам поможет атрибут target со значением «_blank» . Тут сложного ничего нет. Вам просто надо будет вставить это внутри открывающего тега после значения атрибута href . Давайте возьмем тот отрывок из файла lukomorye.html, где мы делали ссылку на страницу pushkin.html, только теперь пропишем этот самый атрибут. Выглядеть это должно так:

Из поэмы Руслан и Людмила (Автор - А.С. Пушкин)

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

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

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

С уважением, Дмитрий Костин.

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

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

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

Здесь все просто, для создания гиперссылки мы используем тег где href=”” это адрес страницы, на которую будет осуществлен переход, в нашем случае эта страница расположена в той же директории. Вы так же можете вставлять сюда адрес типа href=”http://site.ru/page.html“ или же это может быть ссылка на архив который расположен в другой папке на вашем сайте href=”arj/arhiv.zip” или же на любой другой документ, что собственно без разницы. Так же обязательным атрибутом любой гиперссылки является title это описание ссылки, это очень важный элемент в поисковой оптимизации и здесь вы прописываете ключевые слова той страницы или документа, на который ссылаетесь. Текст который расположен между тегом называется анкором, и так же является очень важным.

По сути здесь все просто, я поместил тег изображения между открытием и закрытием тега гиперссылки , но я опять таки не просто вставил два изображения, к одному я присвоил класс img в котором обнулил рамку вокруг изображения, так как когда оно становится гиперссылкой она появляется, но не во всех браузерах, например IE вы увидите, а в Google Chrome нет.

< /a>

Раздел….< /a>

Тег может быть использован двумя способами: