| Уроки HTML |
| Ссылки HTML – внутренние; внешние ссылки; гиперссылки. |
Ссылки – это то, что связывает между собой огромнейшее количество сайтов и множество страниц этих сайтов.
Ссылки могут быть внутренние – со страницы на страницу одного того же сайта; И внешние – это ссылки ведущие на другие интернет ресурсы.
Ссылкой может быть слово, фраза (текст), картинка.
Ссылка определяется тегами "<a> </a>" .
То что находится между тегами "<a> </a>" называют "анкором" (anchor - якорь).
Ссылке можно придать любой цвет и некоторое свойства (подчёркивается или неподчёркивается, меняет или не меняет цвет при наведении мышки, всплывающий комментарий ). Всё это подробно рассматривается в урока CSS.
И так, для начала создайте html-страницу назовите её "page0(.html)", а главную страницу, где практикуетесь изучая уроки, назовите "index(.html)" .
Вот пример простой ссылки :
В файле "index.html"
<html>
<head>
<title>Сcылка HTML </title>
</head>
<body>
<p><a href="page0.html">Другая</a> страница.</p>
</body>
</html>
В файле "page0.html"
<html>
<head>
<title>Сcылка HTML </title>
</head>
<body>
<p>Перейти на <a href="index.html">Главную страницу</a>.</p>
</body>
</html>
Как вы заметили - переход на другую страницу происходит в той же вкладке браузера.
Для того что бы при переходе по ссылке открылась новая вкладка нужно в первом теге "<a>"
Помимо самой ссылки прописать target="_blank"
Например, если вы ссылаетесь на другой сайт пишите так:
<p><a href="http://olocoder.ru" target="_blank"> Уроки HTML</a></p>
Если вам нужно, что бы при наведении курсора мышки на ссылку появлялось маленькое окошко с комментарием, то внутри первого тега "<a>" нужно прописать title="текст коментария"
Пример:
<p>Переходите <a href="page0.html" title="другая страница"> сюда</a></p>
Теперь сделаем ссылку из картинки. В коде ссылки, вместо названия страницы будет стоять знак "#" – этот знак означает ссылку на туже страницу, на которой вы находитесь.
Пример картинки являющейся ссылкой на верх страницы.
<p><a href="#"><img src="images/htmlhrefimg.png" title="ссылка на верх" /></a></p>
| ◄ Предыдущий урок | Содержание | Следующий урок ► |
