Gewusst wie: Erstellen Sie ein HTML-Buch
Erfahren Sie, wie Sie ein HTML-Buch erstellen, das auf allen Geräten, PCs, Laptops, Tablets und Telefonen funktioniert.
Erstellen Sie zunächst eine einfache HTML-Seite
HTML ist die Standardauszeichnungssprache zum Erstellen von Websites und CSS ist die Sprache, die den Stil eines HTML-Dokuments beschreibt.
Wir werden HTML und CSS kombinieren, um ein einfaches HTML-Buch zu erstellen.
Beginnen Sie zunächst mit einem HTML-Skelett:
Beispiel
<!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>
Beispiel erklärt
<!DOCTYPE html>
Der Dokumenttyp ist HTML<html> </html>
Der Anfang und das Ende des Dokuments<head> </head>
Der Anfang und das Ende von Dokumentinformationen<title>
Der Titel des Buches ("Mein Buch")<meta charset="UTF-8">
Der verwendete Zeichensatz (UTF-8)<body> </body>
Der Anfang und das Ende des sichtbaren Inhalts<h1> </h1>
Anfang und Ende einer Überschrift<p> </p>
Der Anfang und das Ende eines Absatzes
Der oben erläuterte Code sind HTML-Tags.
HTML-Tags werden verwendet, um den Inhalt eines HTML-Dokuments zu definieren.
Die Tags beginnen mit einem <
(Kleiner-als-Zeichen) und enden mit einem
>
(Größer-als-Zeichen).
Auf diese Weise werden <p>
und </p>
verwendet, um den Anfang und das Ende eines Absatzes zu kennzeichnen.
Hinweis: Wenn Sie HTML im Detail studieren möchten, lesen Sie bitte unser HTML-Tutorial .
Um ganz korrekt zu sein, sollte dem <html>
Tag ein Sprachattribut hinzugefügt werden, um die im Buch verwendete Sprache zu definieren:
<html lang="en">
Wenn Sie die folgenden Metainformationen hinzufügen, wird Ihr Buch auf allen Geräten, PCs, Laptops, Tablets und Telefonen, korrekt angezeigt:
<meta name="viewport" content="width=device-width, initial-scale=1">
Beispiel
<!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>
Erstellen Sie ein Inhaltsverzeichnis
Fügen Sie innerhalb der <body> </body>
Elemente ein Inhaltsverzeichnis hinzu:
<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>
Fügen Sie einen gewissen Stil hinzu
Fügen Sie Ihrem Buch ein Stylesheet hinzu:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Hinweis: Wenn Sie CSS im Detail studieren möchten, lesen Sie bitte Unser CSS-Tutorial .
Erstellen Sie eine HTML-Seite für Kapitel 1
Datei: philosophie_kapitel1.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>
Fügen Sie einen Link zu Kapitel 1 hinzu
<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>
Im obigen Beispiel haben wir das erste Kapitel des Buches benannt:
" philosophie_kapitel1.htm ".
Der zu verwendende Name ist Ihnen überlassen. Vielleicht sollte es "Metaphysik" heißen.
Fahren Sie trotzdem wie oben fort und erstellen Sie die anderen Kapitel:
"philosophie_kaper2.htm"
"philosophie_kaper3.htm"
"philosophie_kaper4.htm"
"philosophie_kaper5.htm"
Fügen Sie jedem Kapitel einen Link hinzu
<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>