.... เป็นคำสั่งอะไร

การเขียนภาษา HTML ด้วยโปรแกรม Notepad

สารบัญ Show

.. เป็นคำสั่งใด
.... เป็นคำสั่งอะไร
คำสั่ง HTML เรียกว่าอะไร
คำสั่งใด เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง

โครงสร้างภาษา 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 ได้ โดยที่ไม่ก่อให้เกิดผลกระทบกับเว็บเพจแต่อย่างใด ( ถ้าไม่ได้นำเว็บเพจไปลงทะเบียนกับ 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>

5. คลิกคำสั่ง View Source

6. โค้ดที่ทำให้ปรากฏชื่อ Title คือ <title> ยินดีต้อนรับสู่……บทเรียน </title>

ข้อควรจำ

หลังจากที่เราแก้ไขข้อความที่อยู่ระหว่าง <TITLE>….</TITLE> เรียบร้อยแล้วเมื่อเปิดดูบราวเซอร์จะเห็น

ทำอย่างไรเมื่อไม่ต้องการตั้งชื่อ Title

การไม่กำหนดชื่อ Title ก็คือ การไม่ใช้ <TITLE> หรือใช้แต่ไม่กำหนดข้อความใด ๆ ระหว่าง <TITLE> เราสามารถเลือกที่จะไม่กำหนดชื่อ Title ได้ โดยที่ไม่ก่อให้เกิดผลกระทบกับเว็บเพจแต่อย่างใด ( ถ้าไม่ได้นำเว็บเพจไปลงทะเบียนกับ Search Engine) วิธีการทำนั้นมีขั้นตอนดังนี้

1. ไม่ต้องใช้ <TITLE> โดยลบ <TITLE> ออกไป หรือถ้าเป็นเอกสาร HTML ที่สร้างขึ้นมาใหม่ก็ไม่ต้องพิมพ์ <TITLE> เข้าไประหว่าง <HEAD>…..</HEAD>

พาธและชื่อไฟล์ HTML ขึ้นมาแทน โดยพาธก็คือ เส้นทางสู่ที่อยู่ของเว็บเพจหรือไดเร็คทอรีที่จะต้องผ่านเมื่อต้องการจะเปิดเว็บเพจนั่นเอง

แอตทริบิวต์คืออะไร

แอตทริบิวต์ (Attribute) ของแท็กคือ รูปแบบหรือลักษณะที่กำหนดเข้าไปในแท็กนั้น ๆ โดยจะกำหนดหรือไม่ก็ได้ ขึ้นอยู่กับรูปแบบการใช้งานของแต่ละแท็ก ตัวอย่าง เช่น แอตทริบิวต์ BGCOLOR ซึ่งใช้กำหนดเพิ่มขึ้นไปใน <BODY>เพื่อเปลื่ยนสีพื้นหลังของเว็บเพจ <body bgcolor= “black”>….</body>

ปกติการใช้แอตทริบิวต์จะเกิดผลโดยตรงกับข้อความที่ถูกแท็กนั้นกำหนด แต่บางครั้งก็จะเกิดผลกับเว็บเพจหน้านั้น เช่น แอตทริบิวต์ต่าง ๆ ของ <BODY>

วิธีการใช้แอตทริบิวต์ (Attribute)

หลักในการใช้งานแอตทริบิวต์ของแท็กต่าง ๆ นั้นทำได้ด้วยการใส่ชื่อแอตทริบิวต์ไว้หลังชื่อแท็กในแท็กเปิด โดยจะต้องเว้นช่องว่างระหว่างชื่อแท็ก และชื่อแอตทริบิวต์ด้วยและถ้าหากว่ามีการใช้แอตทรบิวต์ของแท็กนั้นหลายตัว เราก้ต้องเว้นช่องว่างระหว่างแอตทริบิวต์แต่ละตัวด้วยเช่นกันดังตัวอย่าง

รูปแบบ: <ชื่อแท็ก แอตทริบิวต์ตัวที่หนึ่ง แอตทริบิวต์ตัวที่สอง…>…</ชื่อแท็ก>

ตัวอย่างการใช้: <body bgcolor=”black” background=”16h.gif”>…</body>

.. เป็นคำสั่งใด

คำสั่งหลัก <body> .... </body> เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของเอกสารทั้งหมด ว่าจะให้มีลักษณะอย่างไร โดยส่วนใหญ่รูปแบบของการเขียน HTML จะมีการเปิดและปิด Tag แต่ก็มียกเว้นบ้าง สำหรับ Tag บาง Tag ที่ไม่จำเป็นต้องมีการปิด Tag และมีขั้นตอนการดำเนินการขั้นต้นดังต่อไปนี้