Cómo - hacer un libro HTML
Aprenda a crear un libro HTML que funcione en todos los dispositivos, PC, computadora portátil, tableta y teléfono.
Primero, cree una página HTML básica
HTML es el lenguaje de marcado estándar para crear sitios web y CSS es el lenguaje que describe el estilo de un documento HTML.
Combinaremos HTML y CSS para crear un libro HTML básico.
Primero comience con un esqueleto HTML:
Ejemplo
<!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>
Ejemplo explicado
<!DOCTYPE html>
El tipo de documento es HTML<html> </html>
El principio y el final del documento.<head> </head>
El principio y el final de la información del documento.<title>
El título del libro ("Mi libro")<meta charset="UTF-8">
El conjunto de caracteres utilizado (UTF-8)<body> </body>
El principio y el final del contenido visible.<h1> </h1>
El principio y el final de un encabezado.<p> </p>
El principio y el final de un párrafo.
El código explicado anteriormente son etiquetas HTML.
Las etiquetas HTML se utilizan para definir el contenido de un documento HTML.
Las etiquetas comienzan con un <
(signo menor que) y terminan con un
>
(signo mayor que).
Así <p>
y </p>
se utilizan para marcar el principio y el final de un párrafo.
Nota: si desea estudiar HTML en detalle, lea nuestro tutorial de HTML .
Para ser completamente correcto, se debe agregar un atributo de idioma a la <html>
etiqueta para definir el idioma utilizado en el libro:
<html lang="en">
Agregar la siguiente metainformación hará que su libro se muestre correctamente en todos los dispositivos, PC, computadora portátil, tableta y teléfono:
<meta name="viewport" content="width=device-width, initial-scale=1">
Ejemplo
<!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>
Crear una tabla de contenido
Dentro de los <body> </body>
elementos, agregue una tabla de contenido:
<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>
Añadir un poco de estilo
Agregue una hoja de estilo a su libro:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Nota: Si desea estudiar CSS en detalle, lea Nuestro tutorial de CSS .
Crear una página HTML para el Capítulo 1
Archivo: filosofía_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>
Agregar un enlace al 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>
En el ejemplo anterior, nombramos el primer capítulo del libro:
" filosofía_capítulo1.htm ".
El nombre a usar depende de usted. Tal vez debería llamarse "Metafísica".
De todos modos, continúa como arriba y crea los otros capítulos:
"capítulo_filosofía2.htm"
"capítulo_filosofía3.htm"
"capítulo_filosofía4.htm"
"capítulo_filosofía5.htm"
Agregar un enlace a 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>