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