Your SlideShare is downloading. ×
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Html5report
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5report

714

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
714
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Silpakorn University 2011HTML 5Dittapong Muensa 13510158 Information Technology For Design (Web and Interactive), Silpakorn University Acodomic Year 2011
  • 2. CompanyTable of ContentsHTML 5 คืออะไร 1 HTML 5 หมายถึง 1 จาก html 4 1 นํามาประยุกต์เป็น html 5 กลายเป็น 2 ตัวอย่างแบบที่ใช้ div 2 ตัวอย่าง HTML5 3ผู้สร้าง ภาษา HTML 5 จุดเด่นของ HTML5 8 บราวเซอร์ในรองรับ HTML5 บ้าง? 8 HTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไร 9Name of report i
  • 3. HTML 5 คื อ อะไรHTML 5 หมายถึงHTML5 เป็นภาษาที่ถูกพัฒนาขึ้นเพื่อเป็นภาษามาร์กอัปสําหรับ WWW รุ่นต่อไปของ HTML ถูกพัฒนาขึ้นในปี 2004 โดยกลุ่มWHATWG(The Web Hypertext Application Technology Working Group) โดยเรียกชื่อว่า Web applications 1.0 โดยดราฟต์แรกได้ปรากฏออกมาเมื่อ 22 มกราคม พ.ศ. 2551  โดย HTML5 จะช่วยลดการใช้พวกปลั๊กอินพิเศษอย่างพวก Adobe Flash, Microsoft Silverlight, Apache Pivot และSun JavaFX HTML5 มาพร้อมกับองค์ประกอบ และคุณลักษณะใหม่ ๆ ที่แสดงให้เห็นการใช้งานทั่ว ๆ ไปของเว็บไซต์ต่าง ๆ ในปัจจุบันหรือพูดง่าย ๆ ก็คือเอามาแทนที่ตัวเดิม ๆ ที่เราเคยใช้กันอย่างเช่น div และ span ตัวอย่างเช่นปกติถ้าเราจะสร้างเมนูบาร์ก็จะใช้ ภาพ 1.1 แสดงภาพรวม semetic ของ html5จาก html 4<div id="nav"><ul><li>Home</li><li>Contact Us</li><li>About Us</li></ul></div>HTML 5 : Seminar Course 2011 1
  • 4. นํามาประยุกต์เป็น html 5 กลายเป็น<nav><ul><li>Home</li><li>Contact Us</li><li>About Us</li></ul></nav>แล้วก็ยังมีตัวอื่นอีก คือ header, section, article, aside, และ footer ส่วนองค์ระกอบอื่น ๆ ที่เคยใช้ และได้พวก search engine ให้ความสําคัญ อย่างเช่น title, h1 ถึง h6, p เป็นต้น ก็ยังคงใช้อยู่ตัวอย่างแบบที่ใช้ div ภาพ 1.2 แสดงตัวอย่างจากการใช้ div ในภาษา html 4<body> <div id="header"> <h1>HTML 5</h1> <p>By ofebia</p> </div> <div id="nav">HTML 5 : Seminar Course 2011 2
  • 5. ! ! <ul> <li>Home</li> <li>Contact Us</li> <li>About Us</li> </ul> </div> <div id="content"> <span id="entry"> <h1>A - Z : Chapter 1</h1> <p>abcdefghijklmnopqrstuvwxyz</p> </span> </div> <div id="sidebar"> <h1>Archives</h1> <ul> <li>ABC</li> <li>abc</li> <li>123</li> <ul> </div> <div id="footer">© 2010 web.ofebai</div></body>ตัวอย่าง HTML5 ภาพ 1.3 แสดงตัวอย่างจากการใช้ semetic ในภาษา html 5HTML 5 : Seminar Course 2011 3
  • 6. <body>     <header>          <h1>HTML 5</h1>          <p>By ofebia</p>     </header>     <nav>          <ul>               <li>Home</li>               <li>Contact Us</li>               <li>About Us</li>          </ul>     </nav>     <article>          <section>               <h1>A - Z : Chapter 1</h1>               <p>abcdefghijklmnopqrstuvwxyz</p>          </section>     </article>     <aside>          <h1>Archives</h1>          <ul>               <li>ABC</li>               <li>123</li>               <li>abc</li>          </ul>     </aside>     <footer>© 2010 web.ofebai</footer></body>แล้วก็ยังมีแท็กจําพวก video, audio และอื่น ๆ ที่ทําให้เว็บไซต์ของเรามีความหมายที่เข้าใจง่ายสําหรับพวก search engine สามารถทําให้รู้ได้ว่าใครพูดอะไร อันไหนคือรูปภาพ อันไหนคือหัวข้อหลักของเว็บไซต์ แล้วนอกจากนี้ยังทําให้หน้าเว็บไซต์ต่าง ๆ มีมาตราฐานที่เหมือนกัน ไม่เหมือนรูปแบบเก่าที่ขึ้นอยุ่กับผู้พัฒนาเว็บไซต์จะสร้างขึ้นHTML 5 : Seminar Course 2011 4
  • 7. ผู ้ ส ร้ า ง ภาษา HTMLหัวข้อ : "ทิม เบอร์เนอร์ส-ลี" พ่อพระแห่งเครือข่าย เวิลด์ ไวด์ เวบที่มา : http://takato.exteen.com/20100820/entry-1ข้อความ : ถ้าหาก นายทิม เบอร์เนอร์ส-ลี ตัดสินใจจดสิทธิบัตรเทคโนโลยีของเขา ไปเมื่อปี 2532 โลกอินเทอร์เน็ตในปัจจุบัน คงจะแตกต่างไปจากที่เราเห็นกันอยู่โดยสิ้นเชิง และคงจะไม่มี "เวิลด์ ไวด์ เวบ" (World Wide Web) ที่ใครๆ ก็ สามารถใช้บริการได้ฟรี นายเบอร์เนอร์ส-ลี ถือได้ว่าเป็นบิดาผู้ให้กําเนิดโลก ?เวิลด์ ไวด์ เวบ? ที่เป็นตัวขับเคลื่อนโลกธุรกิจในทุกวันนี้ ก่อนหน้าที่เขาจะคิดค้นเทคโนโลยีตัวนี้ขึ้นมา โลกนี้ยังไม่มีโปรแกรมท่องอินเทอร์เน็ต หรือเบราเซอร์เลย ไม่มีทั้งภาษา hypertext markup ไม่มีตัวอักษร ?www? ที่อยู่หน้าเวบไซต์ ไม่มียูอาร์แอล และไม่เคยมีการกําหนดพื้นที่แสดงข้อมูล ที่เป็นมาตรฐานเดียวกัน และแม้ว่าอินเทอร์เน็ตจะกลายเป็นเทคโนโลยีแห่งมวลมนุษยชาติไปแล้ว แต่ชื่อของนายเบอร์เนอร์ส-ลี กลับไม่เคยได้รับการกล่าวขานถึง จนกระทั่งเขาได้รับรางวัล ?เดอะ มิลเลนเนียมเทคโนโลยี ไพรซ? (The Millennium Technology Prize) ในช่วงสัปดาห์ที่ผ่านมานี้เอง ์บิดาโลกอินเทอร์เน็ตนายเบอร์เนอร์ส-ลี เป็นผู้คิดค้นโปรโตคอลการสื่อสารหลัก "เอชทีทีพ" (HTTP-hypertext transfer protocol) ตัวแรก ที่ใช้ในการรับส่ง ีหน้าเวบ รวมทั้งภาษา HTML ที่ใช้สร้างโปรโตคอลตัวนี้ขึ้นมาด้วย และก่อนวันคริสต์มาส เมื่อปี 2533 เขาก็สามารถสร้าง "เบราเซอร" ์หรือโปรแกรมท่องอินเทอร์เน็ตตัวแรกได้สําเร็จ พร้อมตั้งชื่อให้อย่างง่ายๆ ว่า "เวิลด์ไวด์เวบ" (WorldWideWeb) และแม้ว่านักคิดค้นจํานวนมาก ที่นําแนวคิดของตนไปจดสิทธิบัตร ล้วนแต่กลายเป็นเศรษฐีกันแล้วถ้วนหน้า ไม่ว่าจะเป็น เจฟฟ์ เบโซส์ (อะเมซอน ดอท คอม),เจอร์รี่ หยาง (ยาฮู), ปิแอร์ โอมิดยาร์ (อีเบย์) หรือมาร์ค แอนดรีเอสเซ่น (เนทสเคป) แต่ด้วยเหตุที่เบอร์เนอร์ส-ลี และโรเบิร์ต ไคลิโอ เพื่อนHTML 5 : Seminar Course 2011 5
  • 8. ร่วมงานชาวเบลเยียมอีกรายหนึ่ง ยืนยันที่จะให้เทคโนโลยีตัวนี้เป็นของฟรี จึงทําให้คอมพิวเตอร์ทุกเครื่องในปัจจุบัน สามารถมองเห็นหน้าเวบเดียวกันได้"ก่อนหน้านี้ มีระบบไฮเปอร์เท็กซ์จํานวนมาก ที่ไม่ได้ปฏิบัติงานร่วมกัน และหากสถานการณ์ยังเป็นเช่นนั้น โลกอินเทอร์เน็ตทุกวันนี้ อาจมี ?เวบ? ที่แตกต่างกันถึง 16 แบบ เราคงมีเวบของเซิร์น, เวบของไมโครซอฟท, เวบดิจิทัล หรือเวบอื่นๆ อีกจํานวนมาก ที่ไม่สามารถ ์ทํางานร่วมกันได้" เขากล่าวหนุนโลกไร้สิทธิบัตรและคงเป็นเพราะด้วยเหตุนี้เอง ที่ทําให้หลายคนคิดว่า ขณะนี้ เป็นเวลาอันสมควรแล้ว ที่เบอร์เนอร์ส-ลี ควรจะกลายเป็นเศรษฐีกับเขาบ้างด้วยรางวัลเทคโนโลยี ที่มีมูลค่ามากที่สุดในโลก "เดอะ มิลเลนเนียม เทคโนโลยี ไพรซ? ของสถาบันเทคโนโลยีฟินแลนด์ ที่มีการจัดตั้งขึ้น ์เป็นครั้งแรกในปีนี้ เกณฑ์การพิจารณาผู้ได้รับรางวัลดังกล่าวก็คือ จะต้องเป็นผู้ที่ประสบความสําเร็จด้านการคิดค้น "นวัตกรรมที่โดดเด่นด้านการยกระดับคุณภาพชีวิตมนุษย์ โดยตั้งอยู่บนพื้นฐานของการเล็งเห็นคุณค่าของมนุษย์ และการกระตุ้นให้เกิดพัฒนาการทางเศรษฐกิจแบบยั่งยืน" ไม่เพียงแต่นายเบอร์เนอร์ส-ลี จะไม่ยอมจดสิทธิบัตรเทคโนโลยีของตนเองเท่านั้น แต่เขายังเป็นผู้หนึ่ง ที่ออกมาต่อต้านนโยบายจดสิทธิบัตรซอฟต์แวร์อย่างเต็มตัว โดยเฉพาะกรณีล่าสุด ที่ยักษ์ใหญ่ไมโครซอฟท์ ประสบความสําเร็จในการจดสิทธิบัตร"การคลิกเมาส์แบบสั้น, ยาว และดับเบิลคลิก" สําหรับสั่งงานแอพพลิเคชั่นคอมพิวเตอร์พกพานั้น ทําให้เขาเริ่มมีความคิดว่า การจดสิทธิบัตรซอฟต์แวร์ในปัจจุบัน กลายเป็นเรื่องเหลวไหลเกินไปแล้ว"ปัญหาในขณะนี้ก็คือ แม้จะมีคนเขียนโปรแกรมบางอย่างขึ้นมา จากความคิดสร้างสรรค์ของเขาเอง แต่กลับมีนักกฎหมายหัวหมอ ออกมาบอกว่า "ที่จริงแล้ว โปรแกรมบรรทัดที่ 35 ถึง 42 น่ะ เป็นของพวกผม แม้ว่าคุณจะเป็นคนเขียนขึ้นมาเองก็เถอะ" " นายเบอร์เนอร์ส-ลีกล่าวหวั่นปิดกั้นจินตนาการมนุษย์"สิ่งเหล่านี้ เป็นอันตรายต่อจิตวิญญาณแห่งการคิดค้น ที่เป็นต้นกําเนิดของซอฟต์แวร์ใหม่ๆ มาจนถึงทุกวันนี้" เขากล่าว "เมื่อคุณเริ่มมีจินตนาการที่จะให้คอมพิวเตอร์ทําอะไรบางอย่าง คุณก็จะเขียนโปรแกรมขึ้นมาสั่งให้มันทํา นี่เป็นจิตวิญญาณที่อยู่เบื้องหลังพัฒนาการที่มหัศจรรย์หลายอย่าง" เขา เชื่อว่า การจดสิทธิบัตรนั้น อาจก่อให้เกิดอันตรายต่อความคิดสร้างสรรค์ของมนุษย์อย่างมาก ไม่ว่าจะเป็นการค้นคว้าวิจัย การแสวงหาไอเดียใหม่ๆ หรือแม้แต่ธุรกิจใหม่ๆ ที่ถือกําเนิดจากความคิดสร้างสรรค์อันไร้ขีดจํากัด"การจดสิทธิบัตรซอฟต์แวร์ ต้องมีกฎเกณฑ์ที่เข้มงวดอย่างมาก หรือควรจะยกเลิกไปเลย" เขากล่าว "ความคิดที่ว่า การจดสิทธิบัตรเป็นเรื่องธรรมดามากๆ เหมือนอย่างที่เกิดขึ้นในสหรัฐนั้น เป็นความคิดที่บ่อนทําลายอุตสาหกรรมอย่างยิ่ง" เขายังเผยว่า ในทวีปยุโรปนั้นการจดสิทธิบัตรซอฟต์แวร์ ได้เป็นประเด็นถกเถียงกันมากว่า 1 ปีแล้ว โดยบริษัทยักษ์ใหญ่ที่ออกมาสนับสนุนแนวคิดดังกล่าว ก็เริ่มที่จะมองเห็นผลกระทบในทางลบ จากการถือครองลิขสิทธิ์ซอฟต์แวร์กันแล้วยันจุดยืนไม่เปลี่ยนแปลงและคงไม่น่ามีความเห็นใด ที่จะอธิบายตัวตนของนายเบอร์เนอร์ส-ลี ได้ชัดเจนกว่าคําพูดของนายเจมส์ ฟอลโลว์ส นักข่าวประจํานิตยสารแอตแลนติก มันธ์ลี่ ที่กล่าวว่า นายเบอร์เนอร์ส-ลี เป็นตัวอย่างของ "ผู้ที่เห็นแก่ประโยชน์ส่วนรวม มากกว่าประโยชน์ส่วนตัว"แม้ว่าเงินรางวัลในครั้งนี้ จะมีมูลค่าสูงถึง 1.2 ล้านดอลลาร์ ตามเจตนารมณ์ของรัฐบาลฟินแลนด์ ที่ต้องการให้เป็นรางวัลอันทรงเกียรติเทียบเท่ากับรางวัลโนเบิล ไพรซ์ ของเพื่อนบ้านชาวสวีเดน ที่สูงถึง 1.3 ล้านดอลลาร์ (10 ล้านโครน) แต่นายเบอร์เนอร์ส-ลี ก็ยืนยันว่าเงินมูลค่ามหาศาลดังกล่าว คงจะไม่ทําให้อะไรเปลี่ยนแปลงไป เวิร์ลด์ไวด์เว็บ15 ปี http://www.15 ปีเปลี่ยนแปลงโลกHTML 5 : Seminar Course 2011 6
  • 9. เมื่อวันที่ 5 สิงหาคมที่ผ่านมา เป็นวันครบรอบ 15 ปีของการถือกําเนิด "เวิร์ลด์ไวด์เว็บ" ครับ! น่าแปลกที่วันที่ว่านี้ผ่านไปโดยไม่มีอะไรผิดปกติไปจากวันธรรมดาๆวันหนึ่งในการใช้ชีวิตประจําวันของคนเรา จนดูเหมือนมันไม่มีความหมายมากมายอะไรนักสําหรับเราทั้งๆ ที่ 15 ปีที่ผ่านมา เวิร์ลด์ไวด์เว็บ คือเทคโนโลยีที่เปลี่ยนแปลงโลกไปจากเดิมจนแทบจะเรียกได้ว่าพลิกหน้ามือเป็นหลังมือ มันเป็นเทคโนโลยีที่เปลี่ยนตัวเองจากอะไรก็ตามที่ไม่มีชีวิต ไม่มีเลือดเนื้อ ให้เป็นวัฒนธรรมที่ทรงอิทธิพลอย่างยิ่งยวดต่อโลกและต่อคนบนโลกในนี้ในเวลานี้แล้วก็น่าขันที่ คนเราก็ยังเรียกมันผิดๆ อยู่ทั่วโลกว่า อินเตอร์เน็ต ทั้งๆ ที่อินเตอร์เน็ตก็คืออินเตอร์เน็ต และเวิร์ลด์ไวด์เว็บ นั้น แม้จะเป็นเพียงส่วนหนึ่งของอินเตอร์เน็ตแต่กลับได้รับความนิยมมากกว่า และมีพลานุภาพในการเปลี่ยนแปลงชีวิตประจําวันของเรามากกว่ามากมายนักทุกวันนี้เราสามารถดูภาพที่ถ่าย ณ อีกซีกโลกหนึ่งได้ภายในเวลาเพียงไม่กี่นาที การแลกเปลี่ยนความคิด ความรู้สึก ระหว่างคนที่อยู่ในกรุงเทพฯกับนครซิดนีย์เกิดขึ้นได้ในเวลาจริง เหมือนกับการนั่งคุยกันอยู่ตรงหน้าผ่านทาง อินสแตนท์ แมสเซนเจอร์ เราสามารถจองตั๋วเครื่องบินได้ขณะนั่งอยู่ที่บ้าน ที่ทํางาน โดยไม่จําเป็นต้องหงุดหงิดเปลืองเวลากับการเข้าคิวยาวอีกต่อไปเมื่อสัก 15 ปีก่อนหน้านี้ จะมีใครในเมืองไทยคิดฝันไหมว่าจะได้อ่านข่าวในหนังสือพิมพ์ที่วางจําหน่ายในวอชิงตัน ดี.ซี. หรือ นิวยอร์ก ได้ก่อนหน้าคนอเมริกันที่ตื่นสายอีกหลายคนเพราะเวิร์ลด์ ไวด์ เว็บ ไม่เคยมีใครคาดฝันเช่นกันว่า ถึงวันนี้หนังสือพิมพ์จะเปลี่ยนแปลงไปเป็นไม่ได้พิมพ์เผยแพร่บนกระดาษวางขายกันตามแผงอีกต่อไป แต่มีให้อ่านกันเฉพาะในเว็บไซต์บนเวิร์ลด์ ไวด์ เว็บ เท่านั้นเกมออนไลน์ กลายเป็นอุตสาหกรรมมูลค่าแสนล้านต่อปี กูเกิ้ลกลายเป็นบริษัทมูลค่านับแสนล้านอยู่ในขณะนี้ ดนตรีดิจิตอลกําลังส่งอิทธิพลอย่างมหาศาลจนอาจทําให้วงการดนตรีทั้งโลกเปลี่ยนแปลง อุตสาหกรรมภาพยนตร์กําลังดิ้นรนอย่างหนักเพื่อดูว่าทําอย่างไรจึงสามารถหลอมรวมเป็นหนึ่งเดียวกับเว็บได้ เพราะเห็นได้ชัดว่าไม่อาจแยกกันอยู่เหมือนอย่างก่อนหน้านี้ได้อีกแล้ว...สิ่งเหล่านี้คงไม่เกิดขึ้นอย่างรวดเร็วในช่วง 15 ปีที่ผ่านมาหากไม่มี เวิร์ลด์ ไวด์ เว็บและแน่นอน เวิร์ลด์ ไวด์ เว็บ จะเป็นอยู่ทุกวันนี้ไม่ได้ หากไม่มีอินเตอร์เน็ตเกิดขึ้นก่อนหน้ามัน และไม่มีนักวิชาการด้านคอมพิวเตอร์ที่แสนดีอย่าง ทิม เบอร์เนอร์ส-ลีอินเตอร์เน็ต เกิดขึ้นก่อนในแวดวงกองทัพอเมริกัน และถูกนํามาใช้กันอยู่แพร่หลายในหมู่นักวิชาการเพียงส่วนหนึ่งที่ล่วงรู้ถึงขีดความสามารถของมัน แต่อินเตอร์เน็ตอาจถูกจํากัดอยู่แค่ในวงแคบๆ เช่นนั้น ถ้าหาก ทิม เบอร์เนอร์ส-ลี ไม่คิดที่จะสร้างซอฟต์แวร์ตัวหนึ่งขึ้นมาอินเตอร์เน็ตก่อนหน้าการเกิดของเวิร์ลด์ไวด์ ว็บนั้น เป็นเพียงการเชื่อมโยงระหว่างเครื่องคอมพิวเตอร์จํานวนหนึ่งเข้าด้วยกัน เพื่อผลประโยชน์ในการแลกเปลี่ยนไฟล์ข้อมูลระหว่างกัน สําหรับเพื่อการหารือ ถกเถียงหรือแสดงความคิดเห็นในแวดวงจํากัดระหว่างกันเท่านั้นเอง การเชื่อมโยงดังกล่าวจะเกิดขึ้นได้ ผู้ที่เชื่อมต่อเข้าไปจะต้องรู้หมายเลขประจําเครื่องของอีกฝ่ายหนึ่งอย่างชัดเจน และต้องรู้ชื่อไฟล์ที่ชัดเจนในการเข้าไปดูข้อมูลนั้นๆวันที่ 5 สิงหาคม 1991 เมื่อ 15 ปีก่อน ทิม เบอร์เนอร์ส-ลี เขียนโปรแกรมขึ้นมาตัวหนึ่ง ให้ทําหน้าที่เชื่อมโยง และ "บราวซ์" เครือข่ายอินเตอร์เน็ตนั้นได้ เป้าหมายของซอฟต์แวร์ของเขาก็คือ ให้เราสามารถเชื่อมโยงกับข้อมูลข่าวสารทุกชิ้นได้ในทุกที่ทุกเวลา และต้องขอบคุณความกรุณาของนักวิชาการชาวอังกฤษผู้นี้ที่ปล่อยให้ข้อมูลของซอฟต์แวร์ทั้งหมดของตนเองเปิดกว้าง ให้ทุกคนสามารถลอกเอาไปใช้ในการคิดค้นพัฒนาต่อได้ ไม่เช่นนั้นก็คงไม่เกิดการพัฒนาอย่างรวดเร็วเช่นทุกวันนี้และยุคแห่งเวิร์ลด์ไวด์เว็บ หรือที่เราเจนตาด้วยตัวอักษรย่อ http://www.ก็คงไม่เกิดขึ้นพอล คุนซ์ นักวิทยาศาสตร์คอมพิวเตอร์จากมหาวิทยาลัยสแตนฟอร์ด สหรัฐอเมริกา ได้แรงบันดาลใจจากการพบปะกับ ทิม เบอร์เนอร์ส-ลี พัฒนาเว็บเซิร์ฟเวอร์ตัวแรกขึ้นมาในสหรัฐอเมริกา เมื่อนําเว็บเซิร์ฟเวอร์ของคุนซ์ มาประกอบเข้ากับซอฟต์แวร์ของ เบอร์เนอร์ส-ลี โลกHTML 5 : Seminar Course 2011 7
  • 10. นี้ก็ได้เว็บไซต์แรกขึ้นมาไม่นานก็เกิด "โมเสค" เว็บบราวเซอร์ตัวแรก ตามมาด้วย "เนตสเคป" จากนั้นก็ถึงยุคบูมสุดขีดของโลก ดอตคอม ระหว่างตอนกลางและตอนปลายทศวรรษ 1990 เราได้เห็นการก่อเกิดของเว็บไซต์อย่าง อเมซอน และ กูเกิ้ล เริ่มออกเดินเตาะแตะ"อินเตอร์เน็ต เอ็กซพลอเรอร์ (ไออี)" และ "ฮอตเมล" ถือกําเนิดขึ้นระหว่างปี 1995-1996 ยาฮู เกิดมาในเวลาไล่เลี่ยกัน ต่อด้วยกระทาชาย ์นายหนึ่งเกิดปิ๊งไอเดียการแลกเปลี่ยนไฟล์เพลงของตนเองผ่านเว็บ และก่อตั้ง แนปสเตอร์ ขึ้นมาในปี 1999ถึงปี 2000 ฟองสบู่ด็อตคอมแตกดังโพละ หลายเว็บหายหน้าหายตาไป แต่อีกหลายเว็บรวมทั้งกูเกิ้ลพัฒนาขึ้นมาจนกลายเป็นเสมือนกระดูกสันหลังแห่งข้อมูลข่าวสารทุกประการบนเว็บ เวิร์ลด์ไวด์เว็บขยายตัวจนกลายเป็นทุกสิ่งทุกอย่างสําหรับเรา ซื้อ ขาย แชต ไฟล์เสียง และไฟล์ภาพ ดนตรี วิดีโอ ฯลฯ ทั้งที่ดี และเลวร้าย มีให้เลือกสรร15 ปีที่ผ่านมา เวิร์ลด์ไวด์เว็บ เปลี่ยนแปลงชีวิตเราจนเป็นอย่างที่เห็นอยู่ อีก 15 ปีข้างหน้า วิถีของมนุษย์และเวิร์ลด์ไวด์เว็บ จะเป็นฉันใด?แต่ไม่ว่าจะเป็นไปอย่างไร คงต้องขอบคุณเซอร์ ทิม เบอร์เนอร์ส-ลี!!จุดเด่นของ HTML5ความสามารถทั้งหมดของ HTML5 สามารถอ่านได้จาก เอกสารอย่างเป็นทางการของ HTML5 (ภาษาอังกฤษ) ครับ หรือถ้าชอบอะไรง่ายๆ สามารถอ่านได้จาก W3CSchool (ภาษาอังกฤษเช่นกัน แต่เข้าใจง่ายกว่ามาก)ความสามารถเด่น ๆ ของมันก็คือ:Semantic Markup: โค้ดเป็นระเบียบทําให้ Search Engine เก็บข้อมูลได้ง่ายForm Enhancement: เพิ่มประสิทธิภาพของฟอร์มเสียง / วีดิโอ: หลายคนอาจเคยได้ยินเรื่องที่ว่า HTML5 Video จะมาแทน Flash Video (.flv)Canvas: เอาไว้วาดรูป ตกแต่งรูป ซึ่งว่ากันว่าอาจมาแทนการวาดรูปใน แฟลช (Adobe Flash)ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลยDrag and Drop: ลากของมาวางPersistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูล เลยทีเดียวบราวเซอร์ในรองรับ HTML5 บ้าง?เว็บบราวเซอร์ (เช่น Internet Explorer, Firefox, Chrome etc.) เวอร์ชั่นใหม่ ๆ ได้เริ่มรองรับ HTML5 แล้ว แต่ก็ไม่ได้รองรับความสามารถทั้งหมด ดังนั้นก่อนใช้ความสามารถไหนของ HTML5 แนะนําให้ตรวจสอบจาก ตารางเปรียบเทียบการรองรับ HTML5 และCSS3 จากบราวเซอร์ต่าง ๆHTML 5 : Seminar Course 2011 8
  • 11. สําหรับท่านที่มีความรู้ด้าน Javascript อยู่แล้ว สามารถใช้ไลบรารี่ Modernizr ในการตรวจสอบว่าบราวเซอร์ซัพพอร์ท HTML5 และCSS3 หรือไม่และหากคุณต้องการทราบว่าคุณควรจะทําเว็บไซต์รองรับบราวเซอร์ไหนดี แนะนําให้ลองไปดูที่ Browser Market Share ซึ่งมีข้อมูลเกี่ยวกับว่าในขณะนี้บราวเซอร์ตัวไหนกําลังเป็นที่นิยมมากที่สุดHTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไรแน่นอนว่านอกจากจะมีอะไรใหม่ ๆ ใน HTML5 แล้ว ก็มีสิ่งที่เปลี่ยนการเขียนแบบเดิม ๆ ในเวอร์ชั่นเก่าด้วย ซึ่งสิ่งหลัก ๆ ที่เปลี่ยนก็คือ: 1 Doctype เขียนง่ายขึ้น ปกติตอนเขียน HTML เวอร์ชั่นเก่าต้องขึ้น <!DOCTYPE แล้วก็ตามด้วยรายละเอียดยาว ๆ แต่พอเป็น HTML5 แล้ว จะเขียน แบบไม่มีกําหนดเวอร์ชั่น เพื่อให้นําไปใช้ได้กับเวอร์ชั่นอื่น ๆ ในอนาคต โดยเขียนแค่สั้น ๆ แบบนี้: <!DOCTYPE html> 2 การกําหนดภาษาทําได้ง่ายขึ้น เมื่อก่อนจะต้องเขียน xmln หรือ xml:lang ในแท็ก <html> เพื่อกําหนดภาษาของหน้า แต่สําหรับ HTML5 จะเหลือแค่นี: ้ <html lang=”en”> 3 การกําหนดชุดตัวอักษรทําได้ง่ายขึ้น เมื่อก่อนจะต้องเขียนแท็ก meta ยาว ๆ เพื่อกําหนด Character Set เป็น UTF-8 แต่ตอนนี้เราสามารถกําหนดโดยเขียนแค่นี้: <meta charset=”utf-8″ /> 4 ไม่ต้องมี “/” สําหรับแท็กเดี่ยวแล้ว แท็กเดี่ยว หมายถึงแท็กที่ไม่มีแท็กปิด เช่น <img> <input> <br> ซึ่งจะต่างกับแท็กที่เป็นแท็กเปิดปิดอย่าง <div></div> <strong></strong> โดยถ้าเป็นเมื่อก่อน แท็กเดี่ยวจะบังคับให้มี “/” ปิดท้าย เช่น <img /> หรือ <br /> แต่ใน HTML5 นี้แท็กเดี่ยวไม่จําเป็นต้องมี “/” ปิดท้ายแล้ว 5 แท็กบางส่วนจะไม่รองรับใน HTML5 แล้ว แท็กเก่า ๆ บางส่วนจะถูกตัดทิ้งไป โดยมีดังนี้ (บางแท็กเรายังไม่เคยใช้กันเลยครับ และบางแท็กสามารถใช้ CSS แทนได้): <acronym> <applet> <basefont> <big> <center> <dir> <frame> <frameset> <noframes> <s> <strike> <tt> <u> และ <xmp>ตัวอย่างโค้ด HTML5 1<!doctype  html> 2<html  lang="en"> 3<head> 4        <meta  charset="utf-­‐8"  /> 5        <title>HTML5  Document</title> 6</head> 7<body> 8   9</body> 10</html>HTML 5 : Seminar Course 2011 9
  • 12. การเขียนแบบ Semantic Markup ของ HTML5อย่างที่บอกไปว่า Semantic Markup เป็นการเขียนให้ Search Engine เข้ามาเก็บข้อมูลได้ง่ายครับ ซึ่งจะทําให้เก็บข้อมูลได้เร็วขึ้น และติดอันดับง่ายขึ้นด้วยครับซึ่งถ้าเป็นเมื่อก่อน เวลาเราจะสร้างกล่องอะไรขึ้นมาสักอัน เราจะใช้แท็ก <div> ใช่มั้ยครับ แต่ตอนนี้พอเป็น HTML5 แล้ว เค้าก็เพิ่มแท็กที่เหมือนกับ <div> ขึ้นมา โดยมีคุณสมบัติเหมือนกัน (ใช้แท็กพวกนี้ ก็เหมือนใช้ <div>) ต่างกันที่แท็กใหม่แต่ละตัวจะบอกความหมายให้Search Engine รู้ไม่เหมือนกัน เช่น แท็ก <footer></footer> ก็จะบอกว่าอะไรที่ครอบอยู่ในนี้เป็น Footer เว็บไซต์ทั้งหมดแท็กใหม่ที่เพิ่มเข้ามามีดังนี้: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <fig-ure>, and <figcaption> (สามารถคลิกเพื่อเข้าไปอ่านว่าแท็กอันนั้นมีหน้าที่อะไร)ซึ่งเว็บบราวเซอร์ใหม่ ๆ ก็จะรองรับแท็กพวกนี้อยู่แล้ว (Firefox 3+, Safari 3.1+, Chrome 2+, Opera 9.6+) ยกเว้น Internet Explorerซึ่งวิธีที่จะประกาศแท็กพวกนี้ใน IE แบบง่าย ๆ ก็คือใช้ Javascript อันนี้: document.createElement(tagName)โดยวิธีใช้คําสั่งด้านบน ก็แทน tagName ด้วยชื่อแท็กที่จะประกาศ เช่น: document.createElement(“footer”); โดยถ้าจะประกาศหลายแท็กก็ต้องใช้คําสั่งนี้หลายรอบถ้าขี้เกียจมานั่งประกาศแท็กทั้งหมด ก็มี สคริปต์ HTML5 Enabling Script กับ IE Print Protector ซึ่งเอาไว้ประกาศ HTML5 แบบรวดเดียวเสร็จใน Internet Explorerและสําหรับคนที่ใช้ CSS Reset (เป็นไฟล์ CSS เอาไว้รีเซ็ตให้มาตรฐานของแท็กต่าง ๆ ในแต่ละบราวเซอร์ให้เหมือนกัน) ในงานบ่อย ๆพอมาใช้ HTML5 ก็มี CSS Reset สําหรับ HTML5 ออกมาให้ใช้เหมือนกันครับ โดยมีอีกตัวชื่อ Reset5ตัวอย่างหน้า HTML5 ที่รองรับ IE 1<pre><!doctype  html> 2<html  lang="en"> 3<head> 4        <meta  charset="utf-­‐8"  /> 5        <title>HTML5  Semantic  Markup  Demo:  Cross  Browser</ 6title> 7        <link  rel="stylesheet"  href="html5reset.css"   8type="text/css"  /> 9        <link  rel="stylesheet"  href="html5semanticmarkup.css"   10type="text/css"  /> 11        <!-­‐-­‐[if  lt  IE  9]> 12                <script  src="html5.js"></script> 13        <![endif]-­‐-­‐> 14</head> 15<body> 16        <header> 17                <hgroup> 18                        <h1>Page  Header</h1> 19                        <h2>Page  Sub  Heading</h2> 20                </hgroup> 21        </header> 22   23        <nav> 24                <ul> 25                        <li><a  href="#">Home</a></li> 26                        <li><a  href="#">Projects</a></li> 27                        <li><a  href="#">Portfolio</a></li> 28                        <li><a  href="#">Profile</a></li> 29                        <li><a  href="#">Contact</a></li>HTML 5 : Seminar Course 2011 10 30                </ul> 31        </nav> 32  
  • 13. 29     <li><a  href="#">Contact</a></li> 30                </ul> 31        </nav> 32   33        <article> 34                <header> 35                        <h1>Article  Heading</h1> 36                        <time  datetime="2010-­‐05-­‐05"  pubdate>May  5th,   372010</time> 38                </header> 39                <p>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisc-­‐ 40ing  elit.</p> 41                <section> 42                        <header> 43                                <h1>Section  Heading</h1> 44                        </header> 45                        <p>Ut  sapien  enim,  porttitor  id  feugiat  non,   46ultrices  non  odio.</p> 47                        <footer> 48                                <p>Section  Footer:  Pellentesque  volutpat,   49leo  nec  auctor  euismod</p> 50                        </footer> 51                </section> 52                <section> 53                        <header> 54                                <h1>Section  Heading</h1> 55                        </header> 56                        <p>Lorem  ipsum  dolor  sit  amet,  consectetur   57adipiscing  elit.</p> 58                        <figure> 59                                <img  src="item-­‐1.png"  alt="Club"> 60                                <img  src="item-­‐2.png"  alt="Heart"> 61                                <img  src="item-­‐3.png"  alt="Spade"> 62                                <img  src="item-­‐4.png"  alt="Diamond"> 63                                <figcaption>FigCaption:  Club,  Heart,  Spade   64and  Diamond</figcaption> 65                        </figure> 66                        <p>Ut  sapien  enim,  porttitor  id  feugiat  non,   67ultrices  non  odio</p> 68                        <footer> 69                                <p>Section  Footer:  Pellentesque  volutpat,   70leo  nec  auctor  euismod  est.</p> 71                        </footer> 72                </section> 73                <footer> 74                        Article  Footer 75                </footer> 76        </article> 77   78        <aside> 79                <header> 80                        <h1>Siderbar  Heading</h1>                </header>HTML 5 : Seminar Course 2011 11                <p>Ut  sapien  enim,  porttitor  id  feugiat  non,  ultri-­‐ ces  non  odio.</p>  
  • 14. 78                        <h1>Siderbar  Heading</h1> 79                </header> 80                <p>Ut  sapien  enim,  porttitor  id  feugiat  non,  ultri-­‐ ces  non  odio.</p>          </aside>          <footer>                Page  Footer        </footer>   </body> </html>HTML 5 : Seminar Course 2011 12

×