SlideShare a Scribd company logo
โครงสร้างคาสั่งของ 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 ทั้งหมด

More Related Content

Viewers also liked

Mendoza see 4099 ppt.
Mendoza see 4099 ppt.Mendoza see 4099 ppt.
Mendoza see 4099 ppt.
britttaa_
 
ใบงานส่วนประกอบคอมพิวเตอร์
ใบงานส่วนประกอบคอมพิวเตอร์ใบงานส่วนประกอบคอมพิวเตอร์
ใบงานส่วนประกอบคอมพิวเตอร์
bimteach
 
1331 kearny street
1331 kearny street1331 kearny street
1331 kearny street
Sharna Brockett
 
Screencast pp
Screencast ppScreencast pp
Screencast pp
adrian_fisher
 
Krupreeda movie maker
Krupreeda movie makerKrupreeda movie maker
Krupreeda movie maker
ปรีดา ผลเกิด
 
B+tree
B+treeB+tree
B+tree
jasscheema
 
Pipelinig hazardous
Pipelinig hazardousPipelinig hazardous
Pipelinig hazardous
jasscheema
 
Micro air vehicles
Micro air vehiclesMicro air vehicles
Micro air vehicles
Umesh Meher
 
How offset printing works
How offset printing worksHow offset printing works
How offset printing works
Azimuth Print Ltd
 

Viewers also liked (9)

Mendoza see 4099 ppt.
Mendoza see 4099 ppt.Mendoza see 4099 ppt.
Mendoza see 4099 ppt.
 
ใบงานส่วนประกอบคอมพิวเตอร์
ใบงานส่วนประกอบคอมพิวเตอร์ใบงานส่วนประกอบคอมพิวเตอร์
ใบงานส่วนประกอบคอมพิวเตอร์
 
1331 kearny street
1331 kearny street1331 kearny street
1331 kearny street
 
Screencast pp
Screencast ppScreencast pp
Screencast pp
 
Krupreeda movie maker
Krupreeda movie makerKrupreeda movie maker
Krupreeda movie maker
 
B+tree
B+treeB+tree
B+tree
 
Pipelinig hazardous
Pipelinig hazardousPipelinig hazardous
Pipelinig hazardous
 
Micro air vehicles
Micro air vehiclesMicro air vehicles
Micro air vehicles
 
How offset printing works
How offset printing worksHow offset printing works
How offset printing works
 

Similar to 2.โครงสร้างคำสั่งของ html

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmldevilp Nnop
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
การสอนเขียนHtml
การสอนเขียนHtmlการสอนเขียนHtml
การสอนเขียนHtmlchukiat008
 
รายงาน
รายงานรายงาน
รายงานkongdang
 
รายงาน
รายงานรายงาน
รายงานpim1122
 
รายงาน
รายงานรายงาน
รายงานpim1122
 
รายงาน
รายงานรายงาน
รายงานkongdang
 
รายงาน เรื่อง css
รายงาน เรื่อง cssรายงาน เรื่อง css
รายงาน เรื่อง cssnongnan
 
Css คืออะไร
Css คืออะไรCss คืออะไร
Css คืออะไรpim1122
 
Css คืออะไร
Css คืออะไรCss คืออะไร
Css คืออะไรkongdang
 
Css คืออะไร
Css คืออะไรCss คืออะไร
Css คืออะไรkongdang
 
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้นเริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
Khon Kaen University
 
Introduction to XML.
Introduction to XML.Introduction to XML.
Introduction to XML.
Aey Unthika
 
ภาษา xhtml
ภาษา xhtmlภาษา xhtml
ใบความรู้ที่ 2
ใบความรู้ที่ 2ใบความรู้ที่ 2
ใบความรู้ที่ 2POmp POmpomp
 

Similar to 2.โครงสร้างคำสั่งของ html (20)

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
 
1 google meta_tag
1 google meta_tag1 google meta_tag
1 google meta_tag
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
การสอนเขียนHtml
การสอนเขียนHtmlการสอนเขียนHtml
การสอนเขียนHtml
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน เรื่อง css
รายงาน เรื่อง cssรายงาน เรื่อง css
รายงาน เรื่อง css
 
Css คืออะไร
Css คืออะไรCss คืออะไร
Css คืออะไร
 
Css คืออะไร
Css คืออะไรCss คืออะไร
Css คืออะไร
 
Css คืออะไร
Css คืออะไรCss คืออะไร
Css คืออะไร
 
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้นเริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
 
Introduction to XML.
Introduction to XML.Introduction to XML.
Introduction to XML.
 
ภาษา xhtml
ภาษา xhtmlภาษา xhtml
ภาษา xhtml
 
Cai html
Cai htmlCai html
Cai html
 
Html
HtmlHtml
Html
 
ใบความรู้ที่ 2
ใบความรู้ที่ 2ใบความรู้ที่ 2
ใบความรู้ที่ 2
 
Html
HtmlHtml
Html
 

More from bimteach

6.แบ่งหน้าจอโดยใช้ frame html
6.แบ่งหน้าจอโดยใช้ frame html6.แบ่งหน้าจอโดยใช้ frame html
6.แบ่งหน้าจอโดยใช้ frame html
bimteach
 
3.คำสั่งในการจัดหน้า
3.คำสั่งในการจัดหน้า3.คำสั่งในการจัดหน้า
3.คำสั่งในการจัดหน้า
bimteach
 
1.บทนำ html
1.บทนำ html1.บทนำ html
1.บทนำ html
bimteach
 
ตัวอย่างการสร้างตาราง
ตัวอย่างการสร้างตารางตัวอย่างการสร้างตาราง
ตัวอย่างการสร้างตารางbimteach
 
ใบงานส่วนประกอบคอมพิวเตอร์
ใบงานส่วนประกอบคอมพิวเตอร์ใบงานส่วนประกอบคอมพิวเตอร์
ใบงานส่วนประกอบคอมพิวเตอร์
bimteach
 

More from bimteach (6)

6.แบ่งหน้าจอโดยใช้ frame html
6.แบ่งหน้าจอโดยใช้ frame html6.แบ่งหน้าจอโดยใช้ frame html
6.แบ่งหน้าจอโดยใช้ frame html
 
3.คำสั่งในการจัดหน้า
3.คำสั่งในการจัดหน้า3.คำสั่งในการจัดหน้า
3.คำสั่งในการจัดหน้า
 
1.บทนำ html
1.บทนำ html1.บทนำ html
1.บทนำ html
 
ตัวอย่างการสร้างตาราง
ตัวอย่างการสร้างตารางตัวอย่างการสร้างตาราง
ตัวอย่างการสร้างตาราง
 
ใบงานส่วนประกอบคอมพิวเตอร์
ใบงานส่วนประกอบคอมพิวเตอร์ใบงานส่วนประกอบคอมพิวเตอร์
ใบงานส่วนประกอบคอมพิวเตอร์
 
Ulead
UleadUlead
Ulead
 

2.โครงสร้างคำสั่งของ html

  • 1. โครงสร้างคาสั่งของ 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. 2. Attributes Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย 3. not case sensitive หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน โครงสร้างของหลกัของ HTML โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคาสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ
  • 3. 1. head คาสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกั บ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง 2. body คาสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web brower โดยตรง <html> <head> คาสั่งในหัวข้อของ head </head> <body> คาสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล
  • 4. </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"
  • 5. 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 ก็ได้ ตอนนแี้นะนา ให้ใช้เป็น
  • 6. charset=utf-8 keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คาได้โดยใช้เครื่องหมาย (,) ในการคั่นระหว่างคา การพิมพ์ชุดคาสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทาได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้ า หรือช่องว่าง 2. คาสงั่ในส่วนของ (Body Section) Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จานวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทางานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนาเสนอ การป้อนคาสั่งในส่วนนี้ ไม่มีข้อจากัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คาสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ
  • 7. การทาย่อหน้าในชุดคาสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคาสั่งทั้งหมดภายใต้ Tag <BODY> </BODY> และแบ่งกลุ่มคาสั่งได้ดังนี้ กลุ่มคาสั่งเกี่ยวกับการจัดรูปแบบเอกสาร กลุ่มคาสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร กลุ่มคาสั่งการทาเอกสารแบบรายการ (List) กลุ่มคาสั่งเกี่ยวกับการทาลิงค์ กลุ่มคาสั่งจัดการรูปภาพ กลุ่มคาสั่งจัดการตาราง (Table) กลุ่มคาสั่งควบคุมเฟรม กลุ่มคาสั่งอื่นๆ