ส่วน Markup: Elements, Attributes และ Values

(X)HTML เป็นระบบที่แสดงผลข้อมูล โดยประกอบด้วยเอกสารที่เป็นตัวหนังสือ โดยข้อมูลเหล่านี้ เรียกว่า markup เพราะว่า markup คือตัวที่บ่งบอกรายละเอียดต่างๆ ออกมาเป็นตัวหนังสือ

(X)HTML มีเกณฑ์การแบ่งประเภทของ markup ออกเป็น 3 อย่างคือ elements, attributes และ values

Elements
Elements ทำหน้าที่เหมือนป้ายเล็กๆ ที่บ่งบอกถึงโครงสร้าง ในหลายๆส่วนที่แตกต่างกันของเว็บ เช่น header จะอยู่ด้านบนแล้วอยู่เหนือข้อความต่างๆของเว็บ(paragraph) และนั่นก็คือสิ่งที่สำคัญด้วย
Elements สามารถใส่ตัวหนังสือ หรือว่างเปล่าก็ได้ องค์ประกอบของ element ต้องประกอบด้วย tag เปิด (opening tag) เนื้อหา และ tag ปิด (closing tag) โดย tag ปิดจะหน้าตาเหมือนกับ tag เปิด แต่จะมีเครื่องหมาย / นำหน้าชื่อของ tag โดยชื่อ tag ก็จะอยู่ในเครื่องหมายน้อยกว่า < แล้วเครื่องหมายมากกว่า > อีกทีนึง พูดไปแล้ว งง แน่นอน ดูที่รูปเพื่อความเข้าใจ

แสดงถึงส่วนประกอบต่างๆของ element โดย tag เปิดและปิดจะอยู่ในเครื่องหมาย <>
รูปที่ 1.1 แสดงถึงส่วนประกอบต่างๆของ element โดย tag เปิดและปิดจะอยู่ในเครื่องหมาย <> โดยตัวอย่างนี้ คือการทำให้คำว่า love เป็นตัวหนา เมื่อแสดงผลอกมาที่หน้าเว็บ

สำหรับ empty element นั้นคือ element ที่ไม่มี tag ปิด แต่จะเป็นการผสมกันระหว่าง tag เปิดและปิด โดยจะมีเครื่องหมาย / อยู่ก่อนปิดท้ายคำสั่ง งงอีกแล้ว อย่างนั้นดูรูปดีกว่า

empty element โดยยก img มาเป็นตัวอย่างเพราะว่าไม่ต้องการ tag ปิด จะสังเกตุได้ว่า มี ช่องว่าง 1 ช่องและเครื่องหมาย /
รูปที่ 1.2 empty element โดยยก img มาเป็นตัวอย่างเพราะว่าไม่ต้องการ tag ปิด จะสังเกตุได้ว่า มี ช่องว่าง 1 ช่องและเครื่องหมาย /
ใน XHTML นั้น tag ปิดเป็นสิ่งที่สำคัญ และจะต้องใส่เสมอ แต่ในบางครั้งก็ไม่ต้องใส่ หากได้ศึกษาที่นี่ไปเรื่อยๆ แล้วท่านก็จะทราบได้ว่าเมื่อใดต้องใส่ และเมื่อใดไม่ต้อง…

Attributes และ Values
Attributes และ Values จะบ่งบอกถึง ค่าของสิ่งนั้นๆ และ XHTML จะต้องมีค่าอยู่ในเครื่องหมาย “” เสมอ ใน HTML เครื่องหมาย “” เป็นสิ่งที่ละเลยได้ แต่ว่าอย่างไรก็ดี การเลือกใช้ตามมาตรฐานไว้ก่อนย่อมดีกว่า หากยังไม่ค่อยเข้าใจ ดูที่รูปครับ

นี่คือ td element ซึ่งมี colspan เป็นหนึ่งใน attribute และมี จำนวน 2 เป็น value ของ colspan attribute อีกที
รูปที่ 1.3 นี่คือ td element ซึ่งมี colspan เป็นหนึ่งใน attribute และมี จำนวน 2 เป็น value ของ colspan attribute อีกที โดย value จะอยู่ในเครื่องหมาย “” ด้วย

บาง element เช่น img สามารถมี element ได้มากกว่า 1 จุด ส่วนลำดับนั้นไม่ใช่เรื่องสำคัญสามารถสลับตำแหน่งของ attribute ได้
รูปที่ 1.4 บาง element เช่น img สามารถมี element ได้มากกว่า 1 จุด ส่วนลำดับนั้นไม่ใช่เรื่องสำคัญสามารถสลับตำแหน่งของ attribute ได้ และแต่และ element จะห่างกัน 1 space bar (เคาะวรรค1ที)

attribute บางตัวจะใส่ value ได้บางค่าเท่านั้น เช่น media ให้ link element จะมี value ได้แค่ screen, handheld หรือ print เท่านั้น
รูปที่ 1.5 attribute บางตัวจะใส่ value ได้บางค่าเท่านั้น เช่น media ให้ link element จะมี value ได้แค่ screen, handheld หรือ print เท่านั้น ไม่สามารถใส่ค่าอื่นให้เป็น value ของมันได้

บาง attribute ก็จะต้องใส่ ตัวเลข หรือ ค่าเป็น เปอร์เซนต์สำหรับ value นั้น เช่นอาจจะหมายถึงความยาว หรือความสูงของวัตถุ ซึ่งโดยปรกติหากเราไม่ระบุหน่วย ก็จะมีค่าเป็น pixels โดยอัตโนมัติ

attribute ที่ควบคุมค่าของสี จะสามารถใส่เป็นชื่อของสี หรือเป็น เลขฐาน 16 ก็ได้ แต่ว่า (X)HTML จะไม่รองรับค่าที่เป็นตัวเลขหรือเปอร์เซนต์ ใน value ของสี

บาง attribute ที่อ้างอิงถึงไฟล์ที่เป็นรูปแบบ URL ก็จะต้องใส่ค่าให้ขึ้นต้นด้วย http:// เสมอ

Block กับ Inline
สองคำนี้อาจจะเป็นคำที่จะได้เจอกันอยู่บ่อยๆ สิ่งที่แตกต่างก็คือรูปแบบของ block คือมีการขึ้นบรรทัดใหม่ หรือขึ้นย่อหน้าใหม่ ในขณะที่ Inline เป็นการกระทำบนบรรทัดนั้นต่อเนื่องไปเลย

Block-level element คือโครงสร้างชิ้นหลักๆของตัวเว็บ ที่จะบรรจุ block-level element, Inline elelment และข้อความต่างๆลงไป หรือเป็นการทำงานที่เป็นกล่องๆ ใหญ่ๆ แล้วบรรจุ กล่องเล็กๆตัวหนังสือเล็กๆลงไปในกล่องเหล่านั้นนั่นเอง

<div><img src="123.jpg" alt="รูปพิเศษ" width="200" height="100" />
<p>ต้องขอกล่าวสวัสดีและยินดีต้อนรับเข้าสู่ MeeWebFree.com ที่นี่สามารถหาความรู้ในด้านการทำเว็บได้ตั้งแต่ระดับเริ่มต้น จนทำเป็น <strong>โดยไม่ต้องเสียเงินเลยแม้แต่บาทเดียว</strong> จริงๆนะ </p>
<p>เข้ามาเยี่ยมกันบ่อยๆล่ะ </p>
</div>

สิ่งเพิ่มเติม 1.6 ที่แสดงถึง block-level elements คือ <div> และ <p> แต่ส่วน inline element คิอ <strong> และ <img> นั่นเอง

Parents and Children
เราจะสังเกตุได้ง่ายๆ ก็คือ ถ้า element ใดที่มี element ย่อยอยู่ในนั้น เราจะถือว่า element ด้านนอกคือ parent element และ element ด้านใน คือ child element และ child สามารถสืบทอดลงมาเป็นชั้นๆลงมาเรื่อยๆได้
<div>
<img src="123.jpg" ... />
<p> .... <strong>content </strong> ....
</p>
<p> ...เข้ามาเยี่ยม meewebfree.com </p>
</div>

สิ่งเพิ่มเติมที่ 1.7 จะสังเกตุได้ว่า div คือ parent element ของ img และ p ทั้งสอง element และในขณะเดียวกัน ใน p แรกนั้นก็จะเป็น parent element ของ strong อีกทีด้วยเช่นกัน

การจัดโครงสร้างแบบนี้เป็นส่วนหลักๆของ (X)HTML เลยดังนั้นเวลาใช้งานจริงก็จะต้องเขียนให้อยู่ในลักษณะเป็นแบบนี้ด้วย คือเป็น parent และ child โดยต้องแยกให้ดีว่า อะไรเป็น parent ของอะไร

และสิ่งนึงที่เป็นเรื่องที่สำคัญนั่นคือการที่ element นึง ซ้อนใน element อีกอันนึง จะต้องมีการจัดเรียงการเปิดปิดให้ถูก เช่น ถ้าเปิด tag A และเปิด tag B จะต้อง ปิด Tag B ก่อนจึงค่อยปิด Tag A เช่น
<p> .... .. <strong>content</strong></p> อย่างนี้คือตัวอย่างที่ถูกต้อง จะเห็นว่า p ครอบ strong อยู่
<p>..... <strong>content</p></strong> จะเห็นว่าไม่ถูกต้องเพราะว่าเกิดความสับสน ว่า tag ไหนที่ครอบ tag ไหนกันแน่

สิ่งเพิ่มเติมที่ 1.8 การเรียงลำดับการเปิด และ ปิด tag

No comments yet.
You must be logged in to post a comment.