HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Learn how to create an HTML Book that will work on all devices, PC, laptop, tablet, and phone
HTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document.
We will combine HTML and CSS to create a basic HTML Book.
First start with an HTML skeleton:
<!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>
Try it Yourself »
Example Explained
<!DOCTYPE html> The document type is HTML<html> </html> The beginning and the end of the document<head> </head> The beginning and the end of document information<title> The title of the book ("My Book")<meta charset="UTF-8"> The character set used (UTF-8)<body> </body> The beginning and the end of the visible content<h1> </h1> The beginning and the end of a heading<p> </p> The beginning and the end of a paragraphThe code explained above are HTML tags.
HTML tags are used to define the content of an HTML dokument.
The tags start with a < (less-than sign) and end witn a
> (greater-than sign).
This way <p> and </p> are used
to mark up the beginning and the end of a paragraph.
Note: If you want to study HTML in detail, please read our HTML Tutorial.
To be fully correct, there should be a language attribute added to the <html> tag
to define the language used in the book:
<html lang="en">
Adding the following meta information will make your book display correctly on all devices, PC, laptop, tablet, and phone:
<meta name="viewport" content="width=device-width, initial-scale=1">
<!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>
Try it Yourself »
Inside the <body> </body> elements, add a table of content:
<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>
Try it Yourself »
Add a styleheet to your book:
<link rel="stylesheet" href="/w3css/4/w3.css">
Try it Yourself »
Note: If you want to study CSS in detail, please read Our CSS Tutorial.
File: 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>
Try it Yourself »
<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>
Try it Yourself »
In the example above, we named the first chapter of the book:
"philosophy_chapter1.htm".
The name to use is up to you. Maybe it should be called "Metaphysics".
Anyway, continue as above and create the other chapters:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
<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>
Try it Yourself »