หลักสูตร IT พื้นฐาน HTML 010_อิลิเมนต์, แอตทริบิวต์

อิลิเมนต์

แท็กเปิด	เนื้อหาอิลิเมนต์	แท็กปิด
`<h1>`	นี่คือหัวข้อ	`</h1>`
`<p>`	นี่คือย่อหน้า	`</p>`
`<a href="https://www.zhaojian.net/" title="ลิงก์">`	นี่คือลิงก์	`</a>`
`<img src="/images/logo.png" alt="นี่คือภาพ">`	นี่คือภาพ
`<br>`	ขึ้นบรรทัดใหม่

1
<!DOCTYPE html>
2
<html lang="en">
3

4
    <head>
5
        <meta charset="UTF-8" />
6
        <title>hello HTML</title>
7
    </head>
8

9
    <body>
10
        <h1>นี่คือหัวข้อ</h1>
11
        <p>
12
            นี่คือย่อหน้า<br>
13
            <a href="https://www.zhaojian.net/" title="ลิงก์">นี่คือลิงก์</a>
14
        </p>
15
        <img src="/images/logo.png" alt="นี่คือภาพ" />
16
        <br />
17
    </body>
18

19
</html>

[!สรุป]

อิลิเมนต์ HTML เริ่มต้นด้วย แท็กเปิด และสิ้นสุดด้วย แท็กปิด

เนื้อหาของ อิลิเมนต์ HTML คือเนื้อหาที่อยู่ระหว่างแท็กเปิดและแท็กปิด

อิลิเมนต์ HTML บางตัวมี เนื้อหาว่าง (empty content) อิลิเมนต์เหล่านี้ที่ไม่มีเนื้อหาและไม่มีแท็กปิดเรียกว่า แท็กว่าง หรือ อิลิเมนต์ว่าง เพื่อใช้ในการทำงานเฉพาะและรักษาความกระชับและความยืดหยุ่น เช่น: <br>, <hr>, <img>, <meta>, <input> เป็นต้น

อิลิเมนต์ HTML ส่วนใหญ่สามารถมี แอตทริบิวต์ ได้

อิลิเมนต์ HTML มักเรียกว่า แท็ก HTML (HTML tag)

อิลิเมนต์ HTML มักจะ ปรากฏเป็นคู่ เช่น <p> และ </p>

อิลิเมนต์ HTML สามารถซ้อนแท็ก HTML อื่นๆ ได้

อิลิเมนต์ HTML ไม่แยกตัวพิมพ์ใหญ่เล็ก แต่แนะนำให้ใช้ตัวพิมพ์เล็ก

แอตทริบิวต์

อิลิเมนต์ HTML สามารถมีแอตทริบิวต์ (Attribute) ได้ ซึ่งให้ข้อมูลเพิ่มเติมเกี่ยวกับอิลิเมนต์ หรือกำหนดพฤติกรรมบางอย่างของอิลิเมนต์ แอตทริบิวต์จะถูกกำหนดในแท็กเปิดเสมอ และมักจะอยู่ในรูปแบบ “ชื่อแอตทริบิวต์=ค่าแอตทริบิวต์” ตัวอย่างเช่น อิลิเมนต์ลิงก์ (a) สามารถใช้แอตทริบิวต์ href เพื่อระบุที่อยู่เป้าหมายของลิงก์:

ตัวอย่าง:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

ผลลัพธ์:

ผลลัพธ์ตัวอย่าง

ในโค้ดข้างต้น ค่าของแอตทริบิวต์ href ของอิลิเมนต์ a คือ "https://www.zhaojian.net" ซึ่งหมายความว่าเมื่อคลิกที่ลิงก์ เบราว์เซอร์จะไปยัง URL นั้น

แอตทริบิวต์ที่ใช้บ่อย:

id: ให้ตัวระบุที่ไม่ซ้ำกันสำหรับอิลิเมนต์
class: ให้ชื่อคลาสหนึ่งหรือหลายชื่อสำหรับอิลิเมนต์ อิลิเมนต์ที่ต่างกันสามารถมีชื่อคลาสเดียวกันได้
style: ให้สไตล์แบบอินไลน์สำหรับอิลิเมนต์
title: เพิ่มเนื้อหาหัวข้อให้กับอิลิเมนต์ลิงก์
alt: เพิ่มเนื้อหาคำอธิบายให้กับอิลิเมนต์ภาพ

[!สรุป]

แอตทริบิวต์จะปรากฏในรูปแบบคู่ชื่อ=ค่าเสมอ เช่น: name="value"

ระหว่างแอตทริบิวต์กับชื่ออิลิเมนต์ (หรือแอตทริบิวต์ก่อนหน้า หากมีมากกว่าหนึ่งแอตทริบิวต์) ต้องมีช่องว่างคั่น

ค่าแอตทริบิวต์ควรอยู่ในเครื่องหมายคำพูดเสมอ เครื่องหมายคำพูดคู่เป็นที่นิยมใช้มากที่สุด แต่การใช้เครื่องหมายคำพูดเดี่ยวก็ไม่มีปัญหา

แอตทริบิวต์และค่าแอตทริบิวต์ไม่แยกตัวพิมพ์ใหญ่เล็ก แต่แนะนำให้ใช้ตัวพิมพ์เล็ก

อิลิเมนต์

แอตทริบิวต์

ความคิดเห็น