Cách thực hiện - Tạo một cuốn sách HTML
Tìm hiểu cách tạo Sách HTML sẽ hoạt động trên tất cả các thiết bị, PC, máy tính xách tay, máy tính bảng và điện thoại.
Đầu tiên, tạo một trang HTML cơ bản
HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo trang web và CSS là ngôn ngữ mô tả kiểu dáng của tài liệu HTML.
Chúng tôi sẽ kết hợp HTML và CSS để tạo Sách HTML cơ bản.
Trước tiên hãy bắt đầu với bộ khung HTML:
Ví dụ
<!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>
Hãy tự mình thử »Ví dụ giải thích
-
<!DOCTYPE html>
Loại tài liệu là HTML -
<html> </html>
Phần đầu và phần cuối của tài liệu -
<head> </head>
Thông tin bắt đầu và kết thúc của tài liệu -
<title>
Tên cuốn sách ("Cuốn sách của tôi") -
<meta charset="UTF-8">
Bộ ký tự được sử dụng (UTF-8) -
<body> </body>
Phần đầu và phần cuối của nội dung hiển thị -
<h1> </h1>
Phần đầu và phần cuối của một tiêu đề -
<p> </p>
Phần đầu và phần cuối của đoạn văn
Mã được giải thích ở trên là các thẻ HTML.
Thẻ HTML được sử dụng để xác định nội dung của tài liệu HTML.
Các thẻ bắt đầu bằng dấu <
(dấu nhỏ hơn) và kết thúc bằng dấu >
(dấu lớn hơn).
Bằng cách này, <p>
và </p>
được sử dụng để đánh dấu phần đầu và phần cuối của đoạn văn.
Lưu ý: Nếu bạn muốn nghiên cứu chi tiết về HTML, vui lòng đọc Hướng dẫn HTML của chúng tôi .
Để hoàn toàn chính xác, cần có thuộc tính ngôn ngữ được thêm vào thẻ <html>
để xác định ngôn ngữ được sử dụng trong sách:
<html lang="en">
Việc thêm thông tin meta sau sẽ giúp sách của bạn hiển thị chính xác trên tất cả các thiết bị, PC, máy tính xách tay, máy tính bảng và điện thoại:
<meta name="viewport" content="width=device-width, initial-scale=1">
Ví dụ
<!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>
Hãy tự mình thử »Tạo mục lục
Bên trong phần tử <body> </body>
, thêm một bảng nội dung:
<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>
Hãy tự mình thử »Thêm một số phong cách
Thêm biểu định kiểu vào sách của bạn:
<link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css">
Hãy tự mình thử »Lưu ý: Nếu bạn muốn nghiên cứu chi tiết về CSS, vui lòng đọc Hướng dẫn CSS của chúng tôi .
Tạo một trang HTML cho Chương 1
Tập tin: triết_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>
Hãy tự mình thử »Thêm liên kết vào chương 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>
Hãy tự mình thử »Trong ví dụ trên, chúng tôi đặt tên cho chương đầu tiên của cuốn sách:
" triết_chương1.htm ".
Tên để sử dụng là tùy thuộc vào bạn. Có lẽ nên gọi nó là "Siêu hình học".
Dù sao, hãy tiếp tục như trên và tạo các chương khác:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Thêm liên kết vào mỗi chương
<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>
Hãy tự mình thử »