(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(95991560, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); about.html                           Ссылки HTML  "/> (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(95991560, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); about.html                           Ссылки HTML  "/>
Веб-мастерская Ларисы ВоронинойCсылки HTML. Создание ссылок в HTML.
WEB-мастерская Ларисы Ворониной logo
Меню

Получайте новые статьи по почте

Ваш email:

Категории

Создание ссылок в 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= "">Ссылка на другой сайт</a>
     </body>
</html>

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

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

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <title>Ссылки HTML</title>
     </head>
     <body>
          <a href= "" 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>

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

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

logo

Web-мастерская Ларисы Ворониной
Все права зашишены.
Email: [email protected]

Категории

Страницы