การสร้างเว็บเพจด้วยภาษา Html กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ช่วงชั้นที่ 4 โรงเรียนบ้านชีวิทยา สำนักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 5
โครงสร้างของภาษา HTML จะเรียกว่า tag และส่วนที่เป็นคำสั่ง tag นี้ จะถูกเขียนอยู่ในเครื่องหมาย < > ทุกคำสั่ง เช่น <br>, <body>, <head> เป็นต้น
>>> จากภาพ. สีน้ำเงิน คือ ส่วนที่เป็นแท็กคำสั่ง >>> จากภาพ สีน้ำเงิน คือ ส่วนที่เป็นแท็กคำสั่ง สีเขียว คือ ส่วนที่เป็นข้อความที่จะพิมพ์
รูปแบบของ tag รูปแบบของ tag แบ่งออกเป็น 2 กลุ่ม คือ 1. tag เดี่ยว คือ รูปแบบคำสั่งที่มีเพียงคำสั่งเดียวหรือมีเพียงแท็กเดียว ก็สามารถใช้งานได้ เช่น <br> 2. tag คู่ คือ รูปแบบคำสั่งที่เป็นสองส่วน คือ มีส่วนเริ่มต้นและต้องมีส่วนจบของคำสั่ง ถึงจะสามารถทำงานได้สมบูรณ์ โดยส่วนจบของแต่ละคำสั่งจะมีเครื่องหมาย Slash (/) ไว้หน้าแท็กคำสั่งนั้น เช่น <html>......</html>
>>> จากภาพ แท็กคู่ มีทั้งหมด 4 แท็ก คือ 1. <html>...</html> 2. <head>....</head> 3. <title>....</title> 4. <body>....</body> แท็กเดี่ยว มีทั้งหมด 1 แท็ก คือ <br>
tag คำสั่งหลักของการเขียนโปรแกรมด้วยภาษา HTML คำสั่งหลักที่เป็นมาตรฐานเหมือนกันทั่งโลก โดยจะประกอบด้วยคำสั่งหลักๆ อยู่ 4 คำสั่งด้วยกัน ดังนี้ 1. <html>........</html> เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML 2. <head>........</head> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง
3. <title>.........</title> เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผลบนแถบ Title Bar คำสั่งนี้จะอยู่ภายในคำสั่งส่วน <head>......</head> โดยกำหนดความยาว ของตัวอักษรไม่เกิน 64 ตัวอักษร 4. <body>.........</body> เป็นคำสั่งที่กำหนดข้อความและรูปแบบของคำสั่งต่างๆ ที่ใช้สำหรับปรับแต่ง เอกสารที่จะนำเสนอออกทางส่วนแสดงผลหลักของ Web Browser
ตัวอย่างการเขียนโปรแกรมโครงสร้างหลักของภาษา HTML
Tag เป็นการจัดการรูปร่างและรูปแบบของตัวอักษรหรือเอกสาร ถูกคะ ผิดคะ
ข้อมูล ข้อความ เป็นส่วนใดของภาษา Html. ข้อความที่จะพิมพ์ คำสั่ง 15 tag เดี่ยว Tag คู่
ส่วนที่เป็นคำสั่ง tag นี้ จะถูกเขียนอยู่ในเครื่องหมาย. Alphabet Buttons Appear Here
ให้นักเรียนจับคู่คำที่ให้ความหมายตรงกัน คำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง <html>........</html> คำสั่งที่กำหนดข้อความและรูปแบบของคำสั่ง <title>.........</title> คำสั่งที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุด <head>........</head> คำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผล <body>.........</body>
ภาพใดเป็นการเขียนโปรแกรมโครงสร้างหลักของภาษา HTML ที่ถูกต้อง
<Scoreboard will appear here, leave shape as-is.>