Ссылки на сайте и теги 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. Это тоже очень важная информация, постарайся её полностью поглотить и переварить.

← Теги HTML для вставки изображений

Создание таблиц в HTML →

Дата публикации: 15 мая, 2012