Учимся делать ссылки в HTML
Всем привет. Сейчас будет интересно, ведь мы будем говорить о ссылках. Ссылки - это то, без чего нельзя представить интернет, ведь именно благодаря куче ссылок мы так долго в нем залипаем.
Для добавления ссылок используется парный тег <a> с атрибутом href, в котором указывается адрес, по которому нужно перейти. Сам текст ссылки указывается между открывающим и закрывающим тегами <a>. Пример:
<a href="https://php.zone/kurs-html-dlya-nachinayushih">Онлайн курс по HTML</a>В браузере это выглядит так:
Создадим в папке с нашей страничкой ещё один файл с именем 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>Результат в браузере:
Ура! У нас получился простейший сайт, состоящий из двух страничек, которые ссылаются друг на друга. А если не получился - пишите в комментариях, вместе разберёмся.
Комментарии