Hoe - Een HTML-boek maken
Leer hoe u een HTML-boek maakt dat op alle apparaten, pc, laptop, tablet en telefoon werkt.
Maak eerst een eenvoudige HTML-pagina
HTML is de standaard opmaaktaal voor het maken van websites en CSS is de taal die de stijl van een HTML-document beschrijft.
We zullen HTML en CSS combineren om een eenvoudig HTML-boek te maken.
Begin eerst met een HTML-skelet:
Voorbeeld
<!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>
Voorbeeld uitgelegd
<!DOCTYPE html>Het documenttype is HTML<html> </html>Het begin en het einde van het document<head> </head>Het begin en het einde van documentinformatie<title>De titel van het boek ("Mijn boek")<meta charset="UTF-8">De gebruikte tekenset (UTF-8)<body> </body>Het begin en het einde van de zichtbare inhoud<h1> </h1>Het begin en het einde van een kop<p> </p>Het begin en het einde van een alinea
De hierboven uitgelegde code zijn HTML-tags.
HTML-tags worden gebruikt om de inhoud van een HTML-document te definiëren.
De tags beginnen met een <(kleiner-dan-teken) en eindigen met een
>(groter-dan-teken).
Op deze manier <p>en </p>worden gebruikt om het begin en het einde van een alinea te markeren.
Opmerking: als je HTML in detail wilt bestuderen, lees dan onze HTML-tutorial .
Om volledig correct te zijn, moet er een taalattribuut aan de <html>tag worden toegevoegd om de taal te definiëren die in het boek wordt gebruikt:
<html lang="en">
Door de volgende meta-informatie toe te voegen, wordt uw boek correct weergegeven op alle apparaten, pc, laptop, tablet en telefoon:
<meta name="viewport" content="width=device-width, initial-scale=1">
Voorbeeld
<!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>
Een inhoudsopgave maken
Voeg binnen de <body> </body>elementen een inhoudsopgave toe:
<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>
Voeg een stijl toe
Voeg een stylesheet toe aan je boek:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Opmerking: als je CSS in detail wilt bestuderen, lees dan onze CSS-zelfstudie .
Maak een HTML-pagina voor Hoofdstuk 1
Bestand: filosofie_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>
Voeg een link toe aan hoofdstuk 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>
In het bovenstaande voorbeeld noemden we het eerste hoofdstuk van het boek:
" philosophie_chapter1.htm ".
De te gebruiken naam is aan jou. Misschien zou het "Metafysica" moeten heten.
Ga in ieder geval verder zoals hierboven en maak de andere hoofdstukken aan:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Voeg een link toe aan elk hoofdstuk
<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>