Войти
Регистрация

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

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

Приветствую Вас, начинающие веб-мастера. На связи Самвел Погосов.

В этой теме затронем важный момент, без которого нет ни одного сайта, хотя может и есть, но что это за сайты тогда.

Поговорим про создание ссылок в HTML, без которых создать свой сайт, мягко говоря, практически не возможно. Материал изучается легко и освоить его не составит труда.

Ниже мы с Вами разберем ссылку и то, из чего она состоит:

<a href="index" target="_blank" title="Ссылка на главную" />Текст ссылки</a>

Первое, что мы видим, это тег <a>, в HTML он означает начало ссылки и у него есть закрывающий тег </a>, т.е. тег у нас парный.

Внутри него все те же атрибуты.

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

<a href="http://editcode.ru/index" target="_blank" title="Ссылка на главную" />Текст ссылки</a>

Здесь мы пишем полный, абсолютный путь.

target обозначает как будет открываться ссылка и принимает разные значения:

  • _blank - означает, что ссылка откроется в новом окне.
  • _self - означает, что ссылка откроется в текущем окне, что происходит и без этого атрибута.
  • _parent и _top - эти 2 значения работают с фреймами. Первый открывает вкладку во фрэйме, второй открывает в окне браузера, но эти значения используются очень редко.

title содержит описание ссылки и всплывает при наведении мышкой на ссылку. Вот Вам пример, просто наведите мышку на ссылку: Описание ссылки при наведении

Между открывающим тегом <a> и закрывающим </a> обычно содержится название ссылки, но не всегда так. Иногда можно вставить картинку в описание, а также любой элемент сайта. Можно даже шапку сайта превратить в ссылку.

Я Вам покажу, как сделать картинку в виде ссылки. Для этого расскажу как добавить просто картинку на сайт.

<img src="img-link.png" alt="картинка" height="72" width="100" />

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

Здесь также мы видим тег <img>, означающий добавление картинки, но в отличие от тега <a> он не парный и не имеет закрывающего тега, он закрывает сам себя с помощью / в конце.

src устанавливает путь к картинке, который как и у ссылки может быть как относительным, так и абсолютным.

alt содержит описание картинки, которое будет видно даже когда картинка каким-то образом не отобразится на сайте. Это атрибут нужно указывать всегда. Даже если описания нет, просто оставьте его пустым.

height и width устанавливают высоту и ширину картинки. Если их не указывать, то картинка будет иметь ее исходный размер. Все же размеры я рекомендую устанавливать в файле стилей, но это уже другая тема, о которой Вы узнаете позже.

А теперь просто между тегами <a> и </a>, там где текст ссылки, вставляем картинку:

<a href="http://editcode.ru/index" target="_blank" title="Ссылка на главную страницу сайта" />
  <img src="img-link.png" alt="картинка" height="72" width="100" />
</a>

В итоге у нас получилась вот такая ссылка:

картинка

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?