414 ตวั อย่างท่ี 8.24 การระบุแหล่งขอ้ มูลชนิดวดิ ีโอ เพ่ือรองรับเวบ็ บราวเซอร์ท้งั หมด (ต่อ) <source src=\"Media/Pretty_Boy_ M2M.webm\" type=”video/webm” /> <source src=\"Media/Pretty_Boy_ M2M.ogv\" type=”video/ogg” /> บราวเซอร์ไม่สนบั สนุนแทก็ video (Browser is not support video tag) </video> </body> </html> 8.6.1 การใช้งานแทก็ <audio> การใชง้ านรูปแบบของมลั ติมีเดียอีกประเภทหน่ึงสามารถใชง้ านเกี่ยวกบั ไฟลเ์ สียงทุกประเภท รูปแบบดงั น้ี รูปแบบ <audio src=”/media/ex.mp3” controls=”controls”></audio> ตัวอย่างที่ 8.25 การใชง้ านออดิโอดว้ ยแทก็ <audio> <!DOCTYPE html> <html> <head><title>Audio for HTML5</title> <meta charset=\"windows-874\"></head> <body> <h2>Audio Player</h2> <audio controls> <source src=\"Media/Jackpot.mp3\" /> </audio> </body></html> บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
415 ภาพที่ 8.31 การใชง้ านออดิโอดว้ ยแทก็ <audio> 8.7 การเกบ็ ข้อมูล Web Storage ด้วย HTML5 การใชง้ าน Web Storage “เวบ็ สทรแร็ค” ในการทางานบน HTML5 คือ การเก็บขอ้ มูลเอาไวท้ ี่ฝ่ังผใู้ ชง้ าน (Client) ลกั ษณะการทางานคลา้ ยกบั Cookie แตกต่างกนั ท่ี Local Storage กบัภาษาที่เขียนข้ึนในฝ่ังผใู้ ชง้ านโดยเฉพาะ การทางานในลกั ษณะน้ีคือขอ้ ไดเ้ ปรียบเหนือการใชง้ านแบบ Cookie เวบ็ สทรแร็คมีลกั ษณะการเกบ็ ขอ้ มูลแบบง่ายๆ ในรูปแบบ Key-Value หรือเรียกวา่Dictionary แบ่งออกเป็น 2 ส่วน ดงั น้ี 1. Local Storage เกบ็ ขอ้ มูลไวเ้ ป็นระยะเวลายาว (persistence) โดยใชอ้ อบเจคต์ ชื่อ LocalStorage ซ่ึงซบั ซอ้ นข้ึน สามารถเปิ ดเวบ็ เพจเดียวกนั สองแทบ็ หรือมากกวา่ โดยการแชร์ขอ้ มูลและขอ้ มูลจะยงั คงอยู่ กรณีปิ ดเวบ็ บราวเซอร์หรือทาการลบ Cookie แลว้ 2. Session Storage เหมือนกนั Local Storage แทบทุกประการ ลกั ษณะการเกบ็ ขอ้ มูลเฉพาะเซสชนั่ การเรียกใชง้ านเวบ็ ไซต์ การปิ ดแทบ็ เวบ็ ไซตข์ อ้ มูลการใชง้ านหายไป การเรียกใช้จะถูกลบค่าทิ้งทุกคร้ังท่ีปิ ดเวบ็ บราวเซอร์ การใชง้ านเวบ็ สทรแร็คน้นั รองรับเฉพาะการเก็บขอ้ มูลท่ีเป็นสตริง (String) เก็บในลกั ษณะตวั อกั ขระ (characters) หากตอ้ งการเกบ็ ออบเจคต์ ท้งั กลุ่มขอ้ มูลลงใน Local Storage หรือSession Storage ตอ้ งทาการแปลงขอ้ มูลจากออบเจคตใ์ หอ้ ยใู่ นรูปแบบขอ้ มูลชนิดสตริงก่อนบราวเซอร์ท่ีสนบั สนุนการใชง้ าน HTML5 Web Storage คือ Internet Explorer 8+, Firefox,Opera, และ Apple Safari บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
416 8.7.1 การใช้งานเวบ็ สทรแร็คข้นั พืน้ ฐาน การใชง้ านในรูปแบบเวบ็ สทรแร็ค 2 รูปแบบlocal Storage และ session Storage เรียกการใชง้ านออบเจคต์ จดั เกบ็ ขอ้ มูลและ 2 รูปแบบมีการเรียกใชง้ าน methods และ property ท่ีเหมือนกนั ดงั น้ี 1. setItem(key, value) : เกบ็ ขอ้ มูล 2. getItem(key) : ดึงขอ้ มูลท่ีเก็บไวอ้ อกมาใช้ ตาม key ที่ระบุ 3. removeItem(key) : ลบขอ้ มูลที่เคยเกบ็ ไว้ ตาม key ที่ระบุ 4. key(n) : แสดงชื่อของ key ตาม index ที่ระบุ (เริ่มท่ี 0) 5. clear( ) : ลบขอ้ มูลท่ีจดั เก็บไวท้ ้งั หมด (เฉพาะโดเมนน้นั ๆ) 6. length : แสดงจานวนขอ้ มูลที่จดั เก็บไวท้ ้งั หมด (เฉพาะโดเมนน้นั ๆ) การนาเทคโนโลยเี วบ็ ดงั กล่าวนาประยกุ ตใ์ ชก้ บั Web Application “เวบ็ แอปพลิเคชนั ”ไดห้ ลายรูปแบบ เช่น การเก็บคา่ Preferences คือ เกบ็ ค่าต่างๆ ที่ผใู้ ชง้ านสามารปรับแตง่ เช่นขนาดตวั อกั ษร หรือมุมมองการแสดงผล และการเก็บสถานะของผใู้ ชง้ านในการใชง้ านคร้ังล่าสุดโดยทาการเพื่อเกบ็ รักษาสถานะของผใู้ ชง้ านบนเวบ็ แอปพลิเคชนั หรือคา่ อินพตุ ในการรับขอ้ มูลต่างๆ บนฟอร์ม และให้คงอยเู่ หมือนเดิม แมท้ าการปิ ดเวบ็ แอปพลิเคชนั และการใชง้ านแคส(Cache) ของขอ้ มูล คือ เก็บขอ้ มูลบางส่วนที่ไม่ตอ้ งการ เช่น การอพั เดทขอ้ มูลแบบ Real-time เพือ่ลดภาระการทางานของเครื่องเซิร์ฟเวอร์ทางานนอ้ ยลง ตัวอย่างที่ 8.26 การใชง้ าน Local Storage แบบ sessionStorage <!DOCTYPE html> <html> <head><title>LocalStorage :: SessionStorage </title> <meta charset=\"windows-874\"> <script> function clickCounter() { if(typeof(Storage)!==\"undefined\") { if (sessionStorage.clickcount) { บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
417ตวั อย่างท่ี 8.26 การใชง้ าน Local Storage แบบ sessionStorage (ตอ่ )sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;}else{sessionStorage.clickcount=1;} document.getElementById(\"result\").innerHTML=\"You have clicked thebutton \" + sessionStorage.clickcount + \" time(s) in this session.\";}else{document.getElementById(\"result\").innerHTML=\"Sorry, your browser does notsupport web storage...\";}}</script></head><body> <p><button onclick=\"clickCounter()\" type=\"button\">Click me!</button></p> <div id=\"result\"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window), and try again, and the counter is reset.</p></body></html> บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
418 ภาพท่ี 8.32 แสดงผลลพั ธ์ก่อนการใชง้ าน Session Storage ข้นั ตอนทดสอบการเรียกใชง้ าน Session Storage โดยการคลิกที่ป่ ุมผลลพั ธ์ท่ีไดด้ งั ภาพที่ 8.33 แสดงการคลิกที่ป่ ุม ตวั เลขจะเพมิ่ ข้ีนเรื่อยๆ ภาพที่ 8.33 แสดงผลลพั ธ์ค่าตวั เลขการเรียกใชง้ าน บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
419ตัวอย่างท่ี 8.27 การใชง้ าน Local Storage แบบ sessionStorage กาหนดผใู้ ช้<!DOCTYPE html> +<html> <head><title>LocalStorage</title> <meta charset=\"windows-874\"></head><body><div id=\"result\"></div><script>if(typeof(Storage)!==\"undefined\"){localStorage.lastname=\"Mr.Tongchai Laboon\";document.getElementById(\"result\").innerHTML=\"Last name: \"localStorage.lastname;}else{document.getElementById(\"result\").innerHTML=\"Sorry, your browser does notsupport web storage...\";}</script></body></html>บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
420 ภาพท่ี 8.34 แสดงผลลพั ธ์คา่ กาหนดผใู้ ชส้ าหรับการเรียกใช้ 8.8 รูปแบบการเขยี น HTML ทดี่ ี การพฒั นาเวบ็ เพจในปัจจุบนั มีการพฒั นารูปแบบที่หลากหลาย มีการสร้างดว้ ยเคร่ืองมือเอดิเตอร์ตา่ งๆ มากมาย และการใชง้ าน CMS : Content Management System คือ ระบบช่วยในการสร้างและบริหารเวบ็ ไซตแ์ บบสาเร็จรูปหลากหลาย แต่การสร้างเวบ็ ไซตเ์ ป็ นเพยี งเครื่องมือที่ช่วยในการพฒั นา พ้ืนฐานที่สาคญั ท่ีสุด คือ การเขียนโปรแกรมดว้ ยภาษา HTML เบ้ืองตน้ น้นัสาคญั เพื่อเป็นกรณีศึกษาและสามารถพฒั นาไปสู่ระดบั สูงข้ึน รูปแบบการเขียน HTML ท่ีดี ดงั น้ี 8.8.1 การเขยี นต้องมีการปิ ดแทก็ การปิ ดแทก็ น้นั ถูกหลกั ในการเขียน HTML เช่น <li> หวั ขอ้ เร่ือง <li>ขอ้ ความท่ีแสดงผล <li>เน้ือหาส่วนที่หน่ึง รูปแบบดงั กล่าว ผดิ รูปแบบในการเขียน HTML ตรวจสอบแทก็ ดงั กล่าวผดิ รูปแบบ โดยที่อีกชุดคาสง่ั ul หรือ ol และการเขียน li ยงั ไม่การปิ ดแทก็ ซ่ึงบางทีสามารถทางานไดแ้ ตไ่ ม่ผา่ นมาตรฐานการเขียนท่ีถูกตอ้ ง รูปแบบท่ีถูกตอ้ ง ดงั น้ี <ul> <li> หวั ขอ้ เร่ือง</li> <li>ขอ้ ความที่แสดงผล</li> <li>เน้ือหาส่วนท่ีหน่ึง </li> </ul> บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
421 8.8.2 การกาหนดสไตล์ชีล เพอ่ื การแสดงผลควรอยใู่ นรูปแบบไฟล์ CSS ไม่ควรระบุลงในแทก็ โดยตรง ตวั อยา่ งการกาหนดรูปแบบลงไปในไฟล์ เช่น <p style=\"color: blue;\">แสดงขอ้ ความที่ตอ้ งการ </p> จากตวั อยา่ ง ควรเปลี่ยนรูปแบบที่ตอ้ งการ โดยการกาหนดสไตลช์ ีลรูปแบบ ดงั น้ีรูปแบบ color: blue;#ShowElement > p { } 8.8.3 การเรียกใช้งานรูปแบบสไตล์แบบสไตล์ชีล ควรกาหนดคาส่งั เรียกใชง้ าน ไฟล์ .cssไวบ้ นสุดเสมอ การเรียกไฟล์ .css เป็นไฟลท์ ี่กาหนดรูปแบบการแสดงผล สี รูปภาพ ดงั น้นัควรกาหนดไวส้ ่วนแทก็ head เพื่อใหเ้ รียกใชง้ านก่อน รายละเอียดดงั น้ีตวั อย่างท่ี 8.28 การเรียกใชง้ านรูปแบบสไตลแ์ บบสไตล์ชีล <!DOCTYPE HTML> <html> <head> <title>User CSS for HTML5 </title> <meta charset=\"UTF-8\"> <link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"/path/css/file.css\" /> <link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"/path/css/anotherFile.css\" /> </head> บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
422 8.8.4 การเรียกใช้งานไฟล์จาวาสคริปต์ ควรกาหนดไวท้ า้ ยสุดของไฟล์ เน่ืองจากไฟล์จาวาสคริปตใ์ ชเ้ วลาการโหลดนาน ควรระบุทา้ ยสุด เพ่ือใหเ้ วบ็ เพจแสดงผลผา่ นบราวเซอร์รวดเร็วและเรียกใชง้ านไฟลส์ คริปตเ์ ป็นลาดบั สุดทา้ ย ตวั อย่างที่ 8.29 การเรียกใชง้ านไฟลจ์ าวาสคริปต์ <p>การเรียกใชง้ านไฟลจ์ าวาสคริปต์</p> <script type=\"text/javascript\" src=\"/path/file.js\"></script> <script type=\"text/javascript\" src=\"/path/anotherFile.js\"></script> </body> </html> 8.8.5 รูปแบบการเรียกแทก็ Name ต่างๆ ควรใชต้ วั อกั ษรตวั พมิ พเ์ ลก็ เพื่อผลดีตอ่ SEO:Search Engine Optimization กล่าวคือ กระบวนการท่ีทาใหเ้ วบ็ ไซต์ หรือชื่อเวบ็ ไซต์ ปรากฏอยู่ในตาแหน่งที่ดีท่ีสุดของผลการคน้ หาผา่ น Search Engine “เวบ็ เสิร์ชเอนจิน” เช่น Google.com,MSN.com, Yahoo.com, Sanook.com เป็นตน้ ดว้ ย Search Keyword ที่เก่ียวขอ้ งกบั ธุรกิจ ขอ้ มูลเน้ือหา บทความ สินคา้ และบริการ ที่นาเสนอผา่ นเวบ็ ไซต์ รูปแบบแทก็ Name ท่ีไม่เหมาะสมดงั น้ี <DIV> <P>การกาหนดขอ้ ความที่น่าสนใจ </P> </DIV> รูปแบบที่เหมาะสม ในการกาหนดแทก็ Name <div> <p>การกาหนดขอ้ ความท่ีน่าสนใจ</p> </div> 8.8.6 ควรใช้ประโยชน์จากการเรียกใช้งานแทก็ หวั ขอ้ เร่ือง เช่น h1, h2, h2, h3, h4, h5และ h6 ในการแสดงหวั ขอ้ เรื่อง ตวั อยา่ งการใชง้ าน <h1> ข่าวท่ีน่าสนใจ </h1> บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
423 8.8.7 ควรเรียกใช้งานแทก็ <ul> <li> เพื่อแทนการแสดงลาดบั หวั ขอ้ ร่วมกบั การแสดงผลลพั ธ์ลาดบั หวั ขอ้ รูปแบบปกติการสร้างเมนูแบบเดิม ดงั น้ี <div id=\"Show_menu\"> <a href=\"#\">Home </a> <a href=\"#\">About </a> <a href=\"#\">Contact </a> </div> รูปแบบที่เหมาะสมและการประยกุ ตใ์ ชง้ านรูปแบบดงั กล่าว ทาใหส้ ามารถสร้างรูปแบบของเมนูไดห้ ลากหลายและเพ่มิ ความสนใจใหก้ บั เวบ็ เพจ ดงั น้ี <ul id=\"Show_menu\"> <li><a href=\"#\">Home</a></li> <li><a href=\"#\">About</a></li> <li><a href=\"#\">Contact</a></li> </ul> 8.8.8 รูปแบบการเรียกใช้งานไฟล์ .css การกาหนดรูปแบบการแสดงผล ควรคานึงถึงการแสดงผลผา่ นบราวเซอร์ เหมาะสมหรือไม่ กรณีเรียกใชง้ านผา่ น Microsoft Internet Exploreอาจต้งั ช่ือรูปไฟล์ CSS เช่น ชื่อไฟล์ ie7.css 8.8.9 รูปแบบการแสดงผลรูปภาพทกุ รูปภาพควรแทรก \"Alt\" ความสาคญั ของการใส่ altน้นั ช่วยใหผ้ พู้ กิ ารตาบอดสามารถรับรู้ไดว้ า่ รูปภาพน้ีเป็ นรูปภาพอะไร เวบ็ เพจมีคาคน้ หามากข้ึนรูปแบบเดิม <IMG SRC=\"ShowImage.jpg\" /> ควรเปล่ียนเป็น <img src=\"/ShowImage.jpg\"alt=\"I visited.\" /> 8.8.10 การกาหนดการเช่ือมโยงต่างๆ หรือลงิ ค์ ควรแทรก \"title\" ควบคู่กบั การกาหนดรูปแบบลิงค์ รูปแบบที่ไมเ่ หมาะสม <a href=\"#fileHome.html\">Home </a> รูปแบบที่ควรใช้<a href=\"#fileHome.html\" title\" Click to home\">Home </a> 8.8.11 แทก็ ทย่ี กเลิกการใช้งานใน HTML 5 สาหรับการพฒั นาเวบ็ ไซตด์ ว้ ย HTML5 เป็นเวอร์ชน่ั ใหม่ โดยปรับปรุงจากเวอร์ชนั่ HTML4 เป็น HTML5 และไดม้ ีการตดั อีเลเมนตอ์ อกไปบางส่วนอีเลเมนต์ ท่ียกเลิกใชง้ าน ดงั น้ี 1) <acronym> คือ คาสั่งในการกาหนดอกั ษรยอ่ ใชส้ าหรับการอธิบายเพมิ่ เติมกบัsearch engine บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
424 2) <basefont> คือ คาสง่ั ในการกาหนดขนาดของอกั ษรท้งั หมดในไฟลใ์ หม้ ีค่าตามที่กาหนด 3) <big> คือ คาสั่งเพ่มิ ขนาดตวั อกั ษร 4) <center> คือ การกาหนด คาส่ังในการจดั เรียงใหอ้ ยตู่ รงกบั ท้งั ขอ้ ความและรูปภาพ 5) <dir> คือ คาส่งั กาหนดการแสดงขอ้ มูลแบบแจกแจง 6) <font> คือ กาหนดรูปแบบขนาดตวั อกั ษร รูปแบบตวั อกั ษร ควรกาหนดรูปแบบการแสดงผลตวั อกั ษร รูปแบบตวั อกั ษร ขอ้ ความ ดว้ ยการกาหนดสไตลช์ ีลแทน 7) <frame> คือ คาสั่งในการจดั แบง่ หนา้ และแสดงเอกสาร html หลายหนา้ ในหนา้ จอเดียวกนั ใชค้ ูก่ บั แทก็ frameset 8) <frameset> คือ คาสั่งในการจดั แบง่ หนา้ และแสดงเอกสารhtml หลายหนา้ ในหนา้ จอเดียวกนั ใชค้ ู่กบั แทก็ frame 9) <noframes> คือ คาส่งั ท่ีตรวจสอบบราวเซอร์ รองรับคาสง่ั frame โดยทางานในส่วนของ noframes แทนการแสดงผลเดิม 10) <strike> คือ คาส่ังสาหรับการขีดเส้นทบั ขอ้ ความ 11) <tt> คือ รูปแบบการกาหนดตวั อกั ษรแบบ Teletype text บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
425 การพฒั นาเวบ็ เพจดว้ ย HTML5 หลกั ในการพฒั นาเวบ็ เพจปัจจุบนั ประกอบดว้ ย 3 ส่วนคือ HTML, CSS :Cascading Style Sheet และ JavaScript “สไตลช์ ีต\" หมายถึง ชุดคาสัง่ สาหรับจดั รูปแบบการ สนบั สนุนการจดั รูปแบบการแสดงผลเอกสารตา่ งๆ เพ่ือใหก้ ารเขียนรูปแบบการใชง้ านที่เหมาะสมและมีประสิทธิภาพ โครงสร้างประกอบดว้ ย selector, property และ valueแอตทริบิวตม์ าตรฐานใหม่ประกอบดว้ ยแอตทริบิวตต์ า่ งๆ เช่น กาหนดการยา้ ยวตั ถุ การสะกดคาไวยากรณ์ในเอลิเมนต์ รูปแบบฟอร์มใหม่สาหรับการใชง้ าน โดยไมต่ อ้ งเรียกใชง้ านจาวาสคริปต์การรับขอ้ มูลจากฟอร์มเกิดประสิทธิภาพ โดยกาหนดคุณสมบตั ิเพิ่มเติมในแทก็ <input> ขอ้ จากดัฟอร์ม คือ ไม่สามารถแสดงผลไดท้ ุกบราวเซอร์ คน้ หาขอ้ มูลดว้ ย Search การรับเฉพาะค่าอีเมล์การรับเฉพาะค่าลิงคด์ ว้ ย URL การรับขอ้ มูลตวั เลขแบบช่วงขอ้ มูล Ranges การรับขอ้ มูลเฉพาะเบอร์โทรศพั ทก์ ารรับขอ้ มูลลกั ษณะการเลือก Color Picker การรับคา่ ขอ้ มูลเกี่ยวกบั วนั ท่ีและเวลาการใชง้ านแคนวาส ลกั ษณะการทางานของแคนวาส เช่น การวาดส่ีเหลี่ยม การใส่สี การวาดวงกลม การไล่สี การวาดรูปอิสระ การแทรกภาพหรือกาหนดพกิ เซลลงในพ้นื ที่ที่กาหนด โดยกาหนดรูปแบบแทก็ <canvas> ซ่ึงใชเ้ อพีไอเป็ นตวั กลางสาหรับคอยควบคุมและจดั การแคสวาสจาวาสคริปตจ์ ดั การเก่ียวกบั การวาดบนแคสวาส การใชง้ านเอสจีวี หมายถึง แทก็ ท่ีใชส้ าหรับการวาดกราฟิ กแบบแวกเตอร์ ภาษาท่ีสามารถประมวลผลขอ้ มูลรูปภาพแบบกราฟิ ก 2 มิติ เรียกวา่แวกเตอร์ การใชง้ านเรียกใชค้ าสัง่ การวาดภาพกราฟิ ก ภาพกราฟิ กท่ีไดส้ ามารถยอ่ ขยายภาพโดยภาพยงั คงความคมชดั การใชง้ านไฟลเ์ สียงและวดิ ีโอ การเรียกใชโ้ ดยไม่ตอ้ งเรียกใช้ปลก๊ั อิน และไม่ตอ้ งกาหนดแทก็ embed ซ่ึงตา่ งจากเดิม ตอ้ งเรียกใชง้ านบนเวบ็ เพจ โดยเรียกโปรแกรม Adobe Flash เพื่อแสดงผลลพั ธ์บนเวบ็ เพจไม่จาเป็นตอ้ งติดต้งั Plug-in เพมิ่ เติมHTML5 กาหนดแทก็ สาหรับการเล่นไฟลเ์ สียง และวดิ ีโอ โดยอนุญาตใหส้ ามารถควบคุมการเล่นมลั ติมีเดียโดยตรง เช่น การเล่น หยดุ เล่น ไฟลเ์ สียงและไฟลว์ ดิ ีโอสนบั สนุนการใชง้ านบนบราวเซอร์ การเกบ็ ขอ้ มูล Web Storage คือ การเก็บขอ้ มูลเอาไวท้ ่ีฝั่งผใู้ ชง้ าน (Client) รูปแบบการเขียน HTML ท่ีดี การเขียนตอ้ งมีการปิ ดแทก็ การเรียกใชง้ านไฟลจ์ าวาสคริปตท์ ้งั หมดควรกาหนดไวท้ า้ ยสุดของไฟล์ บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
426 แบบฝึ กหัดบทท่ี 8 เร่ือง การพฒั นาเวบ็ เพจด้วย HTML5คาชี้แจง จงตอบคาถามต่อไปน้ีใหไ้ ดใ้ จความสมบูรณ์1. จงอธิบายแอตทริบิวตส์ าหรับการใชง้ าน HTML5 อยา่ งนอ้ ย 5 แอตทริบิวต์2. จงอธิบายแทก็ สาหรับฟอร์มใหม่ ของการใชง้ าน HTML5 โดยระบุความหมายและรูปแบบการใชง้ าน 2 แทก็บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
427 ใบงานท่ี 8 บทที่ 8ช่ือวชิ า : การสร้างเวบ็ เพจดว้ ยภาษา HTML สอนคร้ังท่ี 8ช่ือหน่วย : การพฒั นาเวบ็ เพจดว้ ย HTML5 จานวน 4 ชวั่ โมงชื่องาน : การประยกุ ตใ์ ชง้ าน แอตทริบิวตม์ าตรฐานใหม่ สาหรับ HTML5 เรื่อง draggableชื่อ – นามสกุล..............................................ระดบั ช้นั ..............สาขาวชิ า........................................จุดประสงค์การเรียนรู้ รายการฝึ กปฏิบตั ิ1. การประยกุ ตใ์ ชง้ านแอตทริบิวต์ สาหรับ 1. ข้นั เตรียมการ (Plan)การใชง้ าน HTML5 แอตทริบิวต์ draggable 1.1 ทฤษฎีที่เก่ียวขอ้ ง 1.1.1 การใชง้ านแอตทริบิวต์ เก่ียวกบั การยา้ ยวตั ถุ 1.1.2 การระบุขนาดการแสดงผลบนเวบ็ บราวเซอร์ 1.2 วสั ดุและอุปกรณ์ บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
428จุดประสงค์การเรียนรู้ รายการฝึ กปฏิบัติ 2. ข้นั ปฏิบัตกิ าร (Do) 2.1 การแสดงผลแกลเลอรีรูปภาพดว้ ย แอตทริบิวต์ draggable 2.1.1 การกาหนดตาแหน่งรูปภาพ 2.1.2 การกาหนดขนาดของภาพสาหรับ การแสดงผลบนโปรแกรมเวบ็ บราวเซอร์ 3. ข้นั ตรวจสอบ (Check) ตรวจสอบผลงานตามแบบประเมินผลทกั ษะ การปฏิบตั ิงาน 4. ข้นั สรุปผล (Act) สรุปผลและวจิ ารณ์การปฏิบตั ิงาน บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
429 1. ข้นั เตรียมการคาส่ัง ใหน้ กั ศึกษา ศึกษาทฤษฎีที่เก่ียวขอ้ งตามหวั ขอ้ ท่ีกาหนดใหต้ ่อไปน้ีจากเอกสารประกอบการสอน วชิ า การพฒั นาเวบ็ เพจดว้ ยภาษา HTML รหสั 3204-2201บทท่ี 8 เร่ือง การพฒั นาเวบ็ เพจดว้ ย HTML5 1.1 ทฤษฎีที่เก่ียวขอ้ ง 1.1.1 การใชง้ านแอตทริบิวตเ์ กี่ยวกบั การยา้ ยวตั ถุ 1.1.2 การกาหนดสไตลช์ ีลสาหรับการยา้ ยภาพของแสดงผลบนเวบ็ บราวเซอร์ 1.1.3 การระบุขนาดการแสดงผลบนเวบ็ บราวเซอร์ 1.2 วสั ดุและอุปกรณ์ 1.2.1 เครื่องคอมพิวเตอร์ 1.2.2 สื่อบนั ทึกขอ้ มูล เช่น แฟลชไดร์ฟ แผน่ ซีดี หรือดีวดี ี 2. ข้นั ปฏบิ ตั ิการคาสั่ง ใหน้ กั ศึกษาปฏิบตั ิตามข้นั ตอนที่กาหนดใหต้ ่อไปน้ี2.1 การประยกุ ตใ์ ชง้ านแอตทริบิวต์ สาหรับการใชง้ าน HTML5 แอตทริบิวต์ draggable (เพ่ือให้บรรลุจุดประสงคข์ อ้ ที่ 1) 2.1.1 ใหน้ กั ศึกษาสร้างรูปภาพหรือดาวโ์ หลด ขอ้ มูลเวบ็ ไซต์ ผา่ นเครือข่ายอินเทอร์เน็ตรูปภาพที่ไดส้ ่วนขยาย .jpg จานวน 10 ภาพ ขนาดของภาพ 267x 356 pixels 2.1.2 ใหน้ กั ศึกษาเกบ็ ขอ้ มูลรูปภาพไวใ้ นโฟลเดอร์ชื่อ images 2.1.3 ใหน้ กั ศึกษาเรียกใชส้ ไตลช์ ีลท่ีครูผสู้ อนกาหนดไว้ หรือสร้างสไตลช์ ีลเพ่ือแสดงผล 2.1.4 ใหน้ กั ศึกษาตรวจสอบชิ้นงาน แกไ้ ขใหถ้ ูกตอ้ ง 2.1.5 ใหน้ กั ศึกษานาเสนอชิ้นงาน บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
430ภาพผลลพั ธ์ 1. ภาพแสดงผลลพั ธ์ท้งั หมด ภาพกลางจะแสดงผลลพั ธ์ท่ีมีขนาดใหญ่กวา่ ทุกภาพ 2. ทดสอบการแสดงภาพและการยา้ ยภาพ เพอ่ื แสดงผลภาพขนาดใหญ่ บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
4313. ผลลพั ธ์ของการเคลื่อนยา้ ยภาพ ภาพกลางจะแสดงผลภาพขนาดใหญ่4. เคลื่อนยา้ ยภาพภาพขนาดใหญ่ ไปแทนที่ ภาพบนสุดดา้ นขวามือบทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
4325. เคล่ือนยา้ ยภาพ ภาพขนาดใหญ่ ไปแทนที่ ภาพบนสุดดา้ นขวามือ ภาพท่ีอยกู่ ลางก็จะมี ขนาดภาพใหญ่ ในการแสดงผล6. สลบั เปล่ียนการเคลื่อนยา้ ยภาพจากภาพขนาดใหญ่ ไปแทนที่ภาพอ่ืนเพอื่ แสดงผลลพั ธ์ บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
4333. ข้นั ตรวจสอบ ตรวจสอบผลงานตามแบบประเมินผลทกั ษะการปฏิบตั ิงาน แบบประเมนิ ผลทกั ษะการปฏบิ ตั งิ านชื่อหน่วย : การพฒั นาเวบ็ เพจดว้ ย HTML5ช่ืองาน : การประยกุ ตใ์ ชง้ าน แอตทริบิวตม์ าตรฐานใหม่ สาหรับ HTML5 เรื่อง draggableชื่อ – นามสกุล...........................................ระดบั ช้นั .................กลุ่มท่ี............สาขาวชิ า..................ท่ี รายการประเมนิ คะแนน คะแนน หมายเหตุ เตม็ ทไี่ ด้1 สร้างภาพ/ดาวน์โหลดขนาด ขนาดของภาพ 3 จปส. 1 267x 356 pixels จานวน 10 ภาพ2 เรียกใชง้ านสไตลช์ ีลเพ่อื กาหนดรูปแบบการ 5 จปส. 1 เคล่ือนยา้ ยภาพ3 ความสมบูรณ์ของการแสดงผล 5 จปส. 14 ภาพท่ีไดส้ ามารถเคลื่อนยา้ ยพร้อมท้งั แสดงผล 7 จปส. 1 รวมคะแนน 20 เกณฑ์การประเมนิ ผลกระบวนการทางทกั ษะ คะแนนรวม ระดับ คุณภาพ ต่ากวา่ 10 คะแนน 0 ตอ้ งแกไ้ ข 10 – 12 คะแนน 1 ตอ้ งปรับปรุง 13 – 15 คะแนน 2 พอใช้ ตอ้ งพฒั นา 16 – 18 คะแนน 3 ดี ควรพฒั นาต่อไป 19 – 20 คะแนน 4 ดีมาก รักษาระดบั ไว้ลงชื่อ.........................................ผปู้ ระเมิน วนั ที่........เดือน.......................พ.ศ. ................. (.......................................) ครูผสู้ อน ตนเอง เพือ่ นร่วมช้นั เรียน บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
434แบบประเมนิ พฤตกิ รรมการปฏบิ ตั งิ าน (คุณธรรม จริยธรรม และเศรษฐกจิ พอเพยี ง)ชื่อหน่วย : การพฒั นาเวบ็ เพจดว้ ย HTML5ชื่องาน : การประยกุ ตใ์ ชง้ าน แอตทริบิวตม์ าตรฐานใหม่ สาหรับ HTML5 เร่ือง draggableชื่อ – นามสกลุ ...........................................ระดบั ช้นั .................กลุ่มที่............สาขาวชิ า..................ท่ี รายการประเมิน/พฤติกรรมบ่งชี้ คะแนน คะแนนที่ เต็ม ได้1 ระเบียบวนิ ยั (ปฏิบตั ิงานตามท่ีไดร้ ับมอบหมายดว้ ยความ 2 เคร่งครัด)2 สนใจใฝ่ รู้ (ศึกษาคน้ ควา้ เพมิ่ เติมจากแหล่งเรียนรู้) 23 ซ่ือสัตยส์ ุจริต (ไมท่ ุจริตต่อการปฏิบตั ิงานท่ีไดร้ ับมอบหมาย) 24 ประหยดั อดออม (เห็นคุณค่าของทรัพยากรและรักษา 2 สิ่งแวดลอ้ ม)5 เอ้ือเฟ้ื อเผอื่ แผ่ (รู้จกั แบ่งปัน มีน้าใจต่อครูและเพื่อนร่วมช้นั 2 เรียน)6 พ่ึงพาตนเอง (ต้งั ใจปฏิบตั ิงานดว้ ยตนเองจนสาเร็จลุล่วง) 27 รักษาความสะอาด (ดูแลหอ้ งเรียนและอุปกรณ์การเรียน) 28 กิริยามารยาทดี (แตง่ กายเรียบร้อย พูดจาไพเราะและรู้จกั การ 2 วางตวั )9 มนุษยสมั พนั ธ์ (ใหค้ วามร่วมมือกบั ผอู้ ่ืนและสามารถทางาน 2 เป็ นทีมได)้10 ความคิดสร้างสรรค์ (ผลงานมีคุณคา่ สามารถนาไปเป็น 2 แบบอยา่ งได)้ รวมคะแนน 20 บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
435 เกณฑ์การประเมนิ ผลพฤตกิ รรมการปฏบิ ัตงิ าน คะแนนรวม ระดับ คุณภาพ ต่ากวา่ 10 คะแนน 0 ตอ้ งแกไ้ ข 10 – 12 คะแนน 1 ตอ้ งปรับปรุง 13 – 15 คะแนน 2 พอใช้ ตอ้ งพฒั นา 16 – 18 คะแนน 3 ดี ควรพฒั นาต่อไป 19 – 20 คะแนน 4 ดีมาก รักษาระดบั ไว้ลงช่ือ.........................................ผปู้ ระเมิน วนั ท่ี........เดือน.......................พ.ศ. ................. (.......................................) ครูผสู้ อน ตนเอง เพอ่ื นร่วมช้นั เรียน4. ข้นั สรุปผลสรุปผลและวจิ ารณ์การปฏิบตั ิงาน (เพ่ือใหบ้ รรลุจุดประสงคข์ อ้ ที่ 1) บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
436 แบบประเมนิ ผลหลงั เรียน บทที่ 8 เร่ือง การพฒั นาเวบ็ เพจด้วย HTML5คาชี้แจง จงเลือกคาตอบที่ถูกตอ้ ง แลว้ กาเคร่ืองหมาย ลงในกระดาษคาตอบ1. การกาหนดแทก็ คาสั่งแรกของการสร้างเวบ็ เพจดว้ ย HTML5 คือขอ้ ใด ก. <!doctype html5> ข. <!doctype html> ค. <!typedoc HTML5> ง. <!typedoc html>2. การใชแ้ ทก็ <HR> ในภาษา HTML เพอื่ จุดประสงคข์ อ้ ใด ก. <ขีดเส้นคนั่ แนวนอน> ข. <ข้ึนบรรทดั ใหม่> ค. <ทาหนา้ ท่ีจดั ก่ึงกลางของขอ้ ความ> ง. <ข้ึนยอ่ หนา้ ใหม่>3. แทก็ สาหรับใส่ขอ้ มูล (DATA) ลงในช่องแต่ละแถว คือแทก็ ใด ก. <CAPTION> ข. <TABLE> ค. <TD> ง. <TR>4. แทก็ ที่ใชส้ าหรับกาหนดเน้ือหาหลกั ของเวบ็ เพจในภาษา HTML5 คือแทก็ ใด ก. <ARTICLE> ข. <NAV> ค. <SECTION> ง. <FOOTER>5. แทก็ <title></title> ในภาษา HTML ตอ้ งกาหนดไวใ้ นส่วนใดของเวบ็ เพจ ก. <h1> ข. <head> ค. <body> ง. <footer> บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
4376. การแสดงผลรูปแบบตวั อกั ษรภาษาไทยทุกๆ คร้ัง โดยการเพมิ่ คาส่ังแทก็ <meta> ในรูปแบบHTML5 คือขอ้ ใด ก. <meta charset=\"windows-874\"> ข. <meta http-equiv=”content – type” content=”text/html; charset=window-874”> ค. <meta http-equiv=”content charset=windows-874”> ง. <meta http-equiv=”content charset=window-874”>7. แทก็ ในรูปแบบ HTML5 ในขอ้ ใดท่ีมีคุณสมบตั ิตา่ งจากพวก ก. <rang> , <number> และ <time> ข. <email>, <time> และ <month> ค. <tel>, <search> และ <url> ง. <week>, <datetime> และ <div>8. แทก็ <canvas> ในรูปแบบ HTML5 มีคุณสมบตั ิอยา่ งไร ก. แทก็ ท่ีใชส้ าหรับการวาดกราฟิ กแบบเวกเตอร์ ข. แทก็ ท่ีใชส้ าหรับการวาดกราฟิ กแบบแรสเตอร์ ค. แทก็ ที่ใชส้ าหรับกาหนดสีของรูปภาพแบบเวกเตอร์ ง. แทก็ ที่ใชส้ าหรับกาหนดสีของตวั อกั ษรแบบแรสเตอร์9. แทก็ <SVG> ในรูปแบบ HTML5 มีคุณสมบตั ิอยา่ งไร ก. แทก็ ที่ใชส้ าหรับการวาดกราฟิ กแบบเวกเตอร์ ข. แทก็ ท่ีใชส้ าหรับการวาดกราฟิ กแบบแรสเตอร์ ค. แทก็ ท่ีใชส้ าหรับกาหนดสีของรูปภาพแบบเวกเตอร์ ง. แทก็ ท่ีใชส้ าหรับกาหนดสีของตวั อกั ษรแบบแรสเตอร์10. แทก็ <contenteditable> รูปแบบ HTML5 มีคุณสมบตั ิอยา่ งไร ก. กาหนดใหเ้ อลิเมนตใ์ ชเ้ มาส์ลากไดห้ รือไม่ ข. กาหนดการซ่อนหรือแสดงเอลิเมนต์ ค. กาหนดการอนุญาตใหแ้ กไ้ ขขอ้ มูลในเอลิเมนต์ ง. กาหนดเน้ือหาของเอลิเมนตเ์ พ่ือกาหนดการแปลหรือไม่ บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
Search
