Jak TO - Zrób książkę HTML
Dowiedz się, jak utworzyć książkę HTML, która będzie działać na wszystkich urządzeniach, komputerze, laptopie, tablecie i telefonie.
Najpierw utwórz podstawową stronę HTML
HTML to standardowy język znaczników do tworzenia stron internetowych, a CSS to język opisujący styl dokumentu HTML.
Połączymy HTML i CSS, aby stworzyć podstawową książkę HTML.
Najpierw zacznij od szkieletu HTML:
Przykład
<!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>
Przykład wyjaśniony
<!DOCTYPE html>
Typ dokumentu to HTML<html> </html>
Początek i koniec dokumentu<head> </head>
Początek i koniec informacji o dokumencie<title>
Tytuł książki („Moja książka”)<meta charset="UTF-8">
Używany zestaw znaków (UTF-8)<body> </body>
Początek i koniec widocznej treści<h1> </h1>
Początek i koniec nagłówka<p> </p>
Początek i koniec akapitu
Wyjaśniony powyżej kod to znaczniki HTML.
Tagi HTML służą do definiowania zawartości dokumentu HTML.
Tagi zaczynają się od <
(znak „mniej niż”) i kończą na
>
(znak „większe niż”).
W ten sposób <p>
i </p>
są używane do oznaczania początku i końca akapitu.
Uwaga: Jeśli chcesz szczegółowo przestudiować HTML, przeczytaj nasz samouczek HTML .
Aby być w pełni poprawnym, do tagu powinien być dodany atrybut języka, <html>
który definiuje język używany w książce:
<html lang="en">
Dodanie następujących metainformacji sprawi, że Twoja książka będzie wyświetlana poprawnie na wszystkich urządzeniach, komputerze, laptopie, tablecie i telefonie:
<meta name="viewport" content="width=device-width, initial-scale=1">
Przykład
<!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>
Utwórz spis treści
Wewnątrz <body> </body>
elementów dodaj spis treści:
<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>
Dodaj trochę stylu
Dodaj arkusz stylów do swojej książki:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Uwaga: Jeśli chcesz szczegółowo przestudiować CSS, przeczytaj nasz samouczek CSS .
Utwórz stronę HTML dla Rozdziału 1
Plik: filozofia_rozdział1.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>
Dodaj link do rozdziału 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>
W powyższym przykładzie nazwaliśmy pierwszy rozdział książki:
„ filozofia_rozdział1.htm ”.
Nazwa, której będziesz używać, zależy od Ciebie. Może powinno się to nazywać „Metafizyką”.
W każdym razie kontynuuj jak wyżej i stwórz pozostałe rozdziały:
„philosophy_chaper2.htm”
„philosophy_chaper3.htm”
„philosophy_chaper4.htm”
„philosophy_chaper5.htm”
Dodaj link do każdego rozdziału
<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>