Учимся делать ссылки в HTML

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

Для добавления ссылок используется парный тег <a> с атрибутом href, в котором указывается адрес, по которому нужно перейти. Сам текст ссылки указывается между открывающим и закрывающим тегами <a>. Пример:

<a href="https://php.zone/kurs-html-dlya-nachinayushih">Онлайн курс по HTML</a>

В браузере это выглядит так:

Онлайн курс по HTML

Создадим в папке с нашей страничкой ещё один файл с именем book1.html и наполним её информацией о некоторой книге:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Совершенный код - Книги для программистов</title>
    <meta name="keywords" content="совершенный код, Стив Макконел, паттерны, книги, программирование, литература, обучение, разработка">
    <meta name="description" content="Книга \"совершенный код\" Стива Макконела  - лучшая книга для программистов по результатам опроса пользователей StackOverflow">
</head>
<body>
<a href="index.html">Вернуться к списку книг</a>
<h1>Совершенный код</h1>
<h2>Описание</h2>
<h3>От издателя</h3>
<p>Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию.
Сейчас эта книга полностью обновлена с учетом современных тенденций и технологий и дополнена сотнями новых примеров, иллюстрирующих искусство и науку программирования. Опираясь на академические исследования, с одной стороны, и практический опыт коммерческих разработок ПО - с другой, автор синтезировал из самых эффективных методик и наиболее эффективных принципов ясное прагматичное руководство. Каков бы ни был ваш профессиональный уровень, с какими бы средствами разработками вы ни работали, какова бы ни была сложность вашего проекта, в этой книге вы найдете нужную информацию, она заставит вас размышлять и поможет создать совершенный код.
Книга состоит из 35 глав, предметного указателя и библиографии.
</p>
</body>
</html>

Посмотрим на результат в браузере:
Абсолютные ссылки

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Книги для программистов</title>
    <meta name="keywords" content="книги, программирование, литература, обучение, разработка">
    <meta name="description" content="На этой странице Вы сможете познакомиться с лучшими книгами по программированию.">
</head>
<body>
<h1>Книги для программистов</h1>
<h2>Совершенный код</h2>
<p>
    Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию.<br> 
    Сейчас эта книга полностью обновлена с учетом современных тенденций и технологий<br>
    и дополнена <strong>сотнями новых примеров</strong>, иллюстрирующих искусство и науку программирования.
    <br>
    Книга подойдёт для:
</p>
<ul>
    <li>Начинающих</li>
    <li>Середнячков</li>
    <li>Опытных</li>
</ul>
<a href="book1.html">[подробнее]</a>
<hr>
<h2>Колобок</h2>
<p>
    Небольшая сказка про мучное изделие с большими амбициями
    <br>
    Преимущества этой книги:
</p>
<ol>
    <li>она читается быстрее первой</li>
    <li>она дешевле первой</li>
</ol>
</body>
</html>

Результат в браузере:

Ура! У нас получился простейший сайт, состоящий из двух страничек, которые ссылаются друг на друга. А если не получился - пишите в комментариях, вместе разберёмся.

loader
Домашнее задание
  • добавьте ещё одну страничку на свой сайт
  • проставьте ссылки на страничках для переключения между ними
Комментарии
Этот урок набрал набрал достаточно большое количество комментариев и дальнейшее его комментирование отключено. Если вы хотели убедиться в правильности выполнения ДЗ или у вас возник вопрос по уроку, посмотрите ранее добавленные комментарии, кликнув по кнопке ниже. Скорее всего вы найдете там то, что искали. Если это не помогло - задайте вопрос в чате в телеграме - https://t.me/php_zone
Логические задачи с собеседований