โครงสร้าง HTML

โครงสร้างพื้นฐานของ HTML

หัวใจสำคัญของการสร้างเว็บไซต์ด้วย Tag และ Attribute

HTML มีโครงสร้างการเขียนโดยอาศัย Tag ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่นๆ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สำหรับจัดรูปแบบเพิ่มเติม

HTML Structure Diagram 
<html>
    <head>
        <title>ชื่อเว็บเพจ</title>
    </head>
    <body>
        <h1>หัวเรื่อง</h1>
        <p>ข้อความ</p>
    </body>
</html>

คำอธิบายโครงสร้างพื้นฐานที่ทุกเว็บเพจต้องมี:

<html>...</html>

แท็กหลักที่หุ้มเนื้อหาทั้งหมด บ่งบอกว่าเป็นเอกสารภาษา HTML เริ่มต้นและสิ้นสุดในทุกไฟล์

<head>...</head>

ส่วนกำหนดรายละเอียด (Metadata) ของเอกสาร ซึ่งจะไม่แสดงผลบนหน้าเว็บโดยตรง

<title>...</title>

แท็กย่อยในส่วน head สำหรับตั้งชื่อเว็บเพจ (สูงสุด 64 ตัวอักษร) จะปรากฏบน Title Bar ของเบราว์เซอร์

<body>...</body>

ส่วนเนื้อหาหลักที่ต้องการให้แสดงผล เช่น ข้อความ รูปภาพ วิดีโอ และสื่อต่างๆ

รู้จักกับ Tag พื้นฐาน

1. การกำหนดหัวเรื่อง (Headings)

ใช้ตัวเลข 1-6 กำหนดระดับความสำคัญ <h1> คือใหญ่และสำคัญที่สุด จนถึง <h6> ที่เล็กที่สุด

<h1>หัวเรื่องที่ 1</h1> ถึง <h6>หัวเรื่องที่ 6</h6>
Heading Samples

2. การจัดการย่อหน้าและบรรทัด

<p> : กำหนดย่อหน้าใหม่

<hr> : ขีดเส้นคั่นแนวนอน

<br> : ขึ้นบรรทัดใหม่

<pre> : แสดงข้อความตามที่พิมพ์เป๊ะๆ (รวมช่องว่าง)

Paragraph Samples

3. การเพิ่มสไตล์ (Styles) & Formatting

การกำหนดรูปแบบแบบ Inline ผ่าน Attribute style และการใช้ Tag เฉพาะทาง:

Common Styles:
  • background-color : สีพื้นหลัง
  • color : สีตัวอักษร
  • font-size : ขนาดอักษร
  • text-align : จัดวางตำแหน่ง
Text Formatting:

<b>, <strong> : ตัวหนา

<i>, <em> : ตัวเอียง

<mark> : ไฮไลท์ | <del> : ขีดฆ่า

<sub> : ตัวห้อย | <sup> : ตัวยก

Text Formatting Samples
แหล่งอ้างอิง:

1belief.com, pirun.ku.ac.th, krukikz.com, mecode.blog, teachernu.com, enfete.co.th (สืบค้นเมื่อ 1 พ.ย. 67)

แสดงความคิดเห็น

0 ความคิดเห็น

แสดงความคิดเห็น (0)