หัวเรื่องและย่อหน้า
เพิ่มชื่อเรื่องและข้อความลงในหน้าเว็บของคุณ
หัวเรื่องและย่อหน้า เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
หัวเรื่องและย่อหน้า
ยินดีต้อนรับสู่บทเรียนถัดไป วันนี้เราจะเรียนรู้วิธีเพิ่มหัวเรื่องและย่อหน้าลงในหน้าเว็บ องค์ประกอบเหล่านี้ช่วยจัดระเบียบเนื้อหาและทำให้อ่านง่าย
หัวเรื่องคืออะไร
หัวเรื่องใช้สร้างชื่อเรื่องและชื่อเรื่องย่อยบนหน้าเว็บ มีตั้งแต่ <h1> (ใหญ่ที่สุด) ถึง <h6> (เล็กที่สุด)
ลองนึกภาพหัวเรื่องว่าเป็นโครงร่างของเนื้อหา หัวเรื่องช่วยให้ผู้ใช้เข้าใจโครงสร้างของหน้าเว็บ
ตัวอย่าง:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>การใช้หัวเรื่อง
มาลองเพิ่มหัวเรื่องลงในหน้าเว็บกัน ใช้โค้ดนี้เพื่อดูความแตกต่างของขนาดหัวเรื่อง:
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>ย่อหน้าคืออะไร
ย่อหน้าคือกลุ่มข้อความที่เพิ่มลงในหน้าเว็บโดยใช้แท็ก <p> เหมาะสำหรับเพิ่มข้อมูลหรือคำอธิบายโดยละเอียด
ตัวอย่าง:
<p>This is a paragraph of text on my web page. It’s great for sharing information with my visitors!</p>
การเพิ่มหลายย่อหน้า
คุณสามารถเพิ่มย่อหน้าได้มากเท่าที่ต้องการโดยใช้แท็ก <p> หลายแท็ก
ตัวอย่าง:
<p>This is the first paragraph. It introduces my topic.</p>
<p>This is the second paragraph. It adds more details and examples.</p>
<p>This is the third paragraph. It concludes my thoughts.</p>
การใช้หัวเรื่องและย่อหน้าร่วมกัน
หัวเรื่องและย่อหน้าทำงานร่วมกันเพื่อให้เนื้อหาอ่านและเข้าใจได้ง่าย ใช้หัวเรื่องสำหรับชื่อเรื่อง และใช้ย่อหน้าสำหรับข้อมูลโดยละเอียด
ตัวอย่าง:
<h1>Welcome to My Web Page</h1>
<p>This is a web page where I share my favorite recipes, hobbies, and stories.</p>
<h2>My Favorite Recipes</h2>
<p>I love baking cookies and cakes. Here’s a recipe for chocolate chip cookies!</p>
<h2>My Hobbies</h2>
<p>In my free time, I enjoy painting and playing video games.</p>
แนวทางปฏิบัติที่ดีสำหรับหัวเรื่องและย่อหน้า
ต่อไปนี้คือเคล็ดลับที่ควรคำนึงถึง:
- ใช้ <h1> หนึ่งรายการต่อหน้า: ควรใช้แท็ก
<h1>เพียงครั้งเดียวเป็นชื่อเรื่องหลัก - จัดระเบียบเนื้อหา: ใช้หัวเรื่องที่เล็กลง (
<h2>,<h3>) เพื่อแบ่งส่วนต่าง ๆ - เขียนย่อหน้าให้ชัดเจน: ทำให้ย่อหน้าสั้นและอ่านง่าย
ลองทำด้วยตัวเอง
มาสร้างหน้าเว็บอย่างง่ายที่มีหัวเรื่องและย่อหน้ากัน ต่อไปนี้คือตัวอย่างสำหรับเริ่มต้น:
<!DOCTYPE html>
<html>
<head>
<title>Headings and Paragraphs</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the main paragraph introducing my page.</p>
<h2>About Me</h2>
<p>I’m learning HTML and enjoying the process!</p>
<h2>My Goals</h2>
<p>My goal is to create a professional-looking website someday.</p>
</body>
</html>
ทำได้ดีมาก
ทำได้ยอดเยี่ยม คุณได้เรียนรู้วิธีเพิ่มหัวเรื่องและย่อหน้าลงในหน้าเว็บแล้ว สิ่งเหล่านี้จำเป็นต่อการสร้างเนื้อหาที่ชัดเจนและมีโครงสร้างที่ดี ในบทเรียนถัดไป เราจะสำรวจวิธีสร้างรายการเพื่อจัดระเบียบข้อมูล เตรียมพบกับความสนุกเพิ่มเติม
คำถามที่พบบ่อย
บทเรียน “หัวเรื่องและย่อหน้า” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “หัวเรื่องและย่อหน้า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “หัวเรื่องและย่อหน้า”
เพิ่มชื่อเรื่องและข้อความลงในหน้าเว็บของคุณ คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “หัวเรื่องและย่อหน้า” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ