How TO - สร้างหนังสือ HTML
เรียนรู้วิธีสร้างหนังสือ HTML ที่จะทำงานบนอุปกรณ์ทั้งหมด พีซี แล็ปท็อป แท็บเล็ต และโทรศัพท์
ขั้นแรก สร้างหน้า HTML พื้นฐาน
HTML เป็นภาษามาร์กอัปมาตรฐานสำหรับการสร้างเว็บไซต์ และ CSS เป็นภาษาที่อธิบายลักษณะของเอกสาร HTML
เราจะรวม HTML และ CSS เพื่อสร้างหนังสือ HTML พื้นฐาน
เริ่มต้นด้วยโครงร่าง HTML ก่อน:
ตัวอย่าง
<!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>
ตัวอย่างที่อธิบาย
<!DOCTYPE html>
ประเภทเอกสารคือ HTML<html> </html>
จุดเริ่มต้นและจุดสิ้นสุดของเอกสาร<head> </head>
จุดเริ่มต้นและจุดสิ้นสุดของข้อมูลเอกสาร<title>
ชื่อหนังสือ ("หนังสือของฉัน")<meta charset="UTF-8">
ชุดอักขระที่ใช้ (UTF-8)<body> </body>
จุดเริ่มต้นและจุดสิ้นสุดของเนื้อหาที่มองเห็นได้<h1> </h1>
จุดเริ่มต้นและจุดสิ้นสุดของหัวเรื่อง<p> </p>
จุดเริ่มต้นและจุดสิ้นสุดของย่อหน้า
โค้ดที่อธิบายข้างต้นคือแท็ก HTML
แท็ก HTML ใช้เพื่อกำหนดเนื้อหาของเอกสาร HTML
แท็กเริ่มต้นด้วย<
(เครื่องหมายน้อยกว่า) และสิ้นสุดด้วย
>
(เครื่องหมายมากกว่า)
วิธี<p>
นี้</p>
ใช้เพื่อทำเครื่องหมายจุดเริ่มต้นและจุดสิ้นสุดของย่อหน้า
หมายเหตุ:หากคุณต้องการศึกษา HTML โดยละเอียด โปรดอ่าน บทช่วย สอน HTML ของเรา
เพื่อให้ถูกต้องสมบูรณ์ ควรมีการเพิ่มแอตทริบิวต์ภาษาลงใน<html>
แท็กเพื่อกำหนดภาษาที่ใช้ในหนังสือ:
<html lang="en">
การเพิ่มข้อมูลเมตาต่อไปนี้จะทำให้หนังสือของคุณแสดงอย่างถูกต้องบนอุปกรณ์ พีซี แล็ปท็อป แท็บเล็ต และโทรศัพท์ทั้งหมด:
<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>
สร้างสารบัญ
ภายใน<body> </body>
องค์ประกอบ เพิ่มสารบัญ:
<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>
เพิ่มความมีสไตล์
เพิ่มสไตล์ชีตให้กับหนังสือของคุณ:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
หมายเหตุ:หากคุณต้องการศึกษา CSS โดยละเอียด โปรดอ่าน บทช่วย สอน CSS ของเรา
สร้างหน้า HTML สำหรับบทที่ 1
ไฟล์: ปรัชญา_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>
เพิ่มลิงค์ไปยังบทที่ 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>
ในตัวอย่างข้างต้น เราตั้งชื่อบทแรกของหนังสือว่า:
" ปรัชญา_chapter1.htm "
ชื่อที่จะใช้ขึ้นอยู่กับคุณ บางทีควรเรียกว่า "อภิปรัชญา"
อย่างไรก็ตาม ดำเนินการต่อตามข้างต้นและสร้างบทอื่นๆ:
"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>