Как сделать HTML-книгу
Узнайте, как создать HTML-книгу, которая будет работать на всех устройствах: ПК, ноутбуке, планшете и телефоне.
Сначала создайте простую HTML-страницу.
HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа.
Мы объединим HTML и CSS, чтобы создать простую HTML-книгу.
Сначала начните со скелета HTML:
Пример
<!DOCTYPE html>
<html>
<head>
<title>My Book</title>
<meta charset="UTF-8">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
Объяснение примера
<!DOCTYPE html>Тип документа HTML.<html> </html>Начало и конец документа<head> </head>Начало и конец информации о документе<title>Название книги («Моя книга»)<meta charset="UTF-8">Используемый набор символов (UTF-8)<body> </body>Начало и конец видимого содержимого<h1> </h1>Начало и конец заголовка<p> </p>Начало и конец абзаца
Описанный выше код представляет собой теги HTML.
Теги HTML используются для определения содержимого HTML-документа.
Теги начинаются со <знака «меньше» и заканчиваются
>знаком «больше».
Таким образом <p>и </p>используются для разметки начала и конца абзаца.
Примечание. Если вы хотите подробно изучить HTML, прочитайте наш учебник по HTML .
Чтобы быть полностью правильным, в тег должен быть добавлен языковой атрибут <html>, определяющий язык, используемый в книге:
<html lang="en">
Добавление следующей метаинформации заставит вашу книгу правильно отображаться на всех устройствах, ПК, ноутбуке, планшете и телефоне:
<meta name="viewport" content="width=device-width, initial-scale=1">
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
Создайте оглавление
Внутри <body> </body>элементов добавьте оглавление:
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>1. Metaphysics</p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
Добавьте немного стиля
Добавьте таблицу стилей в свою книгу:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Примечание. Если вы хотите подробно изучить CSS, прочитайте наш учебник по CSS .
Создайте HTML-страницу для главы 1.
Файл: philosophy_chapter1.htm
<body class="w3-content">
<div class="w3-container">
<h1>1. Metaphysics</h1>
<h3>The nature of reality.</h3>
<p>Metaphysics is the part of philosophy that studies the nature of reality.</p>
<p>When we look around, we can see:</p>
<ul>
<li>Nature</li>
<li>Animals</li>
<li>People</li>
<li>Houses</li>
<li>Cars</li>
<li>and much more</li>
</ul>
<p>Is this Virtual Reality real?</p>
<p>In Metaphysics, the questions is:</p>
<ul>
<li>What is real?</li>
<li>Is what we see real?</li>
<li>Is there more than we see?</li>
<li>Is there more than we sence?</li>
<li>Is there something else?</li>
<li>Is there something more?</li>
<li>Is there another dimension?</li>
</ul>
</div>
</body>
Добавьте ссылку на главу 1
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p><a href="philosophy_chapter1.htm">1. Metaphysics</a></p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
В приведенном выше примере мы назвали первую главу книги:
" философия_глава1.htm ".
Имя, которое вы будете использовать, зависит от вас. Может быть, его следовало бы назвать «Метафизика».
В любом случае, продолжайте, как указано выше, и создайте другие главы:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Добавьте ссылку на каждую главу
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>
<a href="philosophy_chapter1.htm">1. Metaphysics</a>
</p>
<p>
<a href="philosophy_chapter2.htm">2. Epistemology</a>
</p>
<p>
<a href="philosophy_chapter3.htm">3. Logics</a>
</p>
<p>
<a href="philosophy_chapter5.htm">4. Ethics</a>
</p>
<p>
<a href="philosophy_chapter4.htm">5. Aesthetics</a>
</p>
</body>