บทที่ 8 การพฒั นาเวบ็ เพจด้วย HTML5สาระการเรียนรู้ 8.1 การจดั รูปแบบเวบ็ เพจดว้ ย CSS3 8.2 การจดั รูปแบบ GLOBAL ATTRIBUTE สาหรับการใชง้ าน HTML5 8.3 การจดั รูปแบบฟอร์มใหม่สาหรับการใชง้ าน HTML5 8.4 การใชง้ านแคนวาส (Canvas) 8.5 การใชง้ านเอสวจี ี (SVG) 8.6 การใชง้ านไฟลเ์ สียงและวดิ ีโอ 8.7 การเกบ็ ขอ้ มูล Web Storage ดว้ ย HTML5 8.8 รูปแบบการเขียน HTML ท่ีดีจุดประสงค์การเรียนรู้ เพ่ือให้ผู้เรียน 1. กาหนดการจดั รูปแบบเวบ็ เพจดว้ ย CSS3ได้ 2. กาหนดรูปแบบ GLOBAL ATTRIBUTE สาหรับการใชง้ าน HTML5 ได้ 3. กาหนดรูปแบบฟอร์มใหม่สาหรับการใชง้ าน HTML5 ได้ 4. ใชง้ านแคนวาส (Canvas) ได้ 5. ใชง้ านเอสวจี ี (SVG)ได้ 6. ใชง้ านไฟลเ์ สียงและวดิ ีโอได้ 7. เกบ็ ขอ้ มูล Web Storage ดว้ ย HTML5 ได้ 8. เขียนรูปแบบของ HTML ท่ีดีได้ Design By Mr.Tongchai Laboon
365 การพฒั นาเวบ็ เพจรูปแบบ HTML5 ทาใหก้ ารทางานบนบราวเซอร์มีประสิทธิภาพเรียกใชง้ านไดร้ วดเร็ว แทก็ มีความเหมาะสม มีการปรับเพ่ิม Feature เพอ่ื ใหผ้ พู้ ฒั นาสามารถใชง้ านไดง้ ่าย สามารถเลือกใชง้ านไดต้ ามความประสงค์ ทาใหร้ ูปแบบง่ายต่อการพฒั นาเวบ็ เพจในรูปแบบที่แตกต่างกนั ออกไป บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
366 แบบประเมนิ ผลก่อนเรียน บทท่ี 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
3676. การแสดงผลรูปแบบตวั อกั ษรภาษาไทยทุกๆ คร้ัง โดยการเพมิ่ คาส่ังแทก็ <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
368 ผงั มโนทศั น์ บทท่ี 8รายวชิ า การเขยี นเว็บเพจด้วยภาษา HTML รหัสวชิ า 3204 – 2201 การจัดรูปแบบเวบ็ เพจด้วย CSS3 การจัดรูปแบบ GLOBAL ATTRIBUTE สาหรับการใช้งาน HTML5 โครงสร้างการเขียนคาสงั่ ดว้ ยสไตลช์ ีต แอตทริบิวตใ์ น HTML 4 รูปแบบแบบการเขียน CSS แอตทริบิวตใ์ น HTML 5การจัดรูปแบบฟอร์มการใช้งาน HTML5 การใช้งานแคนวาส (Canvas) การรับขอ้ มูลตวั เลขแบบช่วงขอ้ มูล การใชง้ านแทก็ <canvas> การใชแ้ ทก็ <canvas> ร่วมกบั Ranges , การรับขอ้ มูลตวั เลข, การรับขอ้ มูลเฉพาะเบอร์โทรศพั ท์ Object การรับขอ้ มูล Color Picker การรับคา่ ขอ้ มูลเกี่ยวกบั วนั ท่ีและเวลา การสร้างเวบ็ เพจด้วยภาษา HTML5การใช้งานเอสวจี ี (SVG) การใช้งานไฟล์เสียงและวดิ ีโอ การใชง้ านแทก็ <video> การใชง้ านแทก็ <audio> การเกบ็ ข้อมูล Web Storage รูปแบบการเขียน HTML ทดี่ ีด้วย HTML5 การเขียนตอ้ งมีการปิ ดแทก็ , การกาหนดสไตลช์ ีล การเรียกใชง้ านรูปแบบสไตลแ์ บบสไตลช์ ีล, การเรียกใชง้ านไฟลจ์ าวาสคริปต,์ รูปแบบการเรียกแทก็ Name, การเรียกใชง้ านแทก็ <ul> <li> , รูปแบบการเรียกใชไ้ ฟล์ .css, รูปแบบการแสดงผลรูปภาพ และ การกาหนดการเช่ือมโยงตา่ งๆ บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
369 บทที่ 8 การพฒั นาเวบ็ เพจด้วย HTML5 การพฒั นาเวบ็ เพจดว้ ย HTML5 หลกั ในการพฒั นาเวบ็ เพจปัจจุบนั ประกอบดว้ ย 3 ส่วนคือ HTML, CSS :Cascading Style Sheet และ JavaScript โดย HTML เป็นโครงสร้างหลกั ของเวบ็ เพจ สไตลช์ ีตใชส้ าหรับกาหนดการปรับแตง่ ใหเ้ วบ็ เพจแสดงผลไดส้ วยงามและตรงกบั ความตอ้ งการของผพู้ ฒั นาเวบ็ เพจ จาวาสคริป ใชส้ าหรับเพ่ิมความสามารถการใชง้ านของเวบ็ เพจ หรือฟังกช์ น่ั การทางานของเวบ็ เพจไดส้ มบูรณ์ 8.1 การจัดรูปแบบเวบ็ เพจด้วย Cascading Style Sheet (CSS) ซีเอสเอส (CSS : Cascading Style Sheet) เรียกโดยยอ่ วา่ \"สไตลช์ ีต\" หมายถึง ชุดคาส่ังสาหรับจดั รูปแบบการแสดงผล เพ่อื เสริมคุณสมบตั ิของ HTML สนบั สนุนการจดั รูปแบบการแสดงผลเอกสารตา่ งๆ บนเวบ็ เพจไดส้ ะดวก รวดเร็ว มีประสิทธิภาพ และเท่ียงตรงตามที่ได้ออกแบบไว้ โดยกาหนดกฏเกณฑใ์ นการระบุรูปแบบของเน้ือหาในเอกสาร การใชง้ านสไตลช์ ีตเพื่อกาหนดการแกไ้ ขคุณสมบตั ิของเวบ็ เพจ หนา้ ตาของเวบ็ เพจ สีสัน หรือรูปแบบเป็นไปตามที่กาหนด การเปลี่ยนสีสนั การจดั วางขอ้ ความ รูปแบบตวั อกั ษรที่กาหนด ตาแหน่งของรูปภาพระยะห่างของขอบเวบ็ เพจ เป็นตน้ การกาหนดรูปแบบน้นั การแยกเน้ือหาเอกสาร HTML ออกจากคาสง่ั ท่ีใชใ้ นการจดั รูปแบบการแสดงผล โดยการแสดงผลเอกสาร ไม่มีความสมั พนั ธ์กบัเน้ือหาของเอกสาร เพื่อง่ายต่อการจดั รูปแบบการแสดงผลลพั ธ์ของเอกสาร HTML กรณีที่มีการเปลี่ยนแปลงเน้ือหาเอกสารบอ่ ยคร้ัง หรือตอ้ งการควบคุมใหร้ ูปแบบการแสดงผลเอกสารความสม่าเสมอทวั่ กนั ทุกหนา้ เอกสารภายในเวบ็ ไซตเ์ ดียวกนั โดยกฎเกณฑใ์ นการกาหนดรูปแบบสไตลเ์ อกสารเวบ็ เพจถูกเพมิ่ เขา้ มาคร้ังแรกใน HTML 4.0 เมื่อปี พ.ศ. 2539 ในรูปแบบของ CSSlevel 1 Recommendations ปัจจุบนั เวอร์ชนั่ CSS3 ที่กาหนดโดย องคก์ ร World Wide WebConsortium หรือ W3C 8.1.1 โครงสร้างการเขียนคาส่ังด้วยสไตล์ชีต การกาหนดโครงสร้างการเขียนคาสง่ั ของสไตลช์ ีต เพอ่ื การเขียนรูปแบบการใชง้ านที่เหมาะสมและมีประสิทธิภาพโครงสร้างประกอบดว้ ยselector “ซีแลคเตอร์”, property และ value รูปแบบโครงสร้าง selector{ property: value; }ดงั ภาพท่ี 8.1 บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
370ซีแลคเตอร์ declaration P {color : blue} กาหนดคุณสมบตั ิซีแลคเตอร์ รูปแบบคุณสมบตั ิซีแลคเตอร์ ภาพที่ 8.1 โครงสร้างการเขียนคาสง่ั CSS ภาพท่ี 8.1 แสดงโครงสร้างการเขียนคาสง่ั สไตลช์ ีล ซ่ึงประกอบดว้ ยรูปแบบการเขียนคาส่ังออกเป็นส่วนๆ 3 ส่วน คือ ส่วนที่ 1 ซีแลคเตอร์ คือ ส่วนประกอบของแทก็ HTML ที่ตอ้ งการแสดงผล หรืออาจเป็ นรูปแบบไอดีหรือคลาส เช่น <p>, <i>, <u>, <table> มีการใชง้ านในHTML และ HTML5 เพื่อแสดงผลทาง บราวเ์ ซอร์ ส่วนที่ 2 property “พรอปเพอร์ตีส์” คือส่วนประกอบส่วนยอ่ ย หรือส่วนคุณสมบตั ิท่ีตอ้ งการระบุการแสดงผล เช่น สีตวั อกั ษร , ชนิดตวั อกั ษร , ขนาดตวั อกั ษร, สีพ้นื หลงั , สีของตาราง เป็นตน้ ส่วนท่ี 3 value “แวลู” คือ คา่ ที่กาหนดตามความตอ้ งการใหแ้ สดง เช่น ตวั อกั ษรสีแดง , ตวั อกั ษรแบบ Tahoma , ตวั อกั ษรขนาด 12 pt.การกาหนดมีรูปแบบดงั น้ี 8.1.1.1 การกาหนดค่าแวลู 1 ค่ารูปแบบ ซีแลคเตอร์ { พรอปเพอร์ตีส์ : แวลู} การกาหนดค่า คือ h1 { color : red } บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
371 8.1.1.2 การกาหนดรูปแบบสไตลช์ ีลที่มีคาที่มีมากวา่ 1 คา รูปแบบการกาหนดคา่แวลูใส่ในเคร่ืองหมาย \" \" รูปแบบ ซีแลคเตอร์ { พรอปเพอร์ตีส์ : “แวลู แวลู”} การกาหนดคา่ คือ p { font - family : \"sans serif\" } 8.1.1.3 กรณีมีพรอปเพอร์ตีส์มากกวา่ 1 กาหนดเครื่องหมาย ; คนั่ ระหวา่ งพรอปเพอร์ตีส์ เช่น ตอ้ งการใหม้ ีการจดั ตวั อกั ษรอยกู่ ่ึงกลางและตวั อกั ษรมีสีแดงรูปแบบดงั น้ี รูปแบบ ซีแลคเตอร์ { พรอปเพอร์ตีส์ : แวลูที่ 1; แวลูที่ 2} การกาหนดค่า คือ p { text - align : center ; color : red } 8.1.1.4 การกาหนดหลายพรอปเพอร์ตีส์ เพ่ือใชง้ านพร้อม รูปแบบการเขียนควรกาหนดแตล่ ะคุณสมบตั ิใหอ้ ยตู่ า่ งบรรทดั กนั รูปแบบดงั น้ี รูปแบบ ซีแลคเตอร์ { พรอปเพอร์ตีส์ : แวลูท่ี 1; พรอปเพอร์ตีส์ : แวลูท่ี 2; พรอปเพอร์ตีส์ : แวลูที่ 3 } การกาหนดค่า คือ p{text - align : center ; color : black ; font-family : Tahoma } บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
372 8.1.1.5 การกาหนดซีแลคเตอร์หลายตวั มีพรอปเพอร์ตีส์เหมือนกนั เช่น การเขียนเพือ่ กาหนดสีหวั ขอ้ เป็นสีน้าเงินท้งั หมด รูปแบบดงั น้ี รูปแบบ ซีแลคเตอร์1, ซีแลคเตอร์2, …, ซีแลคเตอร์n {พรอปเพอร์ตีส์ : แวลู} การกาหนดค่า คือ h1,h2,h3,h4,h5,h6 { color : blue } 8.1.1.6 ตวั อยา่ งการกาหนดคลาสซีแลคเตอร์น้นั ใช้ HTML tag ในกรณีตอ้ งการแสดงผลท่ีต่างกนั ใน HTML tag เดียวกนั เช่น ตอ้ งการยอ่ หนา้ ในเอกสารจดั ตวั อกั ษรชิดซา้ ยในตาแหน่งหน่ึงและจดั ชิดขวาในอีกตาแหน่ง รูปแบบดงั น้ี รูปแบบ p.left { text-align : left } p.right { text-align : right } p.bold { font-weight: bold } จากรูปแบบการใชง้ านจะเห็นวา่ แทก็ p มี 3 คลาส คือ left , right , bold ซ่ึงจดั ยอ่ หนา้ ให้ชิดซา้ ย, ชิดขวา, ตวั อกั ษรเป็นตวั หนา เมื่อประกาศใชต้ อ้ งกาหนดชื่อของคลาสเป็ นตวั กาหนดการกาหนดค่า ดงั น้ี <p class = \"right\"> ตวั อกั ษรในยอ่ หนา้ น้ีจะชิดขวา </p> <p class = \"left\"> ตวั อกั ษรในยอ่ หนา้ น้ีจะชิดซ้าย </p> กรณีตอ้ งการใชห้ ลายคลาสพร้อมกนั ทาไดด้ งั น้ี <p class = \"left bold\"> ตวั อกั ษรในยอ่ หนา้ น้ีจะชิดซา้ ยและเป็นตวั หนา </p> การใชง้ านแบบคลาสอาจตดั แทก็ HTML ดา้ นหนา้ เช่น .center { text - align: center }เมื่อใชง้ านเขียนชื่อคลาส การกาหนดค่า ดงั น้ี <h1 class = \"center\"> ตวั อกั ษรน้ีจะจดั อยกู่ ่ึงกลาง </h1> <p class = \"center\"> ตวั อกั ษรน้ีจะจดั อยกู่ ่ึงกลาง </p> บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
373 8.1.2 รูปแบบแบบการเขียน CSS รูปแบบแบบการเขียนสไตลช์ ีลสาหรับการใชง้ านHTML คือ รูปแบบการเรียกใชง้ านที่กาหนดข้ึน โดยการเลือกรูปแบบท่ีเหมาะสมเพือ่ เรียกใชง้ านรายละเอียดดงั น้ี 8.1.2.1 การใชง้ านสไตลช์ ีลภายในแทก็ (Inline Styles) สไตลช์ ีลภายในแทก็HTML หรืออินไลน์ คือ การแทรกคาส่งั สไตลช์ ีลลงในส่วนของแทก็ น้นั ๆ โดยทาหนา้ ที่เป็นเสมือนแอททริบิวทข์ องแทก็ น้นั ๆ มีรูปแบบคาสง่ั คือ style = \" คาสงั่ สไตลช์ ีล\" ดงั ตวั อยา่ งที่ 8.1 ตวั อย่างที่ 8.1 การใชง้ านสไตลช์ ีลภายในแทก็ <!DOCTYPE HTML> <html> <head><title>CSS with HTML5 </title> <meta charset=\"windows-874\"></head> <body> <h2>การใชง้ าน CSS ใน HTML 5 </h2> <p>รูปแบบปกติ ไมไ่ ดเ้ รียกใชง้ าน This is normal text. </p> <p style=\"text-decoration:underline;font-style: oblique;color: red;\"> รูปแบบการใชง้ าน CSS โดยแสดงขีดเส้นใตต้ วั เอียงและตวั หนงั สือสีแดง </p> </body> </html> บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
374 ภาพที่ 8.2 การใชง้ านสไตลช์ ีลภายในแทก็ จากตวั อยา่ งท่ี 8.1 การใชค้ าส่ังท้งั หมดอยใู่ นแอททริบิวท์ style โดยแทก็ <P> ท่ีไมม่ ีแอททริบิวท์ style และแทก็ <P> ท่ีมีแอททริบิวท์ style พบวา่ ขอบเขตของคาสั่งจะสิ้นสุดอยใู่ นแทก็ รูปแบบน้ีไม่นิยมใชเ้ น่ืองจากเม่ือเขียนสไตลช์ ีลไวใ้ นเอกสาร HTML ทวั่ เอกสาร แต่เม่ือตอ้ งแกไ้ ขจะคน้ หาวา่ แอททริบิวท์ style อยู่ ณ จุดตาแหน่งแท็กใดน้นั ยาก ซ่ึงมีจานวนมาก 8.1.2.2 การใชง้ านสไตลช์ ีลภายในเอกสาร HTML (Internal Style Sheet) การเขียนคาสั่งสไตลช์ ีลในตาแหน่งเดียว แต่ควบคุมการแสดงผลไดท้ ้งั เอกสาร นิยมเขียนในส่วนของ <head> ..</head> โดยมีรูปแบบ คือ <style type=\"text/css\"> คาส่ังสไตลช์ ีล</style> ตัวอย่างที่ 8.2 การใชง้ านสไตลช์ ีลภายในเอกสาร HTML <!DOCTYPE HTML> <html> <head> <title>CSS with HTML5 </title> <meta charset=\"windows-874\"> <style> body {background-color:lightgrey} บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
375ตัวอย่างที่ 8.2 การใชง้ านสไตลช์ ีลภายในเอกสาร HTML (ต่อ) h1 {color:blue} p { font-family:courier; font-size:150%; color:green;} span{ color:red; text-decoration:underline; }</style> ...</head> <body> <h1>การใชง้ าน CSS ใน HTML 5 </h1> <p>รูปแบบการใชง้ าน CSS กาหนดรูปแบบ ขนาดและตวั หนงั สือสีเขียว</p> <p>รูปแบบ <span>การใชง้ าน CSS กาหนดรูปแบบ </span></p> </body></html> ภาพที่ 8.3 การใชง้ านสไตลช์ ีลภายในเอกสาร HTML บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
376 จากตวั อยา่ งที่ 8.2 กาหนดแทก็ <p> ภายในมีขอ้ ความวา่ \"รูปแบบการใชง้ านสไตล์ชีลกาหนดรูปแบบ ขนาดและตวั หนงั สือสีเขียว\" แต่แตกตา่ งกนั ในอีเลเมนต์ (Element) ท่ีสองท่ีมีแทก็ <span> ซอ้ นอยภู่ ายใน HTML Code หากประมวลผลโดยการยกเลิกคาสงั่ สไตลช์ ีลในส่วนhead จะแสดงเพียงขอ้ ความคาวา่ \"รูปแบบ การใชง้ าน CSS กาหนดรูปแบบ\" รูปแบบเดิมเพียง 2บรรทดั เท่าน้นั คาส่งั สไตลช์ ีลท้งั หมดเขียนไวใ้ นแทก็ <style type=\"text/css\"> .. </stype> การเขียนคาส่ังดงั น้ี <style> body {background-color:lightgrey} h1 {color:blue} p { font-family:courier; font-size:150%; color:green;} span{ color:red; text-decoration:underline; } </style> การกาหนดแทก็ <p>..</p> โดยขอ้ ความเป็นสีเขียว กาหนดเพยี งคร้ังเดียวแตส่ ามารถเปลี่ยนขอ้ ความในแทก็ <p> ท้งั เอกสาร และแทก็ คาสั่งขอ้ ความแทก็ <span>. .</span> เป็นสีแดงและขีดเส้นใต้ 8.1.2.3 การใชง้ านสไตลช์ ีลภายนอกเอกสาร HTML (External Style Sheet)กาหนดการสร้างไฟลเ์ อกสารสไตลช์ ีลไวอ้ ีกหน่ึงไฟล์ โดยมีส่วนขยาย .css ภายในเขียนคาสงั่สไตลช์ ีลท้งั หมด เม่ือเรียกใชง้ านรูปแบบน้ีมีผลกบั ไฟลเ์ อกสาร HTML ท้งั หมด และสามารถนารูปแบบสไตลช์ ีลที่กาหนดไว้ เช่ือมโยงมายงั ไฟลต์ ่างๆ รูปแบบดงั น้ี รูปแบบ <LINK REL=\"STYLESHEET\" TYPE=\"TEXT/CSS\" HREF=\"ตาแหน่งไฟล.์ css\"> บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
377 การใชง้ านสไตลช์ ีลภายนอกเอกสาร HTML เช่น สร้างไฟลเ์ อกสาร 2 ไฟลใ์ นโฟลเดอร์เดียวกนั เช่น ไฟล์ css3.html และไฟล์ style_html.css ดงั ภาพท่ี 8.4 ช่ือไฟล์ HTML ไฟลส์ ไตลช์ ีล ภาพที่ 8.4 แสดงไฟลใ์ ชง้ านสไตลช์ ีลกบั ไฟลเ์ อกสาร HTML จากภาพท่ี 8.4 ไฟล์ css3.html เป็นขอ้ มูล HTML ท่ีแสดงผลลพั ธ์ โดยใชค้ าส่งั<style>..</style> เปลี่ยนเป็นแทก็ <link> เรียกใชง้ าน รายละเอียดคาสง่ั ไฟล์ css3.html ดงั น้ี ตวั อย่างที่ 8.3 รายละเอียดคาสงั่ ไฟล์ css3.html <!DOCTYPE HTML> <html> <head><title>CSS with HTML5 </title> <meta charset=\"windows-874\"> <link rel=\"stylesheet\" href=\"style_html.css\"> </head> <body> <h1>การใชง้ าน CSS ใน HTML 5 </h1> <p>รูปแบบการใชง้ าน CSS กาหนดรูปแบบ ขนาดและตวั หนงั สือสีเขียว</p> <p>รูปแบบ <span>การใชง้ าน CSS กาหนดรูปแบบ </span></p> </body> </html> บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
378 รายละเอียดไฟล์ style_html.css เป็นตวั กาหนดผลลพั ธ์การแสดงผล มีส่วนขยายเป็ น .cssรายละเอียดไฟล์ ดงั น้ีตวั อย่างท่ี 8.4 รายละเอียดไฟล์ style_html.css<style> } body {background-color:lightgrey} h1 {color:blue} p { font-family:courier; font-size:150%; color:green;} span{ color:red; text-decoration:underline;</style> ภาพท่ี 8.5 แสดงการใชง้ านสไตลช์ ีลกบั เอกสาร HTML จากภาพที่ 8.5 ไฟล์ css-test.html ปรากฎขอ้ ความเดิม 2 บรรทดั และรูปแบบขอ้ ความที่เปล่ียนไปเช่นเดียวกนั กบั ตวั อยา่ งภาพท่ี 8.3 บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
379 การใชง้ านสไตลช์ ีลภายนอกเอกสาร HTML เช่น สร้างไฟลเ์ อกสาร 2 ไฟลใ์ นโฟลเดอร์เดียวกนั เช่น ไฟล์ div_CSS.css และไฟล์ div_html.html เพื่อกาหนดการแสดงผลรูปแบบทรานซิชนั เม่ือเล่ือนเมาส์ไปยงั พ้ืนท่ีท่ีกาหนด ดงั ภาพท่ี 8.6 ช่ือไฟลส์ ไตลช์ ีล กาหนดทราซิชนั ชื่อไฟล์ HTML ภาพท่ี 8.6 แสดงไฟลใ์ ชง้ าน CSS กบั ไฟลเ์ อกสาร HTML จากภาพที่ 8.6 ไฟล์ div_html.html เป็นขอ้ มูล HTML ที่แสดงผลลพั ธ์ โดยใชค้ าสง่ั<style>..</style> เปล่ียนเป็นแทก็ <link> เรียกใชง้ าน รายละเอียดคาสัง่ ไฟล์ div_html.html ดงั น้ี ตัวอย่างท่ี 8.5 รายละเอียดคาส่งั ไฟล์ div_html.html <!DOCTYPE html> <html> <head><title>CSS3 Transition Show </title> <meta charset=\"windows-874\"> <link rel=\"stylesheet\" href=\"div_css.css\"> </head> <body> <div id=\"mydiv\"> <p> Mr.Tongchai Laboon Test Transition</p> </div> </body> </html> บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
380 รายละเอียดไฟล์ div_CSS.css เป็นตวั กาหนดผลลพั ธ์การแสดงผลรูปแบบการกาหนดทรานซิชนั เม่ือเล่ือนเมาส์ไปยงั ขอ้ ความที่กาหนด มีส่วนขยาย .css รายละเอียดไฟล์ ดงั น้ีตวั อย่างที่ 8.6 รายละเอียดไฟล์ div_CSS.css <style> #mydiv{ width=350px; transition-property: all; transition-delay: 1s; transition-duration:5s; transition-timing-fuction: ease-out; } #mydiv:hover{ background: #00ff00; box-shadow: 0px 0px 10px rgba(0,0,0,0,7) } </style> รูปแบบทรานซิชนั เม่ือเลื่อนเมาส์ไปยงั ขอ้ ความ ภาพท่ี 8.7 ตวั อยา่ งรูปแบบทรานซิชนั สไตลช์ ีล บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
381 ภาพท่ี 8.8 ผลลพั ธ์การใชง้ านสไตลช์ ีลกบั HTML58.2 รูปแบบ GLOBAL ATTRIBUTE สาหรับการใช้งาน HTML5 การใชง้ านรูปแบบแอตทริบิวตห์ ลกั ท่ีสามารถใชง้ านกบั เอลิเมนตท์ ุกๆ ตวั เริ่มเรียกใช้งานโปรแกรม HTML4 และเพิม่ แอตทริบิวตม์ าตรฐานใหม่ กาหนดรูปแบบการทางานใหม้ ีประสิทธิภาพ 8.2.1 แอตทริบิวต์ทใี่ ช้งานในโปรแกรม HTML4 เพอ่ื การกาหนดภาษา รูปแบบการแสดงผล กาหนดขอ้ มูลเพม่ิ เติมใหก้ บั เอลิเมนต์ กาหนดช่ือคลาส ใหก้ บั เอลิเมนต์ ตารางท่ี 8.1 แอตทริบิวตท์ ี่ใชง้ านในโปรแกรม HTML4แอตทริบวิ ต์ จุดประสงค์การใช้งาน HTML4 กาหนดภาษา ใชก้ าภาษาใด lang กาหนดการปรับรูปแบบการแสดงผล style กาหนดลาดบั ของการกดคีย์ แทบ็ tabindex กาหนดขอ้ มูลเพม่ิ เติมใหก้ บั เอลิเมนต์ title กาหนดคียล์ ดั สาหรับเรียกใชง้ านเอลิเมนต์accesskey กาหนดชื่อคลาสใหก้ บั เอลิเมนต์ class กาหนดทิศทางในการแสดงขอ้ ความในเอลิเมนต์ dir กาหนดช่ือไอดี กบั เอลิเมนต์ โดยแต่ละเอลิเมนต์ ตอ้ งมีไอดีไม่ซ้ากนั id บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
382 8.2.2 แอตทริบิวต์ทใ่ี ช้งานในโปรแกรม HTML 5 แอตทริบิวตม์ าตรฐานใหม่ สนบั สนุนการใชง้ านประกอบดว้ ยแอตทริบิวตต์ า่ งๆ ตารางที่ 8.2 แสดงแอตทริบิวตใ์ หม่ของ HTML5แอตทริบวิ ต์ จุดประสงค์การใช้งานcontenteditable กาหนดการอนุญาตใหแ้ กไ้ ขขอ้ มูลในเอลิเมนต์draggable กาหนดใหเ้ อลิเมนตใ์ ชเ้ มาส์ลากไดห้ รือไม่spellcheck กาหนดการตรวจสอบการสะกดคา ไวยากรณ์ในเอลิเมนต์translate กาหนดเน้ือหาของเอลิเมนตเ์ พ่อื กาหนดการแปลหรือไม่ 8.2.2.1 กาหนดการอนุญาตใหแ้ กไ้ ขขอ้ มูลในเอลิเมนต์ Contenteditable สาหรับการแกไ้ ขขอ้ มูลหรือขอ้ ความต่างๆ บนเวบ็ เพจน้นั สามารถกาหนดสถานการณ์ใชง้ าน กาหนดรูปแบบการแกไ้ ขได้ รูปแบบดงั น้ีรูปแบบ <element contenteditable =”true | false”> true : อนุญาตใหแ้ กไ้ ขขอ้ ความในเอลิเมนตไ์ ด้ false : ไม่อนุญาตใหแ้ กไ้ ขขอ้ ความในเอลิเมนตไ์ ด้ บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
383ตัวอย่างท่ี 8.7 การใชง้ าน contenteditable<!DOCTYPE html><html><head><title>Contenteditable </title><meta charset=\"windows-874\"></head><body> <h2>แกไ้ ขขอ้ ความบนเวบ็ เพจดว้ ย contenteditable</h2> <p id=\"myP\" contenteditable=\"true\">พมิ พข์ อ้ ความท่ีตอ้ งการแกไ้ ข</p> <button onclick=\"myFunction(this);\">ไมอ่ นุญาตขอ้ ความ</button> <p id=\"demo\"></p><script> function myFunction(button) { var x = document.getElementById(\"myP\"); if (x.contentEditable == \"true\") { x.contentEditable = \"false\"; button.innerHTML = \"ไม่อนุญาตแกไ้ ขขอ้ ความ!\"; } else { x.contentEditable = \"true\"; button.innerHTML = \"อนุญาตแกไ้ ขขอ้ ความ!\"; } }</script></body></html> บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
384 ป่ ุมกาหนดสถานการแกไ้ ขขอ้ มลู ภาพท่ี 8.9 การใชง้ านรูปแบบ element contenteditable พมิ พข์ อ้ ความที่ตอ้ งการแกไ้ ขขอ้ มูล ลงในช่อง พมิ พข์ อ้ ความท่ีตอ้ งการแกไ้ ขใหม่ตามตอ้ งการ แกไ้ ขขอ้ ความ ภาพท่ี 8.10 การใชง้ านรูปแบบ element contenteditable เปล่ียนแปลงขอ้ ความ บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
385 8.2.2.2 การย้ายเอลเิ มนต์ draggable กาหนดการยา้ ยวตั ถุ เอลิเมนตใ์ ชเ้ มาส์ลากได้หรือไม่ รูปแบบดงั น้ีรูปแบบ <element draggable =”true | false | auto”>true : อนุญาตใหล้ ากยา้ ยเอลิเมนตไ์ ด้false : ไม่อนุญาตใหล้ ากยา้ ยเอลิเมนตไ์ ด้auto : การแสดงผลข้ึนอยบู่ ราวเซอร์ตวั อย่างที่ 8.8 การใชง้ าน draggable<!DOCTYPE html><html> <head><title>draggable</title> <meta charset=\"windows-874\"><style>#div1 {width:200px;height:130px;padding:10px;border:1px solid #aaaaaa;}</style><script> function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData(\"text/html\", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData(\"text/html\"); บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
386ตวั อย่างที่ 8.8 การใชง้ าน draggable (ต่อ) ev.target.appendChild(document.getElementById(data)); }</script></head><body> <p>กรุณาเลือกภาพ Logo HTML5 และลากไปวาง ในรูปส่ีเหล่ียม</p> <div id=\"div1\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"></div> <br> <img id=\"drag1\" src=\"html5.jpg\" draggable=\"true\" ondragstart=\"drag(event)\" width=\"102\" height=\"102\"></body></html> ลากภาพโลโก้ ภาพที่ 8.11 ผลลพั ธ์การใชง้ านรูปแบบ element draggable บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
387 ผลลพั ธ์ท่ีได้ภาพท่ี 8.12 ผลลพั ธ์การใชง้ านรูปแบบ element draggable 8.2.2.3 การตรวจสอบการสะกดคาไวยากรณ์ด้วย Spellcheck กาหนดการตรวจสอบการสะกดคาไวยากรณ์ในเอลิเมนต์ เปิ ดหรือปิ ดการใชง้ าน รูปแบบดงั น้ีรูปแบบ <element spellcheck =”true | false”>true : อนุญาตตรวจสอบการสะกดคา ไวยากรณ์false : ไม่อนุญาตตรวจสอบการสะกดคา ไวยากรณ์ บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
388ตัวอย่างที่ 8.9 การตรวจสอบการสะกดคาไวยากรณ์<!DOCTYPE html><html> <head><title>Spellcheck </title> <meta charset=\"windows-874\"></head><body> Input to textfield.<input type=\"text\" spellcheck=\"true\" /><br /> Input to textarea.<textarea spellcheck=\"true\"></textarea><br /> <div contenteditable=\"true\" spellcheck=\"true\"><br /> <strong>รูปแบบ</strong> กรณีท่ีป้อนคาไม่ถูกตอ้ งจะแสดงเส้นสีแดง ของคา <br /> ใหค้ ลิกขวาเพื่อเลือกคาที่ถูกตอ้ ง</div><br /></body></html> ภาพที่ 8.13 การตรวจสอบการสะกดคาไวยากรณ์ บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
389 เลือกคาสะกดถูกตอ้ ง โดยการคลิกขวา รายการคาที่สะกดถูกตอ้ ง และแสดงคาใกลเ้ คียงรูปแบบแสดงผลดงั ภาพที่ 8.14 แลว้ เลือกคาที่ตอ้ งการ เวบ็ เพจจะทาการแกไ้ ขขอ้ ความใหถ้ ูกตอ้ งตามที่เลือก ภาพที่ 8.14 แสดงคาที่ตรวจสอบคา ท่ีใกลเ้ คียงกบั คาท่ีสะกดผดิ ภาพที่ 8.15 คาสะกดถูกตอ้ งตามผใู้ ชง้ านเลือกคา บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
390 8.3 รูปแบบฟอร์มใหม่สาหรับการใช้งาน HTML5 รูปแบบฟอร์มมีการกาหนดคุณสมบตั ิการสร้างฟอร์มใหมเ่ พือ่ ใชง้ านง่าย โดยไม่ตอ้ งเรียกใชง้ านจาวาสคริปต์ การรับขอ้ มูลจากฟอร์มเกิดประสิทธิภาพ โดยกาหนดคุณสมบตั ิเพิม่ เติมในแทก็ <input> ขอ้ จากดั ฟอร์ม คือ ไมส่ ามารถแสดงผลไดท้ ุกบราวเซอร์ แอตทริบิวตท์ ่ีเพม่ิ เพอ่ืเพิ่มประสิทธิภาพการทางานในฟอร์ม ดงั น้ี ตารางท่ี 8.3 แสดงแอตทริบิวตส์ าหรับการสร้างฟอร์มในแทก็ <input>แอตทริบวิ ต์ จุดประสงค์การใช้งานsearch สร้างฟิ ลดแ์ บบขอ้ ความ เพ่อื ป้อนค่าสาหรับการคน้ หาcolor สร้างฟิ ลดเ์ พอื่ การเลือกสีdate สร้างฟิ ลดแ์ บบตวั เลือกวนั ท่ี โดยแสดง วนั , เดือน และปี (ไม่แสดงเวลา)datetime สร้างฟิ ลดร์ ับคา่ วนั และเวลา (วนั , เดือน, ปี , ชว่ั โมง, นาที, วนิ าที และ ฟังกช์ นั วนิ าที ตามรูปแบบเวลามาตรฐานสากล (UTC)datetime-local สร้างฟิ ลดแ์ บบตวั เลือกวนั ที่ และเวลา (วนั , เดือน, ปี , ชวั่ โมง, นาที, วนิ าทีและฟังกช์ น่ั วนิ าที (แบบไมก่ าหนด time zone)email สร้างฟิ ลดก์ รอกท่ีอยอู่ ีเมล์month สร้างฟิ ลดแ์ บบตวั เลือกเดือนและปี (ไมก่ าหนด time zone)number สร้างฟิ ลดแ์ บบรับค่าตวั เลข โดยสามารถกาหนดช่วงของตวั เลขrange สร้างฟิ ลดแ์ บบรับค่าตวั เลขไม่สาคญั แสดงผลในลกั ษณะแถบเล่ือนtel สร้างฟิ ลดแ์ บบขอ้ ความ เพอื่ ป้อนคา่ หมายเลขโทรศพั ท์time สร้างฟิ ลดแ์ บบตวั เลือกเวลา (ไมก่ าหนด time zone)week สาหรับฟิ ลดแ์ บบตวั เลือกสปั ดาห์และปี (ไมก่ าหนด time zone)url สร้างฟิ ลดแ์ บบขอ้ ความเพื่อป้อนค่า url การรับขอ้ มูล บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
391 8.3.1 ค้นหาข้อมูลด้วย Search สาหรับการรับคา่ ขอ้ มูล เพื่อคน้ หาในเทก็ ซ์ฟิ ลด์ (textfield) จะปรากฏป่ ุม ลา้ งคา่ เดิม ช่องวา่ งสาหรับกรอกขอ้ มูลที่ตอ้ งการคน้ หา สามารถกาหนดรูปแบบค่าการคน้ หา รูปแบบดงั น้ี รูปแบบ <input type=’search’> ตัวอย่างท่ี 8.10 คน้ หาขอ้ มูลดว้ ย Search <!DOCTYPE HTML> <html> <head><title>Search HTML5 Structure</title> <meta charset=\"windows-874\"> </head> <body> <h2> กรุณากรอกสิ่งที่ตอ้ งการคน้ หา </h2> <form id='search' method='post'> <input type='search' id='mysearch' name='nsearch'> <input type='submit' value='คน้ หา'> </form> </body> </html> ภาพท่ี 8.16 คน้ หาขอ้ มูลดว้ ย Search บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
392 8.3.2 การรับเฉพาะค่าอเี มล์ด้วย email คือ ช่องขอ้ ความในการรับขอ้ มูลประเภทอีเมล์สามารถกาหนดรูปแบบคา่ อีเมล์ สาหรับรับขอ้ มูล รูปแบบดงั น้ี รูปแบบ <input type=’email’> ตัวอย่างท่ี 8.11 การรับเฉพาะค่าอีเมล์ <!DOCTYPE HTML> <html> <head><title>E-mail HTML5 Structure</title> <meta charset=\"windows-874\"> <style> form {width:300px; float:center; margin:0 auto;} </style> </head> <body> <h2> กรุณากรอก e-mail </h2> <form id='email' method='post'> <input type='email' id='myemail' name='mymail'> <input type='submit' value='Send'> </form> </body> </html> บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
393 ภาพท่ี 8.17 การรับเฉพาะค่าอีเมล์ 8.3.3 การรับเฉพาะค่าลงิ ค์ด้วย URL การรับเฉพาะค่าลิงคด์ ว้ ยยอู าร์แอล โดยกรณีที่ตอ้ งการกรอกยอู าร์แอลลงในแบบฟอร์ม กาหนดรูปแบบ <input type=’url’ value=’Send’> หากกรอกขอ้ มูลอ่ืนไม่ใช่รูปแบบของยอู าร์แอล จะแสดงขอ้ ความเพอ่ื แจง้ เตือน โปรดป้อนยอู าร์แอลใหก้ รอกขอ้ มูลในรูปแบบยอู าร์แอล เช่น http://www.bcplvc.com รูปแบบดงั น้ี รูปแบบ <input type=’url’ value=’Send’> บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
394ตวั อย่างที่ 8.12 การรับเฉพาะค่าลิงคด์ ว้ ย URL<!DOCTYPE HTML><html><head> <title>URL HTML5 Structure</title> <meta charset=\"windows-874\"><style> form {width:300px; float:center; margin:0 auto;}</style></head> <body> <h2> กรุณากรอก URL </h2> <form id='url' method='post'> <input type='url' id='myurl' name='myurl'> <input type='submit' value='Send'> </form> </body></html>ภาพท่ี 8.18 การรับเฉพาะค่าลิงคด์ ว้ ย URL บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
395 8.3.4 การรับข้อมูลตัวเลขแบบช่วงข้อมูล Ranges การรับขอ้ มูลตวั เลขแบบช่วงของขอ้ มูล Ranges ตอ้ งป้อนขอ้ มูลเป็นคา่ ตวั เลขเท่าน้นั โดยใช้ type=’number’ การกาหนดตวั เลขลงในฟอร์มสามารถใช้ range แทน ผลลพั ธ์ท่ีไดจ้ ะแสดงแถบเล่ือนใหผ้ ใู้ ชล้ ากเมาส์ เพือ่ กาหนดตวั เลขท่ีตอ้ งการ รูปแบบดงั น้ี รูปแบบ <input type='range' id='num' name='num' min='1' max='5' > ตวั อย่างที่ 8.13 การรับขอ้ มูลตวั เลขแบบช่วงของขอ้ มูล Ranges <!DOCTYPE HTML> <html> <head> <title>Ranges HTML5 Structure</title> <meta charset=\"windows-874\"> <style> input [type:range]{width:300px; float:center; margin:0 auto;} </style> </head> <body> <h2> กรุณาระบุการใหค้ ะแนน </h2> <form id='myrange' method='post'> <label for='myInput'>ลากเมาส์กาหนดคะแนน</label> <input type='range' id='num' name='num' min='1' max='5' > <input type='submit' value='Send'> </form> </body> </html> บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
396 ภาพท่ี 8.19 การรับขอ้ มูลตวั เลขแบบช่วงของขอ้ มูล Ranges 8.3.5 การรับข้อมูลตวั เลข การรับขอ้ มูลตวั เลขแบบระบุตวั เลข ตอ้ งป้อนขอ้ มูลเป็นคา่ ตวั เลขเท่าน้นั โดยใช้ type=’number’ การกาหนดตวั เลขลงในฟอร์ม ผลลพั ธ์ท่ีไดจ้ ะแสดงคา่ ตวั เลขเพื่อระบุคา่ ใหผ้ ใู้ ชค้ ลิกเพอ่ื กาหนด ตวั เลขท่ีตอ้ งการ รูปแบบดงั น้ี รูปแบบ <input type='number' id='num' name='num' min='1' max='10' placeholder=\"5\"> บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
397ตัวอย่างที่ 8.14 การรับขอ้ มูลตวั เลขแบบระบุคา่<!DOCTYPE HTML><html><head><title>Numbers HTML5 Structure</title><meta charset=\"windows-874\"><style> form {width:300px; float:center; margin:0 auto;}</style></head> <body> <h2> กรุณาป้อนเฉพาะตวั เลข </h2> <form id='Inputnumber' method='post'> จานวนสินคา้ ท่ีตอ้ งการส่งั ซ้ือ <input type='number' id='num' name='num' min='1' max='10' placeholder=\"5\"> <input type='submit' value='Send'> </form> </body></html> บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
398 ภาพท่ี 8.20 การรับขอ้ มูลตวั เลขแบบระบุตวั เลข 8.3.6 การรับข้อมูลเฉพาะเบอร์โทรศัพท์ด้วย tel การรับขอ้ มูลเฉพาะเบอร์โทรศพั ทด์ ว้ ยชนิดของขอ้ มูล tel ตอ้ งป้อนขอ้ มูลที่เป็นค่าตวั เลขเท่าน้นั เป็นรูปแบบเบอร์โทรศพั ท์ โดยใช้type=’tel’ กาหนดป้อนเบอร์โทรศพั ทใ์ นฟอร์มและจากดั รูปแบบการรับคา่ ตวั เลข คือ pattern=”[0-9]{10}” หมายถึง การรับค่าต้งั แตต่ วั เลข 0-9 มีความยาว 10 หลกั รูปแบบดงั น้ี รูปแบบ <input type='tel' pattern=\"[0-9]{10}\" > บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
399ตวั อย่างท่ี 8.15 การรับขอ้ มูลเฉพาะเบอร์โทรศพั ท์<!DOCTYPE HTML><html><head><title>Tel HTML5 Structure</title><meta charset=\"windows-874\"><style> input [type:tel]{width:300px; float:center; margin:0 auto;}</style></head> <body> <h2> กรุณากรอกเบอร์โทรศพั ท์ </h2> <form id='mytel' method='post'> <label for='telnum'>Mobile Phone</label> <input type='tel' id='telnum' name='telnum' pattern=\"[0-9]{10}\" > <input type='submit' value='Send'> </form> </body></html> บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
400 ภาพที่ 8.21 การรับขอ้ มูลเฉพาะเบอร์โทรศพั ท์ 8.3.7 การรับข้อมูลลกั ษณะการเลือก Color Picker สาหรับการรับขอ้ มูลท่ีใหผ้ ใู้ ชก้ รอกขอ้ มูลเก่ียวกบั สี เช่น สีของเส้ือที่ตอ้ งการส่งั ซ้ือ สีของหนา้ จอภาพท่ีตอ้ งการแสดงผล เป็นตน้ ผใู้ ช้สามารถเลือกสีจากรายการที่เตรียมไว้ โดยการกาหนดรูปแบบการนาขอ้ มูลเขา้ เป็น type=’color’ผลลพั ธ์ท่ีไดจ้ ะปรากฎ Color Picker สาหรับคลิกเลือกสี โดยสามารถเลือกสีมาตราฐาน หรือสีอ่ืนๆ รูปแบบดงั น้ี รูปแบบ <input type='color' id=’productcolor’ > ตวั อย่างท่ี 8.16 การรับขอ้ มูลลกั ษณะการเลือก Color Picker <!DOCTYPE HTML> <html> <head><title>Color HTML5 Structure</title> <meta charset=\"windows-874\"> <style> input [type:color]{ width:300px; float:center; บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
401 ตัวอย่างที่ 8.16 การรับขอ้ มูลลกั ษณะการเลือก Color Picker (ต่อ) margin:0 auto;}</style></head> <body> <h2> การรับขอ้ มูลเก่ียวกบั การเลือกสี</h2> <form id='color' method='post'> <label for='productcolor'>เลือกสีที่ตอ้ งการ</label> <input type='color' id='productcolor'> <input type='submit' value='Send'> </form> </body></html> ภาพที่ 8.22 การรับขอ้ มูลลกั ษณะการเลือก Color Picker บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
402 8.3.8 การรับค่าข้อมูลเกย่ี วกบั วนั ทแ่ี ละเวลา datetime คือ การรับค่าขอ้ มูลวนั ที่ และเวลา มีรูปแบบสาหรับค่าวนั ที่และเวลาโดยเฉพาะ โดยกาหนดแอตทริบิวต์ Type ไดห้ ลายรูปแบบเช่น date, datetime, datetime-local, month, time และ week โดยแตล่ ะแบบมีความหมาย ดงั น้ี 1. Date ใชก้ รอกวนั ที่ โดยระบุ ปี เดือน และวนั โดยไมไ่ ดร้ ะบุเวลา เช่น 2014-10-19 2. Month เป็นการรับค่าเดือน โดยกาหนดปี และเดือน เช่น 2014-10 3. Week ใชก้ รอกปี และหมายเลขสปั ดาห์ (กรอกสัปดาห์ที่ 1-52) เช่น 2014-w24 4. Time ใชก้ รอกเวลาในแบบ 24 ชว่ั โมง เช่น 09:00 5. Datetime การกรอกวนั ท่ีและเวลา โดยใช้ T คนั่ ระหวา่ งวนั ที่และเวลา และกาหนดTime Zone ตามมาตรฐาน Coordinate Universal Time (UTC) เช่น 2014-10-19T09:39+7:00หมายถึง เวลา 09:39 น. ของวนั ที่ 19 ตุลาคม 2557 โดยอยเู่ ขตเวลา UTC บวกไป 7 ชว่ั โมง 6. Datetime-local กรอกวนั เวลา ซ่ึงเหมือนกบั datetime แต่ไมม่ ีการระบุ Time Zone การกาหนดช่องสาหรับกรอกวนั ที่และเวลาในแบบฟอร์ม ผลลพั ธ์ท่ีได้ จะปรากฏ Datepicker ซ่ึงตอ้ งเปิ ดโปรแกรมบราวเซอร์ Google Chrome หรือ Spark Browser สาหรับคลิกเลือกวนั ท่ีจากปฏิทินที่แสดง รูปแบบดงั น้ี รูปแบบ <input type='date' id='setdate'> ตัวอย่างที่ 8.17 กรอกวนั ที่และเวลาในแบบฟอร์ม <!DOCTYPE HTML> <html> <head><title>Datetime HTML5 Structure</title> <meta charset=\"windows-874\"> <style> form {width:300px; float:center; margin:0 auto;} </style> บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
403ตัวอย่างท่ี 8.17 กรอกวนั ที่และเวลาในแบบฟอร์ม (ตอ่ )</head> <body> <form id='color' method='post'> <label for='setdate'>โปรดเลือกวนั ที่</label> <input type='date' id='setdate'> <input type='submit' value='Send'> </form> </body></html>ภาพท่ี 8.23 กรอกวนั ท่ีและเวลาในแบบฟอร์ม ผา่ น Google Chrome บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
404 ภาพท่ี 8.24 กรอกวนั ท่ีและเวลาในแบบฟอร์มผา่ น Spark Browser ตวั อย่างที่ 8.18 การรับขอ้ มูล โดยใช้ แทก็ <input type=\"week\" name=\"week\">แบบ Week เพ่อื กรอกปี และหมายเลขสปั ดาห์ (กรอกสัปดาห์ที่ 1-52) เช่น 2014-w24 <!DOCTYPE HTML> <html> <head> <title>Week HTML5 Structure</title> <meta charset=\"windows-874\"> <style> form {width:300px; float:center; margin:0 auto;} </style> </head> <body> บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
405ตวั อย่างท่ี 8.18 การรับขอ้ มูล <input type=\"week\" name=\"week\"> (ต่อ) <form id='Week' method='post'> <label for='setdate'>โปรดเลือกสัปดาห์</label> <input type=\"week\" name=\"week\"> <input type='submit' value='เลือก'> </form> </body></html> ภาพท่ี 8.25 รูปแบบ <input type=’week’ name=’week’> บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
406 8.4 การใช้งานแคนวาส (Canvas) แคนวาสเป็นความสามารถใหมข่ อง HTML5 ลกั ษณะการทางานของแคนวาส เช่นการวาดสี่เหล่ียม การใส่สี การวาดวงกลม การไล่สี การวาดรูปอิสระ การแทรกภาพ หรือกาหนดพิกเซลลงในพ้ืนท่ีท่ีกาหนด แควาสประมวลผลไดผ้ ลลพั ธ์ภาพในลกั ษณะแรสเตอร์ (ภายในกรอบวตั ถุแคนวาส) โดยกาหนดรูปแบบแทก็ <canvas> ซ่ึงใชเ้ อพไี อ เป็นตวั กลางสาหรับคอยควบคุมและจดั การแคสวาส โดยสามารถใชจ้ าวาสคริปตจ์ ดั การเก่ียวกบั การวาดบนแคสวาส 8.4.1 การใช้งานแทก็ <canvas> การใชง้ านแคนวาส แทก็ <canvas> ตอ้ งกาหนดพ้ืนท่ีการวาด โดยตอ้ งกาหนดแอตทริบิวต์ เพื่อกาหนดขนาดความกวา้ ง (width) และความสูง (height)ของแคนวาส รูปแบบดงั น้ี รูปแบบ <canvas width=”450” height=”240” id=”myCanvas”></canvas> พ้ืนท่ีการใชง้ านแคนวาสเป็นขอบเขต เรียกวา่ กริด (Grid) การวาดตอ้ งกาหนดพ้ืนที่กริดการวาดรูปภายนอกพ้ืนท่ีกริด จะไม่สามารถแสดงภาพน้นั บนเวบ็ เพจ ตัวอย่างท่ี 8.19 การใชง้ านแทก็ <canvas> <!DOCTYPE html> <html> <head><title>Canvas </title> <meta charset=\"windows-874\"></head> <body> <canvas id=\"myCanvas\" width=\"350\" height=\"100\" style=\"border:2px solid red;\"> Your browser does not support the HTML5 canvas tag</canvas> </body> </html> บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
407 ภาพท่ี 8.26 ตวั อยา่ งการวาดรูปดว้ ยแคนวาส 8.4.2 การใช้แทก็ <canvas> ร่วมกบั Object การใชง้ านงานแทก็ <canvas></canvas>สามารถใชส้ ไตลช์ ีล เพอ่ื ควบคุมรายละเอียดต่างๆ การแสดงผลในรูปแบบสีพ้ืน และสีเส้นขอบของกริด ลกั ษณะของเส้นขอบ เช่น เส้นประ เส้นทึบ การแสดงผลขอ้ มูลผา่ นพ้นื ที่ของแคนวาส ตวั อย่างที่ 8.20 การใชง้ านในพ้นื ท่ีแคนวาส <!DOCTYPE html> <html> <head><title>Canvas Apply</title> <meta charset=\"windows-874\"></head> <body> <canvas id=\"myCanvas\" width=\"350\" height=\"100\" style=\"border:2px solid red;\"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById(\"myCanvas\"); var ctx = c.getContext(\"2d\"); ctx.font = \"30px Arial\"; บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
408ตัวอย่างท่ี 8.20 การใชง้ านในพ้ืนที่แคนวาส (ตอ่ ) ctx.strokeText(\"Mr.Tongchai Laboon\",10,50); </script></body></html> ภาพท่ี 8.27 ตวั อยา่ งการวาดรูปดว้ ยแคนวาสและใชง้ านแคนวาส 8.5 การใช้งาน SVG เอสวจี ี (SVG : Scalable Vector Graphic) หมายถึง แทก็ ท่ีใชส้ าหรับการวาดกราฟิ กแบบแวกเตอร์ รูปแบบประมวลผลขอ้ มูลรูปภาพแบบกราฟิ ก 2 มิติ เรียกวา่ แวกเตอร์ การใชง้ านเรียกใชค้ าส่งั การวาดภาพกราฟิ ก วาดดว้ ยแทก็ แบบ markup ภาพกราฟิ กท่ีไดส้ ามารถยอ่ ขยายภาพโดยภาพยงั คงความคมชดั รูปแบบ <svg xmlns=\"http://www.w3.org/3000/svg\" version=\"1.1\"> Detail ………… </svg> บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
409 ตวั อย่างท่ี 8.21 การใชง้ านเอสวจี ี <!DOCTYPE html> <html> <head><title></title> <meta charset=\"windows-874\"></head> <body> <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"> <circle cx=\"100\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"2\" fill=\"red\" /> </svg> </body> </html> ภาพท่ี 8.28 ตวั อยา่ งการวาดรูปดว้ ยเอสวจี ี ไฟลเ์ อสวจี ีอยา่ งง่ายจะแสดงภาพกราฟิ กออกมาเป็ นวงกลม แสดงรายละเอียดต่างๆ ตามขอ้ มูล XML ท่ีกาหนดรูปแบบใหก้ บั ขอ้ มูลกราฟิ ก ตวั อยา่ งดงั น้ี 1. ค่า cx, cy ความหมาย พกิ ดั x, y ของจุดศูนยก์ ลางของวงกลม หากไมไ่ ด้กาหนดคา่ จะเป็ น 0 2. คา่ r คือ รัศมีของวงกลม บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
410 3. ค่า stroke คือ สีของเส้นขอบ 4. ค่า stroke-width คือ ความหนาของเส้นขอบ 5. คา่ fill คือ สีของกราฟิ กท่ีสร้างข้ึน เอสวจี ีสามารถสร้างรูปทรง (shape) ลกั ษณะตา่ งๆ ไดห้ ลากหลายรูปแบบ ซ่ึงแต่ละรูปทรงประกอบดว้ ยแอตทริบิวตต์ ่างๆ เพื่อใหผ้ อู้ อกแบบกาหนดค่าเพื่อแสดงผล ดงั น้ี 1. Rectangle <rect> 2. Circle <circle> 3. Ellipse <ellipse> 4. Line <line> 5. Polyline <polyline> 6. Polygon <polygon> 7. Path <path> ตวั อย่างที่ 8.22 การใชง้ านเอสวจี ี โดยแทก็ <polygon> <!DOCTYPE html> <html> <head><title>SVG HTML</title> <meta charset=\"windows-874\"></head> <body> <svg width=\"300\" height=\"200\"> <polygon points=\"100,10 40,198 190,78 10,78 160,198\" style=\"fill:lime;stroke:green;stroke-width:5;fill-rule:evenodd;\" /> Sorry, your browser does not support inline SVG. </svg> </body> </html> บทที่ 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
411 ภาพท่ี 8.29 ตวั อยา่ งการวาดรูปดว้ ยเอสวจี ี โดยแทก็ <polygon> 8.6 การใช้งานไฟล์เสียงและวดิ ีโอ รูปแบบการใชง้ านวดิ ีโอ การเรียกใชโ้ ดยไมต่ อ้ งเรียกใชป้ ลกั๊ อิน และไม่ตอ้ งกาหนดแทก็embed ซ่ึงตา่ งจากเดิม ตอ้ งเรียกใชง้ านบนเวบ็ เพจ โดยเรียกโปรแกรม Adobe Flash เพื่อแสดงผลลพั ธ์บนเวบ็ เพจไมจ่ าเป็ นตอ้ งติดต้งั Plug-in เพิม่ เติม HTML5 กาหนดแทก็ สาหรับการเล่นไฟล์เสียง และวดิ ีโอ โดยอนุญาตใหส้ ามารถควบคุมการเล่นมลั ติมีเดียโดยตรง เช่น การเล่น หยดุ เล่นกรอไปขา้ งหนา้ ยอ้ นกลบั ไฟลเ์ สียงและไฟลว์ ดิ ีโอสนบั สนุนการใชง้ านบนบราวเซอร์ ดงั น้ี 1. ไฟลเ์ สียงมีส่วนขยายของไฟล์ เช่น (ogg, oga) ogg (ogg, oga), mp3, wav และ AAC 2. ไฟลว์ ดี ิโอที่มีส่วนขยายของไฟล์ เช่น ogg (ogv) และ H.264 (mp4) 8.6.1 การใช้งานแท็ก <video> และ <audio> กาหนดดว้ ยแทก็ <video></video> และ<audio></audio> สิ่งท่ีควรระวงั ขณะเรียกใชง้ าน คือ การระบุไฟล์ และพาธของไฟลท์ ี่เกบ็ ขอ้ มูลรูปแบบดงั น้ี รูปแบบ <video src=”/media/ex.mp4” controls=”controls”></video> <audio src=”/media/ex.mp3” controls=”controls”></audio> บทที่ 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
412 รูปแบบแทก็ <video> ปิ ดดว้ ยแทก็ </video> ระบุแหล่งที่อยขู่ องไฟล์ src เพื่อเลือกการแสดงผลวดิ ีโอ และใช้ controls เพื่อกาหนดการแสดงควบคุมวดิ ีโอ การใชง้ านแทก็ <video>บราวเซอร์มีรูปแบบการรองรับการใชง้ านมีความแตกตา่ ง เช่น Microsoft Internet Explore และApple Safari ไฟลท์ ี่อยใู่ นรูปแบบ HTMLVideo Element รองรับเฉพาะ H.264 ส่วนบราวเซอร์ท่ีสนบั สนุน Firefox, Google Chrome และ Opera ไฟลท์ ี่อยใู่ นรูปแบบ Media Source Extensionsรองรับการทางาน MSE & WebM VP8 ตวั อย่างท่ี 8.23 การใชง้ านวิดีโอดว้ ยแทก็ <video> <!DOCTYPE html> <html> <head><title>Video for HTML5</title> <meta charset=\"windows-874\"></head> <body> <h2>Video Player</h2> <video controls=\"controls\"> <source src=\"Media/Pretty_Boy_ M2M.mp4\" /> </video> </body> </html> บทท่ี 8 การพฒั นาเวบ็ เพจดว้ ย HTML5 Mr.Tongchai Laboon
413 ภาพท่ี 8.30 การใชง้ านวดิ ีโอดว้ ยแทก็ <video> จากตวั อยา่ งท่ี 8.23 ควรมีการกาหนดการใชง้ านแทก็ <source> เพือ่ กาหนดวิดีโอในรูปแบบต่างๆ ควรใหค้ รบท้งั 3 รูปแบบ คือ .mp4 สาหรับการใชง้ านเวบ็ บราวเซอร์ InternetExplore, Google Chrome และ Apple Safari แต่รูปแบบ .webm และ .ogv สาหรับการใชง้ านเวบ็บราวเซอร์ Firefox, Google Chrome หรือ Opera ลกั ษณะการใชง้ านดงั น้ี ตัวอย่างท่ี 8.24 การระบุแหล่งขอ้ มูลชนิดวดิ ีโอ เพอื่ รองรับเวบ็ บราวเซอร์ท้งั หมด <!DOCTYPE html> <html> <head><title>Video for HTML5</title> <meta charset=\"windows-874\"></head> <body> <h2>Video Support Browser</h2> <video controls=\"controls\"> <source src=\"Media/Pretty_Boy_ M2M.mp4\" type=”video/mp4” /> บทท่ี 8 การพฒั นาเว็บเพจดว้ ย HTML5 Mr.Tongchai Laboon
Search
