การเขียนภาษา HTML ด้วยโปรแกรม Notepad
โครงสร้างภาษา HTML
HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาที่ใช้สำหรับ
สร้างเว็บเพจ โดยคำสั่งในภาษา HTML จะทำหน้าที่ควบคุมการแสดงผลของข้อมูลในเว็บเพจ ซึ่งเราสามารถควบคุมได้ทั้งสีสัน รูปภาพ ตลอดจนตำแหน่งของสิ่งต่าง ๆ ที่อยู่บนเว็บเพจ
คำสั่งที่ใช้ควบคุมการแสดงผลใน HTMLนั้นถูกเรียกว่าแท็ก (Tag) ซึ่งมีอยู่มากมายหลายสิบชนิด แต่ละแท็กก็จะมีหน้าที่แตกต่างกันออกไป เช่น บางแท็กใช้สำหรับกำหนดแสดงรูปภาพ บางแท็กใช้สำหนับกำหนดสีฟอนต์หรือขนาดให้กับตัวอักษร การเรียนรู้ภาษา HTML จึงเป็นการเรียนรู้ที่จะใช้งานแท็กในการสร้างเว็บเพจให้ได้ดังใจนึกนั่นเอง
ลักษณะของแท็กในภาษา HTML
แท็ก 1 แท็ก จะประกอบด้วยส่วนเริ่ม
และส่วนปิดท้าย ซึ่งทั้งสองส่วนจะถูกเรียกว่า Tag เปิด และTag ปิด
<HTML> เรียกว่าแท็กเปิด
</HTML> เรียกว่าแท็กปิด
แท็กที่เห็นข้างต้นเรียกว่าแท็ก HTML ซึ่งชื่อของแท็กนั้นมาจากคำที่อยู่ระหว่างเครื่องหมาย < และเครื่องหมาย > โดยบรรทัดแรกคือ แท็กเปิดของ <HTML>
จะสังเกตเห็นว่า แท็กปิดจะต่างจากแท็กเปิด ตรงที่มีเครื่องหมาย / เพิ่มขึ้นมาหน้าชื่อแท็ก แท็กนี้จะถูกนำมาใช้งานเสมอในเว็บเพจต่างๆ เนื่องจากเป็นแท็ก ที่ใช้สำหรับกำหนดขอบเขตของเอกสาร HTML เรียกได้ว่ามีเว็บเพจก็ต้องมี <HTML> เอกสาร HTML หรือเว็บเพจ
หน้าหนึ่ง ๆ จะถูกแบ่งออกเป็น 2 ส่วนคือ HEAD และส่วน BODY ด้วย <HEAD> และ<BODY> ตามลำดับโดย <HEAD>และ <BODY> จะอยู่ระหว่าง HTML>..</HTML>
อีกทีหนึ่ง เราจะมาดูกันว่าทั้ง 2 ส่วนนี้มีหน้าที่แตกต่างกันอย่างไร
ส่วน HEAD
ได้แก่ส่วนที่อยู่ระหว่าง <HEAD>….</HEAD> ซึ่งเป็นส่วนที่ใช้สำหรับกำหนดการทำงานหรือกำหนดคุณสมบัติพิเศษบางประการของเว็บเพจ เช่น เราจะกำหนดชื่อ Title ซึ่งเป็นชื่อที่ปรากฏบน Title bar ของบราวเซอร์ที่ส่วน HEAD โดยถ้าเราไม่กำหนดอะไรในส่วนนี้เลยก็ไม่มีผลเสียหายแต่อย่างใด
ส่วน BODY
คือ ส่วนที่อยู่ระหว่าง <BODY>…… </BODY> ส่วนนี้จะเป็นที่เราจะใส่ข้อความต่าง ๆ ที่เป็นเนื้อหาของเว็บเพจเข้าไป และเรายังสามารถกำหนดคุณสมบัติพื้นฐานของเว็บเพจ เช่น รูปแบบของพื้นหลัง สีของตัวอักษรธรรมดา และตัวอักษรที่เป็นจุดลิงค์โดยใช้ <BODY>ได้อีกด้วย
กำหนดคุณสมบัติของหน้าเว็บเพจ
เว็บเพจแต่ละหน้าจะมีคุณสมบัติบางประการเฉพาะตัว ซึ่งเราสามารถสังเกตเห็นได้เมื่อเราเปิดเว็บเพจหน้านั้น ๆ และคุณสมบัติดังกล่าวก็มีทั้งที่กำหนดไว้ในส่วน HEAD และส่วน BODY โดยคุณสมบัติพื้นฐานของเว็บเพจแต่ละหน้าประกอบไปด้วย
ชื่อ Title
เมื่อเราเปิดเว็บเพจหรือเว็บไซต์แต่ละแห่งขึ้นมา จะพบว่าที่ Title bar ซึ่งเป็นส่วนที่อยู่ด้านบนสุดของบราวเซอร์จะปรากฏข้อความขึ้นมาแตกต่างกัน โดยส่วนใหญ่จะเป็นชื่อหรือคำจำกัดความของเว็บไซหรือเว็บเพจนั้น ๆ
ข้อความที่เราเห็นเกิดจากการกำหนดด้วย <TITLE> ซึ่งมีรูปแบบการใช้งานดังนี้
ชื่อแท็ก: TITLE
รูปแบบ: <TITLE>ชื่อ TITLE</TITLE>
ตัวอย่างการใช้: <TITLE> ยินดีต้อนรับสู่……บทเรียน TITLE>
ตำแหน่งที่ใช้: ระหว่าง
<HEAD>….</HEAD>
ตั้งชื่อ TITLE ให้เว็บเพจ
เมื่อราต้องการกำหนดชื่อ TITLE ให้กับเว็บเพจ เราสามารถทำได้ง่าย ๆ โดย
1. หลังจากเปิดโปรแกรม Notepad ขึ้นมา พิมพ์ <HTML>, <HEAD> และ<BODY>เข้าไปแล้วก็ให้เราเพิ่ม
<TITLE> เข้าไประหว่าง<HEAD>…</HEAD>
2. พิมพ์ชื่อ TITLE ที่ต้องการเข้าไประหว่าง<TITLE>…</TITLE>
3. เมื่อบันทึกไฟล์เรียบร้อย ให้เราเปิดไฟล์ดังกล่าวขึ้นมาด้วยบราวเซอร์ จะเห็นชื่อ TITLE ปรากฏที่ Title bar
4. เปิดโค้ด HTML ที่ทำให้ปรากฏชื่อ Title โดยคลิกขวาที่พื้นที่แสดงผลของบราวเซอร์
5. คลิกคำสั่ง View Source
6. โค้ดที่ทำให้ปรากฏชื่อ Title คือ <title> ยินดีต้อนรับสู่……บทเรียน </title>
ข้อควรจำ
ในการกำหนดชื่อ Title แม้เราจะไม่สามารถทำให้ชื่อสะดุดตาด้วยการทำให้ตัวอักษรมีลักษณะหนา เอียง หรือถูกขีดเส้นใต้ได้
แต่เราก็สามารถทำให้ชื่อสะดุดตาได้ด้วยการจัดเรียงตัวอักษรให้แปลกไปกว่าปกติดังนี้
<title> ยิ น ดี ต้ อ น รั บ สู่ . . . . . บ ท เ รี ย น </title>
หลังจากที่เราแก้ไขข้อความที่อยู่ระหว่าง <TITLE>….</TITLE> เรียบร้อยแล้วเมื่อเปิดดูบราวเซอร์จะเห็นผลเป็
ทำอย่างไรเมื่อไม่ต้องการตั้งชื่อ Title
การไม่กำหนดชื่อ Title ก็คือ การไม่ใช้ <TITLE> หรือใช้แต่ไม่กำหนดข้อความใด ๆ ระหว่าง <TITLE> เราสามารถเลือกที่จะ
ไม่กำหนดชื่อ Title ได้ โดยที่ไม่ก่อให้เกิดผลกระทบกับเว็บเพจแต่อย่างใด ( ถ้าไม่ได้นำเว็บเพจไปลงทะเบียนกับ Search Engine)
วิธีการทำนั้นมีขั้นตอนดังนี้
1. ไม่ต้องใช้ <TITLE> โดยลบ <TITLE> ออกไป หรือถ้าเป็นเอกสาร HTML ที่สร้างขึ้นมาใหม่ก็ไม่ต้องพิมพ์ <TITLE>
เข้าไประหว่าง <HEAD>…..</HEAD>
2. หลังจากที่แก้ไขเสร็จ และเปิดไฟล์ที่ได้แก้ไขขึ้นมาด้วยบราวเซอร์ (ต้องบันทึกไฟล์ก่อน) จะพบว่าที่ Title bar ได้ปรากฏ
พาธและชื่อไฟล์ HTML ขึ้นมาแทน โดยพาธก็คือ เส้นทางสู่ที่อยู่ของเว็บเพจหรือไดเร็คทอรีที่จะต้องผ่านเมื่อต้องการจะ
เปิดเว็บเพจนั่นเอง
ตั้งชื่อ TITLE ให้เว็บเพจ
เมื่อราต้องการกำหนดชื่อ TITLE ให้กับเว็บเพจ เราสามารถทำได้ง่าย ๆ โดย
1. หลังจากเปิดโปรแกรม Notepad ขึ้นมา พิมพ์ <HTML>, <HEAD> และ<BODY>เข้าไปแล้วก็ให้เราเพิ่ม
<TITLE> เข้าไประหว่าง<HEAD>…</HEAD>
2. พิมพ์ชื่อ TITLE ที่ต้องการเข้าไประหว่าง<TITLE>…</TITLE>
3. เมื่อบันทึกไฟล์เรียบร้อย ให้เราเปิดไฟล์ดังกล่าวขึ้นมาด้วยบราวเซอร์ จะเห็นชื่อ TITLE ปรากฏที่ Title bar
4. เปิดโค้ด HTML ที่ทำให้ปรากฏชื่อ Title โดยคลิกขวาที่พื้นที่แสดงผลของบราวเซอร์
5. คลิกคำสั่ง View Source
6. โค้ดที่ทำให้ปรากฏชื่อ Title คือ <title> ยินดีต้อนรับสู่……บทเรียน </title>
ข้อควรจำ
ในการกำหนดชื่อ Title แม้เราจะไม่สามารถทำให้ชื่อสะดุดตาด้วยการทำให้ตัวอักษรมีลักษณะหนา เอียง หรือถูกขีดเส้นใต้ได้
แต่เราก็สามารถทำให้ชื่อสะดุดตาได้ด้วยการจัดเรียงตัวอักษรให้แปลกไปกว่าปกติดังนี้
<title> ยิ น ดี ต้ อ น รั บ สู่ . . . . . บ ท เ รี ย น </title>
หลังจากที่เราแก้ไขข้อความที่อยู่ระหว่าง <TITLE>….</TITLE> เรียบร้อยแล้วเมื่อเปิดดูบราวเซอร์จะเห็น
ทำอย่างไรเมื่อไม่ต้องการตั้งชื่อ Title
การไม่กำหนดชื่อ Title ก็คือ การไม่ใช้ <TITLE> หรือใช้แต่ไม่กำหนดข้อความใด ๆ ระหว่าง <TITLE> เราสามารถเลือกที่จะไม่กำหนดชื่อ Title ได้ โดยที่ไม่ก่อให้เกิดผลกระทบกับเว็บเพจแต่อย่างใด ( ถ้าไม่ได้นำเว็บเพจไปลงทะเบียนกับ Search Engine) วิธีการทำนั้นมีขั้นตอนดังนี้
1. ไม่ต้องใช้ <TITLE> โดยลบ <TITLE> ออกไป หรือถ้าเป็นเอกสาร HTML ที่สร้างขึ้นมาใหม่ก็ไม่ต้องพิมพ์ <TITLE> เข้าไประหว่าง <HEAD>…..</HEAD>
2. หลังจากที่แก้ไขเสร็จ และเปิดไฟล์ที่ได้แก้ไขขึ้นมาด้วยบราวเซอร์ (ต้องบันทึกไฟล์ก่อน) จะพบว่าที่ Title bar ได้ปรากฏ
พาธและชื่อไฟล์ HTML ขึ้นมาแทน โดยพาธก็คือ เส้นทางสู่ที่อยู่ของเว็บเพจหรือไดเร็คทอรีที่จะต้องผ่านเมื่อต้องการจะเปิดเว็บเพจนั่นเอง
แอตทริบิวต์คืออะไร
แอตทริบิวต์ (Attribute) ของแท็กคือ รูปแบบหรือลักษณะที่กำหนดเข้าไปในแท็กนั้น ๆ โดยจะกำหนดหรือไม่ก็ได้ ขึ้นอยู่กับรูปแบบการใช้งานของแต่ละแท็ก ตัวอย่าง เช่น แอตทริบิวต์ BGCOLOR ซึ่งใช้กำหนดเพิ่มขึ้นไปใน <BODY>เพื่อเปลื่ยนสีพื้นหลังของเว็บเพจ <body bgcolor= “black”>….</body>
ปกติการใช้แอตทริบิวต์จะเกิดผลโดยตรงกับข้อความที่ถูกแท็กนั้นกำหนด แต่บางครั้งก็จะเกิดผลกับเว็บเพจหน้านั้น เช่น แอตทริบิวต์ต่าง ๆ ของ <BODY>
วิธีการใช้แอตทริบิวต์ (Attribute)
หลักในการใช้งานแอตทริบิวต์ของแท็กต่าง ๆ นั้นทำได้ด้วยการใส่ชื่อแอตทริบิวต์ไว้หลังชื่อแท็กในแท็กเปิด โดยจะต้องเว้นช่องว่างระหว่างชื่อแท็ก และชื่อแอตทริบิวต์ด้วยและถ้าหากว่ามีการใช้แอตทรบิวต์ของแท็กนั้นหลายตัว เราก้ต้องเว้นช่องว่างระหว่างแอตทริบิวต์แต่ละตัวด้วยเช่นกันดังตัวอย่าง
รูปแบบ: <ชื่อแท็ก แอตทริบิวต์ตัวที่หนึ่ง แอตทริบิวต์ตัวที่สอง…>…</ชื่อแท็ก>
ตัวอย่างการใช้: <body bgcolor=”black” background=”16h.gif”>…</body>