รายวชิ า การสร้างเวบ็ ไซต์ รหัส ว31281 // ครจู ติ ราภรณ์ ชัยเฉลิมศกั ดิ์ 1
หน่วยการเรียนรู้ที่ 1 ทาความรูจ้ กั กบั HTML5
ในปจั จบุ ันโลกของการสรา้ งเว็บไซต์ถกู พฒั นาเข้ามาสู่ยุคของมาตรฐาน HTML5 ซ่ึงเป็นไปตามข้อกาหนด
ขององค์กรทีเรียกว่า W3C (www.w3c.org) และถือเป็นการเปลี่ยนแปลงคร้ังสาคัญอีกครั้งหน่ึงของการสร้าง
เว็บไซต์ในยุคปจั จบุ นั
1. HTML5 คืออะไร
การสร้างเว็บไซต์ในปัจจุบันอยู่ในยุคของ Web 2.0 เป็นยุคที่ให้ความสาคัญทั้งเน้ือหาท่ีนาเสนอและ
ประสิทธิภาพควบคู่ไป การท่ีภาษ HTML ต้องทางานฝ่ัง Client 100% ทาให้ต้องใช้ฟีเจอร์ที่เกิดจากมาตรฐาน
ของเว็บโดยตรงโดยไม่ได้พ่ึงพาเทคโนโลยีหรือ add-in เนื่องจาก HTML5 ถูกกาหนดขึ้นมาเพ่ือแสดงข้อมูล
ประเภทตา่ ง ๆ ทีน่ อกเหนอื จากข้อความกับรูปภาพ จึงทาให้มีอิลิเมนต์ใหม่ ๆ ถูกสร้างขึ้นมาพร้อมกับยกเลิกบาง
อิลเิ มนต์ทีเ่ ปน็ มาตรฐานของ HTML4 เดมิ ออกไป
ท้ังน้ีไม่ได้หมายความว่า การทางานฝั่ง Server เป็นส่ิงที่ไม่ดี แต่การใช้งาน HTML5 เข้ามาปรับปรุง
การทางานของเว็บไซตข์ องเราทาให้การทางานของเวบ็ ไซตม์ ีประสิทธิภาพสูงสุดเทา่ ทจ่ี ะเปน็ ไปได้
ความเหมือนทีแ่ ตกตา่ งระหวา่ ง HTML กบั XHTML
ภาษา HTML และภาษา XHTML เป็นมาตรฐานของเอกสารท่ีแสดงให้หน้าเว็บเพจ แต่มีข้อแตกต่าง
ท่ีสาคัญคือ XHTML มีความเข้มงวดของการใช้งานอิลิเมนต์ต่าง ๆ มากกว่าภาษา HTML เนื่องมาจากภาษา
XHTML ต้องการใหเ้ อกสารท่ีแสดงในหน้าเว็บเพจมีรูปแบบมีแบบแผนของโครงสร้างเอกสารที่ดี เรียกโครงสร้าง
ของเว็บเพจนว้ี ่า Document Object Model (DOM) มีนามสกลุ ของไฟล์เปน็ *.htm หรอื *.html
โดยโครงสร้างของภาษา HTML แสดงได้ดงั นี้
HTML4
<html>
<head>
<title>ขอ้ ความบนแถมไตเต้ลิ </title>
</head>
<body>
…
</body>
</html>
และโครงสร้างของภาษา XHTML แสดงไดด้ งั นี้
รายวิชา การสร้างเวบ็ ไซต์ รหัส ว31281 // ครจู ิตราภรณ์ ชัยเฉลมิ ศกั ดิ์ 2
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC “- //W3C//DTD XHTML 1.0 Transitional //EN” “http:
//www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd”>
<html xmlns =”http://www.w3.org/1999/xhtml”>
<head>
<title>ขอ้ ความบนแถบไตเตล้ิ </title>
</head>
<body>
…
</body>
</html>
จากโค้ดข้างตน้ เป็นโครงสร้างของเว็บเพจด้วย HTML4 ที่มอี ิลเิ มนต์พ้นื ฐานอยู่ 4 ตวั สว่ นXHTML 1.0
Transitional อลิ ิเมนต์ <DOCTYPE> เพิม่ ขน้ึ มา เพื่อทาหน้าท่กี ากบั ประเภทของเอกสารดว้ ย
NOTE
รายละเอียดของมาตรฐาน XHTML 1.0 Transitional และมาตรฐานอนื่ ๆผเู้ ขียนขอแนะนาให้คุณผอู้ า่ น
ศกึ ษาจากตาราดา้ นนโี้ ดยเฉพาะ ซ่งึ จะช่วยใหค้ ุณผู้อา่ นสรา้ งเวบ็ เพจที่มแี บบแผนที่ดีตรงตามาตรฐานยิ่งข้ึน
ขอ้ แตกต่างระหวา่ ง HTML4 กบั HTML5
ก่อนอ่ืนเรามาดูโครงสรา้ งเบอื้ งต้นของเอกสารตามมาตรฐานของภาษา HTML4 กับ HTML5 กนั กอ่ น
ซงึ่ แสดงไดด้ ังสครปิ ตต์ อ่ ไปน้ี
HTML4 (XHTML 1.0)
<!DOCTYPE html PUBLIC “- //W3C//DTD XHTML 1.0 Transitional //EN” “http:
//www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd”>
<html xmlns =”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
</head>
<body>
</body>
</html>
รายวิชา การสรา้ งเวบ็ ไซต์ รหัส ว31281 // ครูจิตราภรณ์ ชยั เฉลมิ ศักด์ิ 3
HTML5
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
จากสคริปต์ขา้ งต้นพบวา่ มาตรฐานของHTML5 กาหนดประเภทของเอกสารที่แสดงในหน้าเว็บเพจส้ันลง
กว่าเดมิ โดยกาหนดเพียงแค่ว่าเป็นเอกสาร HTML เท่าน้ัน โดยภาษา HTML ถูกสร้างขึ้นมาอยู่ในบานะเป็นเพียง
ภาษาท่ีทาหน้าที่แสดงข้อมูลในหน้าเว็บเพจเพียงอย่างเดียว โดยที่ไม่รู้ว่าข้อมูลท่ีแสดงอยู่คืออะไรจนกระทั่ง
มาตรฐาน HTML5 ออกมา
มาตรฐานของภาษา HTML5 ถูกกาหนดให้ทาหนา้ ทอี่ ย่างนอ้ ย 2 อย่าง คอื
1. แสดงข้อมลู ต่าง ๆ เปน็ หน้าทเ่ี ดมิ ของภาษา HTML4
2. เป็นส่วนบอกว่าขอ้ มูลดังกล่าวคืออะไร มีลักษณะเชน่ เดียวกบั โครงสร้างของแหล่งข้อมลู XML
โดยแต่ละอิลิเมนต์สามารถบอกได้วา่ ขอ้ มูลทก่ี าลังเก็บอยู่คอื อะไร
ทีผ่ ่านมาจากการเขียน HTML4 ในการสรา้ งเวบ็ ไซตม์ กั จดั Layout หน้าเว็บเพจดว้ ยการสรา้ งตารางจาก
อลิ เิ มนต์ <table>…</table>, แบ่งส่วนขอ้ มลู ตา่ ง ๆ ดว้ ย อิลิเมนต์ <div>…</div> หรืออลิ เิ มนต์
<span>…</span> เปน็ เทคนิคที่นิยมเป็นอยา่ งยิ่ง แตก่ ารใช้อลิ ิเมนตท์ ้ัง 3 ทาให้เน้ือหาหรือขอ้ มลู (contents)
ปะบนกับโครงสร้างของเอกสารจนแยกไม่ออกว่าส่งนใดมีความสาคญั มากกวา่ กนั สว่ นใดคอื ขอ้ มลู หลกั ส่วนใดคือ
ขอ้ มลู ย่อย (อยู่ในฐานะข้อมลู รอง) เนือ่ งจากภาษา HTML4 เปน็ ภาษาท่ีทาหนา้ ที่แสดงข้อมูลเพยี งอย่างเดยี ว
เท่านน้ั ไม่ไดบ้ อกความหมายแตอ่ ย่างใด
ดังนนั้ ภาษา HTML5 จึงมีอลิ ิเมนตท์ ี่เข้ามาทาหน้าท่จี ัดโครงสร้างในหน้าเว็บเพจให้เราโดยเฉพาะ เพ่ือบง่
บอกว่าข้อมูลส่วนใดเป็นข้อมูลหลัก สว่ นใดเป็นข้อมลู รองแบ่งแยกกันชดั เจน จึงบอกไดว้ ่าข้อมูลทีก่ าลังแสดงอยใู่ น
สว่ นนเี้ ป็นขอ้ มูลหลกั มีความสาคญั มากท่สี ดุ เหน็ ไดว้ ่าทาใหข้ อ้ มลู ที่แสดงอย่มู ีแบบแผนท่ีชัดเจนมากกว่า HTML4
ทาให้มีความจาเปน็ อยา่ งยิ่งที่จะตอ้ งรู้จกั กบั ภาษา HTML5 และผสมผสารกบั ภาษาที่ทางานฝั่ง Server เพอื่ ใหไ้ ด้
เวบ็ เพจท่ดี แี ละมีประสิทธภิ าพควบคูก่ ันไป
รายวชิ า การสรา้ งเวบ็ ไซต์ รหสั ว31281 // ครูจติ ราภรณ์ ชยั เฉลิมศักดิ์ 4
ข้อแตกต่างระหวา่ ง HTML4 กับ HTML5 แสดงดังสคริปต์ต่อไปนี้
สครปิ ต์ HTML4 ท่ี 1-1 ข้อแตกต่างระหว่าง HTML4 กับ HTML5 ข้ันต้น (SimpleHTML4.htm)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Layout ตามมาตรฐานของ HTML4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="100%">
<tr>
<td>
<div id="menu">
<a href="#1">Home</a>
<a href="#2">เวบ็ บอรด์ </a>
<a href="#3">บทความ</a>
<a href="#4">ตดิ ต่อเรา</a>
</div>
</td>
</tr>
<tr>
<td>
<div id="content">
เนอ้ื หาทีนาเสนอ....<br /><br /><br /><br /><br />
</div>
</td>
</tr>
<tr>
<td>
รายวิชา การสรา้ งเวบ็ ไซต์ รหัส ว31281 // ครจู ติ ราภรณ์ ชัยเฉลิมศักดิ์ 5
<div id="footer">
<a href="#4">นโยบายความเปน็ สว่ นตัว</a>
</div>
</td>
</tr>
</table>
</body>
</html>
สคริปต์ HTML5 ท่ี 1-1 ขอ้ แตกต่างระหว่าง HTML4 กับ HTML5 ข้นั ต้น (SimpleHTML5.htm)
<!DOCTYPE html>
<html lang="th">
<head>
<title>Simple Layout ตามมาตรฐานของ HTML5</title>
<meta charset="utf-8">
</head>
<body>
<nav>
<a href="#1">Home</a>
<a href="#2">เวบ็ บอร์ด</a>
<a href="#3">บทความ</a>
<a href="#4">ติดตอ่ เรา</a>
</nav>
<articale>
เน้อื หาท่ีนาเสนอ...<br /><br /><br /><br /><br />
</articale>
<footer>
<a href="#4">นโยบายความเป็นส่วนตัว</a>
</footer>
</body> </html>
รายวิชา การสรา้ งเวบ็ ไซต์ รหสั ว31281 // ครูจิตราภรณ์ ชยั เฉลิมศักดิ์ 6
จากสครปิ ตท์ ง้ั 2 ขา้ งต้นมีส่วนแสดงผลเหมอื นกนั แตกต่างกนั ตรงที่เขียนขึน้ มาจากมาตรฐานของภาษา
HTML4 และ HTML5 ซึง่ เป็นรูปแบบ Layout งา่ ยๆ ที่นาเสนอเนื้อหา 3 ส่วน ประกอบไปดว้ ยแถบเมนู, เน้ือหา
และแถบ Footer ดงั รปู ที่ 1-1
รปู ที่ 1-1
แสดง Layout
ของตวั อย่างท่ี 1-1
จากตวั อยา่ งไมส่ นใจสว่ นแสดงผลท่ไี ดม้ า แต่สนใจโครงสร้าง Layout ทเ่ี กิดจากมาตรฐาน HTML4 กับ
HTML5 กลา่ วคอื
โดยปกติแลว้ ในภาษา HTML4 มกั จะใชอ้ ิลเิ มนต์ <table>…</table> รว่ มกบั อลิ ิเมนต์ <div>…</div>
(หรืออิลิเมนต์ <span>…</span>) เข้ามาทาหน้าท่ีจดั Layout เพอ่ื ให้ส่วนแสดงผลตามท่ีต้องการ
สมมตวิ า่ ต้องการ แบง่ สว่ นแสดงผล
ออกเปน็ 3 สว่ น ดังรปู ท่ี 1- 2
รูปที่ 1-2
แสดง Layout
ท่ไี ดจ้ าก HMTL4
สว่ นของเมนู
สว่ นของเนื้อหา
ส่วนของ Footer
จากรปู ท่ี 1-2 สว่ นแสดงผลทงั้ 3 ส่วนแตกตา่ งกันอยา่ งชัดเจน โดยเกิดจาก
รายวิชา การสร้างเว็บไซต์ รหสั ว31281 // ครูจติ ราภรณ์ ชยั เฉลมิ ศกั ด์ิ 7
1. แถบเมนู อยู่ในความรบั ผดิ ชอบของอิลิเมนต์ <div>…</div> ทชี่ ื่อวา่ menu
2. เนอ้ื หา อยใู่ นความรบั ผดิ ชอบของอลิ ิเมนต์ <div>…</div> ทีช่ อื่ วา่ content
3. สว่ น Footer อยู่ในความรับผิดชอบของอิลิเมนต์ <div>…</div> ทีช่ อ่ื ว่า footer
สง่ิ ทมี่ องเหน็ น้ันบราวเซอรม์ องสคลปิ ต์ HTML4 ข้างตน้ ประกอบไปดว้ ยอลิ ิเมนต์ <div>…</div> จานวน
3 ตวั มหี น้าท่เี ท่ากันเพราะเปน็ อลิ เิ มนต์ตัวเดยี วกันนนั่ เอง แตกต่างกนั ตรงที่ชื่ออิลเิ มนต์ไม่เหมอื นกัน สว่ นทแี่ สอง
ผลท่ีเกิดจาก HTML4 จงึ ผลสมกนั โดยทไ่ี มส่ ามารถแยกแยะได้ว่าส่วนใดคอื เมน,ู เน้ือหา หรอื เป็นสว่ น Footer
อยา่ งแท้จรงิ ส่งผลใหไ้ ม่สามารถบอกได้วา่ ส่วนใดมีความสาคญั มากวา่ กันเพราะวา่ มรี ะดบั ความสาคัญเท่ากัน
นัน่ เอง (เพราะว่าเปน็ อิลิ เมนตเ์ ดยี วกัน
ต่างกนั แค่ชื่อ) ทาให้เวบ็ เพจทีเ่ กดิ จาก
มาตรฐาน HTML4 จึงไม่ สมเหตุสมผล
รปู ที่ 1-3
แสดง Layout
ทีแ่ สดงจาก HTML5
อลิ ิเมนต์ <nav>…</nav>
อลิ ิเมนต์ <article>…</article>
จากรปู ที่ 1-3 ส่วนแสดงผลทั้ง 3 ส่วนเกดิ จาก อลิ ิเมนต์ <footer>…</footer>
1. แถบเมนูอยใู่ นความรับผิดชอบของอิลเิ มนต์ <nav>…</nav>
2. เนอ้ื หา อยใู่ นความรับผิดชอบของอิลเิ มนต์ <article>…</article>
3. ส่วน Footer อยู่ในความรับผดิ ชอบของอลิ เิ มนต์ <footer>…</footer>
อะไรกต็ ามทอี ยรู่ ะหว่างอลิ ิเมนต์ <nav>…</nav> คอื แถบเมนูทีใ่ หผ้ ู้คลกิ เลอื กไปยงั เวบ็ เพจอ่นื ๆ เชน่
Hyperlink รวมไปถงึ การแสดงผลแบบแบ่งหนา้ (First, Previous, Next, Last) ด้วย เนือ้ หาท่ีต้องการนาเสนอต่อ
ผูใ้ ช้ เชน่ เว็บเพจการเขียน Blog, บทความต่าง ๆ, รูปภาพประกอบข้อความ, แบบฟอร์มรบั สมัครสมาชิก ฯลฯ ถือ
วา่ มคี วามสาคัญเปน็ อยา่ งย่งิ ตอ้ งกาหนดใหอ้ ยรู่ ะหว่างอลิ เิ มนต์ <article>…</article> แถบ Footer ทาหนา้ ท่ี
นาเสนอขอ้ มูลประกอบเนือ้ หา เช่น ลิขสิทธ,ิ์ นโยบายความเนสว่ นตัว, แหล่งอ้างอิง ฯลฯ อยู่ในความรับผดิ ชอบ
ของอลิ เิ มนต์ <footer>…</footer>
รายวชิ า การสรา้ งเวบ็ ไซต์ รหัส ว31281 // ครจู ิตราภรณ์ ชยั เฉลิมศกั ด์ิ 8
จะเหน็ ไดว้ ่าสว่ นแสดงผลที่เกิดจากมาตรฐาน HTML5 สามารถแบง่ แยกไดอ้ ยา่ งชัดเจนตามหนา้ ที่อิลเิ มนต์
ทถ่ี กู กาหนดไว้ สง่ ผลให้สว่ นแสดงผลของ HTML5 มคี วามสมบรู ณ์มากกวา่
3. แนวทางการนาเสนอเน้ือหาของ HTML5 และ CSS3
ในปัจจุบนั บราวเซอร์แต่ละค่ายมงุ่ เขา้ สู่มาตรฐานของ HTML5 กบั CSS3 ทั้งหมดโดยเฉพาะอย่างยิ่ง
บราวเซอรห์ ลกั ท้ัง 5 ตัว ได้แก่ Internet Explorer, Firefox, Google Chrome, Opera, Safari และยังรวมไปถงึ
บราวเซอร์ท่ีถกู ออกแบบมาให้ทางานบน Smart Phone และ Tablet ดงั นน้ั เนือ้ หาที่จะนาเสนอจะไมเ่ น้น
สนบั สนนุ บราวเซอรใ์ ดบราวเซอรห์ น่งึ เพราะแต่ละผลติ ภัณฑ์จะมีการอัพเดตผลติ ภัณฑใ์ ห้รองรับมาตรฐานของ
HTML5 กับ CSS3 ในอนาคตและจะนาเสนอเก่ียวกบั ลักษณะการใช้ประโยชนจ์ ากมาตรฐานใหมโ่ ดยขอบเขตการ
ใชง้ าน HTML5 กับ CSS3 ในระดบั เบ้ืองต้นเพอ่ื แสดงใหเ้ ห็นภาษาฝัง่ Client อย่าง HTML ที่ถกู ปรับปรุงมาถงึ
เวอรช์ นั 5 มีอะไรท่หี น้าสนใจบ้าง
4. แนะนาโปรแกรมทส่ี ามารถสร้างเอกสาร HTML5 และ CSS3
มโี ปรแกรมหลายตัวที่สามารถสร้างไฟลเ์ วบ็ เพจตามมาตรฐานของ HTML5 ได้ในขนั้ ตน้ นี้
ขอแนะนาโปรแกรม คอื
Adobe Dreamweaver CS6 ข้นึ ไป นักออกแบบเว็บไซต์รจู้ กั โปรแกรมนเ้ี ป็นอย่างดี สามารถสร้างเวบ็
เพจตามมาตรฐาน HTML5 ได้โดยคลกิ เมนู File > New… ท่ีรายการ Doc Type. เลือกมาตรฐาน HTML5 ดงั รปู
ที่ 1-4
รปู ท่ี 1-4
แสดงการสรา้ งไฟลเ์ วบ็ เพจตามมาตรฐาน
HTML5 ใน Adobe Dreamweaver CS6
รายวชิ า การสร้างเว็บไซต์ รหสั ว31281 // ครูจิตราภรณ์ ชัยเฉลมิ ศักดิ์ 9
รูปท่ี 1-5
แสดงโครงสร้างไฟล์
HTML5 ที่ได้จาก Adobe
Dreamweaver CS6
สรปุ ท้ายบท
สาหรับเนื้อหาของ HTML5 และ CSS3 ที่นาเสนอไม่เนน้ เรอ่ื งการใช้โปรแกรมแต่อยา่ งใดแตจ่ ะนาเสนอ
หลักการและการสรา้ งเว็บเพจตามมาตรฐาน HTML5 สง่ ผลให้คณุ ผู้อ่านสามารถนาไปใชร้ ่วมกับโปรแกรมใดๆ ก็ได้
สว่ นข้ันตอนการใช้โปรแกรมขอแนะนาใหผ้ ู้เรยี นศกึ ษาเพ่ิมเตมิ เกีย่ วกบั การใชโ้ ปรแกรมโดยตรงซงึ่ จะกลา่ วใน
ตอนทา้ ยของหนว่ ยการเรยี นรทู้ ่ี 10 เพอ่ื ชว่ ยใหเ้ ข้าใจและสรา้ งไฟล์ HTML5 ไดอ้ ยา่ งมปี ระสทิ ธิภาพมากยง่ิ ขน้ึ
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
HTML5 หน่วยการเรียนรู้ที่ 1
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
ทำความรู้จักกับ HTML5
- 1 - 9
Pages: