หน่วยการเรียนรู้ การเขียนโปรแกรมภาษาขั้นพื้นฐาน เรื่อง โครงสร้างพื้นฐาน HTML 5 รหัส รายวิชา ง23102 การงานอาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและเทคโนโลยี ชั้น มัธยมศึกษาปีที่ 3 เวลา 2 คาบ โรงเรียน เตรียมอุดมศึกษาพัฒนาการ
HTML HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถุอื่น ๆ ผ่านโปรแกรม เบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล
ลักษณะ คำสั่ง (Tag) HTML Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย < และ > ลักษณะ Tag HTML คือ 1. Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <br> (Tag กำหนดขึ้นบรรทัดใหม่) 2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้น ๆ เช่น <head> </head> 3. คำสั่งใน Tag เขียนด้วยอักษรตัวใหญ่หรือเล็กก็ได้ เช่น <Body> หรือ <BODY> หรือ <body>
โครงสร้างพื้นฐาน HTML 5 1. ส่วนการประกาศชนิดของเอกสาร 2. ส่วนหัวเอกสาร 3. ส่วนเนื้อหาของเอกสาร
โครงสร้างพื้นฐาน HTML 5
<!DOCTYPE HTML> ใช้ในการประกาศชนิดของเอกสาร เพื่อให้ Web browser รับทราบและจัดเตรียมวิธีการ ประมวลผลสำหรับเอกสารนั้น ได้อย่างถูกต้อง
วางแท็ก <html> ไว้ถัดจาก <!doctype> แท็ก <html> ใช้ในการกำหนดจุดเริ่มต้นของเอกสาร และ จุดสิ้นสุดของเอกสาร คือ </html> โดยองค์ประกอบทั้งหมดของเอกสารจะถูกกำหนดไว้ ระหว่าง <html> … </html> เสมอ วางแท็ก <html> ไว้ถัดจาก <!doctype>
วางแท็ก <head> ไว้ถัดจาก <html> เช่น ชื่อเพจ(Title),อักษรอักขระ(Encoding) การกำหนดรูปแบบด้วย CSS หรือคำสั่ง JavaScript เป็นต้น วางแท็ก <head> ไว้ถัดจาก <html>
วางแท็ก <body> ไว้ถัดจากแท็กปิด </head>
Notepad การเรียกใช้งานโปรแกรม Notepad สามารถทำได้ดังนี้ คลิกที่ Start --> Programs --> Accessories --> เลือก Notepad
Notepad การบันทึกไฟล์โปรแกรม Notepad ให้เป็นไฟล์ HTML หลังจากเขียนคำสั่งพื้นฐานของภาษา HTML ลงใน Notepad ให้ Save เป็น file นามสกุล .html ดังนี้ 1.คลิก File --> เลือก Save As 2.ในช่อง File name พิมพ์ชื่อ File เช่น name.html 3.กำหนด Encoding --> UTF-8 2 3
Notepad การแสดงผลเว็บเพจ 1. คลิกขวาที่ไฟล์งาน เลือก Open with 2. เลือก Browser ที่ต้องการแสดงผลเว็บเพจ 3. ถ้าต้องการแก้ไขคำสั่ง เลือก Notepad
ลองทำดู รู้ปฏิบัติ คำชี้แจง ให้นักเรียนสร้างเว็บเพจประวัติของนักเรียน โดยใช้คำสั่ง HTML 5 ด้วยโปรแกรม Notepad 1. ออกแบบเว็บเพจ ด้วยภาษา html 5 โดยใช้ Notepad 2. ประกอบด้วย 2.1 title bar 2.2 header เรื่อง ประวัติส่วนตัวของ ชื่อ นามสกุล นักเรียน 2.3 body แสดงเนื้อหา ให้มี 2 section คือ ประวัตินักเรียน และ ความรู้สึกกับโรงเรียน 2.4 footer ของเว็บเพจ แสดงข้อความที่สามารถติดต่อนักเรียนได้