Добавляем ссылку HTML
Добавляем ссылку на 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 с помощью браузера, вы должны увидеть следующее.
Внизу страницы находится ссылка, нажав на которую вы попадёте на страницу о снежном барсе.
Нажимая по ссылкам расположенным на страницах, вы будете переходить от снежного барса к полярному волку и наоборот.
Читать далее: Создаём сайт из трёх страниц