โครงสร้างคำสั่งของ HTML
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)
กลุ่มคำสั่งควบคุมเฟรม
กลุ่มคำสั่งอื่นๆ
ในบทต่อไปจะเป็นคำสั่งที่อยู่ในส่วนของ Body section ทั้งหมด
เกี่ยวกับบทความนี้
- ระดับความยาก : พื้นฐาน
- คะแนนของบทความนี้ : 12
- สร้างเมื่อ : 16-05-2010
- จำนวนครั้งที่เปิด : 206,782
- เนื้อหาที่เกี่ยวข้อง :
- -
คลิกที่ ใช่เลย! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ
บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (12 เรื่อง)
บทนำ HTML
ที่มาของ HTML และพื้นฐานการใช้งาน HTML ในบทนี้จะเป็นต้องใช้โปรแกรมอย่าง Text editer ถ้าคุณยังไม่เคยใช้งานแนะนำให้อ่านหัวข้อ ลองทำเว็บแบบง่ายๆ ดูก่อนเพื่อเป็นพื้นฐานในการอ่านบทนี้
สร้างเมื่อ : 16-05-2010 9:01 | จำนวนครั้งที่เปิด : 60,311
โครงสร้างคำสั่งของ HTML
ในบทนี้จะเป็นโครงสร้างคำสั่ง(tag) ของ HTML
สร้างเมื่อ : 16-05-2010 10:12 | จำนวนครั้งที่เปิด : 206,782
คำสั่งในการจัดหน้า
ในบทนี้จะเป็นคำสั่ง Tag พื้นฐานของ HTML ในส่วนของ body section ที่ใช้ในการจัดหน้าเช่น จัดย่อหน้า จัดให้ชิดซ้าย ชิดขวา
สร้างเมื่อ : 16-05-2010 8:18 | จำนวนครั้งที่เปิด : 76,126
คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ
ตัวเอียง ตัวหนา บทนี้จะบทคำสั่งที่เกี่ยวกับตัวอักษรทั้งหลายกัน รวมถึงสัญลักษณ์ต่างๆ
สร้างเมื่อ : 16-05-2010 8:18 | จำนวนครั้งที่เปิด : 70,649
เชื่อมต่อเอกสารของเราด้วย hyperlink
เว็บไซต์ของเราประกอบด้วย web page มากมาย ซึ่งเราจะใช้ hyperlink ในการเชื่อมโยงเอกสารเหล่านั้น
สร้างเมื่อ : 16-05-2010 8:19 | จำนวนครั้งที่เปิด : 37,588
แบ่งหน้าจอโดยใช้ Frame
ปรกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frame
สร้างเมื่อ : 16-05-2010 9:59 | จำนวนครั้งที่เปิด : 51,367
Table คำสั่งที่สำคัญสุดในการทำเว็บเพจ
ในหน้าเว็บเพจของเราประกอบด้วยข้อมูลมากมาย จึงจำเป็นที่จะต้องจัดเรียงข้อมูลให้เป็นระเบียบเพื่อให้อ่านงาน และใช้งานพื้นที่ได้คุ้มค่าที่สุด ซึ่งตารางจะช่วยเราได้มาก และนิยมใช้มากในการจัดรูปแบบหน้าตาของเว็บไซต์
สร้างเมื่อ : 16-05-2010 8:23 | จำนวนครั้งที่เปิด : 49,083
list จัดข้อมูลในเว็บเพจให้เป็นระเบียบ
list tag ใช้ในการจัดข้อมูลเป็นชุดๆ หรือเป็นหัวข้อ ซึ่งจะทำให้ข้อมูลอ่านได้ง่ายขึ้น
สร้างเมื่อ : 16-05-2010 8:23 | จำนวนครั้งที่เปิด : 25,801
การสร้างแบบฟอร์ม
เว็บไซต์นั้นต่างจากเอกสารธรรมดา ตรงที่สามารถตอบโต้กับผู้ใช้งานได้ เช่นการใช้ search (ค้นหา) ในเว็บไซต์ hellomyweb.com ช่องรับค่าของ search นั้นก็คือแบบฟอร์มใน html นั่นเอง
สร้างเมื่อ : 16-05-2010 8:37 | จำนวนครั้งที่เปิด : 46,019
การใส่รูปในเว็บเพจ
รูปนั้นสามารถบรรยายรายละเอียดได้ดีกว่าคำพูดมาก ดังนั้นแทบทุกเว็บไซต์จึงมีรูปอยู่เกือบทุกเว็บไซต์ ในบทความนี้เราจะมาใส่รูปในเว็บเพจกัน
สร้างเมื่อ : 16-05-2010 8:24 | จำนวนครั้งที่เปิด : 38,474
การใส่ภาพพื้นหลัง ให้เว็บเพจ
ภาพพื้นหลังเป็นสิ่งที่ทำให้เว็บของเราดูสวยงามแต่ถ้าเราใช้ภาพพื้นหลังที่ไม่ดี อาจส่งผลเสียกับเว็บเราได้ ในบทความนี้จะเป็นตัวอย่างของการใส่พื้นหลังที่ดี และไม่ดี
สร้างเมื่อ : 16-05-2010 10:17 | จำนวนครั้งที่เปิด : 214,065
การใช้งานสีในเว็บเพจ
สีสันนั้นอยู่คู่กับเว็บเพจอยู่แล้ว เพราะนอกจากจะทำให้เว็บดูสวยงามน่าสนใจแล้ว ยังช่วยให้การอธิบายข้อความดีขึ้นอีก ในบทความนี้เราจะมีดูการใช้งานสีกัน
สร้างเมื่อ : 16-05-2010 8:26 | จำนวนครั้งที่เปิด : 31,643
