«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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

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

Ссылка представляет собой фрагмент html-кода. Ссылку создают при помощи тега <a>: указывается элемент, который будет являтся ссылкой: текст, кнопка, изображение и адрес объекта, к которому будет осуществлен переход по ней.

Чтобы перейти по ссылке необходимо навести на нее курсор (при этом указатель курсора изменится на руку) и нажать на левую кнопку мыши - "Кликнуть по ссылке".



Текстовые ссылки

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

С помощью обязательного атрибута href тега <a> задается адрес страницы на которую нужно перейти. В качестве значения атрибута href выступает абсолютный или относительный путь к файлу (подробнее здесь...).

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

Фрагмент кода
Относительная <a href = "view_tag.php?id=3" target="_blank"> Ссылка на тег a </a>
Результат

Относительная Ссылка на тег a

Изображение-ссылка

В качестве ссылок часто используют изображения.

Для создания ссылки-изображения внутри тега <a> располагают тег <img>, предназначенный для вставки изображения на страницу.

Фрагмент кода
Изображение-ссылка <a href = "view_tag.php?id=27" title="Ссылка на тег img" target="_blank"> <img src="img/peng_64.gif"> </a>
Результат

Изображение-ссылка

Пингвин в примере - это изображение-ссылка.

С помощью атрибута href тега <a> указываем адрес страницы на которую нужно перейти (Абсолютный или относительный путь к файлу (подробнее здесь...). При помощи атрибута title тега <a> добавлена всплывающая подсказка Ссылка на тег img, которую Вы увидите, если наведете курсор на изображение.

Вокруг изображения-ссылки по умолчанию рисуется рамка (отображается не во всех браузерах), цвет которой совпадает с цветом текстовых ссылок на странице. Избавиться от нее можно с помощью атрибута border тега <img>, присвоив ему значение 0 пикселей.

Цвет ссылок

По умолчанию все ссылки на странице имеют синий цвет, посещенные ссылки имеют фиолетовый цвет, и активные ссылки (ссылка является активной при нажатии на нее кнопкой мыши) - красный.

Цвет ссылок можно менять, используя атрибуты link, vlink и alink тега <body> (при это изменится цвет всех ссылок на странице):

- link - задает цвет не посещенных ссылок
- vlink (visited link) - задает цвет посещенных ссылок
- alink (active link) - задает цвет активных ссылок

Можно менять цвет отдельных ссылок с помощью тега <font> (Цвет можно задать двумя способами (подробнее здесь...)).

Фрагмент кода
<body link="red" alink="green" vlink="yellow">
Результат

Создайте простой html-документ, для которого укажите свои цвета для ссылок!

Ссылки внутри страницы

Ссылки внутри документа используют для удобной навигации по странице.

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

Для создания такой навигации, сначала необходимо поставить метку (метки) в нужном месте страницы: устанавливается метка при помощью атрибута name тега <a> или с помощью элемента id; далее метке присваивается какое-либо имя (любое - подходящее/удобное для Вас).

Затем, с помощью атрибута href тега <a>, в любом месте страницы, делаем ссылку на метку, указав ее имя с символом #.

Фрагмент кода
<a name="up"> </a> или <a id="up"> </a>
<p> <a href="#up"> Тег a </a> - ссылка на ссылку!</p>
Результат

Тег a - ссылка на ссылку!

Пояснение к примеру:

В начале этой страницы я установил метку с именем "up". Текст между тегами <a name="up"> и </a> не нужен, так как мы всего лишь указали место, в которое будет осуществлен переход по ссылке.

Затем создаем ссылку, для которой в качестве значения атрибута href указываем имя метки с символом #.

Теперь, кликнув по созданной ссылке, мы переходим к установленной метке. Все очень просто!

Нюанс: элемент id можно использовать внутри любого тега, в то время как name является атрибутом тега <a> и только!

В XHTML и HTML5 вместо атрибута name для установки метки требуется указывать атрибут id.

Ссылка на метку на другой странице

Можно сделать сылку на метку, расположенную на другой странице сайта (текущего или какого-либо другого).

Для этого, при создании ссылки, в качестве значения атрибута href указываем адрес страницы на которую нужно перейти (Абсолютный или относительный путь к файлу (подробнее здесь...), сразу после которого указываем имя метки с символом #.

Фрагмент кода
<p> <a href = "tag.php?id=3#name"> Ссылка </a> - на атрибут Name тега а на другой странице!</p>
Результат

Ссылка - на атрибут name тега а на другой странице!

Обязательным условием работоспособности подобных межстраничных ссылок, является использование атрибута name тега <a> при установке метки: name="имя метки"

В XHTML и HTML5 вместо атрибута name для установки метки требуется указывать атрибут id.

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

Ссылку на адрес электронной почты используют для отправки сообщения непосредственно с веб-страницы.

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

Необходимый адрес электронной почты следует указать в качестве значения атрибута href тега <a> после элемента mailto. Этот адрес будет автоматически указан в поле Кому: окна отправки сообщения Вашей почтовой программы.

Фрагмент кода
<p> <a href = "mailto:MyMail@mail.ru"> Отправить сообщение по электронной почте. </a> </p>
Результат

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

HTML по шагам

Все теги HTML
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта