Я считаю, что ни одна 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-странице в браузере это будет такой вид:
Цвет текста ссылок задается атрибутами в теге 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>
Получим вот такую ссылку:
Как ты заметил, переход на другую страницу осуществляется в этом же окне. Если ты хочешь чтобы ссылка открывалась в другом окне или родительском (по умолчанию стоит в этом же окне), можно применять слудующие атрибут target тега A:
Пример атрибута 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 → |
Я этого хочу. Значит, это будет.
© Генри Форд
Супер-предложение!
Купить виртуальный хостинг для сайта и домен с бесплатным тестовым периодов 1 месяц!
Подпишитесь на интересные обновления моего блога, чтобы быть в тренде последних тенденций разработки и продвижения сайтов: