Come fare per - Creare un libro HTML
Scopri come creare un libro HTML che funzioni su tutti i dispositivi, PC, laptop, tablet e telefoni.
Innanzitutto, crea una pagina HTML di base
HTML è il linguaggio di markup standard per la creazione di siti Web e CSS è il linguaggio che descrive lo stile di un documento HTML.
Combineremo HTML e CSS per creare un libro HTML di base.
Innanzitutto inizia con uno scheletro HTML:
Esempio
<!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>
Esempio spiegato
<!DOCTYPE html>Il tipo di documento è HTML<html> </html>L'inizio e la fine del documento<head> </head>L'inizio e la fine delle informazioni sul documento<title>Il titolo del libro ("Il mio libro")<meta charset="UTF-8">Il set di caratteri utilizzato (UTF-8)<body> </body>L'inizio e la fine del contenuto visibile<h1> </h1>L'inizio e la fine di un titolo<p> </p>L'inizio e la fine di un paragrafo
Il codice spiegato sopra sono tag HTML.
I tag HTML vengono utilizzati per definire il contenuto di un documento HTML.
I tag iniziano con un <(segno di minore di) e terminano con un
>(segno di maggiore di).
In questo modo <p>e </p>vengono utilizzati per contrassegnare l'inizio e la fine di un paragrafo.
Nota: se vuoi studiare l'HTML in dettaglio, leggi il nostro Tutorial HTML .
Per essere completamente corretto, dovrebbe esserci un attributo di lingua aggiunto al <html>tag per definire la lingua utilizzata nel libro:
<html lang="en">
L'aggiunta delle seguenti metainformazioni farà visualizzare correttamente il tuo libro su tutti i dispositivi, PC, laptop, tablet e telefono:
<meta name="viewport" content="width=device-width, initial-scale=1">
Esempio
<!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>
Crea un sommario
All'interno degli <body> </body>elementi, aggiungi un sommario:
<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>
Aggiungi un po' di stile
Aggiungi un foglio di stile al tuo libro:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Nota: se vuoi studiare i CSS in dettaglio, leggi il nostro tutorial CSS .
Creare una pagina HTML per il Capitolo 1
File: filosofia_capitolo1.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>
Aggiungi un collegamento al capitolo 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>
Nell'esempio sopra, abbiamo chiamato il primo capitolo del libro:
" filosofia_capitolo1.htm ".
Il nome da usare dipende da te. Forse dovrebbe chiamarsi "Metafisica".
Ad ogni modo, continua come sopra e crea gli altri capitoli:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Aggiungi un collegamento a ogni capitolo
<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>