Cách THỰC HIỆN - Tạo 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ả phong cách của tài liệu HTML.
Chúng tôi sẽ kết hợp HTML và CSS để tạo ra một Sách HTML cơ bản.
Đầu tiên hãy bắt đầu với một khung HTML:
Thí 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>
Giải thích ví dụ
<!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 đầu và cuối của tài liệu<title>
Tên sách ("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 tiêu đề<p> </p>
Phần đầu và phần cuối của đoạn văn
Đoạn mã được giải thích ở trên là các thẻ HTML.
Các thẻ HTML được sử dụng để xác định nội dung của một dokument 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).
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 học HTML chi tiết, vui lòng đọc Hướng dẫn HTML của chúng tôi .
Để hoàn toàn chính xác, phải có một thuộc tính ngôn ngữ được thêm vào <html>
thẻ để xác định ngôn ngữ được sử dụng trong sách:
<html lang="en">
Thêm thông tin meta sau sẽ làm cho 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">
Thí 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>
Tạo một Mục lục
Bên trong các <body> </body>
phần tử, hãy 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>
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.w3schools.com/w3css/4/w3.css">
Lưu ý: Nếu bạn muốn học CSS một cách chi tiết, vui lòng đọc Hướng dẫn CSS của chúng tôi .
Tạo trang HTML cho Chương 1
Tệp: Philosop_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>
Thêm liên kết đến 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>
Trong ví dụ trên, chúng tôi đặt tên 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:
"Philosop_chaper2.htm"
"Philosop_chaper3.htm"
"Philosop_chaper4.htm"
"Philosop_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>