Ссылки в html

Ссылки в html

В этой статье мы поговорим о таком важном элементе любого сайта, как ссылки html страницы. С помощью ссылок создается навигация сайта, они позволяют нам обращаться к тому или иному сайту, или его отдельным страницам. По сути, существование интернета без ссылок невозможно. Если провести аналогию, то можно сказать, что ссылка в интернете, это как адрес в реальности. Что ж, давайте приступим к более подробному изучению этого вопроса.

Как вставить ссылку в html страницу

Чтобы создать ссылку, необходимо воспользоваться тегом <a></a>, у данного тега есть обязательный атрибут href, который указывает, куда ведет ссылка.

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

Внутри ссылки необходимо указать якорь (текст ссылки), по щелчку на который будет открываться заданный адрес. Давайте попробуем создать самую простую ссылку на главную страницу этого блога, код будет выглядеть так:

 

<a href=»http://jao-s.ru/»>jao-s.ru — Ваш главный источник технических новостей, советов и практических руководств.</a>

 

А сама ссылка в действии выглядит вот так:

 jao-s.ru — Ваш главный источник технических новостей, советов и практических руководств.

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

 

Какие бывают виды ссылок

  1. Самые простые и часто используемые – это текстовые ссылки, они имеет вид:

<a href=\»http://site.ru/zarabotok-v-internete/osnovnye-sposoby-zarabotka-v-internete.html\»>Заработок в интернете</a>

  1. Графические ссылки, это изображение, по щелчку на которое, происходит переход по заданному адресу. Вместо текста, в этом случае необходимо указать картинку:

 

<a href=\»http://site.ru/zarabotok-v-internete/kak-zarabotat-svoi-pervye-dengi-v-internete.html\»><img src=\»images/money.png\»></a>

 

Вот пример графической ссылки:

  1. Служебные – это такие ссылки, которые выполняют какую-либо функцию, например, отправка почты. Для этого, необходимо в атрибуте href указать mailto: (отправить кому) и e-mail получателя:

<a href=\»mailto: name@yandex.ru\»>Отправить письмо автору</a>

  1. Ссылка на скачивание файла (картинки, программы, видео, аудио и др.). Это обычная текстовая ссылка, в атрибуте href которой, необходимо указать путь к файлу.

<a href=\»files/myMusik.mp3\»>Скачать музыку</a>

 

Помимо этого, ссылки еще бывают:

-Внешние – ведут на любые сайты, кроме вашего собственного;

-Внутренние – ведут на определенную часть страницы (якоря) или на какую-либо страницу вашего сайта.

 

Последние нуждаются в более подробном обзоре. Итак, для перемещения по сайту, используются так называемые «якоря». Для создания «якоря» необходимо в ссылке указать атрибут name с произвольным текстом латинскими буквами, например:

<a name=\»top\»></a>

или

<div id=»yak1″></div>

Далее в любом месте страницы, можно обратиться к заданному нами якорю, указав на него ссылку, а в качестве пути в атрибуте href, указываем через # наш якорь, например:

<a name=\»#top\»>Наверх</a>

<a href=»#yak1″> Наверх</a>

 

По щелчку, произойдет переход к нашему якорю:

Наверх

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

 

Атрибуты ссылок в html

Атрибуты тега <a></a>:

-target – задает способ открытия ссылки, и имеет следующие значения:

-_blank – открыть в новом окне;

-_parent – открыть в родительском окне;

-_self – открыть в том же окне.

-title – текст, который появляется при наведении на ссылку;

-rel – описание, ссылки к документу, на котором она находится. У этого атрибута есть одно полезное значение:

-nofollow – запрещает индексацию (ссылки, помеченные этим атрибутом, не оказывают влияние на ТИЦ и PR).

 

Вот такой короткий, но познавательный урок, про то, как создавать ссылки в html. Я думаю, эти знания вам пригодятся, и вы воспользуетесь ими для создания своего собственного сайта. На этом я с вами прощаюсь, до встречи в следующих статьях на страницах блога.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.