Hoe OM - Maak 'n HTML-boek
Leer hoe om 'n HTML-boek te skep wat op alle toestelle, rekenaar, skootrekenaar, tablet en foon sal werk.
Skep eers 'n basiese HTML-bladsy
HTML is die standaard opmaaktaal vir die skep van webwerwe en CSS is die taal wat die styl van 'n HTML-dokument beskryf.
Ons sal HTML en CSS kombineer om 'n basiese HTML-boek te skep.
Begin eers met 'n 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 Verduidelik
<!DOCTYPE html>
Die dokumenttipe is HTML<html> </html>
Die begin en die einde van die dokument<head> </head>
Die begin en die einde van dokumentinligting<title>
Die titel van die boek ("My Boek")<meta charset="UTF-8">
Die karakterstel wat gebruik word (UTF-8)<body> </body>
Die begin en die einde van die sigbare inhoud<h1> </h1>
Die begin en die einde van 'n opskrif<p> </p>
Die begin en einde van 'n paragraaf
Die kode hierbo verduidelik is HTML-merkers.
HTML-etikette word gebruik om die inhoud van 'n HTML-dokument te definieer.
Die etikette begin met 'n <
(minder-as-teken) en eindig met 'n
>
(groter-as-teken).
Hierdie manier <p>
en </p>
word gebruik om die begin en einde van 'n paragraaf te merk.
Let wel: As jy HTML in detail wil bestudeer, lees asseblief ons HTML-tutoriaal .
Om heeltemal korrek te wees, moet daar 'n taalkenmerk by die <html>
merker gevoeg word om die taal wat in die boek gebruik word, te definieer:
<html lang="en">
Deur die volgende meta-inligting by te voeg, sal jou boek korrek op alle toestelle, rekenaar, skootrekenaar, tablet en foon vertoon:
<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>
Skep 'n inhoudsopgawe
<body> </body>
Voeg 'n inhoudsopgawe binne die elemente by:
<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 'n bietjie styl by
Voeg 'n stylblad by jou boek:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Let wel: As jy CSS in detail wil bestudeer, lees asseblief Ons CSS Tutoriaal .
Skep 'n HTML-bladsy vir Hoofstuk 1
Lêer: philosophy_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 'n skakel by hoofstuk 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 die voorbeeld hierbo het ons die eerste hoofstuk van die boek genoem:
" philosophy_chapter1.htm ".
Die naam om te gebruik is aan jou. Miskien moet dit "Metaphysics" genoem word.
In elk geval, gaan voort soos hierbo en skep die ander hoofstukke:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Voeg 'n skakel by elke hoofstuk
<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>