Можно-ли представить себе сайт без ссылок? Конечно нет! Ссылки HTML позволяют быстро перейти на другие страницы сайта, на другие ресурсы и в нужное место на самой странице.
Для создания ссылок используется тег <a></a>.
Обязательным для этого тега является атрибут "href", который определяет адрес или место ссылки HTML.
Ссылка на другую страницу сайта.
<a href= "Ссылаемый документ.html">Ссылка</a>
Чтобы понять как это работает, создадим два HTML-документа: index.html и about.html.
index.html
<html>
<head>
<meta charset= "utf-8">
<title>Ссылки HTML</title>
</head>
<body>
<h1>Главная</h1>
<a href= "about.html">Ссылка на страницу "О нас"</a>
</body>
</html>
about.html
<html>
<head>
<meta charset ="utf-8">
<title>Ссылки HTML</title>
</head>
<body>
<h1>О нас</h1>
<a href= "index.html">Ссылка на главную</a>
</body>
</html>
А теперь откроем index.html в браузере и увидим следующую картину:
Если мы нажмём на ссылку, то перейдём на страницу «О нас».
Если мы нажмём на ссылку «ссылка на главную», то перейдём обратно на главную страницу.
Ссылка на другой ресурс.
<html>
<head>
<meta charset= "utf-8">
<title>Ссылки HTML</title>
</head>
<body>
<a href= "https://fly-webmaster.ru">Ссылка на другой сайт</a>
</body>
</html>
В этом случае, перейдя по ссылке мы перейдём на другой сайт.
Если мы хотим, чтобы ссылка открывалась в другом окне, то используем атрибут target со значением "_blank".
<html>
<head>
<meta charset= "utf-8">
<title>Ссылки HTML</title>
</head>
<body>
<a href= "https://fly-webmaster.ru" target= "_blank">Ссылка на другой сайт, который откроется в новом окне</a>
</body>
</html>
Ссылка –якорь.
В этом случае ссылка является закладкой в определённом месте исходной страницы. Для этого применяется атрибут "name" тега "a" : <a name= "top"></a>.
А в ссылке на эту закладку в значении "href" указывается имя "name" закладки с символом решетки : <a href= "#top">Наверх</a>.
<html>
<head>
<meta charset= "utf-8">
<title>Ссылки HTML</title>
</head>
<body>
<h1><a name= "top"></a>Список</h1>
<ul>
<li>пункт1</li>
<li>пункт2</li>
<li>пункт3</li>
<li>пункт4</li>
<li>пункт5</li>
<li>пункт6</li>
<li>пункт7</li>
<li>пункт8</li>
<li>пункт9</li>
</ul>
<ul>
<li>пункт1</li>
<li>пункт2</li>
<li>пункт3</li>
<li>пункт4</li>
<li>пункт5</li>
<li>пункт6</li>
<li>пункт7</li>
<li>пункт8</li>
<li>пункт9</li>
</ul>
<ul>
<li>пункт1</li>
<li>пункт2</li>
<li>пункт3</li>
<li>пункт4</li>
<li>пункт5</li>
<li>пункт6</li>
<li>пункт7</li>
<li>пункт8</li>
<li>пункт9</li>
</ul>
<p><a href= "#top">Наверх</a></p>
</body>
</html>
В данном случае, если мы нажмём на ссылку «наверх», то перейдём в начало страницы.
С помощью "якорей" можно сделать очень многое, об этом вы узнаете в следующих статьях:
Верстаем одностраничный сайт
Сайт - одностраничник
Простая галерея для сайта