จุดประสงค์การเรียนรู้
1. สามารถอธิบายโครงสร้างและคำสั่งหลักของภาษา HTML ได้
2. อธิบายและใช้คำสั่งเบื้องต้นในการเขียนโปรแกรมภาษา HTML ได้
3. สามารถสร้างเว็บเพจด้วยภาษา HTML
4. สามารถแสดงผลลัพธ์บนเว็บบราวเซอร์ได้อย่างถูกต้อง
5. สามารถใช้โปรแกรม Notepad ในการพิมพ์ไฟล์เอกสาร HTML ได้
ภาษา HTML
HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีลักษณะเป็นภาษาในเชิงการบรรยายเอกสารไฮเปอร์มีเดีย (Hypermedia Document Description Language) เพื่อนำเสนอเอกสารนั้น เผยแพร่ในระบบเครือข่ายใยแมงมุม WWW (World Wide Web) มีโครงสร้างการเขียน ที่อาศัยตัวกำกับ เรียกว่า แท็ก (Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมบราวเซอร์ (Browser)
Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Tag เดี่ยว
เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <HR> เป็นต้น
Tag เปิด/ปิด
เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <P>…</P> เป็นต้น
Attributes
Attributes เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น เช่น Tag ควบคุมเกี่ยวกับรูปภาพ <IMG> มี Attributes ดังนี้
<IMG SRC="ชื่อไฟล์.นามสกุล" WIDTH="n" HEIGHT="n" ALT="text" BORDER="n">
โดย SRC เป็น Attribute ควบคุมชื่อไฟล์ภาพที่จะนำมาแสดงผล
WIDTH เป็น Attribute ควบคุมความกว้างของภาพ
HEIGHT เป็น Attribute ควบคุมความสูงของภาพ
ALT เป็น Attribute ควบคุมคำอธิบายภาพ
BORDER เป็น Attribute ควบคุมขนาดของเส้นขอบของภาพ
*****ไฟล์เอกสาร HTML เป็นไฟล์ข้อความรูปแบบหนึ่ง (Text File) ที่เก็บชุดคำสั่ง HTML ดังนั้นการสร้างเอกสาร HTML จึงสามารถใช้ Text Editor ตัวใดก็ได้ เช่น NotePad หรือ WordPadThai
เริ่มด้วยการเปิดโปรแกรม Notepad
<HTML>
</HTML>
แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่อง หมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่, แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป เมื่อเรานึกถึง "แท็ก" ก็เหมือนกับว่า เราได้พูดคุยกับ โปรแกรมเบราส์เซอร์ หรือไม่ก็ เป็นการ บอกรายละเอียด ให้กับมัน แล้วอะไรละที่จะบอก สิ่งแรกก็คือ "นี่คือการเริ่มต้นเอกสาร <HTML> และสิ่งต่อมาก็คือ "นี่คือการสิ้นสุดเอกสาร" </HTML> เมื่อมาถึงตรง นี้แล้ว สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีก
ในเอกสาร HTML โดยทั่วไปมักจะต้องมีแท็ก HEAD เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร
<HTML>
<HEAD>
</HEAD>
</HTML>
และรายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก HEAD) ก็คือ แท็กไตเติ้ล TITLE ซึ่งก็คือชื่อเรื่องนั่นเอง
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
และต่อมาก็คือแท็ก BODY ซึ่งเป็นแท็กที่สำคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะถูกใส่ไว้ภายในแท็กนี้
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
อีกสิ่งหนึ่งที่เราจะทำกันก็คือ, ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร
<HTML>
<HEAD>
<TITLE>ยินดีต้อนรับสู่การเขียนเว็บเพจด้วยภาษา HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
บันทึก ข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as แล้วตั้งชื่อเป็น example1.html
ก่อนที่จะข้ามไปเรียนรู้ในบทต่อไป มีสิ่งจำเป็น 2 ประการที่จะต้องเตรียมก็คือ ประการที่ 1 จะต้องเตรียมข้อมูล พอคร่าว ๆ ว่าเว็บเพจของเราควรจะมีหน้าตาเป็นอย่างไร และประการที่ 2 คือต้องจำองค์ประกอบพื้นฐานของ เอกสาร HTML ในบทนี้ให้ดี