Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Добавляем ссылку HTML

Добавляем ссылку на HTML-страницу

Урок №8
Добавляем ссылку в HTML-документ
Добавляем ссылку в HTML-страницу.

В этом уроке, мы рассмотрим способ добавления ссылки на HTML-страницу.

Ссылка — важнейшая часть сайта и всемирной паутины, именно благодаря ссылкам мы можем путешествовать по интернету.

Так как ссылки обычно ссылаются на другие страницы, то нам нужно создать еще одну HTML-страницу и сослаться на неё.

У нас уже есть одна страница Страница о снежном барсе (файл index.html), давайте создадим еще одну HTML-страницу, она будет посвящена полярному волку.

Страница о полярном волке

Создайте на Рабочем столе HTML-файл:
polayrnyi-volk.html

Название страницы <title> </title>, сделайте:
Страница о полярном волке

Внедрите в неё, следующий CSS-код:

<style>
 h1 {
  color: green;
  font-family: Arial;
 }
 p {
  color: blue;
  font-size: 19px;
  width: 60%;
 }
</style>

Заголовок статьи <h1> </h1>:
Полярный волк

Фотография <img>:

Cтатья состоящая из двух абзацев <p> </p>:

Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
обширных пространствах северных регионов, которые пять месяцев в году,
погружены в темноту. Чтобы выжить, волк приспособился есть практически
любой корм, который только попадается ему на пути.

Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
жить при минусовой температуре, месяцами не видеть солнечного света и
неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
леминги, зайцы, овцебыки, олени и птицы.

В итоге вы должны получить следующую страницу.

Подный код HTML-документа, страницы о полярном волке, приведён в конце этого урока.

Добавляем ссылку в HTML-документ

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

Ссылка в HTML-документ добавляется с помощью тегов <a> </a>, между которыми помещают текст ссылки. У тега <a> есть свойство href=" ", значением которого выступает адрес страницы, на которую нужно сослаться (кликнув по ссылке мы перейдем на страницу, на которую ссылается ссылка):

<a href="адрес страницы">Текст</a>

<a>открывающий тег ссылки, который указывает на то что здесь будет ссылка,
href=" "свойство тега <a>, которое указывает на адрес страницы,
адрес страницызначение свойства href=" ", адрес страницы,
Текст — любой текст,
</a>закрывающий тег ссылки.

Добавьте в HTML-документ файла index.html (Страница о снежном барсе), перед закрывающим тегом </body>, следующий код:

<a href="polyarnyi-volk.html">Полярный волк</a>

Так как файлы index.html и polyarnyi-volk.html находятся в одной папке Рабочий стол, то адресом страницы о полярном волке, будет просто имя его файла polyarnyi-volk.html

В качестве Текста можно написать всё что угодно, но обычно пишут текст описывающий страницу на которую ссылается ссылка, в нашем случае это Полярный волк.

В итоге, HTML-документ файла index.html будет выглядеть следующим образом:

<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   h1 {
    color: green;
    font-family: Arial;
   }
   p {
    color: blue;
    font-size: 19px;
    width: 60%;
   }
  </style>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <img src="irbis.jpg">
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
  <a href="polyarnyi-volk.html">Полярный волк</a>
 </body>
</html>

Открыв файл index.html с помощью браузера, вы должны увидеть следующее.

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

Добавьте в HTML-документ файла polyarnyi-volk.html, перед закрывающим тегом </body>, следующий код:

<a href="index.html">Снежный барс</a>

В итоге, HTML-документ файла polyarnyi-volk.html будет выглядеть следующим образом:

<html>
 <head>
  <title>Страница о полярном волке</title>
  <style>
   h1 {
    color: green;
    font-family: Arial;
   }
   p {
    color: blue;
    font-size: 19px;
    width: 60%;
   }
  </style>
 </head>
 <body>
  <h1>Полярный волк</h1>
  <img src="polyarnyi-volk.jpg">
  <p>
   Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
   обширных пространствах северных регионов, которые пять месяцев в году,
   погружены в темноту. Чтобы выжить, волк приспособился есть практически
   любой корм, который только попадается ему на пути.</p>
  <p>
   Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
   жить при минусовой температуре, месяцами не видеть солнечного света и
   неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
   в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
   Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
   леминги, зайцы, овцебыки, олени и птицы.</p>
  <a href="index.html">Снежный барс</a>
 </body>
</html>

Открыв файл polyarnyi-volk.html с помощью браузера, вы должны увидеть следующее.

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

Нажимая по ссылкам расположенным на страницах, вы будете переходить от снежного барса к полярному волку и наоборот.

Читать далее: Создаём сайт из трёх страниц

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: HTML, Статья
Статья создана: 15 Окт 2014
Статья обновлена: 7 Фев 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget