Веб-мастерская Ларисы ВоронинойCсылки HTML. Создание ссылок в HTML.
WEB-мастерская Ларисы Ворониной logo

Создание ссылок в HTML. Окт 26 2016


Можно-ли представить себе сайт без ссылок? Конечно нет! Ссылки HTML позволяют быстро перейти на другие страницы сайта, на другие ресурсы и в нужное место на самой странице.

Для создания ссылок используется тег <a></a>.

Обязательным для этого тега является атрибут "href", который определяет адрес или место ссылки HTML.

Ссылка на другую страницу сайта.

<a href= "Ссылаемый документ.html">Ссылка</a>

Чтобы понять как это работает, создадим два HTML-документа: index.html и about.html.

index.html

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <title>Ссылки HTML</title>
     </head>
     <body>
          <h1>Главная</h1>
          <a href= "about.html">Ссылка на страницу "О нас"</a>
     </body>
</html>

about.html

<!DOCTYPE html>
<html>
     <head>
          <meta charset ="utf-8">
          <title>Ссылки HTML</title>
     </head>
     <body>
          <h1>О нас</h1>
          <a href= "index.html">Ссылка на главную</a>
     </body>
</html>

А теперь откроем index.html в браузере и увидим следующую картину:
ssylki-html

Если мы нажмём на ссылку, то перейдём на страницу «О нас».
ssylki-html

Если мы нажмём на ссылку «ссылка на главную», то перейдём обратно на главную страницу.

Ссылка на другой ресурс.

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <title>Ссылки HTML</title>
     </head>
     <body>
          <a href= "http://www.fly-webmaster.ru">Ссылка на другой сайт</a>
     </body>
</html>

В этом случае, перейдя по ссылке мы перейдём на другой сайт.

Если мы хотим, чтобы ссылка открывалась в другом окне, то используем атрибут target со значением  "_blank".

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <title>Ссылки HTML</title>
     </head>
     <body>
          <a href= "http://www.fly-webmaster.ru" target= "_blank">Ссылка на другой сайт, который откроется в     новом окне</a>
     </body>
</html>

Ссылка –якорь.

В этом случае ссылка является закладкой в определённом месте исходной страницы. Для этого применяется атрибут "name" тега "a" : <a name= "top"></a>.

А в ссылке на эту закладку в значении "href" указывается имя "name" закладки с символом решетки : <a href= "#top">Наверх</a>.

<!DOCTYPE html>
<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>

В данном случае, если мы нажмём на ссылку «наверх», то перейдём в начало страницы.

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


Рейтинг@Mail.ru