Lv.5 HTML Attributes

แปลตรงๆเลยครับ เป็นการกำหนดคุณลักษณะของ HTML Element ครับ

  • HTML Element ทั้งหมดสามารถมี Attribute ได้
  • HTML Element เมื่อมีการกำหนด Attribute แล้ว ต้องกำหนดค่าไว้เสมอ name=”value”

HTML การใช้งาน href Attribute

กำหนดไฮเปอร์ลิงก์ได้โดยเพิ่มแอตทริบิวต์ href ให้กับแท็ก <a>

ตัวอย่าง

<a href="https://www.nkaub.com">nkaub</a>

HTML การใช้งาน แอตทริบิวต์ src

แท็ก เป็นการเรียกไฟล์รูปภาพมาแสดงบนเว็บเพจ โดยใช้แอตทริบิวต์ src ในการระบุตำแหน่งของไฟล์รูปภาพนั้นๆ

ตัวอย่าง

<img src="images/nkaub.png">

การใช้งาน แอตทริบิวต์ width และ height

แท็ก <img> มีแอตทริบิวต์ width และ height ใช้เพื่อกำหนดกว้าง และความสูง ของรูปภาพนั้นๆ

ตัวอย่าง

<img src="images/nkaub.png" width="700" height="500">

การใช้งาน แอตทริบิวต์ alt

แท็ก <img> มีแอตทริบิวต์ alt เสมอ ย้ำนะครับ ต้องมีเสมอ เพราะ Search engine มันไม่รู้หรอกครับ ว่ารูปที่เราใช้คือรูปเกี่ยวกับอะไร ต้องบอกด้วย แอตทริบิวต์ alt เสมอ

ตัวอย่าง

<img src="images/nkaub.png" alt="logo">

การใช้งาน แอตทริบิวต์ style

แอตทริบิวต์ style ใช้เพื่อเพิ่มสไตล์ให้กับ HTML อิลิเมนต์ เช่น สี แบบอักษร ขนาด เส้นขอบ พื้นหลัง และอื่นๆ

ตัวอย่าง

<header style="font-family:Arial,Helvetica,sans-serif;">
  <h1 style="color:red;">HTML Attributes</h1>
  <h2 style="border:2px solid blue;">HTML Attributes</h2>
  <h3 style-"font-size:16px;">HTML Attributes</h3>
  <div style="background-color:green;">กล่อง</div>
</header>

การใช้งาน แอตทริบิวต์ lang

ควรใส่แอตทริบิวต์ lang ไว้ในแท็ก <htm> เสมอ เพื่อประกาศว่าเว็บไซต์ของเราใช้ภาษาอะไร

ตัวอย่าง

<!DOCTYPE html>
<html lang="th">
	<body>
	
	</body>
</html>

เมื่อเพิ่มภาษาแล้ว ก็ต้องเพิ่มประเทศด้วย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<body>
	
	</body>
</html>

Value ของแอตทริบิวต์ lang สองตัวหน้า(th) กำหนดภาษา ส่วนสองตัวหลัง(TH) กำหนดประเทศครับ

การใช้งาน แอตทริบิวต์ title

ใช้เป็น Tooltip เพื่อบอกอะไรก็ได้

ตัวอย่าง

<p title="ย่อหน้า">พารากราฟ</p>

คำแนะนำการใช้งานแอตทริบิวต์

การใช้งานแอตทริบิวต์ต่างๆในภาษา HTML นั้น แนะนำให้เขียนเป็นตัวอักษรพิมพ์เล็กทั้งหมดนะครับ ถึงแม้ว่าตัวพิมพ์ใหญ่จะสามารถเขียนได้ก็ตาม

ตัวอย่างที่ดี

<p title="ย่อหน้า">พารากราฟ</p>

ตัวอย่างที่ไม่ดี

<p TITLE="ย่อหน้า">พารากราฟ</p>

ใช้แอตทริบิวต์มากกว่า 1 ตัว

การใช้งานแอตทริบิวต์มากกว่า 1 ตัว สามารถทำได้โดย การเว้นแล้วเขียนตัวถัดไปได้เลย

ตัวอย่าง

<img src="images/nkaub.png" width="350" height="500" alt="logo">

จากตัวอย่างเราใช้แอตทริบิวต์ไปทั้งหมด 4 ตัวด้วยกันคือแอตทริบิวต์ src, width, height, และ alt

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top