Html5report

Silpakorn University 2011

HTML 5

Dittapong Muensa 13510158 Information Technology For Design (Web and Interactive), Silpakorn University Acodomic Year 2011

Company

Table of Contents

HTML 5 คืออะไร
1

HTML 5 หมายถึง
1

จาก html 4
1

นํามาประยุกต์เป็น html 5 กลายเป็น
2

ตัวอย่างแบบที่ใช้ div
2

ตัวอย่าง HTML5
3

ผู้สร้าง ภาษา HTML
5

จุดเด่นของ HTML5
8

บราวเซอร์ในรองรับ HTML5 บ้าง?
8

HTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไร
9

Name of report
i

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

นํามาประยุกต์เป็น 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">

2

! ! <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 5

3

<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 สามารถ
ทําให้รู้ได้ว่าใครพูดอะไร อันไหนคือรูปภาพ อันไหนคือหัวข้อหลักของเว็บไซต์ แล้วนอกจากนี้ยังทําให้หน้าเว็บไซต์ต่าง ๆ มีมาตราฐานที่
เหมือนกัน ไม่เหมือนรูปแบบเก่าที่ขึ้นอยุ่กับผู้พัฒนาเว็บไซต์จะสร้างขึ้น

4

ผู ้ ส ร้ า ง ภาษา 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) และแม้ว่านักคิดค้น
จํานวนมาก ที่นําแนวคิดของตนไปจดสิทธิบัตร ล้วนแต่กลายเป็นเศรษฐีกันแล้วถ้วนหน้า ไม่ว่าจะเป็น เจฟฟ์ เบโซส์ (อะเมซอน ดอท คอม),
เจอร์รี่ หยาง (ยาฮู), ปิแอร์ โอมิดยาร์ (อีเบย์) หรือมาร์ค แอนดรีเอสเซ่น (เนทสเคป) แต่ด้วยเหตุที่เบอร์เนอร์ส-ลี และโรเบิร์ต ไคลิโอ เพื่อน

5

ร่วมงานชาวเบลเยียมอีกรายหนึ่ง ยืนยันที่จะให้เทคโนโลยีตัวนี้เป็นของฟรี จึงทําให้คอมพิวเตอร์ทุกเครื่องในปัจจุบัน สามารถมองเห็น
หน้าเวบเดียวกันได้

"ก่อนหน้านี้ มีระบบไฮเปอร์เท็กซ์จํานวนมาก ที่ไม่ได้ปฏิบัติงานร่วมกัน และหากสถานการณ์ยังเป็นเช่นนั้น โลกอินเทอร์เน็ตทุกวันนี้ อาจ
มี ?เวบ? ที่แตกต่างกันถึง 16 แบบ เราคงมีเวบของเซิร์น, เวบของไมโครซอฟท, เวบดิจิทัล หรือเวบอื่นๆ อีกจํานวนมาก ที่ไม่สามารถ
์
ทํางานร่วมกันได้" เขากล่าว

หนุนโลกไร้สิทธิบัตร
และคงเป็นเพราะด้วยเหตุนี้เอง ที่ทําให้หลายคนคิดว่า ขณะนี้ เป็นเวลาอันสมควรแล้ว ที่เบอร์เนอร์ส-ลี ควรจะกลายเป็นเศรษฐีกับเขาบ้าง
ด้วยรางวัลเทคโนโลยี ที่มีมูลค่ามากที่สุดในโลก "เดอะ มิลเลนเนียม เทคโนโลยี ไพรซ? ของสถาบันเทคโนโลยีฟินแลนด์ ที่มีการจัดตั้งขึ้น
์
เป็นครั้งแรกในปีนี้ เกณฑ์การพิจารณาผู้ได้รับรางวัลดังกล่าวก็คือ จะต้องเป็นผู้ที่ประสบความสําเร็จด้านการคิดค้น "นวัตกรรมที่โดดเด่น
ด้านการยกระดับคุณภาพชีวิตมนุษย์ โดยตั้งอยู่บนพื้นฐานของการเล็งเห็นคุณค่าของมนุษย์ และการกระตุ้นให้เกิดพัฒนาการทาง
เศรษฐกิจแบบยั่งยืน" ไม่เพียงแต่นายเบอร์เนอร์ส-ลี จะไม่ยอมจดสิทธิบัตรเทคโนโลยีของตนเองเท่านั้น แต่เขายังเป็นผู้หนึ่ง ที่ออกมาต่อ
ต้านนโยบายจดสิทธิบัตรซอฟต์แวร์อย่างเต็มตัว โดยเฉพาะกรณีล่าสุด ที่ยักษ์ใหญ่ไมโครซอฟท์ ประสบความสําเร็จในการจดสิทธิบัตร
"การคลิกเมาส์แบบสั้น, ยาว และดับเบิลคลิก" สําหรับสั่งงานแอพพลิเคชั่นคอมพิวเตอร์พกพานั้น ทําให้เขาเริ่มมีความคิดว่า การจดสิทธิ
บัตรซอฟต์แวร์ในปัจจุบัน กลายเป็นเรื่องเหลวไหลเกินไปแล้ว

"ปัญหาในขณะนี้ก็คือ แม้จะมีคนเขียนโปรแกรมบางอย่างขึ้นมา จากความคิดสร้างสรรค์ของเขาเอง แต่กลับมีนักกฎหมายหัวหมอ ออก
มาบอกว่า "ที่จริงแล้ว โปรแกรมบรรทัดที่ 35 ถึง 42 น่ะ เป็นของพวกผม แม้ว่าคุณจะเป็นคนเขียนขึ้นมาเองก็เถอะ" " นายเบอร์เนอร์ส-ลี
กล่าว

หวั่นปิดกั้นจินตนาการมนุษย์
"สิ่งเหล่านี้ เป็นอันตรายต่อจิตวิญญาณแห่งการคิดค้น ที่เป็นต้นกําเนิดของซอฟต์แวร์ใหม่ๆ มาจนถึงทุกวันนี้" เขากล่าว "เมื่อคุณเริ่มมี
จินตนาการที่จะให้คอมพิวเตอร์ทําอะไรบางอย่าง คุณก็จะเขียนโปรแกรมขึ้นมาสั่งให้มันทํา นี่เป็นจิตวิญญาณที่อยู่เบื้องหลังพัฒนาการที่
มหัศจรรย์หลายอย่าง" เขา เชื่อว่า การจดสิทธิบัตรนั้น อาจก่อให้เกิดอันตรายต่อความคิดสร้างสรรค์ของมนุษย์อย่างมาก ไม่ว่าจะ
เป็นการค้นคว้าวิจัย การแสวงหาไอเดียใหม่ๆ หรือแม้แต่ธุรกิจใหม่ๆ ที่ถือกําเนิดจากความคิดสร้างสรรค์อันไร้ขีดจํากัด

"การจดสิทธิบัตรซอฟต์แวร์ ต้องมีกฎเกณฑ์ที่เข้มงวดอย่างมาก หรือควรจะยกเลิกไปเลย" เขากล่าว "ความคิดที่ว่า การจดสิทธิบัตรเป็น
เรื่องธรรมดามากๆ เหมือนอย่างที่เกิดขึ้นในสหรัฐนั้น เป็นความคิดที่บ่อนทําลายอุตสาหกรรมอย่างยิ่ง" เขายังเผยว่า ในทวีปยุโรปนั้น
การจดสิทธิบัตรซอฟต์แวร์ ได้เป็นประเด็นถกเถียงกันมากว่า 1 ปีแล้ว โดยบริษัทยักษ์ใหญ่ที่ออกมาสนับสนุนแนวคิดดังกล่าว ก็เริ่มที่จะ
มองเห็นผลกระทบในทางลบ จากการถือครองลิขสิทธิ์ซอฟต์แวร์กันแล้ว

ยันจุดยืนไม่เปลี่ยนแปลง
และคงไม่น่ามีความเห็นใด ที่จะอธิบายตัวตนของนายเบอร์เนอร์ส-ลี ได้ชัดเจนกว่าคําพูดของนายเจมส์ ฟอลโลว์ส นักข่าวประจํานิตยสาร
แอตแลนติก มันธ์ลี่ ที่กล่าวว่า นายเบอร์เนอร์ส-ลี เป็นตัวอย่างของ "ผู้ที่เห็นแก่ประโยชน์ส่วนรวม มากกว่าประโยชน์ส่วนตัว"

แม้ว่าเงินรางวัลในครั้งนี้ จะมีมูลค่าสูงถึง 1.2 ล้านดอลลาร์ ตามเจตนารมณ์ของรัฐบาลฟินแลนด์ ที่ต้องการให้เป็นรางวัลอันทรงเกียรติ
เทียบเท่ากับรางวัลโนเบิล ไพรซ์ ของเพื่อนบ้านชาวสวีเดน ที่สูงถึง 1.3 ล้านดอลลาร์ (10 ล้านโครน) แต่นายเบอร์เนอร์ส-ลี ก็ยืนยันว่า
เงินมูลค่ามหาศาลดังกล่าว คงจะไม่ทําให้อะไรเปลี่ยนแปลงไป

เวิร์ลด์ไวด์เว็บ

15 ปี http://www.15 ปีเปลี่ยนแปลงโลก

6

เมื่อวันที่ 5 สิงหาคมที่ผ่านมา เป็นวันครบรอบ 15 ปีของการถือกําเนิด "เวิร์ลด์ไวด์เว็บ" ครับ! น่าแปลกที่วันที่ว่านี้ผ่านไปโดยไม่มีอะไรผิด
ปกติไปจากวันธรรมดาๆวันหนึ่งในการใช้ชีวิตประจําวันของคนเรา จนดูเหมือนมันไม่มีความหมายมากมายอะไรนักสําหรับเรา

ทั้งๆ ที่ 15 ปีที่ผ่านมา เวิร์ลด์ไวด์เว็บ คือเทคโนโลยีที่เปลี่ยนแปลงโลกไปจากเดิมจนแทบจะเรียกได้ว่าพลิกหน้ามือเป็นหลังมือ มันเป็น
เทคโนโลยีที่เปลี่ยนตัวเองจากอะไรก็ตามที่ไม่มีชีวิต ไม่มีเลือดเนื้อ ให้เป็นวัฒนธรรมที่ทรงอิทธิพลอย่างยิ่งยวดต่อโลกและต่อคนบนโลก
ในนี้ในเวลานี้

แล้วก็น่าขันที่ คนเราก็ยังเรียกมันผิดๆ อยู่ทั่วโลกว่า อินเตอร์เน็ต ทั้งๆ ที่อินเตอร์เน็ตก็คืออินเตอร์เน็ต และเวิร์ลด์ไวด์เว็บ นั้น แม้จะเป็น
เพียงส่วนหนึ่งของอินเตอร์เน็ตแต่กลับได้รับความนิยมมากกว่า และมีพลานุภาพในการเปลี่ยนแปลงชีวิตประจําวันของเรามากกว่า
มากมายนัก

ทุกวันนี้เราสามารถดูภาพที่ถ่าย ณ อีกซีกโลกหนึ่งได้ภายในเวลาเพียงไม่กี่นาที การแลกเปลี่ยนความคิด ความรู้สึก ระหว่างคนที่อยู่ใน
กรุงเทพฯกับนครซิดนีย์เกิดขึ้นได้ในเวลาจริง เหมือนกับการนั่งคุยกันอยู่ตรงหน้าผ่านทาง อินสแตนท์ แมสเซนเจอร์ เราสามารถจองตั๋ว
เครื่องบินได้ขณะนั่งอยู่ที่บ้าน ที่ทํางาน โดยไม่จําเป็นต้องหงุดหงิดเปลืองเวลากับการเข้าคิวยาวอีกต่อไป

เมื่อสัก 15 ปีก่อนหน้านี้ จะมีใครในเมืองไทยคิดฝันไหมว่าจะได้อ่านข่าวในหนังสือพิมพ์ที่วางจําหน่ายในวอชิงตัน ดี.ซี. หรือ นิวยอร์ก ได้
ก่อนหน้าคนอเมริกันที่ตื่นสายอีกหลายคนเพราะเวิร์ลด์ ไวด์ เว็บ ไม่เคยมีใครคาดฝันเช่นกันว่า ถึงวันนี้หนังสือพิมพ์จะเปลี่ยนแปลงไปเป็น
ไม่ได้พิมพ์เผยแพร่บนกระดาษวางขายกันตามแผงอีกต่อไป แต่มีให้อ่านกันเฉพาะในเว็บไซต์บนเวิร์ลด์ ไวด์ เว็บ เท่านั้น

เกมออนไลน์ กลายเป็นอุตสาหกรรมมูลค่าแสนล้านต่อปี กูเกิ้ลกลายเป็นบริษัทมูลค่านับแสนล้านอยู่ในขณะนี้ ดนตรีดิจิตอลกําลังส่ง
อิทธิพลอย่างมหาศาลจนอาจทําให้วงการดนตรีทั้งโลกเปลี่ยนแปลง อุตสาหกรรมภาพยนตร์กําลังดิ้นรนอย่างหนักเพื่อดูว่าทําอย่างไรจึง
สามารถหลอมรวมเป็นหนึ่งเดียวกับเว็บได้ เพราะเห็นได้ชัดว่าไม่อาจแยกกันอยู่เหมือนอย่างก่อนหน้านี้ได้อีกแล้ว...สิ่งเหล่านี้คงไม่เกิดขึ้น
อย่างรวดเร็วในช่วง 15 ปีที่ผ่านมาหากไม่มี เวิร์ลด์ ไวด์ เว็บ

และแน่นอน เวิร์ลด์ ไวด์ เว็บ จะเป็นอยู่ทุกวันนี้ไม่ได้ หากไม่มีอินเตอร์เน็ตเกิดขึ้นก่อนหน้ามัน และไม่มีนักวิชาการด้านคอมพิวเตอร์ที่แสน
ดีอย่าง ทิม เบอร์เนอร์ส-ลี

อินเตอร์เน็ต เกิดขึ้นก่อนในแวดวงกองทัพอเมริกัน และถูกนํามาใช้กันอยู่แพร่หลายในหมู่นักวิชาการเพียงส่วนหนึ่งที่ล่วงรู้ถึงขีดความ
สามารถของมัน แต่อินเตอร์เน็ตอาจถูกจํากัดอยู่แค่ในวงแคบๆ เช่นนั้น ถ้าหาก ทิม เบอร์เนอร์ส-ลี ไม่คิดที่จะสร้างซอฟต์แวร์ตัวหนึ่งขึ้นมา

อินเตอร์เน็ตก่อนหน้าการเกิดของเวิร์ลด์ไวด์ ว็บนั้น เป็นเพียงการเชื่อมโยงระหว่างเครื่องคอมพิวเตอร์จํานวนหนึ่งเข้าด้วยกัน เพื่อผล
ประโยชน์ในการแลกเปลี่ยนไฟล์ข้อมูลระหว่างกัน สําหรับเพื่อการหารือ ถกเถียงหรือแสดงความคิดเห็นในแวดวงจํากัดระหว่างกันเท่านั้น
เอง การเชื่อมโยงดังกล่าวจะเกิดขึ้นได้ ผู้ที่เชื่อมต่อเข้าไปจะต้องรู้หมายเลขประจําเครื่องของอีกฝ่ายหนึ่งอย่างชัดเจน และต้องรู้ชื่อไฟล์ที่
ชัดเจนในการเข้าไปดูข้อมูลนั้นๆ

วันที่ 5 สิงหาคม 1991 เมื่อ 15 ปีก่อน ทิม เบอร์เนอร์ส-ลี เขียนโปรแกรมขึ้นมาตัวหนึ่ง ให้ทําหน้าที่เชื่อมโยง และ "บราวซ์" เครือข่าย
อินเตอร์เน็ตนั้นได้ เป้าหมายของซอฟต์แวร์ของเขาก็คือ ให้เราสามารถเชื่อมโยงกับข้อมูลข่าวสารทุกชิ้นได้ในทุกที่ทุกเวลา และต้อง
ขอบคุณความกรุณาของนักวิชาการชาวอังกฤษผู้นี้ที่ปล่อยให้ข้อมูลของซอฟต์แวร์ทั้งหมดของตนเองเปิดกว้าง ให้ทุกคนสามารถลอกเอา
ไปใช้ในการคิดค้นพัฒนาต่อได้ ไม่เช่นนั้นก็คงไม่เกิดการพัฒนาอย่างรวดเร็วเช่นทุกวันนี้

และยุคแห่งเวิร์ลด์ไวด์เว็บ หรือที่เราเจนตาด้วยตัวอักษรย่อ http://www.ก็คงไม่เกิดขึ้น

พอล คุนซ์ นักวิทยาศาสตร์คอมพิวเตอร์จากมหาวิทยาลัยสแตนฟอร์ด สหรัฐอเมริกา ได้แรงบันดาลใจจากการพบปะกับ ทิม เบอร์เนอร์ส-
ลี พัฒนาเว็บเซิร์ฟเวอร์ตัวแรกขึ้นมาในสหรัฐอเมริกา เมื่อนําเว็บเซิร์ฟเวอร์ของคุนซ์ มาประกอบเข้ากับซอฟต์แวร์ของ เบอร์เนอร์ส-ลี โลก

7

นี้ก็ได้เว็บไซต์แรกขึ้นมา

ไม่นานก็เกิด "โมเสค" เว็บบราวเซอร์ตัวแรก ตามมาด้วย "เนตสเคป" จากนั้นก็ถึงยุคบูมสุดขีดของโลก ดอตคอม ระหว่างตอนกลางและ
ตอนปลายทศวรรษ 1990 เราได้เห็นการก่อเกิดของเว็บไซต์อย่าง อเมซอน และ กูเกิ้ล เริ่มออกเดินเตาะแตะ

"อินเตอร์เน็ต เอ็กซพลอเรอร์ (ไออี)" และ "ฮอตเมล" ถือกําเนิดขึ้นระหว่างปี 1995-1996 ยาฮู เกิดมาในเวลาไล่เลี่ยกัน ต่อด้วยกระทาชาย
์
นายหนึ่งเกิดปิ๊งไอเดียการแลกเปลี่ยนไฟล์เพลงของตนเองผ่านเว็บ และก่อตั้ง แนปสเตอร์ ขึ้นมาในปี 1999

ถึงปี 2000 ฟองสบู่ด็อตคอมแตกดังโพละ หลายเว็บหายหน้าหายตาไป แต่อีกหลายเว็บรวมทั้งกูเกิ้ลพัฒนาขึ้นมาจนกลายเป็นเสมือน
กระดูกสันหลังแห่งข้อมูลข่าวสารทุกประการบนเว็บ เวิร์ลด์ไวด์เว็บขยายตัวจนกลายเป็นทุกสิ่งทุกอย่างสําหรับเรา ซื้อ ขาย แชต ไฟล์
เสียง และไฟล์ภาพ ดนตรี วิดีโอ ฯลฯ ทั้งที่ดี และเลวร้าย มีให้เลือกสรร

15 ปีที่ผ่านมา เวิร์ลด์ไวด์เว็บ เปลี่ยนแปลงชีวิตเราจนเป็นอย่างที่เห็นอยู่ อีก 15 ปีข้างหน้า วิถีของมนุษย์และเวิร์ลด์ไวด์เว็บ จะเป็นฉันใด?

แต่ไม่ว่าจะเป็นไปอย่างไร คงต้องขอบคุณเซอร์ ทิม เบอร์เนอร์ส-ลี!!

จุดเด่นของ HTML5

ความสามารถทั้งหมดของ HTML5 สามารถอ่านได้จาก เอกสารอย่างเป็นทางการของ HTML5 (ภาษาอังกฤษ) ครับ หรือถ้าชอบอะไรง่าย
ๆ สามารถอ่านได้จาก W3CSchool (ภาษาอังกฤษเช่นกัน แต่เข้าใจง่ายกว่ามาก)

ความสามารถเด่น ๆ ของมันก็คือ:

Semantic Markup: โค้ดเป็นระเบียบทําให้ Search Engine เก็บข้อมูลได้ง่าย
Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม
เสียง / วีดิโอ: หลายคนอาจเคยได้ยินเรื่องที่ว่า HTML5 Video จะมาแทน Flash
Video (.ﬂv)
Canvas: เอาไว้วาดรูป ตกแต่งรูป ซึ่งว่ากันว่าอาจมาแทนการวาดรูปใน
แฟลช (Adobe Flash)
ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลย
Drag and Drop: ลากของมาวาง
Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูล
เลยทีเดียว

บราวเซอร์ในรองรับ HTML5 บ้าง?

เว็บบราวเซอร์ (เช่น Internet Explorer, Firefox, Chrome etc.) เวอร์ชั่นใหม่ ๆ ได้เริ่มรองรับ HTML5 แล้ว แต่ก็ไม่ได้รองรับความ
สามารถทั้งหมด ดังนั้นก่อนใช้ความสามารถไหนของ HTML5 แนะนําให้ตรวจสอบจาก ตารางเปรียบเทียบการรองรับ HTML5 และ
CSS3 จากบราวเซอร์ต่าง ๆ

8

สําหรับท่านที่มีความรู้ด้าน 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>

9

การเขียนแบบ 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>, <ﬁg-
ure>, and <ﬁgcaption> (สามารถคลิกเพื่อเข้าไปอ่านว่าแท็กอันนั้นมีหน้าที่อะไร)

ซึ่งเว็บบราวเซอร์ใหม่ ๆ ก็จะรองรับแท็กพวกนี้อยู่แล้ว (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>
10
30

</ul>
31

</nav>
32

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>
11

<p>Ut
sapien
enim,
porttitor
id
feugiat
non,
ultri-‐
ces
non
odio.</p>

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>

12

Html5report

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Html5report

Ähnlich wie Html5report (20)

Html5report