HTML - คุณสมบัติ

เราได้เห็นแท็ก HTML เพียงไม่กี่แท็กและการใช้งานเช่นแท็กหัวเรื่อง <h1>, <h2>, แท็กย่อหน้า <p>และแท็กอื่น ๆ จนถึงตอนนี้เราใช้มันในรูปแบบที่ง่ายที่สุด แต่แท็ก HTML ส่วนใหญ่ยังสามารถมีแอตทริบิวต์ซึ่งเป็นข้อมูลเพิ่มเติม

แอตทริบิวต์ถูกใช้เพื่อกำหนดลักษณะขององค์ประกอบ HTML และวางไว้ในแท็กเปิดขององค์ประกอบ แอตทริบิวต์ทั้งหมดประกอบด้วยสองส่วน - กname และก value

nameคือคุณสมบัติที่คุณต้องการตั้งค่า ตัวอย่างเช่นย่อหน้า<p> องค์ประกอบในตัวอย่างมีแอตทริบิวต์ที่มีชื่อ alignซึ่งคุณสามารถใช้เพื่อระบุการจัดตำแหน่งของย่อหน้าบนหน้า
valueคือสิ่งที่คุณต้องการให้ตั้งค่าคุณสมบัติและใส่ไว้ในใบเสนอราคาเสมอ ตัวอย่างด้านล่างแสดงค่า 3 ค่าที่เป็นไปได้ของ align attribute: left, center และ right.

ชื่อแอตทริบิวต์และค่าแอตทริบิวต์ไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่ อย่างไรก็ตาม World Wide Web Consortium (W3C) แนะนำแอตทริบิวต์ / ค่าแอตทริบิวต์ตัวพิมพ์เล็กในคำแนะนำ HTML 4

ตัวอย่าง

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

สิ่งนี้จะแสดงผลลัพธ์ต่อไปนี้ -

คุณสมบัติหลัก

แอตทริบิวต์หลักสี่ประการที่สามารถใช้กับองค์ประกอบ HTML ส่วนใหญ่ (แม้ว่าจะไม่ใช่ทั้งหมด) คือ -

Id
Title
Class
Style

แอตทริบิวต์รหัส

idแอตทริบิวต์ของแท็ก HTML สามารถใช้เพื่อระบุองค์ประกอบใด ๆ ภายในหน้า HTML โดยไม่ซ้ำกัน มีสาเหตุหลักสองประการที่คุณอาจต้องการใช้แอตทริบิวต์ id กับองค์ประกอบ -

หากองค์ประกอบมีแอตทริบิวต์ id เป็นตัวระบุเฉพาะก็เป็นไปได้ที่จะระบุเฉพาะองค์ประกอบนั้นและเนื้อหาขององค์ประกอบนั้น
หากคุณมีสององค์ประกอบที่มีชื่อเดียวกันภายในเว็บเพจ (หรือสไตล์ชีต) คุณสามารถใช้แอตทริบิวต์ id เพื่อแยกความแตกต่างระหว่างองค์ประกอบที่มีชื่อเดียวกัน

เราจะพูดถึงสไตล์ชีตในบทช่วยสอนแยกต่างหาก ในตอนนี้ให้ใช้แอตทริบิวต์ id เพื่อแยกความแตกต่างระหว่างองค์ประกอบสองย่อหน้าดังที่แสดงด้านล่าง

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

แอตทริบิวต์หัวเรื่อง

titleแอตทริบิวต์ให้ชื่อที่แนะนำสำหรับองค์ประกอบ พวกเขาไวยากรณ์สำหรับtitle แอตทริบิวต์คล้ายกับที่อธิบายไว้สำหรับ id แอตทริบิวต์ -

ลักษณะการทำงานของแอตทริบิวต์นี้จะขึ้นอยู่กับองค์ประกอบที่ดำเนินการแม้ว่ามักจะแสดงเป็นคำแนะนำเครื่องมือเมื่อเคอร์เซอร์อยู่เหนือองค์ประกอบหรือในขณะที่องค์ประกอบกำลังโหลด

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตอนนี้ให้ลองนำเคอร์เซอร์ของคุณไปไว้เหนือ "ตัวอย่างแท็กหัวเรื่อง" และคุณจะเห็นว่าหัวเรื่องใดก็ตามที่คุณใช้ในโค้ดของคุณออกมาเป็นคำแนะนำเครื่องมือของเคอร์เซอร์

แอตทริบิวต์คลาส

classแอตทริบิวต์ใช้เพื่อเชื่อมโยงองค์ประกอบกับสไตล์ชีตและระบุคลาสขององค์ประกอบ คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการใช้แอตทริบิวต์คลาสเมื่อคุณเรียนรู้ Cascading Style Sheet (CSS) ดังนั้นในตอนนี้คุณสามารถหลีกเลี่ยงได้

ค่าของแอตทริบิวต์อาจเป็นรายการชื่อคลาสที่คั่นด้วยช่องว่าง ตัวอย่างเช่น -

class = "className1 className2 className3"

แอตทริบิวต์สไตล์

แอตทริบิวต์ style ช่วยให้คุณระบุกฎ Cascading Style Sheet (CSS) ภายในองค์ประกอบ

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ในตอนนี้เราไม่ได้เรียนรู้ CSS ดังนั้นเรามาดำเนินการต่อโดยไม่ต้องกังวลกับ CSS มากนัก ที่นี่คุณต้องเข้าใจว่าแอตทริบิวต์ HTML คืออะไรและสามารถใช้งานได้อย่างไรขณะจัดรูปแบบเนื้อหา

แอตทริบิวต์สากล

มีแอตทริบิวต์การทำให้เป็นสากลสามแบบซึ่งมีให้สำหรับองค์ประกอบ XHTML ส่วนใหญ่ (แม้ว่าจะไม่ใช่ทั้งหมด)

dir
lang
xml:lang

คุณสมบัติผบ

dirแอตทริบิวต์ช่วยให้คุณระบุให้เบราว์เซอร์ทราบถึงทิศทางที่ข้อความควรไหล แอตทริบิวต์ dir สามารถรับหนึ่งในสองค่าดังที่คุณเห็นในตารางต่อไปนี้ -

มูลค่า	ความหมาย
ltr	ซ้ายไปขวา (ค่าเริ่มต้น)
rtl	ขวาไปซ้าย (สำหรับภาษาเช่นฮีบรูหรืออาหรับที่อ่านจากขวาไปซ้าย)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เมื่อใช้แอตทริบิวต์dirภายในแท็ก <html> จะกำหนดวิธีการนำเสนอข้อความภายในเอกสารทั้งหมด เมื่อใช้ภายในแท็กอื่นจะควบคุมทิศทางของข้อความสำหรับเนื้อหาของแท็กนั้น

แอตทริบิวต์ lang

langแอตทริบิวต์ช่วยให้คุณระบุภาษาหลักที่ใช้ในเอกสาร แต่แอตทริบิวต์นี้ถูกเก็บไว้ใน HTML เพื่อให้เข้ากันได้กับ HTML เวอร์ชันก่อนหน้าเท่านั้น แอตทริบิวต์นี้ถูกแทนที่ด้วยxml:lang แอตทริบิวต์ในเอกสาร XHTML ใหม่

ค่าของแอตทริบิวต์langคือรหัสภาษาสองอักขระมาตรฐาน ISO-639 ตรวจสอบHTML Language Codes: ISO 639 สำหรับรายการรหัสภาษาทั้งหมด

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

xml: lang Attribute

XML: langแอตทริบิวต์การเปลี่ยน XHTML สำหรับlangแอตทริบิวต์ ค่าของแอตทริบิวต์xml: langควรเป็นรหัสประเทศ ISO-639 ตามที่กล่าวไว้ในหัวข้อก่อนหน้า

คุณสมบัติทั่วไป

นี่คือตารางของคุณสมบัติอื่น ๆ ที่สามารถใช้งานได้กับแท็ก HTML จำนวนมาก

แอตทริบิวต์	ตัวเลือก	ฟังก์ชัน
จัดตำแหน่ง	ขวาซ้ายตรงกลาง	จัดเรียงแท็กในแนวนอน
กล้าหาญ	ด้านบนกลางด้านล่าง	จัดเรียงแท็กในแนวตั้งภายในองค์ประกอบ HTML
bgcolor	ค่าตัวเลขฐานสิบหก RGB	วางสีพื้นหลังไว้ด้านหลังองค์ประกอบ
พื้นหลัง	URL	วางภาพพื้นหลังไว้ด้านหลังองค์ประกอบ
id	ผู้ใช้กำหนด	ตั้งชื่อองค์ประกอบเพื่อใช้กับ Cascading Style Sheets
ชั้นเรียน	ผู้ใช้กำหนด	จำแนกองค์ประกอบสำหรับใช้กับ Cascading Style Sheets
ความกว้าง	ค่าตัวเลข	ระบุความกว้างของตารางรูปภาพหรือเซลล์ตาราง
ความสูง	ค่าตัวเลข	ระบุความสูงของตารางรูปภาพหรือเซลล์ตาราง
หัวข้อ	ผู้ใช้กำหนด	ชื่อ "ป๊อปอัป" ขององค์ประกอบ

เราจะเห็นตัวอย่างที่เกี่ยวข้องเนื่องจากเราจะศึกษาแท็ก HTML อื่น ๆ ต่อไป สำหรับรายการที่สมบูรณ์ของแท็ก HTML และคุณลักษณะที่เกี่ยวข้องโปรดตรวจสอบเพื่ออ้างอิงแท็ก HTML รายการ