HTML ссылки

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

Урок 13. HTML ссылки — гиперссылки, ссылка на сайт

HTML теги, определяющие HTML ссылки

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


Навигация по странице

  1. HTML ссылка на другую страницу
  2. HTML ссылка на сайт
  3. HTML ссылки внутри документа
  4. HTML изображение-ссылка

HTML ссылка на другую страницу

Пример:

  1. Используя полученные знания, сделайте в Блокноте наброски будущей страницы ⇒ сохраните ее под произвольным именем, например, как page2.html в папке D\My_first_site.
  2. В другом документе, опять же в Блокноте, пропишите:
...
<title>HTML ссылка на другую страницу</title>
</head>
<body>
<p><a href="page2.html">Переходим</a> на вторую страницу</p>
</body>
</html>
  1. Сохраните его как index.html. В итоге, папка D\My_first_site содержит файлы: index.html и page2.html.
  2. Откройте в браузере файл index.html ⇒ нажмите на ссылку.

HTML ссылка на сайт

Пример:

...
<title>HTML ссылка на сайт</title>
</head>
<body>
<p>Посетите <a href="http://www.ab-w.net/">ab-w.net</a></p>

Атрибуты и значения

<a href="page2.html" target="_blank"> </a>
<a href="page2.html" target="_blank" title="комментарий"> </a>

HTML ссылка может быть окрашена в любой цвет, что подробно рассматривается в курсе по CSS.

HTML ссылки внутри документа

Буквы-ссылки в главе HTML теги осуществляют переход в пределах одной web-страницы.

Как это реализовано:

Имеем 2-е буквы D. Первая выступает в роле HTML ссылки, а вторая – в роли элемента на который ссылаемся. Второй присваиваем идентификатор со значением:

<h2 id="d">D</h2>

Код ссылки на букву с идентификатором:

<a href="#d">D</a>

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

Следующее изображение является ссылкой наверх страницы:

HTML ssylki na sajt

Код:

<title>HTML изображение в роле ссылки</title>
</head>
<body>
<p>
<a href="#"><img src="../images/strelkavverx.png" alt="" border="0" /></a>
</p>

border="0" – отменяет границу у изображения-ссылки.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 12. HTML верстка   HTML гиперссылка   Урок 14. Изображение-карта

    Сохранить в сервисы и закладки