Comment - Créer un livre HTML
Apprenez à créer un livre HTML qui fonctionnera sur tous les appareils, PC, ordinateur portable, tablette et téléphone.
Tout d'abord, créez une page HTML de base
HTML est le langage de balisage standard pour la création de sites Web et CSS est le langage qui décrit le style d'un document HTML.
Nous combinerons HTML et CSS pour créer un livre HTML de base.
Commencez d'abord avec un squelette HTML :
Exemple
<!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>
Exemple expliqué
<!DOCTYPE html>
Le type de document est HTML<html> </html>
Le début et la fin du document<head> </head>
Le début et la fin des informations sur le document<title>
Le titre du livre ("Mon livre")<meta charset="UTF-8">
Le jeu de caractères utilisé (UTF-8)<body> </body>
Le début et la fin du contenu visible<h1> </h1>
Le début et la fin d'un titre<p> </p>
Le début et la fin d'un paragraphe
Le code expliqué ci-dessus sont des balises HTML.
Les balises HTML sont utilisées pour définir le contenu d'un document HTML.
Les balises commencent par un <
(signe inférieur à) et se terminent par un
>
(signe supérieur à).
De cette façon <p>
et </p>
sont utilisés pour marquer le début et la fin d'un paragraphe.
Remarque : Si vous souhaitez étudier le HTML en détail, veuillez lire notre didacticiel HTML .
Pour être tout à fait correct, un attribut de langue doit être ajouté à la <html>
balise pour définir la langue utilisée dans le livre :
<html lang="en">
L'ajout des méta-informations suivantes permettra à votre livre de s'afficher correctement sur tous les appareils, PC, ordinateur portable, tablette et téléphone :
<meta name="viewport" content="width=device-width, initial-scale=1">
Exemple
<!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>
Créer une table des matières
À l'intérieur des <body> </body>
éléments, ajoutez une table des matières :
<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>
Ajouter un peu de style
Ajoutez une feuille de style à votre livre :
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Remarque : Si vous souhaitez étudier le CSS en détail, veuillez lire Notre didacticiel CSS .
Créer une page HTML pour le chapitre 1
Fichier : chapitre_philosophie1.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>
Ajouter un lien vers le chapitre 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>
Dans l'exemple ci-dessus, nous avons nommé le premier chapitre du livre :
" philosophie_chapitre1.htm ".
Le nom à utiliser dépend de vous. Peut-être devrait-il s'appeler "Métaphysique".
Quoi qu'il en soit, continuez comme ci-dessus et créez les autres chapitres :
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Ajouter un lien à chaque chapitre
<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>