Home Explore ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Published by lavanh9979, 2021-08-24 09:06:50

Description: ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Read the Text Version

Pages:

CHAPTER 3: HTML5 81 HTML5 <!doctype html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <table style=\"width:100%;\"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Rachawit</td> <td>Tipsena</td> </tr> <tr> <td>SomChai</td> <td>Dongdee</td> </tr> </tbody> </table> </body> </html> Result HTML5 ได้ทำกำรยกเลิกแอตทริบิวต์ align bgcolor border cellpadding cellspacing frame rules summary และ width ที่ใช้กับตำรำง เน่ืองจำกสำมำรถกำหนดรูปแบบตำรำงโดยใช้ สไตลช์ ตี แทนได้ แตย่ งั สำมำรถใช้งำนแอตทรบิ ิวต์ดังกล่ำวไดอ้ ยู่

82 CHAPTER 3: HTML5 กำรผสำนเซลล์เข้ำหำกัน (Merge) โดยใช้แอตทริบิวต์ \"colspan\" สำหรับกำรผสำนคอลัมน์ และแอตทรบิ วิ ต์ \"rowspan\" สำหรบั กำรผสำนแถว มีรูปแบบกำรใช้งำนดังนี้ HTML5 <table style=\"width:100%;\"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td colspan=\"2\">Rachawit Tipsena</td>  </tr> </tbody> </table>  <table style=\"width:100%;\"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Rachawit</td> <td rowspan=\"2\">Tipsena</td>  </tr> <tr> <td>SomChai</td> </tr> </tbody> </table> Result

CHAPTER 3: HTML5 83 10 HTML Lists คำสั่งแทรกรำยกำร (Lists) ลงในเว็บเพจ โดยใช้อิลิเมนต์ \"<ul>…</ul>\" เป็นอิลิเมนต์ หลกั สำหรบั รำยกำรแบบไมเ่ รียงลำดบั ใชอ้ ิลิเมนต์ \"<ol>…</ol>\" เป็นอิลิเมนต์หลัก สำหรับรำยกำร แบบเรียงลำดับ ใช้งำนร่วมกับอิลิเมนต์ \"<li>…</li>\" สำหรับแสดงรำยกำรข้อควำม มีรูปแบบกำรใช้ งำนดังน้ี HTML5 <!doctype html> <html> <body> <h1>An Unordered List</h1> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h1>An Ordered List</h1> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Result

84 CHAPTER 3: HTML5 รำยกำรแบบไม่เรยี งลำดับ สำมำรถกำหนดรปู แบบหัวขอ้ รำยกำร (Bullet) โดยใชแ้ อตทรบิ ิวต์ \"style\" และกำหนดค่ำเป็น \"list-style-type\" ประกอบด้วยรูปแบบ จุดทึบ (disc) วงกลม (circle) สีเ่ หล่ยี ม (square) และไมแ่ สดงหัวขอ้ รำยกำร (none) มรี ูปแบบกำรใช้งำนดงั นี้ HTML5 <!doctype html> <html> <body> <ul style=\"list-style-type:disc;\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style=\"list-style-type:circle;\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style=\"list-style-type:square;\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style=\"list-style-type:none;\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> Result

CHAPTER 3: HTML5 85 รำยกำรแบบเรียงลำดับ สำมำรถกำหนดรูปแบบลำดับ โดยใช้แอตทริบิวต์ \"type\" กำหนดค่ำ เป็นลำดับตัวเลข (หำกไม่ระบุจะแสดงเป็นลำดับตัวเลขอัตโนมัติ) กำหนดค่ำเป็นตัวอักษร \"a\" ลำดับ อักษรตัวพิมพ์เล็ก กำหนดค่ำเป็นตัวอักษร \"A\" ลำดับอักษรตัวพิมพ์ใหญ่ กำหนดค่ำเป็น \"I\" ลำดับเลข โรมันตวั พมิ พ์เล็ก และกำหนดค่ำเปน็ \"I\" ลำดบั เลขโรมนั ตวั พมิ พใ์ หญ่ มรี ูปแบบกำรใชง้ ำนดงั นี้ HTML5 <!doctype html> <html> <body> <ol type=\"a\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type=\"A\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type=\"i\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type=\"I\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Result

86 CHAPTER 3: HTML5 รำยกำรแบบเรียงลำดับ สำมำรถกำหนดลำดับเริ่มต้น โดยใช้แอตทริบิวต์ \"start\" กำหนดค่ำ เป็นตัวเลขลำดบั เร่มิ ตน้ ท่ีตอ้ งกำร มีรปู แบบกำรใชง้ ำนดงั นี้ HTML5 <!doctype html> <html> <body> <ol type=\"1\" start=\"10\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type=\"A\" start=\"10\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Result กำรสร้ำงรำยกำรในรูปแบบรำยกำรหลกั และรำยกำรย่อยได้ โดยใช้อิลิเมนต์ \"<dl>…</dl>\" เป็นอิลิเมนต์หลัก ใช้งำนร่วมกับอิลิเมนต์ \"<dt>…</dt>\" สำหรับกำหนดรำยกำรหลัก และอิลิเมนต์ \"<dd>…</dd>\" สำหรบั กำหนดรำยกำรยอ่ ย มีรปู แบบกำรใช้งำนดังน้ี HTML5 <!doctype html> <html> <body> <dl> <dt>Drink</dt> <dd>- Coffee</dd> <dd>- Tea</dd> <dd>- Milk</dd> <dt>Food</dt> <dd>- Curry</dd> <dd>- Fried</dd> </dl> </body> </html>

CHAPTER 3: HTML5 87 Result 11. HTML Block and Inline Elements คำส่ังสร้ำงบล็อกสำหรับแทรกเนื้อหำ (Block) ลงในเว็บเพจ โดยใช้อิลิเมนต์ \"<div>…</div>\" เป็นอิลิเมนต์หลัก เมื่อใช้งำนอิลิเมนต์ \"<div>\" จะมีผลกระทบต่ออิลิเมนต์อ่ืน ๆ ท่ี อยู่ถัดจำก \"<div>\" โดยอิลิเมนต์อ่ืนจะเร่ิมต้นกำรทำงำนในบรรทัดใหม่เสมอ จึงนิยมใช้ \"<div>\" สำหรับแบ่งเน้ือหำให้เป็นสัดส่วน และคำสั่งกำหนดรูปแบบเนื้อหำในบรรทัด (Inline) โดยใช้อิลิเมนต์ \"<span>…</span>\" เป็นอิลิเมนต์หลัก เม่ือใช้งำนอิลิเมนต์ \"<span>\" จะมีผลเฉพำะตำแหน่งท่ีใช้ คำสั่งเท่ำนั้น จึงนิยมใช้กับข้อควำมบำงส่วนในบรรทัดเท่ำน้ัน ไม่ส่งผลกระทบต่ออิลิเมนต์อื่น ๆ ท่ีอยู่ ถดั จำก \"<span>\" มีรปู แบบกำรใชง้ ำนดงั น้ี HTML5 <!doctype html> <html> <body> <h1>HTML Block</h1> <div>Hello World !!</div><div>Hello HTML !!</div> <p>The DIV element is a block element, and will start on a new line.</p> <p>The \"SPAN\" element is often <span style=\"color:red;\">used as a </span>container for some text.</p> <p>Information science is a field primarily concerned with the <span style=\"font-weight: bold;\">analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, </span> and protection of information</p> </body> </html> Result

88 CHAPTER 3: HTML5 กำรกำหนดรูปแบบให้กับอิลิเมนต์ \"<div>\" สำมำรถใช้งำนร่วมกับแอตทริบิวต์ \"style\" เพื่อ กำหนดคุณสมบัตติ ่ำง ๆ เชน่ จัดแนวเนอ้ื หำ กำหนดเส้นขอบ กำหนดสีพน้ื หลัง เปน็ ต้น มีรปู แบบกำร ใช้งำนดงั นี้ HTML5 <!doctype html> <html> <body> <div style=\"border:1px solid red; text-align:left;\">Hello World</div> <div style=\"border:1px solid red; text-align:right;\">Hello World</div> <div style=\"border:1px solid red; text-align:center;\">Hello World</div> <div style=\"border:1px solid red; text-align:center; background:yellow;\">Hello World</div> <div style=\"border:1px solid red; text-align:justify;\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <div style=\"border:1px solid red;\"> <img src=\"images/banner.png\" width=\"100\" height=\"80\" alt=\"Dragon fruit\"> </div> </body> </html> Result HTML5 ได้ทำกำรยกเลิกแอตทริบิวต์ align สำหรับจัดแนวเนื้อหำภำยในอิลิเมนต์ \"<div>\" เน่อื งจำกสำมำรถจัดแนวเนอื้ หำโดยใชส้ ไตล์ชีตแทนได้ แต่ยงั สำมำรถใชง้ ำนแอตทรบิ ิวตด์ งั กล่ำวไดอ้ ยู่

CHAPTER 3: HTML5 89 12. HTML Line Breaks คำสัง่ แบง่ บรรทัด (Line Breaks) สำหรับกำหนดกำรข้ึนบรรทดั ใหมใ่ ห้กบั ขอ้ ควำม โดยใช้ แท็ก \"<br>\" แทรกในตำแหน่งที่ต้องกำรแบ่งบรรทัดใหม่ สำมำรถแทรกในอิลิเมนต์ท่ีใช้สำหรับแสดง ข้อควำมได้ มีรูปแบบกำรใชง้ ำนดังนี้ HTML5 <!doctype html> <html> <body> <h1>HTML Line Breaks</h1> <p>Information science is a field primarily concerned with the<br>analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p>A.<br>B.<br>C.<br>D.</p> </body> </html> Result 13. HTML Horizontal Rules คำส่ังแทรกเส้นแนวนอน (Horizontal Rules) สำหรับแทรกเส้นตรงแนวนอนเพ่ือคั่น เนื้อหำ โดยใช้แท็ก \"<hr>\" แทรกในตำแหน่งที่ต้องกำรแสดงเส้นแนวนอน หำกเส้นแนวนอนไม่ได้อยู่ ภำยใต้ตำรำงหรืออิลิเมนต์ \"<div>…</div>\" ที่มีกำรกำหนดขนำดควำมกว้ำง เส้นจะมีควำมยำวเต็ม ขอบหน้ำจอเวบ็ เพจ มรี ปู แบบกำรใชง้ ำนดงั น้ี

90 CHAPTER 3: HTML5 HTML5 <!doctype html> <html> <body> <h1>HTML Horizontal Rules</h1> <hr> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <hr> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <hr> </body> </html> Result 14. HTML Iframes คำสั่งแทรกกรอบพื้นที่ (Iframe) สำหรับแทรกเน้ือหำจำกแหล่งอื่นลงในเว็บเพจ ใน รปู แบบกรอบพน้ื ท่ี ดว้ ยวธิ ีกำรระบตุ ำแหน่งหรือลิงก์ โดยใชอ้ ิลเิ มนต์ \"<iframe>…</iframe>\" เป็นอิ ลเิ มนต์หลกั เชน่ แสดงเอกสำร PDF แสดงวิดโี อจำก youTube แสดงแผนทีจ่ ำก Google Map แสดง ข้อควำมจำกโพส Facebook แสดงงำนนำเสนอจำก Slideshare เป็นต้น ใช้งำนร่วมกับแอตทริบิวต์ ประกอบด้วย \"name\" ใช้สำหรับกำหนดช่ือ \"height\" ใช้สำหรับกำหนดขนำดควำมสูง \"witdth\" กำหนดขนำดควำมกว้ำง \"src\" ระบุตำแหน่งเนื้อหำหรือลิงก์ท่ีจะนำมำแสดง และ \"style\" กำหนด รปู แบบเพม่ิ เตมิ ด้วยสไตลช์ ตี มรี ปู แบบกำรใช้งำนดงั น้ี

CHAPTER 3: HTML5 91 HTML5 <!doctype html> <html> <body> <h1>HTML Iframe</h1> <iframe src=\"https://www.youtube.com/embed/mzPxo7Y6JyA\" name=\"Youtube1\" height=\"220\" width=\"310\"></iframe> <iframe src=\"intro-ecommerce.pdf\" name=\"PDF1\" height=\"220\" width=\"310\" style=\"border: thin dotted #F07577;\"></iframe> <iframe src=\"http://www.slideshare.net/slideshow/embed_code/key/Grhh0AJSFa2cPt\" name=\"Slideshare1\" width=\"310\" height=\"220\" style=\"border:1px solid #CCC;\"></iframe> </body> </html> Result 15. HTML Meter & Progress คำสั่งแทรกแถบมิเตอร์ (Miter) ลงในเว็บเพจ โดยใช้อิลิเมนต์ \"<meter></meter>\" และคำส่ังแทรกแถบควำมก้ำวหน้ำ (Progress) โดยใช้อิลิเมนต์ \"<Progress></Progress>\" ซึ่งคำสั่ง มคี วำมสำมำรถในกำรแสดงแถบสีตำมค่ำที่กำหนด สำมำรถนำไปประยุกต์ใช้กบั งำนทำงด้ำนสถิติหรือ ตัวเลขได้ แสดงงำนนำเสนอจำก Slideshare เป็นต้น ใช้งำนร่วมกับแอตทริบิวต์ประกอบด้วย \"high\" ระบุตัวเลขท่ีมีค่ำสงู สุดที่จะให้แถบเปล่ียนสี \"low\" ระบุตัวเลขที่มีค่ำต่ำสุดที่จะให้แถบเปลี่ยนสี \"min\" ระบุค่ำต่ำสุดของช่วงตัวเลข \"max\" ระบุค่ำสูงสุดของชว่ งตัวเลข และ \"value\" ระบุค่ำตัวเลขที่เปน็ ค่ำ จรงิ มีรปู แบบกำรใชง้ ำนดงั น้ี

92 CHAPTER 3: HTML5 HTML5 <!doctype html> <html> <body> <h1>HTML Meter & Progress</h1> <p>A score: <meter min=\"0\" low=\"20\" high=\"90\" max=\"100\" value=\"95\"></meter>95</p> <p>B score: <meter min=\"0\" low=\"20\" high=\"90\" max=\"100\" value=\"50\"></meter>50</p> <p>C score: <meter min=\"0\" low=\"20\" high=\"90\" max=\"100\" value=\"18\"></meter>18</p> <p>Reseach progress: <progress value=\"67\" max=\"100\"></progress>67%</p> </body> </html> Result 16. HTML File Paths กำรกำหนดเส้นทำงไฟล์ (File Paths) เพ่ือให้สำมำรถเข้ำถึงตำแหน่งไฟล์ที่ต้องกำร เช่อื มโยงได้อยำ่ งถกู ต้อง ไฟลท์ ่ีเชอ่ื มโยงสำมำรถใช้งำนไดก้ บั เว็บเพจ หรือแสดงผลผ่ำนเว็บเพจไดอ้ ย่ำง ถูกต้อง เช่น กำรเช่ือมโยงไฟล์เว็บเพจ ไฟล์ภำพ ไฟล์สไตล์ชีต หรือไฟล์ JavaScripts เป็นต้น มี รูปแบบกำรกำหนดเสน้ ทำงดงั ตำรำงที่ 3.2 (W3Schools, 1999b: 1) ตำรำงที่ 3.2 กำรกำหนดเสน้ ทำงของไฟล์ Tag Descriptions <img src=\"picture.png\"> ไฟล์ picture.png จัดเก็บอยใู่ นโฟลเดอร์เดียวกนั กบั ไฟล์ HTML ที่กำลงั ใชง้ ำนอลิ เิ มนต์ <img>

CHAPTER 3: HTML5 93 Tag Descriptions <img src=\"image/picture.png\"> ไฟล์ picture.png จัดเก็บอยู่ในโฟลเดอร์ image โดยโฟลเดอร์ image จะอยู่ภำยใต้โฟลเดอร์เดียวกันกับไฟล์ HTML ท่ีกำลังใช้ งำนอิลิเมนต์ <img> ซ่ึงไฟล์ HTML จะไม่สำมำรถอยู่ภำยใต้ โฟลเดอรอ์ ่นื ได้ <img src=\"../picture.png\"> ไฟล์ picture.png จัดเก็บอยู่ในโฟลเดอร์ที่อยู่ในตำแหน่ง เหนอื กวำ่ โฟลเดอร์ทีจ่ ัดเกบ็ ไฟล์ HTML อยู่ 1 ระดบั โดย ../ คือ ตำแหน่งที่อยู่เหนือกว่ำ 1 ระดับ หำกไฟล์อยู่ในตำแหน่งที่ มำกกว่ำ 1 ระดับ สำมำรถเพ่ิมตำแหน่งได้ เช่น ../../ คือ 2 ระดบั เปน็ ต้น <img src=\"/image/picture.png\"> ไฟล์ picture.png จัดเก็บอยู่ในโฟลเดอร์ image โดยโฟลเดอร์ image จะอยูใ่ นตำแหนง่ เรม่ิ ต้น (root) ของพนื้ ทจ่ี ัดเกบ็ เวบ็ ไซต์ C:\\AppServ\\www\\testweb C:\\ 17. HTML Symbols กำรแทรกสัญลักษณ์ (Symbols) ลงในเว็บเพจ เพื่อใช้แสดงประกอบเนื้อหำให้มีควำม สมบูรณ์ แต่เน่ืองจำกสัญลักษณ์บำงประเภทจะไม่ปรำกฏอยู่บนแป้นพิมพ์ หำกต้องกำรแทรก สัญลักษณ์ลงในเว็บเพจ จะต้องแทรกรหัสของสัญลักษณ์ ซ่ึงอยู่ในรูปแบบของรหัส ASCII ตัวอย่ำง สัญลักษณท์ ี่นยิ มใชง้ ำน ดงั ตำรำงท่ี 3.3 (W3Schools, 1999c: 1)

94 CHAPTER 3: HTML5 ตำรำงท่ี 3.3 สัญลกั ษณ์ใน HTML Char Number Entity Char Number Entity Δ Δ Δ Γ Γ Γ © © © ∀ ∀ ∀ ® ® ® ∂ ∂ ∂ € € € ∃ ∃ ∃ ™ ™ ™ ∅ ∅ ∅ ← ← ← ∇ ∇ ∇ ↑ ↑ ↑ ∈ ∈ ∈ → → → ∉ ∉ ∉ ↓ ↓ ↓ ∋ ∋ &ni; ♠ ♠ &spades; ∏ ∏ ∏ ♣ ♣ &clubs; ∑ ∑ ∑ ♥ ♥ &hearts; ♦ ♦ &diams; HTML5 <!doctype html> <html> <body> <h1>HTML Symbols</h1> <p>♥ ♥ ♦ ♦ ♣ ♣ ♠ ♠</p> <p>∈∏ ∏ ∏ &ni;</p> </body> </html> Result นอกจำกน้ี HTML ยังมีสัญลักษณ์อ่ืน ๆ ให้เลือกใช้งำน ผู้พัฒนำสำมำรถเลือกใช้สัญลักษณ์ เพ่มิ เติมได้จำกเวบ็ ไซต์ https://www.toptal.com/designers/htmlarrows/symbols

CHAPTER 3: HTML5 95 คาสั่งแทรกเสยี งและวิดีโอใน HTML5 คำส่ังแทรกเสียงและวิดีโอ เป็นคำส่ังท่ีพัฒนำขึ้นมำใหม่ใน HTML5 เพ่ือเล่นเสียงหรือวิดีโอ โดยตรง โดยท่ีไม่ต้องติดตั้งส่วนเสริม (Plug-in) ลงในโปรแกรมแสดงผลเว็บเพื่อให้สำมำรถเล่นเสียง หรอื วดิ ีโอบนเวบ็ เพจได้ กำรแทรกเสียงหรือวิดโี อลงในเว็บเพจ จงึ เป็นกำรแทรกเน้ือหำในรูปแบบของ สอ่ื ประสม (Multimedia) มรี ำยละเอียดดงั น้ี 1. Audio คำส่ังแทรกไฟล์เสียง (Audio) ลงในเว็บเพจ โดยใช้อิลิเมนต์ \"<audio>…</audio>\" ใช้ งำนร่วมกับแอตทริบิวต์ \"controls\" ซ่งึ คำส่งั มคี วำมสำมำรถในกำรเลน่ ไฟลเ์ สียงในรปู แบบ MP3 OGG และ WAV และสำมำรถควบคุมกำรเล่นเสียงด้วยแอตทริบิวต์ต่ำง ๆ กำรเล่นเสียงผ่ำนเว็บเพจจึง สำมำรถควบคมุ ไดอ้ ยำ่ งสะดวก มีรูปแบบกำรใช้งำนดงั นี้ (ศภุ ชัย สมพำนชิ , 2556: 161-164) HTML5 <!doctype html> <html> <body> <audio controls> <source src=\"audio/audio_recording.mp3\" type=\"audio/mpeg\"> </audio> </body> </html> Result ตำรำงท่ี 3.4 แอตทรบิ วิ ต์ที่ใช้สำหรบั อิลเิ มนต์ Audio Attribute Value Description autoplay autoplay เลน่ เสียงอตั โนมัตแิ ละเลน่ ทนั ทเี มอ่ื เปดิ เวบ็ เพจ controls controls แสดงแถบเครื่องมือควบคุมเสียง ได้แก่ ปุ่มเล่น/หยุด เวลำกำลังเล่น/เวลำ ทั้งหมด แถบเลือ่ นกำรเลน่ และปมุ่ ปรับระดบั เสียง loop loop เล่นเสยี งแบบวนซ้ำ เมื่อส้ินสดุ เสยี งจะเรม่ิ เลน่ เสยี งใหม่โดยอัตโนมตั ิ muted muted ปดิ เสยี งอัตโนมัติ โดยจะไดย้ นิ เสยี งเมือ่ คลิกทป่ี ุ่มปรับระดบั เสยี ง preload auto, none กำหนดรปู แบบกำรโหลดไฟลเ์ สยี งเมอื่ เปิดเวบ็ เพจ src URL ระบตุ ำแหน่งจัดเกบ็ ไฟลเ์ สียง type audio/ogg ระบปุ ระเภทของไฟลเ์ สยี ง audio/mpeg audio/wav

96 CHAPTER 3: HTML5 2. Video คำสั่งแทรกไฟล์วิดีโอ (Video) ลงในเว็บเพจ โดยใช้อิลิเมนต์ \"<video>…</video>\" ใช้ งำนร่วมกับแอตทริบิวต์ \"controls\" ซึ่งคำสั่งมีควำมสำมำรถในกำรเล่นไฟล์วิดีโอในรูปแบบ MP4 WebM และ Ogg และสำมำรถควบคมุ กำรเล่นวดิ ีโอด้วยแอตทรบิ ิวต์ตำ่ ง ๆ กำรเลน่ วดิ ีโอผำ่ นเว็บเพจ จึงสำมำรถควบคุมได้อยำ่ งสะดวก มรี ปู แบบกำรใชง้ ำนดงั นี้ (ศุภชยั สมพำนชิ , 2556: 152-158) HTML5 <!doctype html> <html> <body> <video width=\"340\" height=\"250\" controls> <source src=\"video/video_recording.mp4\" type=\"video/mp4\"> </video> </body> </html> Result ตำรำงที่ 3.5 แอตทรบิ วิ ต์ที่ใช้สำหรับอลิ ิเมนต์ Video Attribute Value Description autoplay autoplay เล่นวิดีโออัตโนมตั แิ ละเลน่ ทันทเี ม่อื เปิดเวบ็ เพจ controls controls แสดงแถบเคร่ืองมือควบคุมเสียง ได้แก่ ปุ่มเล่น/หยุด เวลำกำลังเล่น/เวลำ ท้งั หมด แถบเลือ่ นกำรเล่น ปุ่มขยำยเต็มหนำ้ จอ และปุ่มปรบั ระดับเสยี ง height pixels กำหนดค่ำควำมสูงของวดิ โี อ loop loop เลน่ วดิ ีโอแบบวนซำ้ เม่อื สนิ้ สดุ วิดโี อจะเรม่ิ เลน่ วดิ ีโอใหมโ่ ดยอัตโนมตั ิ muted muted ปดิ เสยี งวดิ ีโออตั โนมัติ โดยจะไดย้ นิ เสยี งเมื่อคลกิ ที่ปมุ่ ปรับระดับเสียง poster URL ระบุตำแหนง่ จัดเกบ็ ไฟล์ภำพนิ่ง สำหรบั นำมำเป็นภำพหน้ำปก preload auto, none กำหนดรปู แบบกำรโหลดไฟลเ์ สยี งเมอ่ื เปิดเวบ็ เพจ src URL ระบตุ ำแหน่งจดั เก็บไฟล์วิดโี อ type video/mp4 ระบปุ ระเภทของไฟลว์ ิดีโอ video/webm video/ogg width pixels กำหนดคำ่ ควำมกวำ้ งของวิดโี อ

CHAPTER 3: HTML5 97 กำรใช้ภำพน่ิงเป็นภำพเริ่มต้นหรือภำพหน้ำปกให้กับวิดีโอ เพ่ือแสดงเป็นภำพเริ่มต้นขณะท่ี รอเล่นวิดีโอ ซ่ึงทำให้กำรแสดงวิดีโอมีควำมน่ำสนใจมำกยิ่งขึ้น โดยใช้แอตทริบิวต์ \"poster\" และ จะต้องกำหนดขนำดควำมกว้ำงและควำมสูงของภำพน่ิง ให้มีอัตรำส่วนภำพที่เหมำะสมกับขนำดของ วดิ โี อ มรี ปู แบบกำรใชง้ ำนดังน้ี HTML5 <!doctype html> <html> <body> <video width=\"340\" height=\"250\" poster=\"images/video_cover.jpg\" controls> <source src=\"video/video_recording.mp3\" type=\"video/mp4\"> </video> </body> </html> Result กำรควบคมุ ตำแหน่งวดิ โี อในเวบ็ เพจ ผู้ใชส้ ำมำรถกำหนดขนำดและตำแหนง่ ของวิดีโอได้ โดย คลิกท่ีเมนู Picture in picture จำกน้ันทำกำรปรับขนำดหรือย้ำยตำแหน่งในเว็บเพจได้ตำมต้องกำร ดงั ภำพท่ี 3.1 Resize or Move ภำพท่ี 3.1 กำรปรับขนำดหรือยำ้ ยตำแหนง่ วิดีโอ

98 CHAPTER 3: HTML5 อิลิเมนต์เชิงความหมายใน HTML5 อิลิเมนต์เชิงควำมหมำย (Semantic Elements) เป็นอิลิเมนต์ที่ถูกกำหนดข้ึนใหม่ เพื่อใช้ งำนใน HTML5 มีควำมสำมำรถในกำรอธิบำยควำมหมำยของแท็กให้กบั โปรแกรมแสดงผลเว็บรวมถึง ผ้พู ฒั นำ ใหม้ ีควำมเขำ้ ใจในหลักกำรทำงำนได้อย่ำงชดั เจน และมผี ลต่อเครอ่ื งมือคน้ หำข้อมลู (Search Engine) ซ่ึงจะสำมำรถค้นหำและเก็บข้อมูลในเว็บไซต์ได้อย่ำงมีประสิทธิภำพ ส่งผลให้เว็บไซต์อยู่ใน อนั ดบั ตน้ ๆ ของผลลพั ธ์กำรคน้ หำ โดยอิลิเมนต์เชงิ ควำมหมำยจะใชส้ ำหรบั กำหนดโครงสรำ้ งเว็บเพจ แสดงเน้ือหำ และกำหนดตำแหน่งสำหรับแสดงเน้ือหำในเว็บเพจให้มีควำมเป็นระเบียบมำกย่ิงข้ึน (วฤษำย์ รม่ สำยหยุด, 2556: 14-15; W3Schools, 1999d: 1) มรี ำยละเอียดดงั ตำรำงท่ี 3.6 ตำรำงท่ี 3.6 รำยละเอียดของอิลิเมนตเ์ ชงิ ควำมหมำยใน HTML5 Elements Description <article> อลิ เิ มนต์สำหรบั กำหนดเน้ือหำหรือบทควำมหลักลงในเว็บเพจ โดยเน้ือหำอำจประกอบด้วย ขอ้ ควำม ภำพนง่ิ ภำพเคลอ่ื นไหว เสยี ง หรอื วิดโี อ และจัดอยู่ภำยใตส้ ดั สว่ นทีก่ ำหนด <aside> อิลเิ มนต์สำหรบั กำหนดเนอื้ หำท่ีนอกเหนือจำกเน้ือหำหลกั ของเว็บเพจ จะแสดงในตำแหน่ง ด้ำนขวำของเว็บเพจ นิยมแสดงป้ำยโฆษณำ ช่องคน้ หำ หรอื ลิงก์เครือข่ำยสงั คมออนไลน์ <details> อลิ เิ มนต์สำหรบั กำหนดเนอ้ื หำให้สำมำรถซ่อน/แสดง เน้อื หำได้ <figcaption> อิลิเมนต์สำหรับกำหนดคำอธิบำยให้กับภำพประกอบ อยู่ภำยใต้อิลิเมนต์ \"<figure>\" นิยม กำหนดในตำแหนง่ ใตภ้ ำพประกอบ <figure> อิลเิ มนต์สำหรับระบุถงึ ตำแหน่งของภำพประกอบ <footer> อิลเิ มนต์สำหรบั กำหนดเนื้อหำในส่วนท้ำยหรือส่วนลำ่ งสดุ ของเวบ็ เพจ นยิ มใชเ้ ปน็ ตำแหน่ง สำหรับกำหนดลิงก์ เพื่อเชื่อมโยงไปยังเว็บไซต์ท่ีเกี่ยวข้อง หรือแสดงข้อมูลกำรติดต่อ เวบ็ ไซต์ <header> อิลิเมนต์สำหรับกำหนดส่วนหัวของเว็บเพจ จะแสดงในตำแหน่งบนสุดของเว็บเพจ นิยม แสดงภำพ ตรำสญั ลักษณ์ ช่ือเว็บไซต์หรอื คำโปรย ทม่ี คี วำมเกย่ี วข้องกับเว็บไซต์ <main> อิลิเมนตส์ ำหรบั กำหนดเน้ือหำหลกั ของเอกสำร <mark> อลิ เิ มนต์สำหรบั เนน้ ข้อควำมบำงสว่ นด้วยสี เพอื่ แสดงถงึ ควำมสำคัญของขอ้ ควำม <nav> Navigation อิลิเมนต์สำหรับกำหนดตำแหน่งระบบนำทำงหรือลิงก์หลักของเว็บไซต์ เพื่อ เช่ือมโยงไปยงั เวบ็ เพจอนื่ ๆ ภำยในเวบ็ ไซต์ ซงึ่ นยิ มกำหนดในตำแหน่งด้ำนซ้ำยของเว็บเพจ หรอื ตำแหน่งถดั ลงมำจำกส่วนหวั <section> อิลิเมนต์สำหรับกำหนดสัดส่วนเนื้อหำในเว็บเพจท่ีมีควำมเกี่ยวข้องกัน หำกมีเน้ือหำใน ปรมิ ำณมำก สำมำรถแบง่ เปน็ หลำยสัดส่วนต่อ 1 เว็บเพจ <summary> อิลิเมนต์สำหรับกำหนดหัวข้อท่ีอยู่ภำยใต้อิลิเมนต์ \"<details>\" โดยหัวข้อถูกกำหนดให้ สำมำรถคลกิ เพื่อ ซอ่ น/แสดง เนือ้ หำได้ <time> อลิ ิเมนตส์ ำหรับกำหนดวันท่ี หรือเวลำ

CHAPTER 3: HTML5 99 กำรกำหนดโครงสร้ำงหลักของเว็บเพจโดยใช้อิลิเมนต์เชิงควำมหมำย จะแบ่งอิลิเมนต์ตำม ตำแหนง่ เนอื้ หำหลัก ซง่ึ เป็นองค์ประกอบสำคัญของเว็บเพจ ดงั นัน้ เพือ่ ให้สำมำรถเห็นภำพโครงสร้ำง ได้อย่ำงชัดเจน ผู้พัฒนำอำจวำดภำพโครงสร้ำง ก่อนกำรกำหนดโครงสร้ำงด้วยอิลิเมนต์ HTML5 ตัวอย่ำงโครงสร้ำงหลกั ดงั ภำพที่ 3.2 <nav> <header> <aside> <nav> <section> <article> <article> <section> <article> <figure> <figure> <footer> ภำพที่ 3.2 ตวั อย่ำงกำรกำหนดโครงสร้ำงหลกั ของเว็บเพจ ทม่ี ำ: (Joshi, 2014: 1)

100 CHAPTER 3: HTML5 HTML5 <!doctype html> <html> <body> <header> <h1>Information Science</h1> <p>Faculty of Humanities and Social Science, Udon-Thani Rajabhat University</p> </header> <nav> <a href=\"about.html\">ABOUT</a> | <a href=\"pofessor.html\">POFESSOR</a> | <a href=\"course.html\">COURSE</a> | <a href=\"contact.html\">CONTACT</a> </nav> <main> <section> <article> <h1>Information literacy</h1> <p>Information literacy is important for today’s learners, it promotes problem solving approaches and thinking skills – asking questions and seeking answers, finding information, forming opinions, evaluating sources and making decisions fostering successful learners, effective contributors, confident individuals and responsible citizens.</p> </article> </section> <section> <article> <h1>Information Science</h1> <figure> <img src=\"images/is.png\" width=\"800\" height=\"500\" alt=\"Information\" title=\"is udru\"> </figure> <figcaption>Information Science udru.</figcaption> <p>We open at <time>08:00 </time>every morning.</p> </article> </section> <aside> <h2>Featured Courses</h2> <video width=\"300\" height=\"250\" poster=\"images/video_cover.jpg\" controls> <source src=\"video/video_pr.mp3\" type=\"video/mp4\"> </video> </aside> <details> <summary>Contact</summary> <p>64 Thaharn Road, Muang, Udon Thani 41000, Thailand.</p> </details> </main> <footer> <p>Copyright ©: Rachawit Tipsena</p> <p>Contact information: +66883051324</p> </footer> </body> </html>

CHAPTER 3: HTML5 101 Result ผลลัพธ์ของกำรแสดงผลโครงสร้ำงเว็บเพจ จำกกำรใช้งำนอิลิเมนต์เชิงควำมหมำยจะเห็นได้ วำ่ เน้ือหำหรอื ข้อมลู ยังไม่มีควำมเปน็ ระเบยี บและอยูใ่ นตำแหน่งท่ียังไมเ่ หมำะสม เนอ่ื งจำกเปน็ กำรใช้ งำนอลิ เิ มนตเ์ ชิงควำมหมำยในกำรแสดงเนื้อหำเพยี งอยำ่ งเดียว ยังไมม่ ีกำรจดั ตำแหนง่ ใด ๆ ซึ่งกำรจัด ตำแหนง่ ให้มีควำมเหมำะสมและสวยงำมนั้น โดยท่ัวไปจะใชส้ ไตล์ชตี ในกำรกำหนดเค้ำโครง (Layout) ของเว็บเพจ ซ่ึงจะมีรำยละเอียดเพิ่มเติมเกี่ยวกับกำรจัดตำแหน่งเนื้อหำในบทที่ 6 กำรออกแบบ เว็บไซตท์ ่ีตอบสนองกับทุกอุปกรณ์ แตอ่ ยำ่ งไรก็ตำม กำรใช้งำนอิลเิ มนต์เชงิ ควำมหมำยกับเว็บเพจทุก หน้ำ ย่อมเกิดผลดีกับเว็บไซต์ ทั้งทำงด้ำนกำรพัฒนำเว็บไซต์ให้อยู่ในรูปแบบ HTML5 ท่ีถูกต้อง และ ด้ำนของกำรพฒั นำเว็บไซตใ์ ห้เปน็ มิตรตอ่ เคร่ืองมือค้นหำข้อมลู (Search Engine) โดยเฉพำะ Google Search ซึ่งเปน็ เครอื่ งมือคน้ หำข้อมลู บนอินเทอร์เน็ตทไ่ี ดร้ ับควำมนิยมเป็นอยำ่ งยิ่ง

102 CHAPTER 3: HTML5 แทก็ เมทา แท็กเมทำ (Meta Tag) คือ แท็กท่ีใช้เพื่อระบุคำอธิบำยให้กับเว็บเพจ คล้ำยกับกำรอธิบำย ข้อมูลด้วยเมทำดำทำ (Meta Data) ท่ีใช้ในไฟล์งำนหรือกำรจัดกำรทรัพยำกำรของห้องสมุด ซึ่งจะไม่ แสดงผลใด ๆ ออกทำงหน้ำจอเว็บเพจ แต่โปรแกรมแสดงผลเว็บจะมีกำรอ่ำนคำส่ังและประมวลผล ตำมคำอธิบำยท่ีกำหนด โดยแท็กเมทำ \"<mata>\" จะต้องประกำศให้อยู่ภำยใต้อิลิเมนต์ \"<head>\" เท่ำน้ัน ซึ่งแท็กเมทำจะช่วยให้โปรแกรมแสดงผลเว็บสำมำรถเข้ำใจรำยละเอียดต่ำง ๆ ของเว็บเพจได้ อยำ่ งมีประสทิ ธิภำพ เชน่ รูปแบบอักขระ คำสำคัญ คำอธบิ ำยเวบ็ เพจ เปน็ ตน้ นอกจำกนี้ กำรกำหนด แท็กเมทำ ยังมีผลต่อเคร่ืองมือค้นหำข้อมูล (Search Engine) ออนไลน์ ซ่ึงจะช่วยให้เครื่องมือค้นหำ ข้อมูลเข้ำใจถึงรำยละเอยี ดตำ่ ง ๆ ของเวบ็ เพจ โดยเฉพำะคำสำคัญและคำอธบิ ำยเวบ็ เพจ สง่ ผลใหเ้ วบ็ เพจทใ่ี ช้แท็กเมทำ ถกู ค้นพบเปน็ อันดบั ตน้ ๆ ของเครอ่ื งมือค้นหำขอ้ มลู ออนไลน์ กำรประกำศแท็กเมทำ จะต้องใช้งำนร่วมกับแอตทริบิวต์ ประกอบด้วย \"name\" ใช้สำหรับ กำหนดช่ือ \"content\" ใช้สำหรับกำหนดรำยละเอียดหรือคำอธิบำย \"charset\" ใช้สำหรับกำหนด รูปแบบอักขระ \"http-equiv\" ใช้สำหรับกำหนดกำรตอบสนองของโปรโตคอล http มีรูปแบบกำรใช้ งำนดงั น้ี Example <!doctype html> <html> <head> <meta name=\"keywords\" content=\"information, science, udru\"> </head> <body> … </body> </html> แท็กเมทำสำหรับกำหนดรูปแบบอักขระ โดยกำหนดแอตทริบิวต์ \"charset\" และกำหนดค่ำ เป็นรปู แบบอกั ขระ มตี วั อย่ำงดังนี้ Example <meta charset=\"UTF-8\"> แท็กเมทำสำหรับกำหนดคำสำคัญ โดยกำหนดแอตทริบิวต์ \"name\" กำหนดค่ำเป็น \"keywords\" และกำหนดแอตทริบิวต์ \"content\" กำหนดค่ำเป็นรำยกำรคำสำคัญ โดยคั่นด้วย เครอื่ งหมำยจลุ ภำคหรอื คอมมำ่ (,) มีตวั อย่ำงดังน้ี Example <meta name=\"keywords\" content=\"html5, css, website, webpage, design\">

CHAPTER 3: HTML5 103 แท็กเมทำสำหรับกำหนดคำอธิบำย โดยกำหนดแอตทริบิวต์ \"name\" กำหนดค่ำเป็น \"description\" และกำหนดแอตทรบิ ิวต์ \"content\" กำหนดค่ำเปน็ คำอธิบำยพอสังเขป มตี ัวอย่ำงดังน้ี Example <meta name=\"description\" content=\"Information Science Udon-Thani Rajabhat University\"> แท็กเมทำสำหรับระบุชื่อเจ้ำของเว็บไซต์ โดยกำหนดแอตทริบิวต์ \"name\" กำหนดค่ำเป็น \"author\" และกำหนดแอตทรบิ ิวต์ \"content\" กำหนดค่ำเป็นชอื่ เจ้ำของเวบ็ ไซต์ มตี ัวอย่ำงดงั นี้ Example <meta name=\"author\" content=\"Rachawit Tipsena\"> แท็กเมทำสำหรับระบุเครื่องมือที่ใช้สร้ำงเว็บเพจ ซึ่งเป็นเคร่ืองมือช่วยสร้ำง ผู้พัฒนำไม่ได้ เขียนโค้ดเอง โดยกำหนดแอตทริบิวต์ \"name\" กำหนดค่ำเป็น \"generator\" และกำหนดแอตทริบิวต์ \"content\" กำหนดค่ำเปน็ ชื่อโปรแกรมหรอื ซอฟต์แวรท์ ่ีใชส้ ร้ำงเวบ็ เพจ มตี ัวอย่ำงดงั นี้ Example <meta name=\"generator\" content=\"Adobe Dreamweaver CC\"> แท็กเมทำสำหรับฟื้นฟู (Refresh) หรือเปล่ียนเส้นทำง (Redirect) เว็บเพจอัตโนมัติ โดย กำหนดแอตทริบิวต์ \"http-equiv\" กำหนดค่ำเป็น \"refresh\" และกำหนดแอตทริบิวต์ \"content\" กำหนดค่ำเป็นระยะเวลำท่ีจะให้ Refresh เว็บเพจหน้ำเดิม มีหน่วยเป็นวินำที และกำหนด URL ปลำยทำง สำหรบั กำร Redirect ไปยงั เว็บเพจอ่ืนหรือเวบ็ ไซต์อ่นื มตี วั อย่ำงดังน้ี Example <meta http-equiv=\"refresh\" content=\"30\"> Example <meta http-equiv=\"refresh\" content=\"5; URL=http://is.udru.ac.th\"> แท็กเมทำสำหรับกำหนดให้หุ่นยนต์ (Robots) เข้ำมำเก็บข้อมูลในเว็บไซต์ นิยมกำหนดใน หน้ำแรก (index) ของเวบ็ ไซต์ โดยกำหนดแอตทริบวิ ต์ \"name\" กำหนดค่ำเปน็ \"robots\" และกำหนด แอตทริบิวต์ \"content\" กำหนดค่ำเป็น \"index, follow\" มตี วั อย่ำงดังนี้ Example <meta name=\"robots\" content=\"index, follow\">

104 CHAPTER 3: HTML5 เครอ่ื งมอื สร้างและบนั ทึกไฟล์ HTML5 เครื่องมือสำหรับสร้ำงและบันทึกไฟล์ HTML5 จะต้องเป็นเครื่องมือท่ีมีควำมสำมำรถในกำร พิมพ์คำส่ัง (Code) ท่ีอยู่ในรูปแบบไวยำกรณ์ (Syntax) ของภำษำคอมพิวเตอร์ สำมำรถประมวลผล และบันทึกไฟล์ในรูปแบบต่ำง ๆ เพ่ือนำไปแสดงผลหรือทำงำนผ่ำนโปรแกรมแสดงผลเว็บ โดย โปรแกรมที่นิยมใช้เขียนคำส่ัง HTML5 และสำมำรถรองรับกำรเขียนภำษำคอมพิวเตอร์ได้หลำย ประเภท มีดังน้ี 1. Notepad โปรแกรม Notepad เป็นโปรแกรมประเภทสร้ำงและแก้ไขข้อควำม (Text Editor) เป็น โปรแกรมท่ีติดต้ังมำพร้อมกับระบบปฏิบัติกำรวินโดวส์ (Windows) ผู้ใช้จึงไม่จำเป็นต้องดำวน์โหลด หรือติดต้ังโปรแกรมเพ่ิมเติม มีควำมสำมำรถในกำรพิมพ์ข้อควำม รวมถึงกำรพิมพ์คำส่ังสำหรับสร้ำง เว็บเพจ เพ่ือนำไปแสดงผลผ่ำนโปรแกรมแสดงผลเว็บ สำมำรถเปิดใช้งำนได้จำกเมนู Start > All Apps > Windows Accessories > Notepad หรืออำจใช้วิธีกำรสืบค้นโปรแกรมจำกเมนู Search ในแถบ Taskbar ของระบบปฏิบัติกำรวินโดวส์ โดยสืบค้นคำว่ำ \"Notepad\" เม่ือระบบแสดง สัญลักษณ์และชื่อโปรแกรม ผู้ใช้สำมำรถเปิดใชง้ ำนโปรแกรมได้ทันที ด้วยคุณสมบัติของโปรแกรมท่ีมี ฟังก์ชันกำรทำงำนไม่ซับซ้อน เน้นเฉพำะกำรพิมพ์ข้อควำม จึงสำมำรถประมวลผลคำสั่งและบันทึก ข้อมูลได้อย่ำงรวดเร็ว โดยวิธีใช้งำนโปรแกรม หลังจำกเปิดโปรแกรมเรียบร้อยแล้ว ผู้ใช้สำมำรถพิมพ์ ขอ้ ควำมหรือคำส่งั ตำมรูปแบบไวยำกรณข์ อง HTML5 ไดท้ นั ที ตัวอย่ำงดังภำพท่ี 3.3 ภำพที่ 3.3 หน้ำจอโปรแกรม Notepad ทีม่ ำ: (Microsoft, 2018)

CHAPTER 3: HTML5 105 กำรต้ังค่ำรูปแบบตัวอักษรในโปรแกรม ให้คลิกเลือกเมนู Format > Font จำกน้ัน ทำกำร กำหนดรูปแบบตัวอักษรตำมต้องกำร เช่น กำรกำหนดลักษณะหรือขนำดตัวอักษร เป็นต้น ส่วนกำร บันทึกไฟล์เอกสำร ให้คลิกเลือกเมนู File > Save As... จำกนั้น ทำกำรกำหนดช่ือไฟล์และกำหนด รูปแบบของไฟล์ที่จะบันทึก โดยสำมำรถระบุนำมสกุลของรูปแบบไฟล์ท่ีต้องกำร ต่อท้ำยช่ือไฟล์ได้ ทันที เช่น index.html index.php เป็นต้น หำกไม่ระบุนำมสกุลไฟล์ ไฟล์ที่ได้จะอยู่ในรูปแบบของ ไฟลเ์ อกสำรขอ้ ควำมปกติ มนี ำมสกลุ เปน็ .txt ตัวอยำ่ งดังภำพที่ 3.4 กำหนดรปู แบบตัวอกั ษร กำหนดช่อื ไฟล์และนำมสกลุ ไฟล์ ภำพท่ี 3.4 กำรตัง้ ค่ำรูปแบบตัวอกั ษรและกำรบันทึกไฟล์ในโปรแกรม Notepad ทม่ี ำ: (รำชวิทย์ ทพิ ยเ์ สนำ, 2560) 2. ATOM โปรแกรม ATOM เป็นโปรแกรมประเภทสร้ำงและแก้ไขข้อควำม (Text Editor) พัฒนำ โดยบริษัท GitHub ซึ่งเป็นบริษัทท่ีให้บริกำรทำงด้ำนพื้นที่จัดเก็บข้อมูลบนอินเทอร์เน็ต โดย ATOM เป็นโปรแกรมที่แจกจ่ำยเพ่ือใช้งำนโดยไม่มีค่ำใช้จ่ำย (Open Source) มีควำมสำมำรถในกำรเขียน คำสั่งภำษำทำงคอมพิวเตอร์ได้หลำกหลำยภำษำ เมื่อพิมพ์คำส่ังต่ำง ๆ โปรแกรมจะเน้นคำสั่งด้วยสี เพอ่ื ใหผ้ พู้ ัฒนำเห็นโครงสร้ำงกำรทำงำนได้ชดั เจน และมีฟงั กช์ นั กำรทำงำนเพ่ืออำนวยควำมสะดวกใน กำรเขียนคำส่ังอีกมำกมำย จึงเป็นโปรแกรมท่ีสำมำรถนำมำใช้เขียนคำส่ังสำหรับพัฒนำเว็บไซต์ได้ อย่ำงมีประสิทธิภำพ โดยสำมำรถดำวนโ์ หลดโปรแกรมได้จำกเว็บไซต์ https://atom.io และสำมำรถ ติดตัง้ โปรแกรมลงเครือ่ งคอมพิวเตอร์ได้ทนั ที ดงั ภำพท่ี 3.5

106 CHAPTER 3: HTML5 เมนสู ำหรับดำวน์โหลด หน้ำจอเริม่ ต้นของโปรแกรม ภำพที่ 3.5 กำรดำวน์โหลดโปรแกรม ATOM และหนำ้ จอเร่ิมต้นโปรแกรม ทม่ี ำ: (GitHub, 2018) 2.1 การกาหนดโฟลเดอรส์ าหรับจัดเกบ็ ไฟล์ กำรกำหนดโฟลเดอร์สำหรับจัดเก็บไฟล์ เป็นข้ันตอนแรกของกำรเริ่มต้นกำรทำงำน โดยผู้ใชจ้ ะต้องสรำ้ งโฟลเดอรส์ ำหรบั จัดเก็บไฟลเ์ อกสำรเว็บหรือไฟลเ์ อกสำรอ่นื ๆ ไว้ล่วงหนำ้ จำกนน้ั คลิกเลือกเมนู Open a Project > แล้วทำกำรเลือกโฟลเดอร์ท่ีเตรียมไว้ โปรแกรมจะแสดงโฟลเดอร์ ท่ีใช้เป็นโฟลเดอร์หลักสำหรบั จัดเก็บไฟล์เวบ็ ไซต์ ซ่ึงจะช่วยอำนวยควำมสะดวกในกำรค้นหำหรือเปิด ไฟล์เอกสำรต่ำง ๆ ให้มีควำมรวดเร็วย่ิงขึ้น และเม่ือมีกำรบันทึกไฟล์ใหม่ โปรแกรมจะกำหนด โฟลเดอร์ Project เปน็ โฟลเดอรเ์ ริม่ ต้นในกำรบันทกึ ตวั อยำ่ งดังภำพท่ี 3.6

CHAPTER 3: HTML5 107 แสดงโฟลเดอร์ Project แสดงรูปแบบไฟลท์ ก่ี ำลงั เปดิ ใชง้ ำน ภำพท่ี 3.6 กำรกำหนดโฟลเดอร์สำหรบั จดั เก็บไฟล์ ทมี่ ำ: (รำชวิทย์ ทพิ ยเ์ สนำ, 2560)

108 CHAPTER 3: HTML5 2.2 การสร้างไฟล์เอกสารใหม่ กำรสร้ำงไฟล์เอกสำรใหม่ (New File) เป็นกำรสร้ำงเอกสำรเปล่ำสำหรับใช้เป็นพ้ืนที่ ในกำรพิมพ์คำส่ังเพื่อสร้ำงเอกสำรเว็บ โดยคลิกท่ีเมนู File > New File โปรแกรมจะแสดงหน้ำต่ำง เอกสำรเปล่ำสำหรับพิมพ์คำสั่ง หำกยังไม่มีกำรบันทึกไฟล์ คำส่ังต่ำง ๆ จะยังไม่ถูกเน้นคำสั่งด้วยสี เม่ือทำกำรบันทึกไฟล์และกำหนดรูปแบบของไฟล์ คำส่ังจะถูกเน้นด้วยสี ส่งผลให้กำรทำงำนสะดวก มำกยิง่ ขึ้น ดังน้ัน ผใู้ ชค้ วรทำกำรบนั ทึกไฟลก์ ่อนเรม่ิ ต้นกำรทำงำนทุกครงั้ ตัวอยำ่ งดงั ภำพที่ 3.7 เอกสำรเปล่ำ ก่อนบนั ทกึ ไฟล์ หลังบันทกึ ไฟล์ ภำพที่ 3.7 กำรสรำ้ งไฟล์งำนใหม่ ทีม่ ำ: (รำชวทิ ย์ ทิพย์เสนำ, 2560)

CHAPTER 3: HTML5 109 2.3 การตั้งคา่ โปรแกรม กำรตั้งค่ำกำรทำงำนส่วนต่ำง ๆ ของโปรแกรม ATOM เพ่ือให้เหมำะสมกับลักษณะ กำรใช้งำน เช่น กำรเปลี่ยนชุดรูปแบบโปรแกรม (Theme) กำรปรับขนำดตัวอักษรของคำสั่ง เป็นต้น โดยคลิกท่ีเมนู File > Setting จำกน้ันทำกำรเลือกเมนูทำงด้ำนซ้ำยของหน้ำจอ แล้วต้ังค่ำตำมควำม เหมำะสม ตัวอยำ่ งดงั ภำพที่ 3.8 ภำพที่ 3.8 ตัวอย่ำงกำรตัง้ คำ่ ขนำดตวั อักษรของคำสั่ง ท่ีมำ: (รำชวทิ ย์ ทพิ ยเ์ สนำ, 2560) สรปุ กำรพัฒนำเวบ็ ไซตด์ ้วย HTML5 ถือเปน็ พ้ืนฐำนของกำรพฒั นำเว็บไซต์ด้วยภำษำคอมพวิ เตอร์ จึงเรียกว่ำภำษำมำร์คอัพ (Markup Language) ซึ่งเป็นจุดเร่ิมต้นเพื่อนำสู่กำรพัฒนำเว็บไซต์ด้วย ภำษำอ่ืน ๆ ท่ีมีควำมสำมำรถในกำรจัดกำรสำรสนเทศเพ่ิมมำกยิ่งขึ้น ดังน้ัน ผู้พัฒนำจะต้องศึกษำ รปู แบบโครงสรำ้ งของ HTML5 ให้เกดิ ควำมเข้ำใจ รวมถึงศกึ ษำควำมสำมำรถของคำส่ังและกำรเขียน คำสั่งอย่ำงถูกต้อง ตำมหลักไวยำกรณ์ของ HTML5 ซ่ึงบำงคำสั่งอำจมีรูปแบบกำรเขียนแตกต่ำงจำก HTML รุ่นก่อน และควรศึกษำเคร่ืองมือที่ใช้สำหรับเขียนคำส่ัง เพื่อเพ่ิมประสิทธิภำพของกำรพัฒนำ เว็บไซต์ และประกำรสำคัญ ผู้พัฒนำต้องทดลองเขียนคำสั่งต่ำง ๆ และทดสอบกำรแสดงผลผ่ำน โปรแกรมแสดงผลเว็บ เพื่อให้เห็นถึงรูปแบบกำรแสดงผลจริง หำกเกิดข้อผิดพลำดในกำรเขียนคำสั่ง ควรศึกษำข้อผิดพลำดท่ีเกิดข้ึนอย่ำงละเอียด เพ่ือนำไปสู่กำรปรับปรุงให้มีควำมถูกต้อง จึงจะช่วยให้ ผพู้ ฒั นำมีควำมชำนำญในกำรพฒั นำเว็บไซต์ด้วย HTML5

110 CHAPTER 3: HTML5

เอกสารอ้างองิ กรวี ธุ อศั วคุปตานนท.์ (2556). เรยี นรูเ้ ทคนคิ และพัฒนาเวบ็ ไซต์ด้วย HTML5. กรงุ เทพฯ: เนต็ ดีไซน์ พับลชิ ชง่ิ . วฤษาย์ รม่ สายหยดุ . (2556). พฒั นาเว็บไซต์ดว้ ย HTML5 ฉบับมืออาชพี . กรุงเทพฯ: ซเี อ็ด ยูเคชั่น. ศภุ ชยั สมพานิช. (2556). Basic HTML5 with CSS3 & jQuery. นนทบุรี: ไอดีซฯี . GitHub. (2018). ATOM. [Computer Software]. San Francisco, California, USA: GitHub. Joshi, B. (2014). Understanding the Proper Way to Lay Out a Page with HTML5. Retrieved May 10, 2017, from https://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a- page-with-html5.html. Microsoft. (2018). Microsoft Notepad. [Computer Software]. Redmond, Washington, USA: Microsoft. W3Schools. (1999a). HTML Introduction. Retrieved January 22, 2016, from https://www.w3schools.com/html/html_intro.asp. _______. (1999b). HTML File Paths. Retrieved January 22, 2016, from https://www.w3schools.com/html/html_filepaths.asp. _______. (1999c). HTML Symbols. Retrieved January 23, 2016, from https://www.w3schools.com/html/html_symbols.asp. _______. (1999d). HTML5 Semantic Elements. Retrieved January 22, 2016, from https://www.w3schools.com/html/html5_semantic_elements.asp.

บทที่ 4 การจดั รูปแบบเว็บเพจดว้ ย CSS3 การจัดรูปแบบเว็บเพจด้วยคาส่ังใน HTML5 อาจยังมีข้อจากัดหลายประการต่อการ จัดรูปแบบเว็บเพจ เนื่องจากความสามารถในการจัดรูปแบบของ HTML5 ทาได้เพียงกาหนดสี ข้อความ กาหนดสีพ้ืนหลัง กาหนดขนาดภาพประกอบ และตกแต่งเว็บเพจได้ในระดับพื้นฐานเท่านนั้ จึงมีการพัฒนาภาษาสไตล์ชีต (Style Sheet Language) ซ่ึงเป็นภาษาที่ใช้สาหรับจัดรูปแบบการ แสดงผลและตกแต่งเอกสารเว็บโดยเฉพาะ โดยภาษาสไตล์ชีตที่นิยมนามาใช้ในการจัดรูปแบบและ ตกแต่งเว็บเพจ คือ CSS (Cascading Style Sheets) มีความสามารถในการจัดรูปแบบและควบคุม การแสดงผลของเว็บเพจได้เป็นอย่างดี เป็นคาส่ังท่ีมีความสามารถมากกว่าแท็กใน HTML5 เช่น การ กาหนดเค้าโครงของเว็บเพจ การจัดตาแหน่งวัตถุ การกาหนดแสงเงาให้กับวัตถุ การกาหนดเส้นขอบ รูปแบบต่าง ๆ เป็นต้น CSS จึงมีความสาคัญต่อการออกแบบและพัฒนาเว็บไซต์เป็นอย่างย่ิง โดย ปัจจุบันมีการพัฒนา CSS ถึงเวอร์ชัน 3 หรือ CSS3 ซ่ึงเป็นการพัฒนาเพ่ือใช้งานร่วมกับ HTML5 โดยเฉพาะ จึงมีการยกเลิกอิลิเมนต์และแอตทริบิวต์บางส่วนใน HTML4.01 เพื่อใช้งานคุณสมบัติของ CSS3 แทน เน้ือหาในบทนี้ จะอธิบายถึงรูปแบบการเขียน CSS3 และการใช้งานคุณสมบัติต่าง ๆ ใน การควบคมุ การแสดงผลสว่ นต่าง ๆ ของเวบ็ เพจ พรอ้ มกบั แสดงตัวอย่างผลลพั ธจ์ ากการใช้งาน CSS3 มาตรฐานของ CSS มาตรฐานของ CSS ถูกกาหนดโดยองค์กร W3C (World Wide Web Consortium) ซึ่งเป็น องค์กรระหว่างประเทศที่ทางานด้านการพัฒนาเทคโนโลยีเวบ็ ทาหน้าท่ีกาหนดมาตรฐานใหก้ ับภาษา ท่ีใช้ในการพัฒนาเว็บ ซึ่งรวมถึงภาษาสไตล์ชีต CSS และยังทาหน้าที่ตรวจสอบมาตรฐานของการ พัฒนาเว็บไซต์เพื่อให้อยู่ในมาตรฐานเดียวกัน โดยมีรายละเอียดมาตรฐานของ CSS ดังนี้ (สุรเชษฐ์ วงศช์ ัยพรพงษ์, 2549: 6) 1. CSS1 (Cascading Style Sheets Level 1) การประกาศใช้ CSS อย่างเป็นทางการ ซึ่งถือเป็นมาตรฐานแรกของ CSS กาหนดขึ้นเม่ือ ค.ศ. 1996 เพื่อใช้สาหรับจัดรูปแบบเว็บเพจโดยเฉพาะ มีความสามารถในการกาหนดคุณสมบัติ พ้ืนฐานให้กับเว็บเพจ เช่น กาหนดแบบอักษร (Font) กาหนดสีอักษร (Color) การจัดแนวข้อความ (Alignment) การเว้นระยะขอบ (Margin) เป็นต้น

114 CHAPTER 4: CSS3 2. CSS2 (Cascading Style Sheets Level 2) มาตรฐานของ CSS ทีก่ าหนดขึ้นเมือ่ ปี ค.ศ. 1998 เปน็ การเพิม่ ขีดความสามารถของ CSS1 ในการจัดตาแหน่งของวัตถุ (Object) ด้วยคุณสมบัติ Float และ Position โดยใน CSS2 ได้มีการ ปรับปรุงขอ้ ผิดพลาดต่าง ๆ รวมถงึ การปรับปรุงข้อกาหนดของโปรแกรมแสดงผลเว็บ จงึ พัฒนาข้ึนเป็น มาตรฐาน CSS2.1 ในเวลาตอ่ มา 3. CSS3 (Cascading Style Sheets Level 3) มาตรฐานของ CSS ท่กี าหนดข้ึนเมื่อปี ค.ศ. 2006 เป็นการเพมิ่ ความสามารถในการพัฒนา เว็บเพจให้สามารถแสดงผลได้รวดเร็วมากย่ิงข้นึ การกาหนดคุณสมบัติถูกแบง่ ออกเปน็ สว่ น (Module) และมีคุณลักษณะใหม่เพิ่มข้ึนมา เช่น Border Radius, Border Images, Box Shadow, Multi- Column Layout, Attribute Selectors เป็นตน้ ซง่ึ ปัจจบุ นั โปรแกรมแสดงผลเวบ็ (Web Browser) ส่วนใหญ่ รองรับการแสดงผลด้วยมาตรฐาน CSS3 ที่ใช้งานร่วมกับ HTML5 ได้อย่างมีประสิทธิภาพ ดงั ภาพที่ 4.1 ภาพท่ี 4.1 ความสามารถของ CSS ในแต่ละมาตรฐาน ที่มา: (Krauss, 2015: 1) ท้ังน้ี ผู้ใช้สามารถตรวจสอบความถูกต้องของภาษาที่ใช้ในการพัฒนาเว็บไซต์ตามมาตรฐาน ของ W3C ไดจ้ ากเวบ็ ไซต์ https://validator.w3.org

CHAPTER 4: CSS3 115 รปู แบบการเขียน CSS3 รูปแบบการเขียน CSS3 (CSS3 Syntax) คอื รปู แบบการประกาศใช้งานคาสัง่ สไตล์ชีต CSS3 ตามมาตรฐานของ W3C ประกอบด้วย 2 ส่วนหลัก ได้แก่ Selector คือ ข้อความที่ใช้เป็นคาสั่งอ้างอิงเม่ือเรียกใช้งานสไตล์ชีตใน HTML5 โดย Selector จะถูกกาหนดด้วย ชื่อของอิลิเมนต์ ชื่อของแท็ก แอตทริบิวต์ เครื่องหมายต่าง ๆ และเป็น ขอ้ ความท่ีกาหนดข้นึ เอง ไดแ้ ก่ คลาส (Class) และไอดี (ID) Declaration คือ การประกาศคุณสมบัติ (Property) และการกาหนดค่า (Value) ให้กับ คุณสมบัติ เป็นคาส่ังท่ีอยู่ภายใต้ข้อกาหนดของ CSS3 โดยการประกาศคุณสมบัติและกาหนดค่า จะตอ้ งอย่ภู ายในวงเลบ็ ปกี กา {...} และแบง่ ส่วนระหว่างคุณสมบตั ิกบั คา่ ด้วยเครื่องหมาย colon \":\" การกาหนด Selector และ Declaration มีรูปแบบการเขียน ดังน้ี (พิรพร หมุนสนิท และ อจั จิมา เลยี้ งอยู่, 2553: 53-62) Selector Declaration Syntax selector {property: value; property: value; …} Example h1 {color: blue; font-size: 20px; font-weight: blod;} จากตวั อย่างของการเขียนไวยากรณ์ ประกอบด้วย Selector และ Declaration ดังน้ี Selector คอื h1 Declaration คือ color: blue; font-size: 20px; font-weight: blod; Property ไดแ้ ก่ color font-size และ font-weight Value ไดแ้ ก่ blue 20px และ blod ในการกาหนด Selector สามารถกาหนดคุณสมบัติได้มากกว่า 1 คุณสมบัติ ขึ้นอยู่กับ รูปแบบท่ีต้องการนาไปใช้งาน โดยใช้เครื่องหมาย Semi-Colon \";\" เป็นตัวแบ่งระหว่างคุณสมบัติ ทั้งนี้ การกาหนด Selectors มีวิธีการกาหนดหลายรูปแบบ ซึ่งแต่ละรูปแบบจะได้ผลลัพธ์ท่ีแตกต่าง กนั มีรปู แบบการกาหนด Selector ดงั นี้

116 CHAPTER 4: CSS3 การเรยี กใชง้ าน CSS3 การเรียกใช้งาน CSS3 เป็นการเรียกใช้งานรูปแบบการแสดงผลเว็บเพจ ที่กาหนดรูปแบบ ด้วยสไตลช์ ีต โดยมวี ธิ กี ารเรียกใช้งาน ได้แก่ การกาหนดสไตลช์ ีตไวใ้ นอิลิเมนตห์ รือแท็ก HTML5 การ กาหนดสไตล์ชีตในไฟล์ HTML5 และการเรียกใช้งานสไตล์ชีตจากไฟล์นามสกุล .css ซ่ึงเป็นไฟล์ สไตล์ชีตที่สร้างและแยกออกจากไฟล์ HTML5 หรืออาจเรียกใช้งานท้ัง 3 วิธีการ ข้ึนอยู่กับความ เหมาะสมของการใชง้ านสไตลช์ ตี มรี ายละเอียดดังน้ี 1. Inline Style การประกาศใช้งานสไตล์ชีตในอิลิเมนต์หรือแท็กของ HTML5 โดยการเพ่ิมแอตทริบิวต์ \"Style\" ลงในอิลิเมนต์ท่ีต้องการ เหมาะสาหรับการใชง้ านสไตล์ชีตเฉพาะตาแหน่ง และมีคุณสมบัติไม่ มาก ซึ่งสามารถเรียกใช้งานได้อย่างรวดเร็ว แต่ไม่เหมาะกับการกาหนดสไตล์ชีตให้กับอิลิเมนต์ในเวบ็ เพจจานวนมาก ซ่งึ อาจตอ้ งใชเ้ วลาในการแก้ไขทกุ อลิ เิ มนต์ มีรูปแบบการเรียนใช้งาน ดงั นี้ Syntax <tag style=\"property: value;\">…</tag> HTML5 <!doctype html> <html> <body> <h1 style=\"font-size: 30px; color: red;\">Inline Style</h1> <p style=\"color: blue;\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p style=\"color: orange;\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result

CHAPTER 4: CSS3 117 2. Internal Style Sheet การประกาศใช้งานสไตลช์ ตี ในเอกสาร HTML5 โดยใช้งานอิลิเมนต์ \"<style>…</style>\" นิยมกาหนดให้อยู่ภายใต้แท็ก \"<head>…</head>\" เหมาะสาหรับการใช้งานสไตล์ชีตท่ีมีรูปแบบ เฉพาะเพื่อใช้งานในเว็บเพจโดยตรง ซ่ึงไม่จาเป็นต้องกาหนดสไตล์ชตี ขึ้นใหม่ให้กับทุกอิลิเมนต์ หรือมี การกาหนดคุณสมบัติจานวนมาก ซ่ึงไม่เหมาะกับการกาหนดแบบ Inline Style แต่การกาหนด สไตล์ชตี ในลกั ษณะน้ี จะไมส่ ามารถนาสไตล์ชีตไปใช้กับเวบ็ เพจอืน่ ได้ จะใชไ้ ดเ้ ฉพาะในเว็บเพจท่ีมีการ กาหนดสไตลช์ ตี เท่าน้ัน มรี ูปแบบการเรียนใชง้ าน ดงั น้ี Syntax <head> <style> selector {property: value; property: value; …} … </style> </head> HTML5 <!doctype html> <html> <head> <style> body {background-color: aliceblue;} h1 {font-size: 22px; color: red;} p {font-size: 16px; color: gray;} </style> </head> <body> <h1>Internal Style Sheet</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result

118 CHAPTER 4: CSS3 3. External Style Sheet การสร้างไฟล์เอกสารสไตล์ชีตแยกออกจากไฟล์เอกสาร HTML5 โดยไฟล์สไตล์ชีตจะมี รูปแบบนามสกุล \".css\" โดยใช้อิลิเมนต์ \"<link>\" หรือใช้คาสั่ง \"@import\" เป็นตัวเช่ือมโยงไฟล์ เอกสารสไตล์ชีตมายังไฟล์เอกสาร HTML5 และกาหนดให้อยู่ภายใต้แท็ก \"<head>…</head>\" เสมอ เหมาะสาหรบั การนาสไตลช์ ีตทส่ี ร้างข้นึ ไปใชง้ านกบั เอกสาร HTML5 มากกว่า 1 เอกสาร เมือ่ มี การแกไ้ ขสไตล์ชีตจะแก้ไขเพยี งไฟล์เดียว รปู แบบในเวบ็ เพจท่ีเรยี กใช้ไฟล์สไตล์ชีตจะเปลยี่ นแปลงตาม ไปด้วย มรี ูปแบบการเรยี นใชง้ าน ดงั นี้ Syntax selector {property: value; property: value; …} Example /* css file: mystyle.css */ body {background-color: aliceblue;} h1 {font-size: 22px; color: red;} h2 {font-size: 18px; color: firebrick;} p {font-size: 16px; color: gray;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>External Style Sheet</h1> <h2>Cascading Style Sheets 3</h2> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result

CHAPTER 4: CSS3 119 ประเภทของ Selectors Selector แต่ละประเภท จะมีวิธีการกาหนดและการอ้างอิงท่ีแตกต่างกัน โดยวัตถุประสงค์ ของการกาหนด Selector แต่ละประเภท ข้ึนอยู่กับรูปแบบของการนาสไตล์ชีตไปใช้งาน ซึ่งจะต้อง กาหนดประเภทของ Selector ใหถ้ ูกต้องและเหมาะสม มรี ายละเอยี ดของ Selectors แต่ละประเภท ดังน้ี 1. Class Selector การกาหนด Selector ในรูปแบบของคลาส (Class) เป็นการกาหนดรูปแบบด้วยสไตล์ชีต เพอ่ื ให้อิลิเมนต์หรอื แท็กใน HTML5 สามารถเรียกใชง้ านรปู แบบท่ีกาหนดขน้ึ ได้ โดยการกาหนดคลาส จะตอ้ งเรม่ิ ตน้ ด้วยจุด (Dot) \".\" และตามดว้ ยช่ือคลาส ซึง่ จะตอ้ งกาหนดช่ือคลาสขนึ้ เอง มรี ูปแบบการ กาหนด Class Selector ดังน้ี Syntax .classname {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ .textbox {padding: 10px; border: solid 2px salmon;} p.justify { text-align: justify; color: gray; } p.textbold { font-weight: bold; color: red; font-size: 28px; } p.textlarge { font-size: 40px; } การเรียกใช้งานคลาส จะใช้งานเมื่อมีการกาหนดรูปแบบภายในเว็บเพจที่ต้องการให้มี รปู แบบซา้ กนั ได้ ซ่ึงสามารถเรียกใช้งานคลาสเดยี วไดห้ ลายคร้ัง โดยเรียกใชง้ านคลาสดว้ ยอิลเิ มนต์ต่าง ๆ ของ HTML5 กาหนดแอตทริบิวต์ \"class\" จากน้ันจึงกาหนดค่าเป็นช่ือคลาสท่ีต้องการ มีรูปแบบ การเรียกใชง้ านดังนี้ Syntax <tag class=\"classname\">…</tag>

120 CHAPTER 4: CSS3 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div class=\"textbox\"> <p class=\"textbold\">Class Selector</p> <p class=\"justify\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> </body> </html> Result Class Selector มีคุณสมบัติของการสืบทอด (Inheritance) จึงส่งผลให้อิลิเมนต์สามารถ เรยี กใชง้ านคลาสไดม้ ากกวา่ 1 คลาส HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div class=\"textbox\"> <p class=\"textbold textlarge\">Class Selector Inheritance</p> <p class=\"justify\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> </body> </html>

CHAPTER 4: CSS3 121 2. ID Selectors การกาหนด Selectors ในรูปแบบของไอดี (ID) เป็นการกาหนดรูปแบบด้วยสไตล์ชีต เพ่ือให้อิลิเมนต์หรือแท็กใน HTML5 สามารถเรียกใช้งานรูปแบบท่ีกาหนดขึ้นได้ โดยการกาหนดไอดี จะต้องเริ่มต้นด้วยสญั ลกั ษณ์ส่ีเหลยี่ ม (Hash Sign) \"#\" และตามด้วยช่ือไอดี ซึ่งจะต้องกาหนดชื่อไอดี ขนึ้ เอง มรี ปู แบบการกาหนด ID Selector ดงั นี้ Syntax #idname {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ #headerlogo { width: 100px; height: 100px; background-color: coral; } #topmenu { width: 100%; height: 30px; border: solid 2px coral; margin-top: 2px; } #fullname { font-size: 22px; font-weight: bold; color: mediumvioletred; } การเรียกใช้งานไอดี จะใช้งานเม่ือมีการกาหนดรูปแบบภายในเว็บเพจท่ีต้องการให้มีเพียง รูปแบบเดียวเท่าน้ันหรือเรียกใช้งานไอดีในเว็บเพจได้เพียงคร้ังเดียว โดยเรียกใช้งานไอดีด้วยอิลิเมนต์ ต่าง ๆ ของ HTML5 และกาหนดแอตทริบิวต์ \"id\" จากน้ันจึงกาหนดค่าเป็นชื่อไอดีท่ีต้องการ มี รปู แบบการเรียกใช้งานดงั น้ี Syntax <tag id=\"idname\">…</tag>

122 CHAPTER 4: CSS3 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div id=\"headerlogo\"></div> <div id=\"topmenu\"></div> <h1 id=\"fullname\">RACHAWIT TIPSENA</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result 3. Universal Selector การกาหนด Selectors ให้สามารถนารูปแบบไปใช้งานได้กับทุกอิลิเมนต์ในเว็บเพจ หรือ นารูปแบบไปใช้กับทุกอิลิเมนต์ที่อ้างอิงถึง โดยใช้สัญลักษณ์ดอกจัน (*) เป็น Selector มีรูปแบบการ กาหนด Universal Selector ดังน้ี Syntax * {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ * {background-color: azure;}

CHAPTER 4: CSS3 123 การกาหนด Universal Selectors สามารถกาหนดรูปแบบให้มีผลเฉพาะอิลิเมนต์ท่ีอยู่ ภายใตอ้ ิลิเมนต์ \"div\" ได้ มีรปู แบบการเรียกใชง้ านดงั นี้ Example /* css file: mystyle.css */ div * {background-color: antiquewhite;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div> <h1>Universal Selectors</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> </body> </html> Result 4. Element Selector การกาหนด Selectors ในรูปแบบของอิลิเมนต์ (Element) เป็นการกาหนดรูปแบบด้วย สไตลช์ ีต โดยใชช้ ่ืออิลิเมนต์หรือชื่อแท็กใน HTML5 เป็น Selector เพ่อื ให้รปู แบบมีผลกับอิลเิ มนต์ท่ีมี อยู่ในเวบ็ เพจโดยตรง มรี ปู แบบการกาหนด Element Selector ดงั น้ี Syntax element {Property: Value; Property: Value; …}

124 CHAPTER 4: CSS3 Example /* css file: mystyle.css */ h1 {font-size: 30px; color: red;} p {font-size: 16px; color: gray;} a {text-decoration: none; color: green;} table, tr, td { border: dotted 1px salmon; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Element Selector</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <a href=\"http://is.udru.ac.th\">Information Science Website</a> <table width=\"98%\" cellspacing=\"0\"> <tbody> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table> </body> </html> Result

CHAPTER 4: CSS3 125 5. Descendant Selector การกาหนด Selectors ในรูปแบบความสัมพันธ์ระหว่างอิลิเมนต์หลักกับอิลิเมนต์ท่ีอยู่ ภายใต้อิลิเมนต์หลัก (Parent - Child) รูปแบบจะมีผลกับอิลิเมนต์ท่ีอยู่ภายใต้อิลิเมนต์หลักเท่านั้น โดยใช้ช่องวา่ ง (Space) \" \" เป็นตวั เช่อื มโยงระหว่างอลิ เิ มนตห์ ลกั กับอิลเิ มนต์ท่ีอย่ภู ายใต้อิลิเมนต์หลัก มีรปู แบบการกาหนด Descendent Selector ดงั นี้ Syntax element element {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ div p {font-size: 20px; color: dimgray; background-color: bisque;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div> สไตล์ชตี มีผล <p>Descendant Selector 1</p> สไตล์ชีตมผี ล <p>Descendant Selector 2</p> สไตลช์ ตี มีผล </div> <div> <p>Descendant Selector 3</p> </div> <div> <span> <p>Descendant Selector 4</p> </span> </div> <p>Descendant Selector 5</p> </body> </html> จากตัวอย่างการกาหนด Descendant Selector โดยกาหนด Selector คือ \"div p\" รปู แบบสไตล์ชีตท่ีกาหนดจะมีผลกับอลิ ิเมนต์ \"p\" ทง้ั หมดทีอ่ ยู่ภายใต้อลิ ิเมนต์ \"div\" เทา่ นน้ั

126 CHAPTER 4: CSS3 Result 6. Child Selectors การกาหนด Selectors ในรูปแบบความสัมพันธ์ระหว่างอิลิเมนต์หลักกับอิลิเมนต์ที่อยู่ ภายใตอ้ ลิ เิ มนต์หลัก (Parent - Child) รูปแบบจะมีผลกับอลิ ิเมนต์ที่อยู่ภายใต้อิลิเมนตห์ ลัก ท่ีมรี ะดับ ต่ากว่า 1 ระดับเท่านั้น โดยใช้เครื่องหมายมากกว่า (Greater-than bracket) \">\" เป็นตัวเชื่อมโยง ระหว่างอิลิเมนต์หลักกับอิลิเมนต์ท่ีอยู่ภายใต้อิลิเมนต์หลัก มีรูปแบบการกาหนด Child Selector ดังน้ี Syntax element > element {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ div > p {font-size: 20px; color: dimgray; background-color: bisque;} HTML5 สไตล์ชตี มีผล สไตล์ชีตมผี ล <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div><p>Child Selectors 1</p></div> <div> <p>Child Selectors 2</p> <span><p>Child Selectors 3</p><p>Child Selectors 4</p></span> </div> <div> <span><p>Child Selectors 5</p></span> </div> <p>Child Selectors 6</p> <div><p>Child Selectors 7</p></div> </body> </html>

CHAPTER 4: CSS3 127 จากตัวอย่างการกาหนด Child Selector โดยกาหนด Selector คือ \"div > p\" รูปแบบ สไตล์ชีตท่ีกาหนดจะมีผลกับอิลิเมนต์ \"p\" ที่อยู่ภายใต้อิลิเมนต์ \"div\" และอิลิเมนต์ \"p\" จะต้องอยู่ใน ระดบั ทตี่ ่ากว่าอลิ เิ มนต์ \"div\" เพียง 1 ระดบั เทา่ น้นั Result 7. Adjacent Sibling Selectors การกาหนด Selectors ในรูปแบบความสัมพันธ์ระหว่างอิลิเมนต์หลักกับอิลิเมนต์ท่ีอยู่ใน ตาแหน่งถัดไป 1 ตาแหน่ง รปู แบบจะมผี ลกับอิลเิ มนต์ทอ่ี ยใู่ นตาแหนง่ ถดั ไปเพยี งตาแหนง่ เดียวเท่านั้น โดยใช้เครอ่ื งหมายบวก (Plus) \"+\" เป็นตัวเชื่อมโยงระหว่างอิลิเมนต์หลักกับอิลิเมนต์ในตาแหน่งถัดไป ทตี่ ้องการให้รปู แบบมผี ล มรี ปู แบบการกาหนด Adjacent Sibling Selector ดงั นี้ Syntax element + element {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ div + p {font-size: 20px; color: dimgray; background-color: bisque;} HTML5 สไตล์ชีตมีผล สไตลช์ ตี มีผล <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div><p>Adjacent Sibling Selectors 1</p></div> <p>Adjacent Sibling Selectors 2</p> <p>Adjacent Sibling Selectors 3</p> <div><p>Adjacent Sibling Selectors 4</p></div> <p>Adjacent Sibling Selectors 5</p> <p>Adjacent Sibling Selectors 6</p> </body> </html>

128 CHAPTER 4: CSS3 จากตัวอยา่ งการกาหนด Adjacent Sibling Selectors โดยกาหนด Selector คือ \"div + p\" รูปแบบสไตล์ชีตที่กาหนดจะมีผลกับอิลิเมนต์ \"p\" ที่อยู่ในตาแหน่งถัดจากอิลิเมนต์ \"div\" เพียง 1 ตาแหนง่ เท่านน้ั Result 8. General Sibling Selector การกาหนด Selectors ในรูปแบบความสัมพันธ์ระหว่างอิลิเมนต์หลักกับอิลิเมนต์ที่อยู่ใน ตาแหน่งถัดไป รูปแบบจะไม่มีผลกับอิลิเมนต์ที่อยู่ภายใต้อิลิเมนต์หลัก แต่รูปแบบจะมีผลกับอิลิเมนต์ ท่ีอยู่ในตาแหน่งถัดไปจากอิลิเมนต์หลักทุกตาแหน่ง โดยใช้สัญลักษณ์ตัวหนอน (Tilde) \"~\" เป็นตัว เชื่อมโยงระหว่างอิลิเมนต์หลักกับอิลิเมนต์ในตาแหน่งถัดไปท่ีต้องการให้รูปแบบมีผล มีรูปแบบการ กาหนด General Sibling Selector ดงั น้ี Syntax element ~ element {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ div ~ p {font-size: 20px; color: dimgray; background-color: bisque;}

CHAPTER 4: CSS3 129 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div> <p>General Sibling Selector 1</p> </div> <p>General Sibling Selector 2</p> สไตลช์ ตี มีผล <p>General Sibling Selector 3</p> สไตลช์ ตี มีผล <p>General Sibling Selector 4</p> <div> <p>General Sibling Selector 5</p> </div> <p>General Sibling Selector 6</p> <p>General Sibling Selector 7</p> <p>General Sibling Selector 8</p> </body> </html> จากตัวอย่างการกาหนด General Sibling Selector โดยกาหนด Selector คือ div ~ p รูปแบบสไตลช์ ตี ท่ีกาหนดจะมผี ลกับอิลเิ มนต์ p ทไี่ มไ่ ด้อยภู่ ายใตอ้ ลิ เิ มนต์ div และจะมผี ลกับอลิ เิ มนต์ p ทกุ อิลิเมนต์ ที่อยใู่ นตาแหนง่ ถัดจากอลิ ิเมนต์ div Result

130 CHAPTER 4: CSS3 9. Attribute Selectors การกาหนด Selectors ในรูปแบบของแอตทริบิวต์ (Attribute) เป็นการกาหนดรูปแบบ ดว้ ยสไตลช์ ตี โดยใช้แอตทริบวิ ต์ของอลิ ิเมนต์ใน HTML5 นามาเปน็ องคป์ ระกอบใน Selector เพือ่ ให้ รปู แบบมีผลกับแอตทริบวิ ตข์ องอิลเิ มนตท์ ี่กาหนด 9.1 การกาหนด Attribute Selector โดยใช้ชื่ออิลิเมนต์และช่ือแอตทริบิวต์ รูปแบบ สไตล์ชีตจะมีผลกบั อิลิเมนตท์ ร่ี ะบแุ อตทริบวิ ต์ตรงกบั ที่กาหนดในสไตลช์ ีต มีรปู แบบการกาหนดดงั น้ี Syntax element[attribute] {Property: Value; Property: Value; …} Example /* css file: mystyle.css */ a[href] {font-size: 20px; color: salmon; background-color: bisque;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <p>Click to website: <a href=\"http://is.udru.ac.th\">Information Science</a> </p> </body> </html> Result 9.2 การกาหนด Attribute Selector โดยใช้ช่ืออิลิเมนต์ ช่ือแอตทริบิวต์และกาหนดค่า ของแอตทริบิวต์ รูปแบบสไตล์ชีตจะมีผลกับอิลิเมนต์ที่ระบุแอตทริบิวต์และค่าตรงกับท่ีกาหนดใน สไตล์ชตี มรี ูปแบบการกาหนดดงั น้ี Syntax element[attribute=\"value\"] {Property: Value; Property: Value; …}

Pages:

lavanh9979

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Like this book? You can publish your book online for free in a few minutes!

Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Description: ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Read the Text Version

lavanh9979

TOP SEARCH

RELATED PUBLICATIONS