|
บทเรียนที่ 1 : โครงสร้างพื้นฐานภาษา HTML
ภาษา HTML คืออะไร ?
HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการพัฒนา web page เพื่อให้โปรแกรม web brower ต่างๆ (Internet Explorer, Netscape, Opera) สามารถแปลงคำสั่ง แสดงผลในลักษณะของรูปภาพ ตัวอักษร เสียง ภาพเคลื่อนไหว โดยไฟล์ที่สร้างจะมีนามสกุล .html หรือ .htm การสร้างและแก้ไขสามารถใช้โปรแกรม NotePad, WordPad ในวินโดวส์ ลักษณะของไฟล์จะเป็น Text ไฟล์ธรรมดา
ตัวอย่างโครงสร้างภาษา HTML
<HTML>
<HEAD>
<TITLE> โปรแกรมแรกของดิฉัน </TITLE>
</HEAD>
<BODY>
<!-- สำหรับใส่ข้อความที่ช่วยในการอธิบาย การเขียนคำสั่ง //-->
Sawasdee ค่ะ นี่คือ Web Page แรกของดิฉัน
</BODY>
</HTML>
หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML
|
จากตัวอย่างจะเห็นได้ว่า แต่ละคำสั่งจะอยู่ในเครื่องหมาย "< >" ซึ่งเราเรียกว่า แทก "TAG" แต่ละคำสั่งจะเป็นการบอกจุดเริ่มต้นของคำสั่ง และจุดสิ้นสุดของคำสั่งจะมีสัญลักษณ์ "</ >"
- <HTML> </HTML> - หมายถึง คำสั่งที่ใช้กำหนดว่าเป็นเอกสาร HTML (คำสั่งนี้จะอยู่ตอนบนสุดและล่างสุดของไฟล์)
- <HEAD> </HEAD> - หมายถึง คำสั่งที่ใช้กำหนดว่าชื่อเรื่องของไฟล์ HTML
- <TITLE> </TITLE> - หมายถึง คำสั่งที่ใช้กำหนดว่าชื่อของเอกสาร (คำสั่งนี้จะอยู่ระหว่างคำสั่ง HEAD)
- <BODY> </BODY> - หมายถึง คำสั่งที่ใช้กำหนดว่าเป็นส่วนของรายละเอียด (คำสั่งนี้จะอยู่หลังคำสั่ง HEAD)
ภาพตัวอย่างการเขียนโปรแกรมจาก Notepad
โปรแกรม NotePad เป็น Text Editor (โปรแกรมที่ใส่ข้อมูลได้เฉพาะตัวอักษรและตัวเลข รูปภาพไม่สามารถบันทึกได้) ตัวหนึ่งที่มีมาพร้อมกับ Windows ทุกเวอร์ชั่น เราสามารถเรียกโปรแกรม Notepad ขึ้นมาใช้งานได้โดย
- คลิกปุ่ม Start
- เลือกโปรแกรม Programs
- เลือก Accessories
- และเลือก NotePad
หลังจากนั้นเวลาบันทึก ให้เลือกเมนู File เลือก Save เลือกตั้งชื่อไฟล์ ซึ่งชื่อไฟล์หลักของ Web Page มักจะใช้ชื่อว่า index.html หรือ index.htm
หลังจากสร้างเสร็จแล้ว เราสามารถเลือกโปรแกรม browser ซึ่ง ณ ที่นี้เราจะเรียกโปรแกรม Microsoft Internet Explorer ซึ่งมีมาพร้อมกับ Windows เวอร์ชั่น 95 ขึ้นไป โดยการ...
- คลิกปุ่ม Start
- เลือก Programs
- เลือก Internet Explorer
- จากนั้นเลือกเมนู File เลือก Open
- และเลือกชื่อไฟล์ ทีเราตั้งชื่อไว้ อาจะเป็น index.html หรือ index.htm
ยินดีด้วยค่ะ ! ถ้าคุณเข้าใจเกี่ยวกับโครงสร้างของภาษา HTML แล้ว ขอเชิญศึกษาในบทเรียนต่อไปค่ะ... บทเรียนที่ 2 เรื่องของตัวอักษร
|
|