โครงสร้างคำสั่งของ HTML

การใช้งาน

ในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้

1. คำสั่ง หรือ Tag

Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ

Tag เดี่ยว     เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น

Tag เปิด/ปิด     รูปแบบของ tag นี้จะเป็นแบบ <tag> …. </tag> โดยที่

<tag> เราเรียกว่า tag เปิด

</tag> เราเรียกว่า tag ปิด

2. Attributes

Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = ‘left’> … </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย

3. not case sensitive

หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน

โครงสร้างของหลักของ HTML

โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ

1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง

2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web brower โดยตรง

<html>

<head>

คำสั่งในหัวข้อของ head

</head>

<body>

คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล

</body>

</html>

1. คำสั่งในหัวข้อของ head (Head Section)

Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ

<HEAD>

<TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE>

<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8″>

<META NAME=”Author” CONTENT=”ชื่อผู้พัฒนาเว็บ”>

<META NAME=”KeyWords” CONTENT=”ข้อความ 1, ข้อความ 2 “>

</HEAD>

TITLE

ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser

META

Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการจัดอันดับบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine เช่น google , yahoo)

charset=TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้ charset=TIS-620 หรืออาจเป็น charset=windows-874 ก็ได้ ตอนนี้แนะนำให้ใช้เป็น charset=utf-8

keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คำได้โดยใช้เครื่องหมาย (,) ในการคั่นระหว่างคำ

การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง

2. คำสั่งในส่วนของ (Body Section)

Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ

ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้

กลุ่มคำสั่งเกี่ยวกับการจัดรูปแบบเอกสาร

กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร

กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)

กลุ่มคำสั่งเกี่ยวกับการทำลิงค์

กลุ่มคำสั่งจัดการรูปภาพ

กลุ่มคำสั่งจัดการตาราง (Table)

กลุ่มคำสั่งควบคุมเฟรม

กลุ่มคำสั่งอื่นๆ

1.คำสั่งที่ใช้ในการจัดย่อหน้า
คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง

รูปแบบ p tag

<p> ย่อหน้าที่ 1 </p>

<p> ย่อหน้าที่ 2 </p>

<p> ย่อหน้าที่ 3 </p>

2.คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่
การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง

รูปแบบ br tag

บรรทัดที่ 1 <br>

บรรทัดที่ 2 <br>

บรรทัดที่ 3 <br>

3.คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง
คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1,h2,h3,h4,h5,h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่นขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ

รูปแบบ h tag

<h1>head 1</h1>

<h2>head 2</h2>

<h3>head 3</h3>

<h4>head 4</h4>

<h5>head 5</h5>

<h6>head 6</h6>

4. คำสั่งที่ใช้ในการขึดเส้นคั่น
คำสั่งที่ใช้ในการขีดเส้นคั่น

รูปแบบ hr

<p>เนื้อหาบทที่ 1</p>

<hr>

<p>เนื้อหาบทที่ 2</p>

<hr>

5.คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง
การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = ‘left’) ชิดขวา (align = ‘right’) และ จัดกึ่งกลาง (align = ‘center’)

รูปแบบ align

<h3 align = ‘left’>ชิดซ้าย</h3>

<h3 align = ‘right’>ชิดขวา</h3>

<h3 align = ‘center’>จัดเข้ากลาง</h3>

6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง
bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้

รูปแบบ bgcolor

<body bgcolor =’green’>

<h1> ดูสีพื้นหลัง </h1>

</body>

7. การเขียนคำบรรยาย soure code
ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข

รูปแบบการเขียนคำบรรยาย source code

<!– คำบรรยาย source code –!>

 

ที่มา: hellomyweb.com