Como fazer um livro HTML
Saiba como criar um livro HTML que funcionará em todos os dispositivos, PC, laptop, tablet e telefone.
Primeiro, crie uma página HTML básica
HTML é a linguagem de marcação padrão para a criação de sites e CSS é a linguagem que descreve o estilo de um documento HTML.
Combinaremos HTML e CSS para criar um livro HTML básico.
Primeiro comece com um esqueleto HTML:
Exemplo
<!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>
Exemplo explicado
<!DOCTYPE html>
O tipo de documento é HTML<html> </html>
O início e o fim do documento<head> </head>
O início e o fim das informações do documento<title>
O título do livro ("Meu Livro")<meta charset="UTF-8">
O conjunto de caracteres usado (UTF-8)<body> </body>
O início e o fim do conteúdo visível<h1> </h1>
O início e o fim de um título<p> </p>
O início e o fim de um parágrafo
O código explicado acima são tags HTML.
As tags HTML são usadas para definir o conteúdo de um documento HTML.
As tags começam com um <
(sinal de menor que) e terminam com um
>
(sinal de maior que).
Desta forma <p>
e </p>
são usados para marcar o início e o fim de um parágrafo.
Nota: Se você quiser estudar HTML em detalhes, leia nosso Tutorial de HTML .
Para estar totalmente correto, deve haver um atributo de idioma adicionado à <html>
tag para definir o idioma usado no livro:
<html lang="en">
A adição das seguintes informações meta fará com que seu livro seja exibido corretamente em todos os dispositivos, PC, laptop, tablet e telefone:
<meta name="viewport" content="width=device-width, initial-scale=1">
Exemplo
<!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>
Criar um índice
Dentro dos <body> </body>
elementos, adicione um índice:
<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>
Adicione um estilo
Adicione uma folha de estilo ao seu livro:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Nota: Se você quiser estudar CSS em detalhes, leia Nosso Tutorial CSS .
Crie uma página HTML para o Capítulo 1
Arquivo: filosofia_capítulo1.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>
Adicionar um link ao capítulo 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>
No exemplo acima, nomeamos o primeiro capítulo do livro:
" filosofia_capítulo1.htm ".
O nome a ser usado fica a seu critério. Talvez devesse ser chamado de "Metafísica".
De qualquer forma, continue como acima e crie os outros capítulos:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Adicionar um link para cada capítulo
<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>