Id's & Classes

เราได้เรียนการแบ่งเนื้อหาของข้อมูลที่เราจะนำเสนอใน webpage ต่อไปนี้เราจะมาเรียนตัวแปรที่ใช้สำหรับจัดรูปแบบบนหน้า webspage คือ Id และ Classes

Id (ระบุชื่อ)

id เป็นตัวแปรที่ใช้ในการตั้งชื่อให้กับ element ชื่อจะต้องไม่ซ้ำและใช้ได้เพียงครั้งเดียว id ย่อมาจาก identifier (ตัวระบุชื่อ) เราจะใช้ตัวแปร id เมื่อเราต้องการจะระบุชื่อให้กับ element นั้นๆ

เราสามารถใช้ id element กำหนดคอลัมน์ในแนวตั้งของ webpage ได้และ HTML markup จะเขียนได้ตามนี้

<div id="right-column">Content of the right column</div>
<div id="left-column"> Content of the left column </div>

ดังที่ได้พูดถึงข้างต้นว่า id element ต้องไม่ซ้ำ เพราะฉะนั้นเราไม่สามารถใช้ ซ้ำ 2 ครั้งดังตัวอย่างนี้ ในตัวอย่างนี้จะแสดงข้อมูลทีผิดพลาดออกมา

<div id="menu">This would be your menu</div>
<div id="blog-entry">Your first blog-entry</div>
<div id="blog-entry">Your second blog-entry</div>

Classes (ต้นแบบของวัตถุ)

class ใช้ในการกำหนดคุณลักษณะให้กับ element เราสามารถมีได้หลายๆ element โดยที่ใช้ชื่อ class เดียวกัน เพราะการจัดรูปแบบบนหน้า webspage จะเหมือนกันถ้าใช้ class ชื่อเดียวกัน เราจะใช้ใน link และ image บ่อยๆ ตัวอย่างด้านล่างเป็นการใช้ class ต่างๆกัน

<div class="blog-entry">
	<p> Just Another Day<br />
	Written by Christina<br />
	On January 11th </p>
	<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</div>
<div class="blog-entry">
	<p> My First Blog Entry<br />
	Written by Christina<br />
	On January 10th </p>
	<p class="content">I’m so happy to write my first blog entry – yay!</p>
<div>

เราสามารถใช้ id และ class ร่วมกันกับ Cascading Style Sheets (CSS : ภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML) CCS จะบอกเบราเซอร์ว่า จะให้ HTML แสดงผลแบบไหน ซึ่งมันจะดึงการจัดข้อมูลนั้นออกจาก HTML และเก็บไว้ในไฟล์แยกออกมา ชื่อ style sheet เราจะไม่กล่าวถึง CCS มากแต่เราต้องรู้ว่า ไฟล์ style sheet นี้จะทำหน้าที่ในการออกแบบ

สรุป

• Id และ Classes เป็นตัวแปร
• Id ที่ใช้ในการตั้งชื่อให้กับ element จะต้องไม่ซ้ำ
• เราสามารถมีได้หลายๆ element โดยที่ใช้ชื่อ class เดียวกัน
• เราสามารถใช้ id และ class ร่วมกันกับ CSS