Jak na to - Vytvořte knihu HTML
Naučte se, jak vytvořit HTML knihu, která bude fungovat na všech zařízeních, PC, notebooku, tabletu a telefonu.
Nejprve vytvořte základní HTML stránku
HTML je standardní značkovací jazyk pro vytváření webových stránek a CSS je jazyk, který popisuje styl dokumentu HTML.
Zkombinujeme HTML a CSS a vytvoříme základní HTML knihu.
Nejprve začněte s kostrou HTML:
Příklad
<!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>
Příklad vysvětlen
<!DOCTYPE html>
Typ dokumentu je HTML<html> </html>
Začátek a konec dokumentu<head> </head>
Začátek a konec informací o dokumentu<title>
Název knihy ("Moje kniha")<meta charset="UTF-8">
Použitá znaková sada (UTF-8)<body> </body>
Začátek a konec viditelného obsahu<h1> </h1>
Začátek a konec nadpisu<p> </p>
Začátek a konec odstavce
Výše vysvětlený kód jsou značky HTML.
HTML tagy se používají k definování obsahu HTML dokumentu.
Značky začínají <
(znaménko menší než) a končí
>
(znaménko větší než).
Tímto způsobem <p>
a </p>
slouží k označení začátku a konce odstavce.
Poznámka: Pokud si chcete HTML prostudovat podrobně, přečtěte si prosím náš HTML Tutorial .
Aby byla zcela správná, měl by být ke značce přidán atribut language <html>
definující jazyk použitý v knize:
<html lang="en">
Přidáním následujících metainformací zajistíte, že se vaše kniha bude správně zobrazovat na všech zařízeních, počítači, notebooku, tabletu a telefonu:
<meta name="viewport" content="width=device-width, initial-scale=1">
Příklad
<!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>
Vytvořte obsah
Uvnitř <body> </body>
prvků přidejte obsah:
<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>
Přidejte nějaký styl
Přidejte do své knihy šablonu stylů:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Poznámka: Pokud si chcete CSS prostudovat podrobně, přečtěte si náš návod CSS .
Vytvořte HTML stránku pro kapitolu 1
Soubor: filozofie_kapitola1.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>
Přidejte odkaz na kapitolu 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>
Ve výše uvedeném příkladu jsme pojmenovali první kapitolu knihy:
" filozofická_kapitola1.htm ".
Název, který použijete, je na vás. Možná by se to mělo jmenovat "Metafyzika".
Každopádně pokračujte jako výše a vytvořte další kapitoly:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Ke každé kapitole přidejte odkaz
<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>