Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ

เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ

Published by Nutthapat Keawrattanapat, 2019-03-05 21:01:19

Description: เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ (Principle of Web Design)

Keywords: หลักการออกแบบเว็บม,web design,HTML,CSS

Search

Read the Text Version

146 ตัวอย่างการกากบั พิกดั พ้ืนทว่ี งกลม <html> <head> <meta charset=\"UTF-8\"> </head> <body> <img src=\"ontable.jpg\" usemap=\"#table\"> <map name=\"table\"> <area shape=\"circle\" coords=\"258,65,60\" href=\"coffee.html\" alt=\"a cup of coffee\"> </map> </body> </html> 2.3 กากบั พิกดั พ้ืนท่หี ลายเหล่ียม (Polygon) ประกอบไปด้วยกาหนดค่าแอต็ ทริ บวิ ทด์ งั น้ี 2.3.1 แอต็ ทริบวิ ทร์ ปู ร่าง (shape) เทา่ กบั polygon 2.3.2 แอต็ ทริบิวทพ์ ิกัด (coords) เป็นตัวเลขพิกัดซ้าย (Left) และบน (Top) เป็ นคู่ หรือเปรียบได้กับพิกัด x และ y ตามจานวน n เหล่ียม เช่น x1,y1,x2,y2,…,xn,yn 2.3.3 แอต็ ทริบวิ ทเ์ ช่อื มโยง (href) คือ ยูอาร์แอลท่ตี ้องการเช่ือมโยง 2.3.4 แอต็ ทริบวิ ทช์ ่อื สารอง (alt) คือ ช่อื สารองของพิกดั

147 ภาพท่ี 5.9 แสดงพิกดั พ้ืนทห่ี ลายเหล่ยี ม รูปแบบการกากบั พิกดั พ้ืนท่หี ลายเหล่ยี ม <map name=\"…\"> <area shape=\"polygon\" coords=\"ซา้ ย1,บน1,ซา้ ย2,บน2,…,ซ้ายn,บนn\" href=\"…\" alt=\"…\"> </map> ตวั อย่างการกากบั พิกดั พ้ืนท่หี ลายเหล่ียม <html> <head> <meta charset=\"UTF-8\"> </head> <body> <img src=\"ontable.jpg\" usemap=\"#table\"> <map name=\"table\"> <area shape=\"polygon\" coords=\" 367,47,533,87, 515,129,547,136, 489,314,242,236\" href=\"notebook_pen.html\" alt=\"notebook and pen\"> </map> </body> </html>

148 3. การกากบั ผ้าใบ (Canvas) การกากับผ้าใบ หรือท่เี รียกว่า แคนวาส คือ การกากับภาพกราฟิ กด้วยอีลิเมนท์ แคนวาส “<canvas>” และ คาส่งั สคริปต์ภาษาจาวาสคริปต์ (Java Script) อลี เิ มนทแ์ คนวาส ทาให้ผู้ออกแบบเวบ็ ไซต์สามารถวาดภาพกราฟิ กบนพ้ืนท่หี น้าเวบ็ เพจได้ โดยขอบเขตพ้ืนท่ี ท่วี าดน้ันจะถูกกากบั ด้วยอลี เิ มนทแ์ คนวาส การกากบั ผ้าใบสามารถนาไปประยุกต์ใช้ในการนาเสนอกราฟ (Graph) การสร้าง แอนิเมช่ัน (Animation) การสร้างส่วนต่อประสานผู้ใช้ (Interactive) และการสร้างเกมส์ (Games) รูปแบบการกากบั ผ้าใบเบ้อื งต้น <canvas id=“ระบชุ ื่อแคนวาส” > ตัวอย่างการวาดภาพส่เี หล่ยี มด้วยฟังกช์ ่ัน fillRect() <html> <head> <meta charset=\"UTF-8\"> </head> <body> <canvas id=\"myCanvas\"></canvas> <script> var canvas = document.getElementById(\"myCanvas\"); var draw = canvas.getContext(\"2d\"); draw.fillStyle = \"#000000\"; draw.fillRect(0,0,150,75); </script> </body> </html>

149 จากตัวอย่างจะปรากฎองค์ประกอบท่สี าคัญ 2 ส่วน คือ อีลิเมนทแ์ คนวาส และ สคริปต์ ซ่ึงอีลิเมนท์แคนวาสเปรียบเสมือนพ้ืนท่ีผ้าใบ และ สคริปต์ คือคาส่ังท่ีใช้วาด ภาพกราฟิ ก โดยสคริปต์สามารถอธบิ ายได้ดงั น้ี 1) <script> … </script> คือ ขอบเขตของคาสง่ั สคริปต์ 2) var canvas = document.getElementByID(“myCanvas”); คือ คาส่งั ท่ใี ช้ใน การอ้างถงึ อลี เิ มนทแ์ คนวาส โดยมีการเช่อื มโยงด้วย ID = “myCanvas” 3) var draw = canvas.getContext(“2d”); คือ คาส่งั ทใ่ี ช้กาหนดมิติของภาพใน ท่นี ้ีกาหนดเป็นภาพ 2 มติ ิ (2 Dimensions) 4) draw.fillStyle = “#000000”; คือ คาส่งั เติมสใี ห้แก่ภาพท่วี าด ในท่นี ้ีเติมส่ี ดา (#000000) 5) draw.fillRect(0,0,150,75); คือ ฟังก์ช่ันสาหรับวาดภาพส่ีเหล่ียม (Rectangle) ในท่นี ้ีมีการกาหนดพารามิเตอร์ (Parameters) พิกัด คือ ซ้าย=0px บน=0px ขวา=150px และ ล่าง=75px ภาพที่ 5.10 แสดงคา่ พารามเิ ตอร์ในการวาดภาพบนอลี เิ มนทแ์ คนวาส

150 ตวั อย่างการลากเส้นด้วยฟังกช์ ่นั stroke() <html> <head> <meta charset=\"UTF-8\"> </head> <body> <canvas id=\"myCanvas\" width=\"400\" height=\"400\"></canvas> <script> var canvas = document.getElementById(\"myCanvas\"); var draw = canvas.getContext(\"2d\"); draw.moveTo(20,20); draw.lineTo(300,100); draw.lineWidth = 5; draw.strokeStyle = \"#0000ff\"; draw.stroke(); </script> </body> </html> จากตัวอย่างสว่ นของสคริปตท์ ่ใี ช้ในการวาดเส้นตรง (Stroke) สามารถอธบิ ายได้ ดงั น้ี 1) <script> … </script> คอื ขอบเขตของคาส่งั สคริปต์ 2) var canvas = document.getElementByID(“myCanvas”); คือ คาส่งั ท่ใี ช้ใน การอ้างถงึ อลี ิเมนทแ์ คนวาส โดยมกี ารเช่อื มโยงด้วย ID = “myCanvas” 3) var draw = canvas.getContext(“2d”); คือ คาส่งั ทใ่ี ช้กาหนดมิติของภาพใน ท่นี ้ีกาหนดเป็นภาพ 2 มิติ (2 Dimensions)

151 4) draw.moveTo(20,20); คือ การกาหนดพิกัดเร่ิมต้นด้วยฟังกช์ ่ัน moveTo ในทน่ี ้ีกาหนดจุดเร่ิมต้นท่พี ิกดั ซ้าย=20px และ บน=20px 5) draw.lineTo(300,100); คอื การกาหนดพิกดั เร่ิมต้นด้วยฟังกช์ ่นั lineTo ใน ทน่ี ้ีกาหนดจุดเร่ิมต้นท่พี ิกดั ขวา=300px และ ล่าง=100px 6) draw.lineWidth = 5; คือ การกาหนดความหนาของเส้นท่ตี ้องการลาก ในท่นี ้ี กาหนดให้เส้นมคี วามหนา 5 px 7) draw.strokeStyle = #0000ff; คือ การกาหนดสีให้แก่เส้นท่ลี าก ในท่นี ้ี กาหนดสนี า้ เงนิ (#0000ff) 8) draw.stroke(); คือ ฟังกช์ ่นั สาหรับสง่ั ให้เกดิ การลากเส้นตามทไ่ี ด้กาหนดไว้ ภาพท่ี 5.11 แสดงค่าพารามเิ ตอรก์ ารลากเส้นตรงจากพิกดั 20,20 ไปยังพกิ ดั 300,100 ตัวอย่างการวาดภาพวงกลมด้วยฟังกช์ ่นั arc(); และ srtoke(); <html> <head> <meta charset=\"UTF-8\"> </head> <body> <canvas id=\"myCanvas\" width=\"400\" height=\"400\"></canvas> <script> var canvas = document.getElementById(\"myCanvas\"); var draw = canvas.getContext(\"2d\"); draw.arc(200,200,100,0,2*Math.PI); draw.stroke(); </script> </body> </html>

152 จากตัวอย่างจะปรากฎวงกลมรัศมีขนาด 100 px มีเส้นขอบสีดา โดยสคริปต์ สามารถอธบิ ายได้ดังน้ี 1) <script> … </script> คอื ขอบเขตของคาสง่ั สคริปต์ 2) var canvas = document.getElementByID(“myCanvas”); คือ คาส่งั ท่ใี ช้ใน การอ้างถงึ อลี เิ มนทแ์ คนวาส โดยมกี ารเช่อื มโยงด้วย ID = “myCanvas” 3) var draw = canvas.getContext(“2d”); คอื คาส่งั ทใ่ี ช้กาหนดมิติของภาพใน ทน่ี ้ีกาหนดเป็นภาพ 2 มิติ (2 Dimensions) 4) draw.arc(200,200,100,0,2*Math.PI); คือ ฟังก์ช่ันสาหรับวาดภาพ วงกลม (Circle) ในท่นี ้ีมกี ารกาหนดพารามเิ ตอร์ (Parameters) ตามรูปแบบดงั น้ี รูปแบบการกากบั เส้นโค้งวงกลม ตวั แปร.arc(x,y,Radius,sAngle,eAngle,CounterClockwise[true|false]

153 ภาพท่ี 5.12 แสดงการลากเส้นวงกลมจากตาแหน่ง 0 ไปยังตาแหน่ง 2*Math.PI โดยมรี ัศมเี ทา่ กบั 100px 4.1) ค่าพิกดั จุดก่งึ กลางของวงกลม คอื ซ้าย=200px และ บน=200px 4.2) ค่ารัศมี (Radius) ในท่นี ้ีระบุรัศมี=100px 4.3) ค่าจุดเร่ิมต้นของการวาดขอบวงกลม (Starting angle: sAngle) ในท่นี ้ี ระบุตาแหน่ง 0 องศาเรเด่ียน (Radian) 4.4) ค่าจุดส้นิ สดุ ของการวาดของวงกลม (Ending angle: eAngle) ในท่นี ้ี ระบุ 2*Math.PI องศาเรเด่ยี น (Radian) 4.5) ค่าการวาดหมุนทวนเขม็ นาฬกิ า (CounterClockwise) มี 2 ค่า คือ True และ False โดยค่า True คือ การกาหนดให้วาดทวนเขม็ นาฬิกา และ False คือ การกาหนดให้วาดตามเขม็ นาฬิกา กรณีท่กี าหนดให้วาดตาม เข็มนาฬิกาไม่จาเป็ นต้องเติม False ก็ได้ เน่ืองจากค่าโดยปริยาย (Default) คือ False หรือ ตามเขม็ นาฬกิ า 5) draw.stroke(); คอื ฟังกช์ ่นั สาหรับส่งั ให้เกดิ การลากเส้นตามทไ่ี ด้กาหนดไว้

154 ภาพท่ี 5.13 แสดงการเปรยี บเทยี บการลากเส้นจากจุด 1*Math.PI ไปยังจุด 0.5*Math.PI ระหว่างการลากแบบทวนเขม็ นาฬิกา (Counter clockwise = true) และไม่ทวน เขม็ นาฬกิ า นอกจากน้ีการวาดภาพมากกว่า 1 ภาพบนแคนวาสเดียวกัน จาเป็นต้องมีการใช้ ฟังก์ช่ัน beginPath() เพ่ือเร่ิมการวาดภาพกราฟิ กใหม่ทุกคร้ัง มิเช่นน้ันทาให้ภาพมีความ ผดิ เพ้ียนไป ตัวอย่างการวาดภาพกราฟิ กคร่ึงวงกลม 2 ภาพบนแคนวาสเดียวกนั ภาพท่ี 5.14 แสดงการวาดคร่ึงวงกลม 2 ภาพบนแคนวาสเดยี วกนั

155 <html> <head> <meta charset=\"UTF-8\"> </head> <body> <canvas id=\"myCanvas\" width=\"400\" height=\"400\"></canvas> <script> var canvas = document.getElementById(\"myCanvas\"); var draw = canvas.getContext(\"2d\"); draw.strokeStyle=\"#ff0000\"; draw.arc(200,200,100,1*Math.PI,2*Math.PI); draw.stroke(); draw.beginPath(); draw.strokeStyle=\"#0000ff\"; draw.arc(250,200,100,1*Math.PI,2*Math.PI,true); draw.stroke(); </script> </body> </html>

156 4. การกากบั วิดโี อ ในการกากับวิดีโอให้สามารถแสดงผลบนเว็บเพจได้น้ัน จะใช้ป้ ายช่ือ <video> และ <source> โดยวิดีโออาจอยู่ในลักษณะของมูฟว่ีคลิป (Movie clip) หรือ วิดีโอสตรีม (Video streams) กไ็ ด้ และภาษาเอชทเี อม็ แอลรุ่นท่ี 53 ได้ปรับปรุงแอต็ ทริบิวทใ์ ห้สามารถ กากบั วิดีโอได้สะดวกย่งิ ข้นึ เช่น poster และ preload เป็นต้น รูปแบบการกากบั อลี เิ มนทว์ ดิ ีโอ <video width=\"…\" height=\"…\" controls> <source src=\"movie.mp4\" type=\"video/mp4\"> <source src=\"movie.ogg\" type=\"video/ogg\"> <source src=\"movie.webm\" type=\"video/webm\"> ข้อความสารอง กรณที เี่ ว็บเบราเซอร์ไมส่ นับสนนุ วิดโี อน้ี </video> จากรปู แบบการกากบั อลี ิเมนทว์ ดิ ีโอสามารถอธบิ ายได้ดังน้ี 1) อลี เิ มนทว์ ิดีโอมีการใช้ป้ ายช่ือ <video> และมีการระบุแอต็ ทริบิวทค์ วามกว้าง ของวิดีโอ (width) ความสงู ของวดิ ีโอ (height) และระบุให้ปรากฏแผงควบคุม (controls) 2) อลี ิเมนทว์ ิดีโอทาการกากบั อลี ิเมนทแ์ หล่งทรัพยากรวิดีโอ โดยอลี ิเมนทแ์ หล่ง ทรัพยากรวิดีโอใช้ป้ ายช่ือ <source> และมีการระบุแอต็ ทริบิวทแ์ หล่ง (src) และชนิดของ วดิ ีโอ (type) ซ่งึ ชนิดของวดิ ีโอท่เี วบ็ เบราเซอร์สนับสนุน เช่น mp4 ogg และ webM เป็นต้น 3) กรณที ม่ี ไี ฟลว์ ดิ โี อหลายชนิด สามารถเพ่ิมอลี ิเมนทไ์ ด้ ซ่ึงจะเป็นประโยชน์ต่อ ผู้ชมทใ่ี ช้เวบ็ เบราเซอร์ต่างชนิดกนั 4) กรณีท่ไี ม่สามารถแสดงวิดีโอได้ อาจเกิดจากเวบ็ เบราเซอร์ไม่สนับสนุนไฟล์ วิดีโอน้ันๆ ผู้ออกแบบและพัฒนาเวบ็ สามารถระบุข้อความสารองเพ่ือให้ข้อมูลแก่ผู้ชมเวบ็ ได้ นอกจากแอต็ ทริบวิ ทพ์ ้ืนฐานทไ่ี ด้กล่าวไปแล้ว ยังมีแอต็ ทริบวิ ทท์ เ่ี ป็นประโยชนใ์ น การกากบั วิดีโอดงั น้ี 3 https://www.w3.org/wiki/HTML/Elements/video

157 ตารางท่ี 5.1 แสดงแอต็ ทริบวิ ทข์ องอลี ิเมนมว์ ิดโี อ แอ็ตทริบวิ ทแ์ ละ คาอธิบาย รูปแบบ ค่า autoplay การเล่นวดิ โี อบนเวบ็ เบราเซอร์ ทนั ทเี ม่อื พร้อม โดยไม่รอการ <video autoplay> </video> สง่ั งานจากผู้ชม controls แสดงแผงควบคุมวดิ ีโอ กรณที ่ี ไม่ได้ระบุ controls จะไม่แสดง <video controls> </video> แผงควบคุม loop การวนซา้ อตั โนมัติเม่อื ส้นิ สดุ <video loop> </video> วิดีโอ muted การปิดเสยี งของวิดโี อ <video muted> </video> poster ภาพหน้าปกของวิดโี อ สามารถ <video controls แทรกจากไฟลภ์ าพอ่นื ๆ ได้ poster=\"orange.jpg\"> </video> preload คือ การดาวนโ์ หลดไฟล์วดิ โี อ โดย มี 3 ลกั ษณะ คอื <video preload=\"auto\"> 1) auto เป็นการระบุให้ดาวน์ </video> โหลดทนั ทหี ลงั จากเวบ็ เบราเซอร์ เปิ ดข้นึ 2) metadata เป็นการระบุให้ <video preload=\"metadata\"> ดาวน์โหลดเฉพาะฉลากข้อมลู ของ </video> วิดโี อเทา่ น้ัน ยงั ไม่ดาวน์โหลดเน้อื ของวิดโี อ โดยจะปรากฎภาพแรก ของวิดโี อ ระยะเวลาของวดิ โี อ เทา่ น้ัน <video preload=\"none\"> 3) none เป็นการระบุเพ่ือไม่ให้ </video> เกดิ การดาวน์โหลดไฟล์วดิ โี อ รวมถึงฉลากข้อมลู วดิ โี อ

158 ตัวอย่างการกากบั อลี เิ มนทว์ ดิ โี อ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <video controls poster=\"orange.jpg\" width=\"100%\" preload=\"metadata\"> <source src=\"orangejuice.mp4\" type=\"video/mp4\"> เวบ็ เบราเซอร์คณุ ไมส่ นบั สนนุ การทางานวดิ โี อน้ี </video> </body> </html> อีลเิ มนทว์ ดี ีโอระหวา่ งการเล่นวิดโี อ อีลเิ มนท์วีดโี อแสดงภาพ orange.jpg กอ่ นการเล่นวิดโี อ ไฮเปอรล์ ิงค์ ไฮเปอร์ลิงค์ (Hyperlink) คือ การเช่ือมโยงไปยังแหล่งต่างๆ โดยบนเว็บไซต์ ไฮเปอร์ลิงค์อาจมีลักษณะเป็นข้อความ วลี หรือ ภาพท่สี ามารถคลิกเพ่ือเช่ือมโยงภายใน หน้าเวบ็ เพจเดยี วกนั หรือหน้าเวบ็ ไซต์อ่นื ๆ รวมถงึ ไฟล์เอกสารต่างๆ ได้ ไฮเปอร์ลิงค์สามารถนาไปประยุกต์ใช้ในการทางานบนหน้าเวบ็ ไซต์ เช่น การสร้าง เมนู (Menu bar) การสร้างแผนท่รี ูปภาพ (Image map) การสร้างแถบนาทาง (Navigation bar) เป็นต้น การกากบั ไฮเปอร์ลงิ ค์ด้วยภาษาเอชทเี อม็ แอลน้ัน จะใช้อีลิเมนท์ <a>…</a> ครอบอี ลิเมนทข์ ้อความ วลี หรือภาพท่ตี ้องการสร้างไฮเปอร์ลิงค์ โดย <a> มาจากคาว่าแองเคอะ (Anchor) ท่แี ปลว่าจุดเช่ือมโยง และแอต็ ทริบิวทท์ ่จี าเป็นต้องใช้ร่วมกบั อีลิเมนท์ <a> คือ

159 แอต็ ทริบวิ ทเ์ อชเรฟ (href) ซ่ึงมาจากคาว่า Hypertext reference โดย href จะทาหน้าทเ่ี กบ็ ยู อาร์แอล (URL) หรือช่อื ประจาตวั อลี เิ มนท์ (ID) ปลายทางทเ่ี ช่อื มโยงไว้ รูปแบบการกากบั ไฮเปอร์ลงิ คภ์ ายในหน้าเวบ็ เพจเดียวกนั <a href=“#id”> ข้อความ หรือ อลี ิเมนทอ์ น่ื ๆ </a> ตวั อย่างการกากบั ไฮเปอร์ลงิ ค์ภายในหน้าเวบ็ เพจเดยี วกนั <html> <head> <meta charset=\"UTF-8\"> </head> <body> <h1 id=\"toppage\">Natural Photo </h1><br> <img src=\"nature1.jpg\"><br> <img src=\"nature2.jpg\"><br> <img src=\"nature3.jpg\"><br> <img src=\"nature4.jpg\"><br> <a href=\"#toppage\"> &uarr; top </a> </body> </html> จากตัวอย่างเม่ือเรียกหน้าเว็บไซต์จากเวบ็ เบราเซอร์จะปรากฎข้อความ “Natural Photo” และรปู ภาพเรียงลงมาต่อเน่ือง เม่อื เล่อื นมาจนถงึ ภาพสดุ ท้ายจะปรากฎไฮเปอร์ลิงค์ ด้านล่าง โดยแสดงลูกศรช้ขี ้นึ พร้อมข้อความ “top” ไฮเปอร์ลงิ ค์น้ีมกี ารกากบั ให้เช่อื มโยงไป ยังอีลิเมนทภ์ ายในหน้าเว็บเพจเดียวกัน สังเกตได้จากมีเคร่ืองหมายชาร์ป (#) เม่ือคลิก ไฮเปอร์ลิงค์ดังกล่าวแล้วหน้าเว็บจะทาการเล่ือนไปยังบริเวณท่ีกากับด้วยอีลิเมนท์ <h1> เน่ืองจากมี id=“toppage”

160 รูปแบบการกากบั ไฮเปอร์ลิงคภ์ ายนอกเวบ็ เพจ <a href=“URL”> ข้อความ หรือ อลี ิเมนท์อื่นๆ </a> ตวั อย่างการกากบั ไฮเปอร์ลิงคภ์ ายนอกเวบ็ เพจ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <a href=\"page2.html\"> NEXT PAGE </a> </body> </html> ตัวอย่างการกากบั ไฮเปอรล์ งิ ค์ภายนอกเวบ็ ไซต์ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <a href=\"http://www.google.co.th\"> GOOGLE </a> </body> </html> 1. ไฮเปอร์ลงิ ค์กบั ข้อความ ไฮเปอร์ลงิ ค์สามารถใช้ร่วมกบั อลี ิเมนทท์ ่เี ก่ยี วกบั ตัวอกั ษรได้ เช่น กากับไฮเปอร์ ลิงค์ให้กบั อลี เิ มนท์ <h1>…</h1> หรือ <p>…</p> หรือ <b>…</b> เป็นต้น ตัวอย่างการกากบั ไฮเปอร์ลิงค์ให้แก่ข้อความ <a href=“…”> <h1>ขอ้ ความ</h1> </a>

161 ตัวอย่างการกากบั ไฮเปอร์ลงิ ค์ให้แก่ย่อหน้า <a href=“…”> <p>ยอ่ หน้า</p> </a> ตวั อย่างการกากบั ไฮเปอร์ลิงค์ให้ข้อความตัวหนา <a href=“…”> <b>ข้อความ</b> </a> ตัวอย่างการกากบั ไฮเปอรล์ งิ ค์กบั ข้อความลกั ษณะต่างๆ <html> <head> <meta charset=\"UTF-8\"> </head> <body> e-Commerce <a href=\"https://www.amazon.com/\"> <h1>AMAZON</h1> </a> <a href=\"https://www.amazon.com/dp\"> <p>Get fast, free shipping with Amazon Prime. Prime members Enjoy FREE Two-Day Shipping and exclusive access to music, movies, TV shows, original audio series, and Kindle books. </p> </a> <a href=\"https://www.amazon.com/ ap/signin\"> <b>SING IN</b> </a> </body> </html>

162 2. ไฮเปอร์ลิงค์กบั ภาพ ไฮเปอร์ลิงคส์ ามารถใช้ร่วมกบั อลี เิ มนทไ์ อเอม็ จี <img> ซ่งึ เป็นอลี เิ มนทท์ ่ใี ช้ใน การแสดงภาพบนเวบ็ เพจ รูปแบบการกากบั ไฮเปอร์ลิงคใ์ ห้แก่ภาพ <a href=“URL”> <img scr=“URL”> </a> ตวั อย่างการกากบั ไฮเปอร์ลิงคใ์ ห้แก่ภาพ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <h2>SOCIAL NETWORKING</h2> <a href=\"https://www.facebook.com/\"> <img src=\"icon_fb.png\" width=\"100\"></a> <br> <a href=\"https://twitter.com/\"> <img src=\"icon_tw.png\" width=\"100\"></a> <br> <a href=\"https://www.instagram.com/\"> <img src=\"icon_ig.png\" width=\"100\"></a> </body> </html> 3. การกาหนดแอต็ ทริบวิ ทใ์ ห้แก่ไฮเปอร์ลิงค์ การกากับไฮเปอร์ลิงค์ให้แก่ข้อความและภาพน้ัน นอกจากมีการกาหนดแอต็ ทริ บวิ ท์ href แล้ว ยังมีแอต็ ทริบวิ ทท์ ส่ี าคัญอกี ดงั น้ี 3.1 แอต็ ทริบิวทด์ าวน์โหลด (Download) เป็นแอต็ ทริบิวทท์ ่รี ะบุให้แก่ไฮเปอร์ ลงิ ค์แล้ว เม่อื ผู้ใช้คลิกไฮเปอร์ลงิ คน์ ้ันๆ จะเกดิ การดาวน์โหลดไฟล์เอกสาร หรือ ไฟล์ภาพสู่ คอมพิวเตอร์

163 รปู แบบการกาหนดแอต็ ทริบิวทด์ าวน์โหลดให้แก่ไฮเปอร์ลงิ ค์ <a href=“URL” download>…</a> ตัวอย่างการกาหนดแอต็ ทริบวิ ทด์ าวน์โหลดให้แก่ไฮเปอร์ลงิ ค์ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <h2>DOWNLOAD PHOTO</h2> <a href=\"nature1.jpg\" download> <img src=\"nature1.jpg\" width=\"200\"></a> </body> </html> 3.2 แอต็ ทริบวิ ทเ์ ป้ าหมาย (Target) เป็นแอต็ ทริบวิ ทส์ าหรับระบุตาแหน่งในการ เปิ ดเป้ าหมาย โดยมตี าแหน่งเป้ าหมายสาคญั 2 ลักษณะ ดังน้ี 1) _blank คือ การเปิ ดเป้ าหมายบนหน้าเวบ็ เบราเซอร์ใหม่ หรือ แทบ็ ใหม่ 2) _self คอื การเปิ ดเป้ าหมายบนหน้าเวบ็ เบราเซอร์เดิม รูปแบบการกาหนดแอต็ ทริบวิ ทเ์ ป้ าหมายให้แก่ไฮเปอร์ลิงค์ <a href=“URL” target=“[_blank|_self]”>…</a> ตวั อย่างการกาหนดแอต็ ทริบวิ ทเ์ ป้ าหมายให้แก่ไฮเปอร์ลิงค์ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <a href=\"http://www.ebay.com/\" target=\"_blank\"> EBAY</a> <a href=\"http://www.amazon.com/\" target=\"_self\"> EBAY</a> </body> </html>

164 ไดเร็กทอรี่ 1. ไดเรก็ ทอร่ี (Directory) ไดเร็กทอร่ี คือ พ้ืนท่ีท่ีถูกกาหนดข้ึนอย่างเป็ นระบบเพ่ือใช้ในการจัดเก็บ ไฟล์ข้อมูล ไฟล์เอกสารหรือไฟล์รูปภาพ ไดเร็กทอร่ีจะมีลักษณะเป็ นโครงสร้างลาดับช้ัน (Hierarchical file system) โดยประกอบไปด้วยรูทไดเรก็ ทอร่ี (Root directory) และ ได เรก็ ทอร่ีย่อย (Subdirectories) ดังรปู ภาพท่ี 5.15 แสดงรทู ไดเรก็ ทอร่ีและไดเรก็ ทอร่ีย่อย จากภาพท่ี 5.15 แสดงโครงสร้างของไดเร็กทอร่ีประกอบไปด้วยรูทไดเร็กทอร่ี mydrive และไฟล์เอกสารเอชทเี อม็ แอล ช่ือ index.html และมีไดเรก็ ทอร่ีย่อย ประกอบไป ด้วยแฟ้ มข้อมูล (Folder) จานวน 2 แฟ้ ม คือ web และ photo โดย แฟ้ มข้อมูล web เกบ็

165 ไฟล์เอกสารเอชทีเอม็ แอล และ แฟ้ มข้อมูล photo มีไดเร็กทอร่ีย่อย ประกอบไปด้วย แฟ้ มข้อมูล animal และ flower การจัดเกบ็ ข้อมลู ในลกั ษณะของโครงสร้างไดเรก็ ทอร่ี ทาให้สะดวกต่อการอ้างถึง แฟ้ มข้อมูลหรือไฟลเ์ อกสารต่างๆ โดยการอ้างถงึ จะมลี ักษณะเป็นเส้นทาง (Path) ตามลาดบั โครงสร้างของไดเรก็ ทอร่ี การอ้างถึงน้นั จะมอี ยู่ 2 ลักษณะ คอื การอ้างถึงในระดบั ต่ากว่า และ การอ้างถึงใน ระดบั สงู กว่า โดยการอ้างถงึ ในระดับต่ากว่าแสดงในรปู ท่ี …. และการอ้างถึงในระดับสงู กว่า แสดงในรปู ท่ี …. ภาพท่ี 5.16 แสดงการอ้างถงึ ไฟลภ์ าพในระดับต่ากว่า จากภาพท่ี 5.16 แสดงการอ้างถึงไฟล์ภาพในระดับต่ากว่า โดยไฟล์เอกสาร index.html ต้องการแทรกภาพ tiger.jpeg ซ่ึงไฟล์ภาพดังกล่าวอยู่ในระดับต่ากว่าไฟล์ เอกสาร index.html ดังน้ัน การอ้างถึงไฟล์ภาพ tiger.jpeg จะเร่ิมต้ังแต่ระดับเดียวกันกับ ไฟล์เอกสาร index.html ซ่ึงกค็ ือแฟ้ มข้อมูล photo และอ้างถึงในระดับต่ากว่าลงไปเร่ือยๆ

166 และการอ้างในระดับถัดไปจะใช้เคร่ืองหมาย “/” (Slash) ข้นั จนเกิดเป็นเส้นทาง (Path) ซ่งึ เรียกว่า ยูอาร์แอลสมั พัทธ์ (Relative URL) ตวั อย่างการกากบั เส้นทางอ้างถงึ รปู ภาพ tiger.jpeg <img src=“photo/animal/tiger.jpeg”> ภาพท่ี 5.17 แสดงการอา้ งถึงไฟลภ์ าพในระดับสงู กว่า ในส่วนการอ้างถงึ ไฟล์เอกสารในระดับสงู กว่าแสดงในภาพท่ี 5.17 โดยไฟล์เอกสาร flowergallery.html ต้องการแทรกภาพ rose.jpeg และต้องการสร้างไฮเปอร์ลิงค์ไปยังไฟล์ เอกสาร index.html ซ่ึงไฟล์ภาพ rose.jpeg และไฟล์เอกสาร index.html อยู่ในระดับสงู กว่า ไฟลเ์ อกสาร flowergallery.html ดังน้ัน การอ้างถึงไฟล์ใดๆ ท่อี ยู่ในระดับสงู กว่า จะต้องทา การถอยออกไป 1 ระดับ โดยการถอย 1 ระดบั จะใช้เคร่ืองหมาย “../” และหลังจากถอยถงึ

167 จุดท่เี หมาะสมแล้วจึงใช้วิธกี ารอ้างถึงไฟล์เอกสารในระดับต่ากว่าอ้างถึงต่อไป จนเกิดเป็น เส้นทาง (Path) ดังน้ี <a href=“../index.html”> <img src=“../photo/flower/rose.jpeg”> ตวั อย่างการอ้างถึงไฟล์เอกสารในระดบั สงู กว่าหลายช้นั ภาพท่ี 5.18 แสดงการอ้างถึงไฟลภ์ าพในระดบั สงู กว่าหลายช้นั 2. การกากบั ยูอาร์แอลต้นทาง (Base URL) ในภาษาเอชทเี อม็ แอลรุ่นท่ี 4.01 ถึง รุ่นท่ี 5 (ปัจจุบัน) สามารถใช้ป้ ายช่ือ <base> ในการกากบั ยูอาร์แอลต้นทางให้แก่หน้าเวบ็ เพจได้ โดยวัตถุประสงค์ของการกากบั ยู อาร์แอลต้นทางเพ่ือลดการระบุยูอาร์แอลท่ีมีขนาดยาว และสะดวกต่อการแก้ไขยูอาร์ แอลหรือไดเรก็ ทอร่ีต้นทางภายหลงั ได้

168 รปู แบบการกากบั ยูอาร์แอลต้นทาง <html> <head> <meta charset=\"UTF-8\"> <base href=\"baseDirectory/\"> </head> <body> <img src=\"subdirectory/file\"> </body> </html> ตวั อย่างการกากบั ยูอาร์แอลต้นทาง <html> <head> <meta charset=\"UTF-8\"> <base href=\"photo/\"> </head> <body> ASIA:<img src=\"asia/thflag.png\" width=\"100\"> <br> EUROPE:<img src=\"europe/enflag.png\" width=\"100\"> </body> </html> จากตัวอย่าง สังเกตุได้ว่า ป้ ายช่ือ <base> มีการระบุต้นทางต้ังแต่แฟ้ มข้อมูล photo/ เป็นต้นไป ดงั น้ัน ยูอาร์แอลต่างๆ ในส่วนของ <body> สามารถลดการเขียนเส้นทาง ลง เหลือเฉพาะไดเรก็ ทอร่ีย่อยเท่าน้ัน เช่น <img scr=“asia/thflag.png”> ในส่วนของแอ็ ตทริบิวท์ src น้ัน ระบุเฉพาะ asia/thflag.png แต่แท้จริงแล้ วเส้ นทาง คือ photo/asia/thflag.png ทาให้ลดการเขยี นเส้นทางลงได้ และหากมีการปรับเปล่ียนช่ือแฟ้ ม photo ผู้ออกแบบและพัฒนาเวบ็ สามารถปรับเปล่ยี นช่ือแฟ้ มจากทเ่ี ดยี ว ทาให้สะดวกต่อการ เปล่ยี นแปลงภายหลงั

169 ลิสท์ ลสิ ท์ (List) คือ การกากบั ข้อมลู ทม่ี ลี กั ษณะเป็นหัวข้อย่อยๆ ทม่ี หี มุด (Bullets) อยู่ ด้านหน้าหัวข้อย่อยแต่ละตัว การใช้ลิสท์ ช่วยให้ผู้ออกแบบและพัฒนาเว็บไซต์เกิดความ สะดวกและลดข้อผิดพลาดในการกากับหมุดหน้าหัวข้อ โดยลิสทใ์ นภาษาเอชทเี อม็ แอลมี 2 ลักษณะ คอื ลิสทช์ นิดไม่ลาดับ และ ลิทสช์ นิดลาดบั 1. ลิสทช์ นิดไม่ลาดับ (Unordered List: UL) คือ ลิสทท์ ่มี ีหมุดเป็นสญั ลักษณ์ เช่น จุดดา (Disc) ส่เี หล่ยี ม (Square) เป็นต้น ท้งั น้ีการกากับหมุดให้มีลักษณะหรือสญั ลักษณ์ท่ี ต้องการ ผู้ออกแบบเวบ็ จะต้องใช้ความสามารถของสไตลช์ ีทร่วม รปู แบบการกากบั ลสิ ทช์ นิดไม่ลาดบั <ul> <li>ข้อความ</li> </ul> จากรปู แบบการกากบั ลิสทช์ นิดไม่ลาดบั สามารถอธบิ ายได้ดงั น้ี 1) ป้ ายช่อื <ul> คือ ป้ ายช่อื ทใ่ี ช้กากบั ลิสทช์ นดิ ไม่ลาดบั ซ่งึ ul มาจากคาว่า Unordered list น่ันเอง 2) ป้ ายช่อื <li> คอื ป้ ายช่ือท่ใี ช้กากบั ข้อความให้เป็นหัวข้อย่อยท่มี ีหมุดนาหน้า ซ่ึง li มาจากคาว่า List หรือ รายการย่อยๆ น่ันเอง ป้ ายช่อื <li>…</li> จะต้องถกู ป้ ายช่อื <ul>…</ul> ครอบเสมอ ตวั อย่างการกากบั ลสิ ทช์ นดิ ไม่ลาดับ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <ul> <li>Thailand</li> <li>Japan</li> <li>South Korea</li> <li>China</li> <li>Vietnam</li> </ul> </body> </html>

170 ตัวอย่างการกากบั ลสิ ทช์ นดิ ไม่ลาดับร่วมกบั สไตลช์ ีท <html> <head> <meta charset=\"UTF-8\"> </head> <body> <ul style=\"list-style- type:square\"> <li>Thailand</li> <li>Japan</li> <li>South Korea</li> <li>China</li> <li>Vietnam</li> </ul> </body> </html> 2. ลิสทช์ นิดลาดับ (Ordered List: OL) คือ ลิสทท์ ่หี มุดหน้าข้อย่อยมีลักษณะ เรียงลาดับ โดยลิสทช์ นิดลาดับจะทาให้ผู้ออกแบบและพัฒนาเวบ็ เกิดความสะดวกในหมุด หน้าข้อย่อย โดยลดข้อผดิ พลาดท่เี กดิ จากการกาหนดตัวเลขผดิ ลาดบั ได้ รูปแบบการกากบั ลสิ ทช์ นิดลาดบั <ol> <li>ขอ้ ความ</li> </ol> จากรูปแบบการกากบั ลสิ ทช์ นิดลาดับสามารถอธบิ ายได้ดงั น้ี 1) ป้ ายช่อื <ol> คือ ป้ ายช่อื ท่ใี ช้กากบั ลสิ ทช์ นดิ ไม่ลาดบั ซ่ึง ol มาจากคาว่า Ordered list น่ันเอง 2) ป้ ายช่อื <li> คือ ป้ ายช่ือท่ใี ช้กากบั ข้อความให้เป็นหัวข้อย่อยทม่ี ีหมุดนาหน้า ซ่ึง li มาจากคาว่า List items หรือ รายการย่อยๆ น่นั เอง ป้ ายช่อื <li>…</li> จะต้องถูกป้ ายช่อื <ol>…</ol> ครอบเสมอ

171 ตวั อย่างการกากบั ลสิ ทช์ นดิ ลาดับ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <ol> <li>Thailand</li> <li>Japan</li> <li>South Korea</li> <li>China</li> <li>Vietnam</li> </ol> </body> </html> นอกจากน้ีการกากบั ลสิ ทช์ นิดลาดบั สามารถแสดงลาดบั ในลกั ษณะอ่นื ได้ โดยการ กาหนดแอต็ ทริบวิ ท์ ดงั น้ี 2.1 แอต็ ทริบิวท์ type เป็ นการกาหนดหมุดลาดับให้มีลักษณะเป็ น ตัวเลข ตัวอกั ษร หรือเลขโรมนั ดังตารางท่ี 5.2 ตารางท่ี 5.2 แสดงการกาหนดลักษณะของลาดบั ลกั ษณะของหมุดลาดบั คาอธิบาย ตวั อย่าง <ol type=“1”> ตัวเลขอารบิค <li>…</li> 1, 2, … </ol> <ol type=“A”> อกั ษรภาษาองั กฤษตัวใหญ่ <li>…</li> A, B, … </ol> <ol type=“a”> อกั ษรภาษาองั กฤษตัวเลก็ <li>…</li> a, b, … </ol> <ol type=“I”> เลขโรมนั ตัวใหญ่ <li>…</li> I, II, …

172 </ol> เลขโรมันตวั เลก็ <ol type=“i”> i, ii, … <li>…</li> </ol> ตัวอย่างการกากบั ลสิ ทช์ นดิ ไม่ลาดบั ร่วมกบั สไตลช์ ที <html> <head> <meta charset=\"UTF-8\"> </head> <body> <ul style=\"list-style-type:square\"> <li>Thailand</li> <li>Japan</li> <li>South Korea</li> <li>China</li> <li>Vietnam</li> </ul> </body> </html> 2.2 แอต็ ทริบวิ ท์ reversed คือ การลาดับแบบย้อนกลบั โดยตัวเลขอารบคิ อกั ษร หรือเลขโรมนั จะเร่ิมทค่ี ่ามากท่สี ดุ และลดลงทล่ี ะ 1 หน่วยเร่อื ยๆ รปู แบบการกากบั ลิสทช์ นิดลาดบั แบบย้อนหลบั <ol reversed> <li>…</li> </ol> ตัวอย่างการกากบั ลิสทช์ นิดลาดับแบบย้อนหลับ

173 <html> <head> <meta charset=\"UTF-8\"> </head> <body> <ol reversed> <li>Strongly agree</li> <li>Agree</li> <li>Neither agree nor disagree</li> <li>Disagree</li> <li>Strongly disagree</li> </ol> </body> </html> 2.3 แอต็ ทริบิวท์ start คือ การระบลุ าดบั แรกเร่ิมให้แก่ลสิ ท์ รปู แบบการกากบั ลาดับแรกเร่ิมให้แก่ลสิ ท์ <ol start=\"ลาดับแรกเร่ิม\"> <li>…</li> </ol> ตวั อย่างการกากบั ลาดับแรกเร่ิมให้แก่ลิสท์ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <ol start=\"2010\"> <li>เกิดเหตแุ ผ่นดินไหวขนาด 6.4 ใกลเ้ มอื งเกาซงุ ของประเทศไต้หวัน</li> <li>เกิดแผน่ ดินไหวความรุนแรง 6.3 แมกนจิ ดู ทีเ่ มอื งไครสต์เชิรช์ ประเทศนิวซีแลนด์</li> <li>เกิดปรากฏการณด์ าวศุกรผ์ ่านหนา้ ดวงอาทติ ยค์ ร้ังท่สี องและสดุ ทา้ ยในรอบศตวรรษ</li> <li>คอร์เค มาเรียว เบรโ์ กเกลยี วได้รับเลือกตง้ั เปน็ พระสนั ตะปาปาพระองค์ใหม่ ทรงพระนามว่า \"ฟรานซิส\" </li> <li>มาเลเซยี แอร์ไลน์ เท่ยี วบนิ ท่ี 370 ซ่ึงมผี ู้โดยสาร 239 คน หายสาบสญู เหนอื อา่ วไทย ระหว่างทางจาก กัวลาลัมเปอรไ์ ป ปักกง่ิ </li> </ol> </body> </html>

174 ตวั อย่างการกากบั ลาดบั แรกเร่ิมและย้อนกลับให้แก่ลสิ ท์ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <ol start=\"2556\" reversed> <li>ปมี ะเส็ง เบญจศก จลุ ศกั ราช 1375</li> <li>ปมี ะโรง จตั วาศก จลุ ศกั ราช 1374</li> <li>ปีเถาะ ตรศี ก จลุ ศกั ราช 1373</li> <li>ปีขาล โทศก จุลศักราช 1372</li> <li>ปฉี ลู เอกศก จุลศักราช 1371</li> </ol> </body> </html>

175 ตาราง 1. โครงสร้างตารางในภาษาเอชทเี อม็ แอล ตาราง (Table) คือ โครงสร้างท่ีประกอบไปด้วยคอลัมน์และแถวข้อมูล โดย ตารางในภาษาเอชทเี อม็ แอลมีโครงสร้างดังน้ี ภาพท่ี 5.19 แสดงโครงสร้างตารางในภาษาเอชทเี อม็ แอล จากรูปท่ี 5-19 สามารถอธบิ ายโครงสร้างตารางในภาษาเอชทเี อม็ แอลได้ดังน้ี 1) ป้ ายช่อื ตาราง <table> ใช้ในการกากบั ตาราง 1 ตาราง และหากต้องการให้มีเส้น ขอบสามารถเพ่ิมแอต็ ทริบิวท์ border ในอลี ิเมนทไ์ ด้ เช่น <table border=“1”>…</table> เป็ นต้ น 2) ป้ ายช่ือแถวข้อมูล (Table row) <tr>…</tr> ใช้ในการกากบั แถวของตาราง เทา่ น้ัน 3) ป้ ายช่ือหัวคอลัมน์ (Table head) <th>…</th> ใช้ในการกากับข้อมูลหัวตาราง โดยป้ ายช่ือ <th> จะต้องถูก <tr> ครอบ เน่ืองจากการสร้างตารางต้องเกดิ จากการสร้างแถว ข้อมลู ก่อนเสมอ 4) ป้ ายช่ือข้อมูล (Table Data) <td>…</td> ใช้ในการกากบั เน้ือหา ป้ ายช่ือข้อมูล <td> อาจเรียกว่า เซลล์ข้อมูล (Data cell) เน่ืองจากมีลักษณะคล้ายเซลล์ คือ มีขอบรอบ ด้านและภายในบรรจุข้อมูลน่ันเอง

176 รูปแบบการกากบั ตารางในภาษาเอชทเี อม็ แอล <html> <head> <meta charset=\"UTF-8\"> </head> <body> <table border=\"1\"> <tr> <th>Column</th> </tr> <tr> <td>Data</td> </tr> </table> </body> </html> ตวั อย่างการกากบั ตารางในภาษาเอชทเี อม็ แอล <html> <head> <meta charset=\"UTF-8\"> </head> <body> <table border=\"1\"> <tr> <th>Animal</th> <th>Description</th> <th>Photo</th> </tr> <tr> <td>Elephant</td> <td>Elephants are large mammals of …td> <td><img src=\"elephant.png\" width=\"200\"></td> </tr>

177 <tr> <td>Octopus</td> <td>The octopus is a soft- bodied…</td> <td><img src=\"octopus.png\" width=\"200\"></td> </tr> </table> </body> </html> 2. การรวมเซลล์ข้อมูลในตาราง การรวมเซลล์ข้อมูลในตารางมี 2 ลักษณะ คือ การรวมเซลล์หลายคอลัมน์ (Colspan) และ การรวมเซลล์หลายแถว (Rowspan) ซ่ึงคาว่า สแปน (span) หมายถึง ช่วง ห่าง ดังน้ัน Colspan และ Rowspan จึงเป็นการกากบั ช่วงห่างระหว่างเซลล์ข้อมูลในแนวต้ัง หรือ แนวนอนน่ันเอง 2.1 การรวมเซลล์หลายคอลมั น์ เรียกว่า คอลส์ แปน (Colspan) เป็นแอต็ ทริบิวท์ ทใ่ี ช้กากบั ช่วงเซลล์ข้อมูลในแนวคอลมั น์หรือแนวต้ัง รูปแบบการกากบั คอล์สแปน <html> <head> <meta charset=\"UTF-8\"> </head> <body> <table border=\"1\"> <tr> <th>Column1</th> <th colspan=\"2\">Column2</th> </tr> <tr> <td>Data Column1</td> <td>Data Column2.1</td> <td>Data Column2.2</td> </tr> </table> </body> </html>

178 ตัวอย่างการกากบั คอลส์ แปน <html> <head> <meta charset=\"UTF-8\"> </head> <body> <table border=\"1\"> <tr> <th>Dessert</th> <th colspan=\"2\">Photo</th> </tr> <tr> <td>Cake 120 Bth.</td> <td><img src=\"cake1.jpg\" width=\"300\"></td> <td><img src=\"cake2.jpg\" width=\"300\"></td> </tr> <tr> <td>Icecream 200 Bth.</td> <td><img src=\"icecream1.png\" width=\"300\"></td> <td><img src=\"icecream2.jpg\" width=\"300\"></td> </tr> </table> </body> </html>

179 2.2 การรวมเซลล์หลายแถว เรียกว่า โรว์สแปน (Rowspan) เป็นแอต็ ทริบิวทท์ ่ี ใช้กากบั ช่วงเซลลข์ ้อมลู ในแนวแถวข้อมลู หรือแนวนอน รูปแบบการกากบั โรว์สแปน <html> <head> <meta charset=\"UTF-8\"> </head> <body> <table border=\"1\"> <tr> <th>Column1</th> <th>Column2</th> </tr> <tr> <td rowspan=\"2\">Data Column1</td> <td>Data Column2</td> </tr> <tr> <td>Data Column2</td> </tr> </table> </body> </html>

180 ตัวอย่างการกากบั โรวส์ แปน <html> <head> <meta charset=\"UTF-8\"> </head> <body> <table border=\"1\"> <tr> <th rowspan=\"3\">Flag</th> </tr> <tr> <td>Asia</td> <td><img src=\"thflag.png\" width=\"50\"></td> <td><img src=\"chflag.png\" width=\"50\"></td> <td><img src=\"jpflag.png\" width=\"50\"></td> </tr> <tr> <td>Europe</td> <td><img src=\"enflag.png\" width=\"50\"></td> <td><img src=\"geflag.png\" width=\"50\"></td> <td><img src=\"itflag.png\" width=\"50\"></td> </tr> </table> </body> </html>

181 ฉลากขอ้ มูลเว็บ การกากบั ฉลากข้อมลู เรียกว่า “Meta-Data” โดยฉลากข้อมูล คอื ข้อมูลทอ่ี ธบิ ายส่งิ หน่ึงๆ เช่น ฉลากยา คือ การอธบิ ายช่ือยา การรับประทานและข้อควรระวัง เป็นต้น ดังน้ัน ในการกากบั ฉลากข้อมลู เวบ็ เป็นการอธบิ ายข้อมลู ทส่ี าคัญของเวบ็ ไซต์ เช่น เวบ็ ไซต์มีเน้ือหา อย่างไร ใครเป็นผู้ออกแบบและพัฒนาเวบ็ ไซต์ เวบ็ ไซต์น้ันๆ มีคาสาคัญอะไรบ้าง ขนาดท่ี เร่ิมแสดงผลหน้าเว็บ เป็ นต้น นอกจากน้ีการกากับฉลากข้อมูลเว็บช่วยให้จักกลค้นหา (Search engine) สามารถอ่านหน้าเวบ็ ไซตไ์ ด้อย่างถูกต้องและใช้ฉลากข้อมูลไปจัดทาคาค้น หาได้ ฉลากข้อมูลเวบ็ จะใช้ป้ ายช่อื <meta> ซ่งึ อยู่ภายใต้การกากบั ของป้ ายช่ือ <head> โดย ฉลากข้อมลู เวบ็ ทค่ี วรทราบมีดังต่อไปน้ี 1. ฉลากข้อมูลชุดอกั ขระ (Charset) เวบ็ ไซตเ์ ป็นส่อื ท่ใี ช้ท่วั โลก ดังน้ันจึงมีอกั ขระจาแนกตามภาษาต่างๆ จานวนมาก ในส่วนของภาษาไทยกม็ มี าตรฐานชุดอักขระภาษาไทยโดยเฉพาะ คือ มาตรฐานเลขท่ี มอก. 620-2533 หรือท่ที ราบกันดีว่า TIS-620 ตามประกาศกระทรวงอุตสาหกรรม ฉบับท่ี 1647 (พ.ศ. 2533) ซ่ึงเป็นมาตรฐานทป่ี ระเทศไทยได้ดาเนินการจดทะเบียนกับหน่วยงาน ควบคุมมาตรฐานของเครือข่ายอินเทอร์เนต็ สากล (Internet Assigned Numbers Authority: IANA) ทาให้ภาษาไทยสามารถแสดงผลได้อย่างถูกต้องบนเวบ็ เบราเซอร์ เม่ือวันท่ี 22 กันยายน พ.ศ.2541 โดย TIS-620 ใช้หน่วยความจา 1 ไบต์ (Byte) หรือ 8 บิต (Bits) เพ่ือแทนตัวอกั ขระภาษาไทย 1 อักขระ เช่น “ก” ถูกกาหนดรหัส A1 (1010 0001) เป็น ต้น ปัจจุบันมกี ารประกาศมาตรฐาน UTF-8 หรือ Unicode Transformation Format (8-bits) ซ่ึงเป็ นมาตรฐานท่ีมีชุดอักขระครอบคุมอักขระหลายภาษาบนโลก โดยใช้ หน่วยความจาระหว่าง 1-4 ไบต์ และมาตรฐาน UTF-8 สามารถแสดงผลอกั ขระภาษาไทย ได้อย่างถูกต้อง แต่ใช้พ้ืนท่หี น่วยความจาท่มี ากกว่ามาตรฐาน TIS-620 เน่ืองจาก UTF-8 รองรับหลายภาษา แต่ TIS-620 รองรับภาษาไทยและภาษาอังกฤษเท่าน้ัน ดังน้ัน หาก เวบ็ ไซตม์ ีการใช้อกั ขระปะปนกนั หลายภาษาจึงควรเลือกใช้มาตรฐาน UTF-8 ในการกากับ ฉลากข้อมูลชุดอกั ขระบนหน้าเวบ็ ไซต์เพ่ือการแสดงผลท่ถี ูกต้อง และสมาคม W3C (World Wide Web Consortium) องค์กรควบคุมมาตรฐานเวบ็ แนะนาให้ใช้มาตรฐานชุดอักขระ UTF-8 ในการออกแบบและพัฒนาเวบ็ ไซต์

182 รูปท่ี 5.20 แสดงแนวโน้มความนิยมชุดอกั ขระ UTF-8 รปู แบบการกากบั ฉลากข้อมลู ชุดอกั ขระมาตรฐาน UTF-8 <html> <head> <meta charset=\"UTF-8\"> </head> </html> ตัวอย่างการเปรียบเทยี บการไม่กากับและกากับฉลากข้อมูลชุดอักขระมาตรฐาน UTF-8 <html> <head> </head> <body> สวสั ดี </body> </html> <html> <head> <meta charset=\"UTF-8\"> </head> <body> สวสั ดี </body> </html>

183 2. ฉลากข้อมูลเน้ือหา (Content) การกากับฉลากข้อมูลเน้ือหามีประโยชน์ต่อการจาแนกหน้าเวบ็ เพจ และการทา ดชั นีสบื ค้นเวบ็ โดยฉลากข้อมลู เน้ือหา (Content) จะถูกกาหนดด้วยแอต็ ทริบวิ ท์ name และ content ดงั น้ี ตาราง 5.3 แสดงการระบุฉลากข้อมลู เน้ือหา ค่าของ แอ็ตทริบวิ ท์ คาอธิบาย รูปแบบ name author การระบุผ้เู ขยี น <meta name=\"author\" content=\"ณัฐภัทร\"> เน้ ือหาเวบ็ description การระบุ <meta name=\"description\" คาอธบิ าย content=\"วชิ าหลกั การออกแบบเวบ็ \"> เน้ ือหาภายใน เวบ็ generator การระบุ <meta name=\"generator\" ซอฟตแ์ วร์ทใ่ี ช้ content=\"Brackets.io\"> สร้างเวบ็ keywords การระบุคา <meta name=\"keywords\" สาคญั ของเวบ็ content=\"HTML, CSS, Layout, Principle of Web Design\"> viewport การระบุพ้ืนท่ที ่ี <meta name=\"viewport\" ผู้ใช้มองเหน็ content=\"width=device-width, เช่น การปรับ initial-scale=1.0\">

184 ขยายเน้ ือหาให้ เตม็ หน้าเวบ็ เบ ราเซอร์ เป็นต้น เหมาะสาหรับ การออกแบบ และพัฒนาเวบ็ เชิงตอบสนอง (Responsive web) ตวั อย่างการระบุฉลากข้อมลู เน้ือหา <html> <head> <meta charset=\"UTF-8\"> <meta name=\"author\" content=\"ณัฐภัทร\"> <meta name=\"description\" content=\"วิชาหลกั การออกแบบเวบ็ \"> <meta name=\"generator\" content=\"Brackets.io\"> <meta name=\"keywords\" content=\"HTML, CSS, Layout, Principle of Web Design\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> </head> <body> </body> </html> 3. ฉลากข้อมลู โปรโตคอล (http-equiv) ฉลากข้อมูลโปรโตคอล มาจากคาว่า เอชทีทพี ี และ อีไควเลนท์ โดยเอชทที ีพี (Hypertext transfer protocol: HTTP) คือ มาตรฐานการส่อื สารท่เี วบ็ ไซต์ทว่ั ไปใช้ในการ ร้องขอ (Request) และตอบรับข้อมูล (Response) บนเครือข่ายอินเทอร์เนต็ และ อไี คว เลนท์ (Equivalent: equiv) แปลว่า เทยี บเท่า ซ่ึงเม่ือรวมกนั แล้ว http-equiv จึงหมายถึง การเทยี บเทา่ กบั โปรโตคอล ซ่งึ ทางเทคนิค เรียกว่าส่วนหัวเอชทที พี ี (HTTP Header) ภาษาเอชทีเอม็ แอลจึงได้กาหนดให้มีแอ็ตทริบิวท์ http-equiv ข้ึน เพ่ือให้ ผู้ออกแบบและพัฒนาเวบ็ ไซต์สามารถระบุ HTTP Header ด้วยฉลากข้อมูลโปรโตคอล ทา

185 ให้สามารถแจ้งเวบ็ เบราเซอร์เตรียมการทางานต่างๆ ไว้รองรับการแสดงผลเวบ็ ไซต์ได้ เช่น หน้าเวบ็ ไซต์มีการเข้ารหัสอักขระอย่างไร มีอัตราการรีเฟรชหน้าเวบ็ เท่าใด เว็บไซต์น้ีจะ หมดอายุเม่อื ใด เป็นต้น รูปแบบของฉลากข้อมลู โปรโตคอล ค่าของแอต็ ทริบิวท์ http-equiv ทค่ี วรทราบมดี งั น้ี ตารางท่ี 5.4 แสดงค่าของแอต็ ทริบวิ ท์ http-equiv ค่าของ แอ็ตทริบวิ ท์ คาอธิบาย รูปแบบ http-equiv content-type การแจ้ งให้ เว็บเบรา เซอร์เลือกใช้อักขระท่ี <meta http-equiv=\"content-type\" เหมาะสมกับเน้ือหา content=\"text/html; charset=UTF-8\"> เวบ็ ไซต์ refresh การแจ้ งให้ เว็บเบรา เ ซ อ ร์ รี เ ฟ ร ช ห น้ า เว็บไซต์ตามระยะเวลา <meta http-equiv=\"refresh\" content=\"300\"> ท่ีกาหนด โดย ระยะเวลามีหน่วยเป็ น วิ น า ที แ ต่ ค ว ร ระมัดระวังการรีเฟรช <meta http-equiv=\"refresh\" หน้าเว็บไซต์เร็วและถ่ี content=\"300;url=http://www.ssru จ น เ กิ น ไ ป อ า จ .ac.th\"> ก่อให้ เกิดอาการชักใน ผู้ใช้งานบางคนได้

186 expires การแจ้ งให้ เว็บเบรา เซอร์และจักกลค้นหา <meta http-equiv=\"expires\" content=\"Fri, 5 ท ร า บ ว่ า เ ว็ บ ไ ซ ต์ น้ี Jan 2014 23:00:00 GMT\"> หมดอายุเม่อื ใด ตัวอย่างการระบุฉลากข้อมลู โปรโตคอล <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\"> <meta http-equiv=\"refresh\" content=\"100\"> <meta name=\"author\" content=\"Nutthapat\"> <meta name=\"description\" content=\"Principle of web design\"> <meta name=\"description\" content=\"web layout, web design\"> </head> <body> </body> </html> สรุป ภาษาเอชทีเอม็ แอล เน่ืองจากเป็ นภาษามาตรฐานท่ใี ช้ในการแสดงผลข้อมูลบน เวบ็ เบราเซอร์ โดยภาษาเอชทเี อม็ แอล มาจากคาว่า Hyper Text Markup Language: HTML ภาษาเอชทเี อม็ แอลเป็นภาษาท่เี น้นการกาหนดโครงสร้างหลักหน้าเวบ็ มากกว่าการ กาหนดรูปแบบการแสดงผล นักออกแบบเวบ็ ควรเข้าใจโครงสร้างทางภาษาเอชทเี อม็ แอล เพ่ือใช้ในการสร้างสรรค์หน้าเว็บไซต์ โครงสร้างภาษาเอชทีเอ็มแอลประกอบไปด้วย 1) โครงสร้างอีลิเมนท์ (Element) โดยมี ป้ ายช่ือ (Tag name) ช่ือคุณลักษณะ (Attribute name) ค่าลักษณะ (Attribute value) เน้ือหาท่ถี ูกกากบั (Affected content) ป้ ายเปิ ด (Opening tag) ป้ ายปิ ด (Closing tag) อลี ิเม้นทซ์ ้อน (Nested element) 2) โครงสร้างของ เวบ็ เพจ โดยมี อลี ิเม้นทเ์ อชทเี อม็ แอล (html) อลี ิเม้นทห์ ัว (Head) อลี เิ ม้นทช์ ่อื เวบ็ (Title) อลี ิเม้นทร์ ่าง (Body) นอกจากน้ีส่งิ ท่สี าคัญในการเช่ือมโยงเน้ือหาภายในเวบ็ ไซต์จาเป็นท่ี จะต้องลาดับไดเรก็ ทอร่ีไฟล์ท่จี ดั เกบ็ ไว้ให้มคี วามถูกต้องด้วย

187 คาถามทา้ ยบท 1. จงอธบิ ายส่วนประกอบในโครงสร้างของอลี ิเม้นท์ (Element) 2. จงอธบิ ายข้นั ตอนการสร้างและแสดงผลเอกสารเอชทเี อม็ แอล พร้อมยกตัวอย่างการ กากบั ภาษาเอชทเี อม็ แอล 3. จงเขยี นกากบั ภาษาเอชทเี อม็ แอลเพ่ือแสดงผลข้อความต่อไปน้ี 4. จงอธบิ ายความแตกต่างระหว่าง ยูอาร์แอลสมั บูรณ์ (Absolute URL) และ ยูอาร์ แอลสมั พัทธ์ (Relative URL) 5. จากภาพ จงกากบั แผนท่รี ปู ภาพดงั น้ี 5.1 กากบั พิกดั พ้ืนท่สี ่เี หล่ยี ม (Rectangle) ในภาพกล้อง และกากบั ไฮเปอร์ ลิงคใ์ ห้ไปท่เี วบ็ ไซตส์ นิ ค้ากล้อง 5.2 กากับพิกัดพ้ืนท่ีวงกลม (Circle) ในภาพกระถางต้นไม้ และ กากบั ไฮเปอร์ลิงค์ให้ไปท่เี วบ็ ไซตส์ นิ ค้ากระถางต้นไม้ 5.3 กากับพิกัดพ้ืนท่ีหลายเหล่ียม (Polygon)ในภาพแว่นตา และ กากบั ไฮเปอร์ลิงค์ให้ไปท่เี วบ็ ไซต์สนิ ค้าแว่นตา 6. จงกากบั วดิ โี อ 1 คลปิ โดยมขี ้อกาหนดดังน้ี 6.1มภี าพหน้าปกวิดโี อ 6.2เล่นวิดีโอบนเวบ็ เบราเซอร์ทนั ทเี ม่อื พร้อม โดยไม่รอการส่งั งานจากผู้ชม 6.3การวนซา้ อตั โนมตั ิเม่อื ส้นิ สดุ วิดีโอ 7. จงกากบั ลสิ ทช์ นิดไม่ลาดบั (Unordered list) ดังน้ี  Monday  Tuesday  Wednesday

188  Thursday  Friday 8. จงกากบั ลิสทช์ นิดลาดบั (Ordered list) ดังน้ี I. Australia II. America III. Japan IV. Thailand 9. จากไดเรก็ ทอร่ีดังน้ี project web ecommerce Index.html image product1.png หากเวบ็ เพจ index.html ต้องการเรียกใช้ภาพ product1.png จะต้องกากบั URL ยู อาร์แอลสมั พัทธ์ (Relative URL) อย่างไร 10.จงกากบั ตารางดงั ภาพ ภาพสินคา้ ราคา ชื่อสนิ คา้ 500 บาท Lenovo N100 Wireless 4,700 บาท Mouse (Black) Bluetooth Smart Watch

189 เอกสารอา้ งอิง Davis, Mark. (2010). Unicode nearing 50% of the web. Official Google Blog. Google. ISO 8879:1986 (2008). Information processing -- Text and office systems -- Standard Generalized Markup Language (SGML). URL https://www.iso.org/standard/16387.html HTML5. (2008). World Wide Web Consortium. URL https://www.w3.org/TR/html5/ มาตรฐานผลิตภณั ฑอ์ ตุ สาหกรรม. (2533). มอก.620-2533 รหัสสาหรับอกั ขระไทยทใ่ี ช้ กบั คอมพิวเตอร์. URL https://www.nectec.or.th/it- standards/std620/std620.html Joel Sklar. (2014). Principles of Web Design, Sixth Edition. Cengage Learning Asia. Jon Duckett. (2011). HTML and CSS : Design and Build Websites. John Wiley & Sons Inc. Specifying the document's character encoding HTML5. World Wide Web Consortium.

190

191 แผนบริหารการสอนประจาบทที่ 6 หวั ขอ้ เน้ อื หา ประวตั คิ วามเป็นมาของสไตล์ชที โครงสร้างของสไตล์ชที การแทรกสไตลช์ ีท ซเี ลก็ เตอร์ การใช้เคร่ืองมอื ตรวจสอบสไตล์ชที วตั ถุประสงคเ์ ชิงพฤติกรรมหวั ขอ้ เน้ ือหา 1. อธบิ ายประวตั คิ วามเป็นมาของสไตล์ชีทได้ 2. อธบิ ายโครงสร้างของสไตล์ชที ได้ 3. อธบิ ายการแทรกสไตล์ชีทได้ 4. อธบิ ายการใช้งานซีเลก็ เตอร์ได้ 5. อธบิ ายการใช้งานซีเลก็ เตอร์เทยี มได้ 6. อธบิ ายการใช้เคร่ืองมือตรวจสอบสไตล์ชีทได้ วิธีและกิจกรรมการเรียนการสอน 1. วิธีสอน 1.1 วธิ สี อนแบบบรรยาย 1.2 วธิ สี อนแบบอภปิ ราย 1.3 วิธสี อนแบบการศกึ ษาโดยลาพัง 2. กิจกรรมการเรียนการสอน 2.1 ผู้สอนบรรยายสรปุ เน้อื หา 2.2 ให้ผู้เรียนศึกษาเน้ือหาจากเอกสารประกอบการสอน 2.3 ผู้เรียนร่วมอภปิ รายการออกแบบเวบ็ ไซต์ลกั ษณะต่าง ๆ ทใ่ี ช้ใน ชวี ติ ประจาวนั 2.4 ผู้เรียนแบ่งกลุ่มร่วมกนั วิเคราะห์เปรียบเทยี บเน้ือหา ก่อนผู้สอนจะสรุปและ ยกตวั อย่างเปรียบเทยี บ 2.5 มอบหมายให้ผู้เรียนค้นหาเพ่ิมเติม

192 สือ่ การเรียนการสอน 1. เอกสารประกอบการสอน 2. ส่อื อเิ ลก็ ทรอนกิ ส์ 3. หนังสอื ตารา เอกสารทเ่ี ก่ยี วข้อง การวดั ผลและประเมนิ ผล 1. สงั เกตการตอบคาถามและต้งั คาถามของผู้เรียนในระหว่างการบรรยาย อภิปราย และซักถาม 2. สงั เกตความต้งั ใจในการติดตามเน้อื หาบทเรียน 3. สงั เกตการให้ความร่วมมือในการอภปิ รายกลุ่ม 4. สงั เกตการให้ความร่วมมอื ในการศกึ ษาโดยลาพัง

193 บทที่ 6 สไตลช์ ีท ในการออกแบบเว็บไซต์น้ัน ส่ิงสาคัญ คือ การควบคุมลักษณะการแสดงผลของ เวบ็ ไซตใ์ ห้มีลักษณะสอดคล้องกนั ท้งั เวบ็ ไซต์ และสามารถแสดงผลเวบ็ ไซต์ได้อย่างถูกต้อง บนเวบ็ เบราเซอร์ในทกุ ๆ อุปกรณ์ โดยปัจจุบันนักออกแบบเวบ็ ไซต์ (Web designer) จะใช้ เคร่ืองมือหน่ึง น่ันคือ สไตล์ชีท (Cascading style sheet: CSS) ซ่ึงในบทเรียนน้ี จะอธบิ าย ถึงประวัติความเป็นมาและความสาคัญของสไตล์ชีท วากยสมั พันธข์ องสไตล์ชีท (Syntax) วิธีการใช้สไตล์ชีทร่วมกับภาษาเอชทีเอ็มแอล มาตรวัดหน่วยท่ีใช้ในสไตล์ชีท (CSS measurement unit) ซีเล็คเตอร์ (Selector) และซีเลก็ เตอร์เทยี ม (Pseudo-element selectors) ประวตั ิความเป็ นมาของสไตลช์ ีท เวบ็ ได้ถูกนามาประยุกตใ์ ช้สาหรับการเผยแพร่ข้อมูลทางอิเลก็ ทรอนิกส์ (Electronic publishing) โดยในช่วงแรกพบปัญหาสาคัญในการเผยแพร่เอกสาร น่ันคือ การขาดส่งิ ท่จี ะ มาช่วยในการควบคุมรูปแบบลักษณะของเอกสาร หรือท่ีเรียกว่า สไตล์ (Style) น่ันเอง ตัวอย่างเช่น ในหนังสอื พิมพ์มีการกาหนดเค้าร่าง (Layout) สาหรับคุมการแสดงผลของ เน้ือหา เช่น การเว้นระยะขอบของข่าว (Margin) เป็ นต้น แต่เว็บในยุคน้ันไม่มีส่ิงท่ีจะ ควบคุมเค้าร่างให้สามารถเผยแพร่ได้เหมือนกบั หนังสอื พิมพ์ ในปี ค.ศ.1991 Håkon Wium Lie ได้เหน็ ความจาเป็นทจ่ี ะต้องมสี ่งิ ท่จี ะควบคุมเค้า ร่างของเอกสารอิเลก็ ทรอนิกสท์ ่แี สดงผลบนเทคโนโลยีเวบ็ โดยขณะท่ี Håkon Wium Lie ได้ศึกษาอยู่ในห้องปฏิบัติการส่อื (Media laboratory) สถาบันเทคโนโลยีแมสซาชูเซตส์ (Massachusetts institute of technology: MIT) ประเทศสหรัฐอเมริกา โดยได้ตีพิมพ์ ผลงานวิทยานิพนธ์ระดับปริญญาโท เร่ือง “The electronic broadsheet” หรือ ข่าวสาร อเิ ลก็ ทรอนิกสห์ น้าเดียว น่ันหมายความว่า ไม่มีการพลิกหน้าหลังเหมือนหนังสอื พิมพ์ปกติ เน่ืองจากแสดงผลบนหน้าจอคอมพิวเตอร์ โดยวิทยานิพนธด์ ังกล่าวมีเน้ือหาเก่ียวกับการ จัดการข่าวดิจิทลั (Digital news) มีลักษณะเป็นหนังสอื พิมพ์ส่วนบุคคล (Personalized Newspaper) ซ่ึง Håkon Wium Lie ได้ให้คาจากัดความของ “Electronic broadsheet” ไว้ ดงั น้ี

194 “ข่าวสารอิเลก็ ทรอนิกสห์ น้าเดียว (Electronic broadsheet) คือ การติดต่อประสาน ระหว่างผู้ใช้กบั จอแสดงผลและเน้ือหา โดยทผ่ี ู้ใช้ คอื ผู้อ่าน และสามารถอ่านได้โดยตรงจาก หน้าจอคอมพิวเตอร์ซ่ึงใช้แสดงผลแทนกระดาษ และหนังสือพิมพ์ประกอบด้วยเน้ือหาท่ี เรียกว่าบทความ บทความแต่ละบทความมีลักษณะเป็น ข้อความ (Text) ภาพน่ิง (Picture) และวดิ โี อ (Video) นอกจากน้ีบทความยงั มกี ารพาดหัวข่าว ป้ ายขยาย (Tag) ต่างๆ เช่น ช่อื ของผู้แต่ง และ ทม่ี า เป็นต้น และส่วนสาคัญ คือ การท่ผี ู้ใช้สามารถลาดับข่าวสารตามความ ต้องการหรือวัตถุประสงค์ของตนเองได้” โดยมีกรอบแนวคิดวิทยานิพนธ์ เร่ือง “The electronic broadsheet” ดังภาพท่ี 6.1 ภาพท่ี 6.1 แสดงกรอบแนวคิดในวิทยานิพนธ์ เร่อื ง “The electronic broadsheet” ท่มี า: https://www.w3.org/People/howcome/TEB/www/hwl_th_3.html #HEADING2 ในปี ค.ศ.1994 Håkon Wium Lie ได้คิดค้นภาษาสาหรับควบคุมการแสดงผล เน้ือหาเวบ็ ไซตข์ ้นึ ซ่ึงกค็ ือสไตลช์ ที (CSS) น่ันเอง โดยสไตลช์ ที สามารถทางานร่วมกบั ภาษา เอชทเี อม็ แอลได้อย่างมีประสทิ ธภิ าพ และในปี ค.ศ.1998 สไตล์ชีทได้ถูกข้ึนทะเบียนอาร์

195 เอฟซี (Request for comments: RFC) และถูกจัดอยู่ในกล่มุ ข้อมูลข่าวสาร (Informational) โดยมีรหัสการข้ึนทะเบียน คือ RFC-2318 ซ่ึงทาให้สไตล์ชีทเป็นภาษามาตรฐานท่ใี ช้บน เครือข่ายอินเทอร์เนต็ และปัจจุบันสไตล์ชีทถูกพัฒนาเป็นรุ่นท่ี 3 (CSS3) ทาให้สามารถ ควบคุมการแสดงผลบนคอมพิวเตอร์ส่วนบุคคล สมาร์ทโฟน แทบ็ เบลต็ ทวี ี และอุปกรณ์ ส่อื สารต่างๆ ทเ่ี วบ็ เบราเซอร์สามารถทางานได้ สไตล์ชีทมีวัตถุประสงค์ในการใช้งานแตกต่างจากภาษาเอชทีเอม็ แอล กล่าวคือ สไตล์ชีทใช้ในการควบคุมการแสดงผลหรือการนาเสนอรูปแบบของเว็บไซต์ ส่วนภาษา เอชทเี อม็ แอลใช้ในการควบคุมโครงสร้างและเน้ือหาของเวบ็ ไซต์ นอกจากน้ีสไตล์ชีทยัง สามารถควบคุมการแสดงผลเวบ็ เพจท้งั หมดของเวบ็ ไซต์ได้จากไฟล์เอกสารสไตล์ชีทไฟล์ เดียวเทา่ น้ัน ทาให้ผู้ออกแบบและพัฒนาเวบ็ ไซต์มีความสะดวกในการควบคุมการแสดงผล เวบ็ ไซต์ โครงสรา้ งของสไตลช์ ีท โครงสร้างของสไตล์ชีท อาจเรียกว่า ชุดของกฎสไตล์ชีท (CSS Rule set) ซ่ึง ประกอบไปด้วย 2 สว่ นหลกั ดงั น้ี 1. ซเี ลก็ เตอร์ (Selector) คือ ตัวเลือกท่จี ะถูกกาหนดสไตล์ เช่น ช่ืออิลีเมนท์ ช่ือไอ ดี ช่อื คลาส ช่อื แอต็ ทริบิวท์ เป็นต้น 2. การประกาศคุณลกั ษณะ (Declaration) คอื การระบุคุณลักษณะท่ตี ้องการให้เกดิ กับซีเล็กเตอร์ โดยประกอบไปด้วยช่ือคุณลักษณะ (Property) และค่าของคุณลักษณะ (Value) โดยค่ันด้วยเคร่ืองหมายโคลอน ( : ) และเม่ือประกาศคุณลักษณะแล้วให้จบด้วย เคร่ืองหมายเซมิโคลอน ( ; ) รูปแบบโครงสร้างของสไตลช์ ที มีดังน้ี ภาพท่ี 6.2 แสดงโครงสร้างของสไตล์ชที ทม่ี า: https://www.w3.org/Style/Examples/011/firstcss


Nutthapat Keawrattanapat

เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ
Share
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

RELATED PUBLICATIONS