Download to read offline
หน่วยการเรียนรู้ที่ 5
- 1.
- 2. HTML คืออะไร ย่อมาจากคำาว่า HyperTextMarkuup Language เป็นภาษาพื้นฐานของ การพัฒนาเว็บไซต์โดยเฉพาะ นอกเหนือจากภาษาอื่นๆ และเป็นภาษาที่โปรแกรม เว็บบราวเซอร์สามารถเข้าใจได้ดีที่สุด และแสดงผลได้เร็วที่สุดด้วยเช่นกัน ดังนั้นผู้ ที่ต้องการจะสร้างเว็บทุกๆ คน ควรมีความรู้พื้นฐานของภาษา HTML เป็นหลักด้วย สำาคัญมากๆ ภาษา HTML เป็นภาษาที่มีการพัฒนาการอย่างต่อเนื่องเช่นเดียวกับ ภาษาอื่นๆ ด้วยเช่นกัน เป็นภาษาที่มีหน่วยงานรับผิดชอบในการดูแลและจัดมาตรา ฐานด้วย ชื่อ W3C (World Wide Web Consortium)
- 3. โครงสร้างหลักของภาษา HMTL ตัวอย่างโครงสร้างภาษา HTML <HTML> <HEAD> <TITLE>ขอต้อนรับสู่เว็บ ไอที-ไกด์ ดอทคอม</TITLE> </HEAD> <BODY> Sawasdee?นี่คือ Web Page แรกของดิฉัน </BODY> </HTML> หมายเหตุ :- ตัวหนังสือสีแดง คือคำาสั่งในภาษา HTML
- 4. ตัวอย่างแท็ก สำาหรับการทำาตัวอักษรหนา <b>สวัสดีครับ เพื่อนๆ</b> ดังนั้นขอแนะนำา ผู้ที่สนใจจะมีเว็บไซต์เป็นของตัวเอง และต้องการ พัฒนาเว็บไซต์ ควรศึกษาความรู้พื้นฐานของภาษา HTML นี้ก่อน ทั้งนี้ เพื่อให้ สามารถแก้ไข เพิ่มเติมข้อมูลบนเว็บไซต์ของเราได้สะดวกมากยิ่งขึ้น
- 5. ตัวอย่างโครงสร้างภาษา HTML <HTML> <HEAD> <TITLE> โปรแกรมแรกของดิฉัน</TITLE> </HEAD> <BODY> <!-- สำาหรับใส่ข้อความที่ช่วยในการอธิบาย การเขียนคำาสั่ง //--> Sawasdee ค่ะ นี่คือ Web Page แรกของดิฉัน </BODY> </HTML> หมายเหตุ :- ตัวหนังสือสีแดง คือคำาสั่งในภาษา HTML ตัวอย่าง ตัวอย่าง
- 6. <HTML> </HTML> -หมายถึง คำาสั่งที่ใช้กำาหนดว่าเป็นเอกสาร HTML (คำาสั่งนี้จะ อยู่ตอนบนสุดและล่างสุดของไฟล์) <HEAD> </HEAD> - หมายถึง คำาสั่งที่ใช้กำาหนดว่าชื่อเรื่องของไฟล์ HTML <TITLE> </TITLE> - หมายถึง คำาสั่งที่ใช้กำาหนดว่าชื่อของเอกสาร (คำาสั่งนี้จะอยู่ ระหว่างคำาสั่ง HEAD) <BODY> </BODY> - หมายถึง คำาสั่งที่ใช้กำาหนดว่าเป็นส่วนของรายละเอียด (คำา สั่งนี้จะอยู่หลังคำาสั่ง HEAD)
- 7. นำำรูปภำพมำแสดงบน Web Page ตัวอย่ำงกำรใช้คำำสั่งสำำหรับกำรใส่รูปภำพ <HTML> <HEAD> <TITLE>โปรแกรมแรกของดิฉัน </TITLE> </HEAD> <BODY> <img src = "bannerthaithai.gif"> </BODY> </HTML> หมำยเหตุ :- ตัวหนังสือสีแดง คือคำำสั่งในภำษำ HTML ?
- 8. รำยละเอียดควำมหมำยของแต่ละคำำสั่ง <img src="/bannerthaithai.gif" mce_src="/bannerthaithai.gif"> ควำมหมำย: - คำำสั่งในกำรแสดงรูปภำพ ไม่ว่ำจะเป็นรูปภำพเคลื่อนไหว (gif animation) )หรือรูปภำพธรรมดำ ก็ใช้คำำสั่งเดียวกัน และไม่จำำเป็นจะต้องมี Tag ปิดท้ำยเหมือนคำำสั่งอื่น ๆ
- 9. จุดเชื่อมโยง หรือ Link ตัวอย่ำงกำรใช้คำำสั่งสร้ำงจุดเชื่อมโยง <HTML> <HEAD> <TITLE>โปรแกรมแรกของดิฉัน </TITLE> </HEAD> <BODY> <a href = "page1.html">Dance Music</a> <a href = "http://www.clickmeit.com">Visit MyWeb </a> <a href = "http://www.clickmeit.com"> <img src = "bannerclipmail.gif"></a> </BODY> </HTML>
- 10. วิธีการแบ่งจอภาพเป็นส่วน ๆ ตัวอย่างการแบ่งจอภาพเป็นส่วน ๆ <HTML> <HEAD> <TITLE>โปรแกรมแรกของดิฉัน </TITLE> <frameset cols = "20%,*"> <frame src ="left.html"> <frame src ="right.html"> </frameset> </HTML>
- 12. รายละเอียดความหมายของแต่ละคำาสั่ง <frameset cols ="20%,*">ความหมาย : - คำาสั่งเริ่มต้นของคำาสั่ง Frameset การแบ่งด้วยคำาสั่งนี้จะแบ่งในแนว Column เราสามารถเปลี่ยนการแบ่งจอภาพใน ลักษณะของแนวนอน หรือ Row ได้ โดยใช้คำาสั่ง Rows ="25%,75%" (กำาหนด ขนาดเท่าใดก็ได้) <frame src "left.html">ความหมาย : - คำาสั่งในการกำาหนดชื่อไฟล์ที่ถูกแบ่งใน ลำาดับที่ 1 คือ 20% <frame src "right.html">ความหมาย : - คำาสั่งในการกำาหนดชื่อไฟล์ที่ถูกแบ่ง ในลำาดับที่ 2 ดอกจันทน์ " * " คือคำาสั่งในการกำาหนดส่วนที่เหลือ นั่นคือ 80% </frameset>ความหมาย : - คำาสั่งปิดของคำาสั่ง frameset