SlideShare a Scribd company logo
1 of 13
Download to read offline
แนวคิด
เนื้อหาในหน่วยนึ๋จะกล่าวถึง ความรู้ทั่วไปเกี่ยวกับภาษาเอชทีเอ็มแอล โครงสร้างโดยทั่วไป
ของเอกสารเอชทีเอ็มแอล วิธีการสร้างเว็บเพจเบื้องต้น และคาสั่งเบื้องต้นลาหรับการสร้างเว็บเพจ
เมื่อทาการศึกษาเนื้อหาในหน่วยนื้แล้ว จะสามารถทาการออกแบบและสร้างเว็บเพจอย่างง่าย โดยใช้
ภาษาเอชทีเอ็มแอลได้

สาระการเรียนรู้
1.
2.
3.
4.

ภาษาเอชทีเอ็มแอล
โครงสร้างของเอกสารเอชทีเอ็มแอล
การสร้างเว็บเพจเบื้องต้น
คาสั่งเบื้องต้นสาหรับการสร้างเว็บเพจ

ผลการเรียนรู้ที่คาดหวัง
1.
2.
3.
4.
5.

อธิบายลักษณะโดยทั่วไปของภาษาเอชทีเอ็มแอลได้
สามารถบอกโครงสร้างของเอกสารเอชทีเอ็มแอล
สามารถบอกขั้นตอนในการออกแบบเว็บเพจเบื้องต้น
สามารถบอกคาสั่งเบื้องต้นสาหรับการสร้างเว็บเพจ
มีทักษะในการสร้างเว็บเพจโดยการใช้คาสั่งเบื้องต้น

ภาษาเอชทีเอ็มแอล
เอชทีเอ็มแอล (HTML, Hyper Text Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง
ที่มีโครงสร้างการเขียนโดยอาศัยป้ายระบุ (Tag) หรือคาสั่งสาหรับควบคุมการแสดงผลข้อความ รูปภาพ หรือ
วัตถุอื่นผ่านโปรแกรมเว็บเบราว์เซอร์ ซึ่งป้ายระบุ หรือคาสั่งแต่ละคาสั่งนั้น อาจจะมีส่วนขยายที่ใช้สาหรับ
บอกคุณลักษณะพิเศษ (Attribute) สาหรับระบุหรือควบคุมลักษณะ การแสดงผลเพิ่มเติมได้โดยแต่ละคาสั่ง
จะมีแตกต่างกันออกไป

ป้ายระบุ
ป้ายระบุ (Tag) หรือคาสั่งเป็นลักษณะเฉพาะของภาษาเอชทีเอ็มแอล (HTML) เปรียบเสมือนคาสั่ง
สาหรับกาหนดรูปแบบการแสดงผล โดยป้ายระบุ หรือคาสั่งนั้น จะอยู่ภายใต้เครื่องหมาย น้อยกว่า (<) และ
เครื่องหมายมากกว่า (>) โดยป้ายระบุหรือคาสั่งของภาษาเอชทีเอ็มแอล (HTML) นั้นแบ่งเป็น 2 ประเภทคือ
ป้ายระบุเดี่ยว หมายถึงป้ายระบุที่เป็นคาสั่งเดี่ยวสาหรับควบคุมการแสดงผล เช่นคาสั่ง การขึ้น
บรรทัดใหม่ <BR> เป็นต้น
ป้ายระบุเปิด/ปิด หมายถึงป้ายระบุที่เป็นคาสั่งสาหรับควบคุมการแสดงผลเป็นกลุ่ม
เช่นกาหนดให้กลุ่มอักษรเป็นตัวหนา <B>……….</B> หรือตัวเอียง <1>……….</1> เป็นต้น
โดยใช้เครื่องหมายทับ (Slash) นาหน้าคาสั่งที่ต้องการจบลักษณะการแสดงผลที่ประกอบไปด้วย
ป้าย โดยกลุ่มของตัวอักษรที่ต้องการควบคุมจะอยู่ระหว่างป้ายระบุ เปิด และป้ายระบุปิด

ลักษณะพิเศษ
ลักษณะพิเศษ (Attributes) เป็นส่วนที่ทาหน้าที่ขยายความสามารถของป้ายระบุ (Tag) หรือคาสั่ง
โดยการบอกลักษณะพิเศษเหล่านี้จะถูกระบุภายในเครื่องหมายมากกว่าน้อยกว่า ในส่วนของป้ายระบุเปิดหรือ
ป้ายระบุเดี่ยว โดยคาสั่งของภาษาเอชทีเอ็มแอล (HTML) แต่ละคาสั่ง จะมีการบอกลักษณะพิเศษ ที่แตกต่าง
กันไปและมีจานวนไม่เท่ากัน การระบุลักษณะพิเศษนั้น สามารถกาหนดได้มากกว่า 1 ลักษณะ โดยใช้ช่องว่าง
เป็นตัวแยกแต่ละลักษณะพิเศษ ตัวอย่างเช่น ลักษณะพิเศษ ของป้ายระบุ หรือคาสั่งที่เกี่ยวกับการจัดย่อหน้า
คือคาสั่ง <p> ประกอบด้วย ลักษณะพิเศษดังนี้คือ
ALIGN = "Left/Right/Center/Justify"

สามารถเขียนคาสั่งสาหรับการจัดย่อหน้าได้ดังนี้
<p ALIGN = "Left" > การจัดย่อหน้าชิดซ้าย </P> หรือ
<p ALIGN = "Right" > การจัดย่อหน้าชิดขวา </P> หรือ
<p ALIGN = "Center" > การจัดย่อหน้าให้อย่กึ่งกลางหน้าเอกสาร </P>

โครงสร้างของเอกสารเอชทีเรมแอล
โครงสร้างของเอกสารเอชทีเอ็มแอลนั้นจะประกอบด้วยส่วนประกอบ 2 ส่วนคือ ส่วนหัวของ
เอกสาร (Head Section) และส่วนเนื้อหาของเอกสาร (Body Section) โดยส่วนหัวของเอกสารจะอยู่
ภายใต้ป้ายระบุหรือคาสั่ง <HEAD>…</HEAD> และส่วนเนื้อหาของเอกสารจะอยู่ภายใต้ป้ายระบุหรือคาสั่ง
<BODY>…</BODY> โดยทั้งสองส่วนจะอยู่ภายในป้ายระบุหรือคาสั่ง <HTML>…</HTML> ซึ่งเป็นส่วนที่
ใช้สาหรับบอกว่าเอกสารนื้เป็นเอกสารเอชทีเอ็มแอล

<HTML>
<HEAD>
่
<คำสั่งที่อยูในส่ วนหัวของเอกสำร>
</HEAD>
<BODY>
่
<คำสังที่อยูในส่ วนเนื้อหำของเอกสำร>
่
</BODY>
</HTML>

ส่วนหัวเรื่องของเอกสารเว็บ

ส่วนหัวเรื่องของเอกสารเว็บ (Head Section) เป็นส่วนที่ใช้สาหรับอธิบายข้อมูลเฉพาะที่เกี่ยวกับ
เอกสารเว็บนั้นเช่น ชื่อเรื่องของเอกสารเว็บ (Title) ชื่อของผู้จัดทาเว็บ (Author) คาสาคัญหรือคีย์เวิร์ด
(Keyword) เพื่อใช้สาหรับให้ผู้ใช้งานคนอื่นค้นหาข้อมูลเกี่ยวกับเว็บเพจที่ได้ทาการสร้างขึ้นบนระบบเครือข่าย
อินเทอร์เน็ต โดยป้ายระบุ (Tag) หรือคาสั่งที่สาคัญคือ
- META เป็นส่วนที่ไม่ปรากฏผลบนโปรแกรมเว็บบราว์เซอร์ ส่วนนื้จะเป็นส่วนที่ใช้ในการทาคลัง
บัญชีเว็บเพจ สาหรับใช้ในการสืบค้นเว็บเพจ (Search Engine) จากผู้อื่น
- TITLE ใช้สาหรับบอกชื่อเรื่องของเอกสารเว็บ โดยข้อความนี้จะปรากฏที่แถวชื่อด้านบนสุดของ
โปรแกรมเว็บเบราว์เซอร์ โดยข้อความนื้ควรครอบคลุมถึงเนื้อหาทั้งหมดของเอกสารเว็บ
<HEAD>

<META NAME ="Author" CONTENT ="ชื่อผู้สร้างเว็บเพจ,,>
<META NAME ="KeyWords" CONTENT ="คาสาคัญ 1, คาสาคัญ 2, ...">
<TITLE> ข้อความที่ใช้เป็นข้อความหัวเรื่องของเอกสาร </TITLE>
</HEAD>

การพิมพ์ชุดคาสั่งของภาษาเอชทีเอ็มแอล (HTML) สามารถใช้ได้ทั้งตัวอักษรพิมพ์เล็กและตัวอักษร
พิมพ์ใหญ่ หรือผสมกันทั้งสองแบบ และสามารถใช้ย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถทาได้
อย่างอิสระ โปรแกรมเว็บเบราว์เชอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัด ย่อหน้า หรือช่องว่าง แต่จะเป็น
ประโยชน์สาหรับการอ่านคาสั่งของผู้สร้างเอกสารเว็บ และประโยชน์ทาการพัฒนาเว็บเพจ
ส่วนเนื้อหาเอกสารเว็บ
ส่วนเนื้อหาเอกสาร (Body Section) เป็นส่วนเนื้อหาหลักของเอกสารเว็บ โดยส่วนนื้จะเป็นส่วนที่
นาไปแสดงผลบนโปรแกรมเว็บเบราว์เซอร์ ซึ่งการแสดงผลนั้นจะใช้ป้ายระบุหรือคาสั่งเป็นตัวควบคุมรูปแบบ
การแสดงผล ไม่ว่าจะเป็นข้อมูลที่เป็นข้อความ รูปภาพ หรือ เสียง
การเขียนป้ายระบุ (Tag) หรือคาสั่ง จะไม่มีข้อจากัดสามารถป้อนคาสั่งติดกันหลายคาสั่งในหนึ่ง
บรรทัด หรือจะมีเพียง 1 บรรทัดต่อ 1 คาสั่งก็ได้ โดยทั่วไปแล้วจะยึดหลักการจัดวางที่ทาให้ผู้ที่สร้าง
เอกสารเว็บนั้นสามารถทาความเข้าใจได้ง่าย เช่นทาการจัดย่อหน้าในชุดคาสั่งที่เกี่ยวข้องกันให้อยู่ในย่อหน้า
ระดับเดียวกัน ซึ่งคาสั่งที่ใข้กาหนดรูปแบบการแสดงผลทั้งหมดที่เป็นส่วนของเนื้อหาของเอกสารจะอยู่ระหว่าง
ป้ายระบุ (Tag) หรือคาสั่ง <BODY>...</BODY> สามารถแบ่งกลุ่มคาสั่งได้ตังนื้
- กลุ่มคาสั่งการจัดการย่อหน้า
- กลุ่มคาสั่งจัดควบคุมรูปแบบตัวอักษร
- กลุ่มคาสั่งการจัดทาเอกสารแบบรายการ
- กลุ่มคาสั่งการเชื่อมโยงเอกสาร
- กลุ่มคาสั่งจัดการรูปภาพ
- กลุ่มคาสั่งจัดการตาราง
- กลุ่มคาสั่งการแบ่งส่วนของเอกสาร
- กลุ่มคาสั่งอื่นๆ

รูปที่ 3.1 แสดงถึงส่ ว นประกอบของโครงสร้ างภาษาเอขทีเ อ็ มแอล

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

เมนู (หน้าหลัก)
Index.html

ความเป็นมาชอง
ระบบคอมพิวเตอร์
history.html

ระบบฮาร์ดแวร์
hardware.html

ระบบซอฟแวร์
software.html

บุคลากรด้าน
คอมพิวเตอร์
ppl.html

อุปกรณ์อินพุต
Input.html

อุปกรณ์เอ้าพุต
output.html

ระบบปฏิบัตการ
ิ
os.html

โปรแกรมประบุกต์
application.html

รูปที่ 3.2 แสดงตัว อย่ างการจั ดแบ่ งเนื้ อหาสาหรั บการนาเสนอข้ อมูล เกี่ยวกับ ความรู้ทั่ว ไป
เกี่ยวกับคอมพิว เตอร์

คาสั่งเบื้องต้นสาหรบการสร้างเว็บเพจ
คาสั่งเริ่มต้น
คาสั่งเริ่มต้นที่ใช้สาหรับการบอกว่าเอกสารนั้น คือเอกสารเว็บที่เป็นภาษาเอชทีเอ็มแอล คือคาสั่ง
<HTML> และใช้คาสั่ง </HTML> เป็นการบอกจุดสิ้นสุดของเอกสารเอชทีเอ็มแอล โดยคาสั่งนี้จะไม่
แสดงผลในโปรแกรมเว็บเบราว์เซอร์ แต่เขียนเพื่อบอกให้ทราบว่าเอกสารนี้เป็นเอกสารของภาษาเอชทีเอ็มแอล
(HTML) กล่าวคือข้อความที่อยู่ระหว่างคาสั่ง <HTML> และ </HTML> เป็นเอกสารที่เป็นภาษา
เอชทีเอ็มแอลนั้นเอง
<HTML> (ภาษาเอชทีเอ็มแอล) </HTML>

คาสั่งกาหนดส่วนหัวของเอกสารเว็บ
ดังที่กล่าวมาแล้วว่าเอกสารเอชทีเอ็มแอลนั้น แบ่งออกเป็น 2 ส่วน คือส่วนหัวเรื่องของเอกสารเว็บ
และส่วนเนี้อหาเอกสารเว็บ โดยคาสั่งที่ใช้บอกส่วนหัวเรื่องของเอกสารเว็บนั้น คือคาสั่ง <HEAD>...</HEAD>
ซึ่งคาสั่งที่อยู่ภายในส่วนหัวของเอกสารเว็บนั้น เป็นคาสั่งที่ใช้กาหนดข้อความที่ใช้เป็นชื่อเรื่องของเอกสาร
เอชทีเอ็มแอล และคาสั่งที่ใช้สาหรับบอกคาสาคัญ (Keyword) ของเอกสารเอชทีเอ็มแอล เพื่อใช้ในการ
ค้นหาเอกสารนั้นบนระบบเครือข่ายอินเทอร์เน็ต
<HEAD> (คาสั่งย่อยสาหรับส่วนหัวของเอกสาร) </HEaD>

คาสั่งกาหนดข้อความในส่วนหัวของโปรแกรมเว็บเบราว์เซอร์
คาสั่งที่ใช้สาหรับกาหนดข้อความที่จะปรากฏบนส่วนหัวของโปรแกรมเว็บเบราว์เชอร์ คือคาสั่ง
<TITLE>...</TITLE> หากต้องการให้ข้อความใดปรากฏที่ตาแหน่งส่วนหัวของโปรแกรมเว็บเบราว์เซอร์ ทาได้
โดยเอาข้อความที่ต้องการแสดงผลนั้นใส่เข้าไประหว่างคาสั่งเปิด <TITLE> และคาสั่งปิด </TITLE> ซึ่งคาสั่งนี้
จะอยู่ในส่วนหัวของเอกสารเว็บ
<TITLE> (ข้อความที่ต้องการให้ปรากฏที่ส่วนหัวของโปรแกรมเว็บเบราว์เชอร์) </TITLE>

คาสั่งกาหนดส่วนเนื้อหาของเอกสารเว็บ
คาสั่งที่ใช้กาหนดส่วนที่เป็นเนี้อหาของเอกสารเว็บคือ คาสั่ง <BODY>...</BODY> ซึ่งใช้ เป็นคาสั่ง
สาหรับบอกแก่โปรแกรมเว็บเบราว์เซอร์ว่า ส่วนที่อยู่ระหว่างคาสั่งนี้เป็นส่วนที่จะนาไปแสดงผลบนโปรแกรม
เว็บเบราว์เซอร์ ซึ่งอาจประกอบไปด้วย ตัวอักษร รูปภาพ เป็นต้น
<BODY> ... </BODY>
ตัวอย่างที่ 3.1 ตัวอย่างเอกสารเอชทีเอ็มแอล

เอกสาร HTML เอกสารแรก

รูปที่ 3.3 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.1 โดยใช้โ ปรแกรมเว็บ เบราวเซอร์
<!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.1 -->
<HTML>
<HEAD>
<TITLE> ชื่อเรื่องของเอกสาร HTML </TITLE>
</HEAD>
<BODY>
เอกสาร HTML เอกสารแรก
</BODY>
</HTML>

การกาหนดสีของพื้นหลังและสีของตัวอักษร
การกาหนดสีพื้นหลังและการกาหนดสีของตัวอักษรของเอกสารเว็บนั้น สามารถทาได้โดยกาหนดเป็น
การอธิบายลักษณะพิเศษ (Attribute) ของคาสั่ง <BODY> โดยมีวิธีการกาหนดสีของพื้นหลังของเอกสารและสี
ของตัวอักษรในเอกสารได้ดังนี้
การกาหนดสีของพื้นหลังเอกสาร
การกาหนดสีพื้นหลังของเอกสารเว็บหรือเอกสารเอชทีเอ็มแอล นั้นสามารถทาได้โดยใช้ การอธิบาย
ลักษณะพิเศษ (Attribute) คือ BGCOLOR ซึ่งการกาหนดสีพื้นของเอกสารเอชทีเอ็มแอลนั้น สามารถกาหนด
ภายใต้คาสั่งเปิดของคาสั่ง <BODY> โดยการกาหนดสีพื้นหลังของ เอกสารเอชทีเอ็มแอลสามารถแสดงได้ดังนี้
<BODY BGCOLOR = สีที่ต้องการ> จะมี "สีที่ต้องการ" หรือไม่มีเครื่องหมาย " "
ก็ได้
</BODY>
โดยสีที่ต้องการกาหนดนี้ สามารถทาการกาหนดได้ 2 วิธีคือ
■ ระบุชื่อของสีที่ด้องการ เช่น Blue, Green, Red, Yellow เป็นต้น
ตัวอย่างที่ 3.2 การกาหนดสีพื้นหลังของเอกสารเอชทีเอ็มแอล โดยการระบุชื่อ
<!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.2 -->
<HTML>
<HEAD>
<TITLE> การกาหนดสีพื้นหลังโดยการกาหนดสี </TITLE>
</HEAD>
<BODYBGCOLOR = Yellow>
การกาหนดสีพื้นหลังของเอกสาร โดยการกาหนดเป็นสีเหลือง
</BODY>
</HTML>
การกาหนดสีพื้นหลังของเอกสาร โดยการกาหนดเป็นสีเหลือง

รูปที่ 3.4 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.2 โดยไข้โ ปรแกรมเว็บเบราว์เซอร์
■ ระบุตัวเลข โดยใช้การกาหนดค่าสีในระบบเลขฐาน 16 จานวน 6 หลักสาหรับการ ผสมสี
(RGB) โดยค่าตัวเลข 2 หลักแรกหมายถึงระดับของสีแดง ตัวเลข 2 หลัก ต่อมาหมายถึงระดับของสีเขียว และ
ตัวเลข 2 หลักสดท้ายหมายถึงระดับของสีน้าเงิน
ตัวอย่างที่ 3.3 การกาหนดสีพื้นหลังของเอกสารเอชทีเอ็มแอล โดยการระบุตัวเลข
<!— คาลังภาษาเอชทีเอ็มนอลสาหรับตัวอย่างที 3.3 —>
<HTML>
<HEAD>
<TITLE>การกาหนดสีพื้นหลังของเอกสาร โดยการระบุตัวเลข</TITLE>
</HEAD>
<BODY BGCOLOR = #OOFFFF>
การกาหนดสีพื้นหลังของเอกสาร โดยการระบุตัวเลขเปีน OOFFFF
</BODY>
</HTML>
การกาหนดสีพื้นหลังของเอกสาร โดยการระบุตัวเลขเป็น 00FFFF

รูปที่ 3.5 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.3 โดยใช้โ ปรแกรมเว็บเบราวเซอร์
การกาหนดสีของตัวอักษร
การกาหนดสีของตัวอักษรทั้งหมดของเอกสารเว็บหรือเอกสารเอชทีเอ็มแอลนั้น สามารถ ทาไดโดยใช้
การอธิบายลักษณะพิเศษ (Attribute) คือ TEXT ซึ่งกาหนดอยู่ที่ตาแหน่งคาสั่งเปิด ของคาสั่ง <BODY>
รูปแบบของคาสั่งสาหรับการกาหนดสีของเอกสารเว็บ สามารถทาได้ดงนี้
ั
<BOBY TEXT = สีที่ต้องการ > จะมีเครื่องหมาย “
............
</BOBY>

” หรือไม่มีก็ได้

โดยสีที่ต้องการกาหนดนี้ สามารถทาการกาหนดได้ 2 วิธีคือ
1. ระบุชื่อของสีที่ด้องการ เช่น Blue, Green, Red, Yellow เป็นด้น
2. ระบุตัวเลข โดยใช้การกาหนดค่าสีในระบบเลขฐาน 16

ตัวอย่างที่ 3.4 การกาหนดสีตัวอักษรของเอกสารเอชทีเอ็มแอล โดยการระบุชื่อ
<!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.4 -->
<HTML>
<HEAD>
<TITLE>การกาหนดสีของตัวอักษร โดยการกาหนดสี</TITLE>
</HEAD>
<BODY TEXT = Blue>
การกาหนดสีของตัวอักษร โดยการกาหนดให้เป็นสีน้าเงิน
</BODY>
</HTML>

การกาหนดสีของตัวอักษร โดยการกาหนดให้เป็นสีน้าเงิน

รูปที่ 3.6 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.4 โดยไข้โ ปรแกรมเว็บเบราว์เชอร์

ตัวอย่างที่ 3.5 การกาหนดสีตัวอักษรของเอกสารเอชทีเอ็มแอล โดยการระบุตัวเลข
<!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.5 -->
<HTML>
<HEAD>
<TITLE>การกาหนดสีของตัวอักษร โดยการระบุรหัสสี</TITLE>
</HEAD>
<BODY TEXT = #FFOOFF>
การกาหนดสีของตัวอักษร โดยการระบุรหัสสีเป็น FFOOFF
</BODY>
</HTML>

การกาหนดสีของตัวอักษร โดยการระบุรหัสสีเป็น #FF00FF

รูปที่ 3.7 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.5 โดยใช้โ ปรแกรมเว็บเบราว์เชอร์

ตัวอย่างที่ 3.6 การกาหนดสีพื้นหลังและสีตัวอักษรของเอกสารเอชทีเอ็มแอล
<!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.6 -->
<HTML>
<HEAD>
<TITLE>การกาหนดสีของพื้นหลังและตัวอักษรของเอกสาร</TITLE>
</HEAD>
<BODY BGCOLOR= yellow TEXT = #FFOOFF>
การกาหนดสีพื้นหลังและตัวอักษร
</BODY>
</HTML>
การกาหนดสีพื้นหลังและตัวอักษร

รูปที่ 3.8 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.6 โดยใช้ โ ปรแกรมเว็บเบราว์เชอร์

More Related Content

What's hot

07 ใบเนื้อหา หน่วยที่ 3
07 ใบเนื้อหา หน่วยที่ 307 ใบเนื้อหา หน่วยที่ 3
07 ใบเนื้อหา หน่วยที่ 3Natchanon Srinuan
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwSamorn Tara
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power pointkeeree samerpark
 
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์sommat
 
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์การออกแบบเว็บไซต์
การออกแบบเว็บไซต์Ta'May Pimkanok
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2pom_2555
 
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจKrunicky Rattanapachai
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบJiJee Pj
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dreamsommat
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power pointNooCake Prommali
 
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of EducationDesigning of Web-Based Instruction of Education
Designing of Web-Based Instruction of Educationkhon Kaen University
 

What's hot (17)

07 ใบเนื้อหา หน่วยที่ 3
07 ใบเนื้อหา หน่วยที่ 307 ใบเนื้อหา หน่วยที่ 3
07 ใบเนื้อหา หน่วยที่ 3
 
1 html
1 html1 html
1 html
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
 
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์การออกแบบเว็บไซต์
การออกแบบเว็บไซต์
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
 
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
คู่มือ Word
คู่มือ Wordคู่มือ Word
คู่มือ Word
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบ
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dream
 
ใบความที่ 3
ใบความที่ 3ใบความที่ 3
ใบความที่ 3
 
แบบร่างโครงงาน112
แบบร่างโครงงาน112แบบร่างโครงงาน112
แบบร่างโครงงาน112
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of EducationDesigning of Web-Based Instruction of Education
Designing of Web-Based Instruction of Education
 

Similar to หน่วยที่ 03

คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา HtmlRungnapha Naka
 
Web dreamcs5
Web dreamcs5Web dreamcs5
Web dreamcs5kruood
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์chiton2535
 
Word2007
Word2007Word2007
Word2007Nit Noi
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
Microsoft office word 2007
Microsoft office word 2007Microsoft office word 2007
Microsoft office word 2007Wee Jay
 
Microsoft office word 2007
Microsoft office word 2007Microsoft office word 2007
Microsoft office word 2007Wee Jay
 
Html wordpress
Html wordpressHtml wordpress
Html wordpressungpao
 
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlSmo Tara
 
การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8doraemonbookie
 
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8คู่มือ Dreamwever 8
คู่มือ Dreamwever 8duangnapa27
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 

Similar to หน่วยที่ 03 (20)

Pai01
Pai01Pai01
Pai01
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา Html
 
การใช้งาน Ms office 2010
การใช้งาน Ms office 2010การใช้งาน Ms office 2010
การใช้งาน Ms office 2010
 
Web dreamcs5
Web dreamcs5Web dreamcs5
Web dreamcs5
 
งานคอมพิวเตอร์ธุรกิจ 1
งานคอมพิวเตอร์ธุรกิจ 1งานคอมพิวเตอร์ธุรกิจ 1
งานคอมพิวเตอร์ธุรกิจ 1
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
 
Lernning 13
Lernning 13Lernning 13
Lernning 13
 
Word2007
Word2007Word2007
Word2007
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
Microsoft office word 2007
Microsoft office word 2007Microsoft office word 2007
Microsoft office word 2007
 
Microsoft office word 2007
Microsoft office word 2007Microsoft office word 2007
Microsoft office word 2007
 
Html wordpress
Html wordpressHtml wordpress
Html wordpress
 
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
 
การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8
 
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
 
Word2007
Word2007Word2007
Word2007
 
Ch1
Ch1Ch1
Ch1
 
Chapter4
Chapter4Chapter4
Chapter4
 
Website
WebsiteWebsite
Website
 

หน่วยที่ 03

  • 1. แนวคิด เนื้อหาในหน่วยนึ๋จะกล่าวถึง ความรู้ทั่วไปเกี่ยวกับภาษาเอชทีเอ็มแอล โครงสร้างโดยทั่วไป ของเอกสารเอชทีเอ็มแอล วิธีการสร้างเว็บเพจเบื้องต้น และคาสั่งเบื้องต้นลาหรับการสร้างเว็บเพจ เมื่อทาการศึกษาเนื้อหาในหน่วยนื้แล้ว จะสามารถทาการออกแบบและสร้างเว็บเพจอย่างง่าย โดยใช้ ภาษาเอชทีเอ็มแอลได้ สาระการเรียนรู้ 1. 2. 3. 4. ภาษาเอชทีเอ็มแอล โครงสร้างของเอกสารเอชทีเอ็มแอล การสร้างเว็บเพจเบื้องต้น คาสั่งเบื้องต้นสาหรับการสร้างเว็บเพจ ผลการเรียนรู้ที่คาดหวัง 1. 2. 3. 4. 5. อธิบายลักษณะโดยทั่วไปของภาษาเอชทีเอ็มแอลได้ สามารถบอกโครงสร้างของเอกสารเอชทีเอ็มแอล สามารถบอกขั้นตอนในการออกแบบเว็บเพจเบื้องต้น สามารถบอกคาสั่งเบื้องต้นสาหรับการสร้างเว็บเพจ มีทักษะในการสร้างเว็บเพจโดยการใช้คาสั่งเบื้องต้น ภาษาเอชทีเอ็มแอล
  • 2. เอชทีเอ็มแอล (HTML, Hyper Text Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยป้ายระบุ (Tag) หรือคาสั่งสาหรับควบคุมการแสดงผลข้อความ รูปภาพ หรือ วัตถุอื่นผ่านโปรแกรมเว็บเบราว์เซอร์ ซึ่งป้ายระบุ หรือคาสั่งแต่ละคาสั่งนั้น อาจจะมีส่วนขยายที่ใช้สาหรับ บอกคุณลักษณะพิเศษ (Attribute) สาหรับระบุหรือควบคุมลักษณะ การแสดงผลเพิ่มเติมได้โดยแต่ละคาสั่ง จะมีแตกต่างกันออกไป ป้ายระบุ ป้ายระบุ (Tag) หรือคาสั่งเป็นลักษณะเฉพาะของภาษาเอชทีเอ็มแอล (HTML) เปรียบเสมือนคาสั่ง สาหรับกาหนดรูปแบบการแสดงผล โดยป้ายระบุ หรือคาสั่งนั้น จะอยู่ภายใต้เครื่องหมาย น้อยกว่า (<) และ เครื่องหมายมากกว่า (>) โดยป้ายระบุหรือคาสั่งของภาษาเอชทีเอ็มแอล (HTML) นั้นแบ่งเป็น 2 ประเภทคือ ป้ายระบุเดี่ยว หมายถึงป้ายระบุที่เป็นคาสั่งเดี่ยวสาหรับควบคุมการแสดงผล เช่นคาสั่ง การขึ้น บรรทัดใหม่ <BR> เป็นต้น ป้ายระบุเปิด/ปิด หมายถึงป้ายระบุที่เป็นคาสั่งสาหรับควบคุมการแสดงผลเป็นกลุ่ม เช่นกาหนดให้กลุ่มอักษรเป็นตัวหนา <B>……….</B> หรือตัวเอียง <1>……….</1> เป็นต้น โดยใช้เครื่องหมายทับ (Slash) นาหน้าคาสั่งที่ต้องการจบลักษณะการแสดงผลที่ประกอบไปด้วย ป้าย โดยกลุ่มของตัวอักษรที่ต้องการควบคุมจะอยู่ระหว่างป้ายระบุ เปิด และป้ายระบุปิด ลักษณะพิเศษ ลักษณะพิเศษ (Attributes) เป็นส่วนที่ทาหน้าที่ขยายความสามารถของป้ายระบุ (Tag) หรือคาสั่ง โดยการบอกลักษณะพิเศษเหล่านี้จะถูกระบุภายในเครื่องหมายมากกว่าน้อยกว่า ในส่วนของป้ายระบุเปิดหรือ ป้ายระบุเดี่ยว โดยคาสั่งของภาษาเอชทีเอ็มแอล (HTML) แต่ละคาสั่ง จะมีการบอกลักษณะพิเศษ ที่แตกต่าง กันไปและมีจานวนไม่เท่ากัน การระบุลักษณะพิเศษนั้น สามารถกาหนดได้มากกว่า 1 ลักษณะ โดยใช้ช่องว่าง เป็นตัวแยกแต่ละลักษณะพิเศษ ตัวอย่างเช่น ลักษณะพิเศษ ของป้ายระบุ หรือคาสั่งที่เกี่ยวกับการจัดย่อหน้า คือคาสั่ง <p> ประกอบด้วย ลักษณะพิเศษดังนี้คือ ALIGN = "Left/Right/Center/Justify" สามารถเขียนคาสั่งสาหรับการจัดย่อหน้าได้ดังนี้ <p ALIGN = "Left" > การจัดย่อหน้าชิดซ้าย </P> หรือ <p ALIGN = "Right" > การจัดย่อหน้าชิดขวา </P> หรือ <p ALIGN = "Center" > การจัดย่อหน้าให้อย่กึ่งกลางหน้าเอกสาร </P> โครงสร้างของเอกสารเอชทีเรมแอล
  • 3. โครงสร้างของเอกสารเอชทีเอ็มแอลนั้นจะประกอบด้วยส่วนประกอบ 2 ส่วนคือ ส่วนหัวของ เอกสาร (Head Section) และส่วนเนื้อหาของเอกสาร (Body Section) โดยส่วนหัวของเอกสารจะอยู่ ภายใต้ป้ายระบุหรือคาสั่ง <HEAD>…</HEAD> และส่วนเนื้อหาของเอกสารจะอยู่ภายใต้ป้ายระบุหรือคาสั่ง <BODY>…</BODY> โดยทั้งสองส่วนจะอยู่ภายในป้ายระบุหรือคาสั่ง <HTML>…</HTML> ซึ่งเป็นส่วนที่ ใช้สาหรับบอกว่าเอกสารนื้เป็นเอกสารเอชทีเอ็มแอล <HTML> <HEAD> ่ <คำสั่งที่อยูในส่ วนหัวของเอกสำร> </HEAD> <BODY> ่ <คำสังที่อยูในส่ วนเนื้อหำของเอกสำร> ่ </BODY> </HTML> ส่วนหัวเรื่องของเอกสารเว็บ ส่วนหัวเรื่องของเอกสารเว็บ (Head Section) เป็นส่วนที่ใช้สาหรับอธิบายข้อมูลเฉพาะที่เกี่ยวกับ เอกสารเว็บนั้นเช่น ชื่อเรื่องของเอกสารเว็บ (Title) ชื่อของผู้จัดทาเว็บ (Author) คาสาคัญหรือคีย์เวิร์ด (Keyword) เพื่อใช้สาหรับให้ผู้ใช้งานคนอื่นค้นหาข้อมูลเกี่ยวกับเว็บเพจที่ได้ทาการสร้างขึ้นบนระบบเครือข่าย อินเทอร์เน็ต โดยป้ายระบุ (Tag) หรือคาสั่งที่สาคัญคือ - META เป็นส่วนที่ไม่ปรากฏผลบนโปรแกรมเว็บบราว์เซอร์ ส่วนนื้จะเป็นส่วนที่ใช้ในการทาคลัง บัญชีเว็บเพจ สาหรับใช้ในการสืบค้นเว็บเพจ (Search Engine) จากผู้อื่น - TITLE ใช้สาหรับบอกชื่อเรื่องของเอกสารเว็บ โดยข้อความนี้จะปรากฏที่แถวชื่อด้านบนสุดของ โปรแกรมเว็บเบราว์เซอร์ โดยข้อความนื้ควรครอบคลุมถึงเนื้อหาทั้งหมดของเอกสารเว็บ <HEAD> <META NAME ="Author" CONTENT ="ชื่อผู้สร้างเว็บเพจ,,> <META NAME ="KeyWords" CONTENT ="คาสาคัญ 1, คาสาคัญ 2, ..."> <TITLE> ข้อความที่ใช้เป็นข้อความหัวเรื่องของเอกสาร </TITLE> </HEAD> การพิมพ์ชุดคาสั่งของภาษาเอชทีเอ็มแอล (HTML) สามารถใช้ได้ทั้งตัวอักษรพิมพ์เล็กและตัวอักษร พิมพ์ใหญ่ หรือผสมกันทั้งสองแบบ และสามารถใช้ย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถทาได้ อย่างอิสระ โปรแกรมเว็บเบราว์เชอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัด ย่อหน้า หรือช่องว่าง แต่จะเป็น ประโยชน์สาหรับการอ่านคาสั่งของผู้สร้างเอกสารเว็บ และประโยชน์ทาการพัฒนาเว็บเพจ
  • 4. ส่วนเนื้อหาเอกสารเว็บ ส่วนเนื้อหาเอกสาร (Body Section) เป็นส่วนเนื้อหาหลักของเอกสารเว็บ โดยส่วนนื้จะเป็นส่วนที่ นาไปแสดงผลบนโปรแกรมเว็บเบราว์เซอร์ ซึ่งการแสดงผลนั้นจะใช้ป้ายระบุหรือคาสั่งเป็นตัวควบคุมรูปแบบ การแสดงผล ไม่ว่าจะเป็นข้อมูลที่เป็นข้อความ รูปภาพ หรือ เสียง การเขียนป้ายระบุ (Tag) หรือคาสั่ง จะไม่มีข้อจากัดสามารถป้อนคาสั่งติดกันหลายคาสั่งในหนึ่ง บรรทัด หรือจะมีเพียง 1 บรรทัดต่อ 1 คาสั่งก็ได้ โดยทั่วไปแล้วจะยึดหลักการจัดวางที่ทาให้ผู้ที่สร้าง เอกสารเว็บนั้นสามารถทาความเข้าใจได้ง่าย เช่นทาการจัดย่อหน้าในชุดคาสั่งที่เกี่ยวข้องกันให้อยู่ในย่อหน้า ระดับเดียวกัน ซึ่งคาสั่งที่ใข้กาหนดรูปแบบการแสดงผลทั้งหมดที่เป็นส่วนของเนื้อหาของเอกสารจะอยู่ระหว่าง ป้ายระบุ (Tag) หรือคาสั่ง <BODY>...</BODY> สามารถแบ่งกลุ่มคาสั่งได้ตังนื้ - กลุ่มคาสั่งการจัดการย่อหน้า - กลุ่มคาสั่งจัดควบคุมรูปแบบตัวอักษร - กลุ่มคาสั่งการจัดทาเอกสารแบบรายการ - กลุ่มคาสั่งการเชื่อมโยงเอกสาร - กลุ่มคาสั่งจัดการรูปภาพ - กลุ่มคาสั่งจัดการตาราง - กลุ่มคาสั่งการแบ่งส่วนของเอกสาร - กลุ่มคาสั่งอื่นๆ รูปที่ 3.1 แสดงถึงส่ ว นประกอบของโครงสร้ างภาษาเอขทีเ อ็ มแอล การสร้างเว็บเพจเบื้องต้น ขั้นตอนแรกในการสร้างเอกสารเว็บคือ การร่างเนื้อหาที่ประกอบอยู่ภายในของเอกสารเว็บ
  • 5. และจัดแบ่งข้อมูลออกเป็นส่วน โดยแบ่งเป็นหน้าคล้ายกับหน้ากระดาษของหนังสือ ซึ่งจานวนของข้อมูลใน เอกสารแต่ละหน้าของเอกสารเว็บไม่ควรมีขนาดใหญ่มากนัก เพราะจะทาให้ขนาดของเอกสารเว็บที่เป็น แฟ้มข้อมูลภาษาเอชทีเอ็มแอล (HTML) นั้นมีขนาดใหญ่ ซึ่งจะทาให้เวลาสาหรับการดึงเอกสารเว็บจากระบบ เครือข่าย เพื่อมาแสดงผลบนโปรแกรมเว็บเบราว์เซอรใช้เวลามาก และเอกสารเว็บที่มีข้อมูลเป็นจานวนมากใน แต่ละหน้าของเอกสาร จะทาให้ไม่สามารถแสดงผลข้อมูลทั้งหมดในหน้าเดียว ซึ่งจะต้องใช้แถบเลื่อนสาหรับดู ข้อมูลของเอกสารเว็บในส่วนที่เหลือ ซึ่งอาจทาให้ผู้ที่เปิดดูเอกสารเว็บรู้สึกไม่สะดวกในการดูเอกสารเว็บ โดย เอกสารเว็บที่ดีควรแบ่งเนื้อหาในแต่ละหน้าให้เหมาะสมกับการใช้งาน เมนู (หน้าหลัก) Index.html ความเป็นมาชอง ระบบคอมพิวเตอร์ history.html ระบบฮาร์ดแวร์ hardware.html ระบบซอฟแวร์ software.html บุคลากรด้าน คอมพิวเตอร์ ppl.html อุปกรณ์อินพุต Input.html อุปกรณ์เอ้าพุต output.html ระบบปฏิบัตการ ิ os.html โปรแกรมประบุกต์ application.html รูปที่ 3.2 แสดงตัว อย่ างการจั ดแบ่ งเนื้ อหาสาหรั บการนาเสนอข้ อมูล เกี่ยวกับ ความรู้ทั่ว ไป เกี่ยวกับคอมพิว เตอร์ คาสั่งเบื้องต้นสาหรบการสร้างเว็บเพจ คาสั่งเริ่มต้น คาสั่งเริ่มต้นที่ใช้สาหรับการบอกว่าเอกสารนั้น คือเอกสารเว็บที่เป็นภาษาเอชทีเอ็มแอล คือคาสั่ง <HTML> และใช้คาสั่ง </HTML> เป็นการบอกจุดสิ้นสุดของเอกสารเอชทีเอ็มแอล โดยคาสั่งนี้จะไม่
  • 6. แสดงผลในโปรแกรมเว็บเบราว์เซอร์ แต่เขียนเพื่อบอกให้ทราบว่าเอกสารนี้เป็นเอกสารของภาษาเอชทีเอ็มแอล (HTML) กล่าวคือข้อความที่อยู่ระหว่างคาสั่ง <HTML> และ </HTML> เป็นเอกสารที่เป็นภาษา เอชทีเอ็มแอลนั้นเอง <HTML> (ภาษาเอชทีเอ็มแอล) </HTML> คาสั่งกาหนดส่วนหัวของเอกสารเว็บ ดังที่กล่าวมาแล้วว่าเอกสารเอชทีเอ็มแอลนั้น แบ่งออกเป็น 2 ส่วน คือส่วนหัวเรื่องของเอกสารเว็บ และส่วนเนี้อหาเอกสารเว็บ โดยคาสั่งที่ใช้บอกส่วนหัวเรื่องของเอกสารเว็บนั้น คือคาสั่ง <HEAD>...</HEAD> ซึ่งคาสั่งที่อยู่ภายในส่วนหัวของเอกสารเว็บนั้น เป็นคาสั่งที่ใช้กาหนดข้อความที่ใช้เป็นชื่อเรื่องของเอกสาร เอชทีเอ็มแอล และคาสั่งที่ใช้สาหรับบอกคาสาคัญ (Keyword) ของเอกสารเอชทีเอ็มแอล เพื่อใช้ในการ ค้นหาเอกสารนั้นบนระบบเครือข่ายอินเทอร์เน็ต <HEAD> (คาสั่งย่อยสาหรับส่วนหัวของเอกสาร) </HEaD> คาสั่งกาหนดข้อความในส่วนหัวของโปรแกรมเว็บเบราว์เซอร์ คาสั่งที่ใช้สาหรับกาหนดข้อความที่จะปรากฏบนส่วนหัวของโปรแกรมเว็บเบราว์เชอร์ คือคาสั่ง <TITLE>...</TITLE> หากต้องการให้ข้อความใดปรากฏที่ตาแหน่งส่วนหัวของโปรแกรมเว็บเบราว์เซอร์ ทาได้ โดยเอาข้อความที่ต้องการแสดงผลนั้นใส่เข้าไประหว่างคาสั่งเปิด <TITLE> และคาสั่งปิด </TITLE> ซึ่งคาสั่งนี้ จะอยู่ในส่วนหัวของเอกสารเว็บ <TITLE> (ข้อความที่ต้องการให้ปรากฏที่ส่วนหัวของโปรแกรมเว็บเบราว์เชอร์) </TITLE> คาสั่งกาหนดส่วนเนื้อหาของเอกสารเว็บ คาสั่งที่ใช้กาหนดส่วนที่เป็นเนี้อหาของเอกสารเว็บคือ คาสั่ง <BODY>...</BODY> ซึ่งใช้ เป็นคาสั่ง สาหรับบอกแก่โปรแกรมเว็บเบราว์เซอร์ว่า ส่วนที่อยู่ระหว่างคาสั่งนี้เป็นส่วนที่จะนาไปแสดงผลบนโปรแกรม เว็บเบราว์เซอร์ ซึ่งอาจประกอบไปด้วย ตัวอักษร รูปภาพ เป็นต้น <BODY> ... </BODY>
  • 7. ตัวอย่างที่ 3.1 ตัวอย่างเอกสารเอชทีเอ็มแอล เอกสาร HTML เอกสารแรก รูปที่ 3.3 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.1 โดยใช้โ ปรแกรมเว็บ เบราวเซอร์ <!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.1 --> <HTML> <HEAD> <TITLE> ชื่อเรื่องของเอกสาร HTML </TITLE> </HEAD> <BODY> เอกสาร HTML เอกสารแรก </BODY> </HTML> การกาหนดสีของพื้นหลังและสีของตัวอักษร การกาหนดสีพื้นหลังและการกาหนดสีของตัวอักษรของเอกสารเว็บนั้น สามารถทาได้โดยกาหนดเป็น การอธิบายลักษณะพิเศษ (Attribute) ของคาสั่ง <BODY> โดยมีวิธีการกาหนดสีของพื้นหลังของเอกสารและสี ของตัวอักษรในเอกสารได้ดังนี้
  • 8. การกาหนดสีของพื้นหลังเอกสาร การกาหนดสีพื้นหลังของเอกสารเว็บหรือเอกสารเอชทีเอ็มแอล นั้นสามารถทาได้โดยใช้ การอธิบาย ลักษณะพิเศษ (Attribute) คือ BGCOLOR ซึ่งการกาหนดสีพื้นของเอกสารเอชทีเอ็มแอลนั้น สามารถกาหนด ภายใต้คาสั่งเปิดของคาสั่ง <BODY> โดยการกาหนดสีพื้นหลังของ เอกสารเอชทีเอ็มแอลสามารถแสดงได้ดังนี้ <BODY BGCOLOR = สีที่ต้องการ> จะมี "สีที่ต้องการ" หรือไม่มีเครื่องหมาย " " ก็ได้ </BODY> โดยสีที่ต้องการกาหนดนี้ สามารถทาการกาหนดได้ 2 วิธีคือ ■ ระบุชื่อของสีที่ด้องการ เช่น Blue, Green, Red, Yellow เป็นต้น ตัวอย่างที่ 3.2 การกาหนดสีพื้นหลังของเอกสารเอชทีเอ็มแอล โดยการระบุชื่อ <!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.2 --> <HTML> <HEAD> <TITLE> การกาหนดสีพื้นหลังโดยการกาหนดสี </TITLE> </HEAD> <BODYBGCOLOR = Yellow> การกาหนดสีพื้นหลังของเอกสาร โดยการกาหนดเป็นสีเหลือง </BODY> </HTML>
  • 9. การกาหนดสีพื้นหลังของเอกสาร โดยการกาหนดเป็นสีเหลือง รูปที่ 3.4 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.2 โดยไข้โ ปรแกรมเว็บเบราว์เซอร์ ■ ระบุตัวเลข โดยใช้การกาหนดค่าสีในระบบเลขฐาน 16 จานวน 6 หลักสาหรับการ ผสมสี (RGB) โดยค่าตัวเลข 2 หลักแรกหมายถึงระดับของสีแดง ตัวเลข 2 หลัก ต่อมาหมายถึงระดับของสีเขียว และ ตัวเลข 2 หลักสดท้ายหมายถึงระดับของสีน้าเงิน ตัวอย่างที่ 3.3 การกาหนดสีพื้นหลังของเอกสารเอชทีเอ็มแอล โดยการระบุตัวเลข <!— คาลังภาษาเอชทีเอ็มนอลสาหรับตัวอย่างที 3.3 —> <HTML> <HEAD> <TITLE>การกาหนดสีพื้นหลังของเอกสาร โดยการระบุตัวเลข</TITLE> </HEAD> <BODY BGCOLOR = #OOFFFF> การกาหนดสีพื้นหลังของเอกสาร โดยการระบุตัวเลขเปีน OOFFFF </BODY> </HTML>
  • 10. การกาหนดสีพื้นหลังของเอกสาร โดยการระบุตัวเลขเป็น 00FFFF รูปที่ 3.5 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.3 โดยใช้โ ปรแกรมเว็บเบราวเซอร์ การกาหนดสีของตัวอักษร การกาหนดสีของตัวอักษรทั้งหมดของเอกสารเว็บหรือเอกสารเอชทีเอ็มแอลนั้น สามารถ ทาไดโดยใช้ การอธิบายลักษณะพิเศษ (Attribute) คือ TEXT ซึ่งกาหนดอยู่ที่ตาแหน่งคาสั่งเปิด ของคาสั่ง <BODY> รูปแบบของคาสั่งสาหรับการกาหนดสีของเอกสารเว็บ สามารถทาได้ดงนี้ ั <BOBY TEXT = สีที่ต้องการ > จะมีเครื่องหมาย “ ............ </BOBY> ” หรือไม่มีก็ได้ โดยสีที่ต้องการกาหนดนี้ สามารถทาการกาหนดได้ 2 วิธีคือ 1. ระบุชื่อของสีที่ด้องการ เช่น Blue, Green, Red, Yellow เป็นด้น 2. ระบุตัวเลข โดยใช้การกาหนดค่าสีในระบบเลขฐาน 16 ตัวอย่างที่ 3.4 การกาหนดสีตัวอักษรของเอกสารเอชทีเอ็มแอล โดยการระบุชื่อ <!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.4 --> <HTML> <HEAD>
  • 11. <TITLE>การกาหนดสีของตัวอักษร โดยการกาหนดสี</TITLE> </HEAD> <BODY TEXT = Blue> การกาหนดสีของตัวอักษร โดยการกาหนดให้เป็นสีน้าเงิน </BODY> </HTML> การกาหนดสีของตัวอักษร โดยการกาหนดให้เป็นสีน้าเงิน รูปที่ 3.6 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.4 โดยไข้โ ปรแกรมเว็บเบราว์เชอร์ ตัวอย่างที่ 3.5 การกาหนดสีตัวอักษรของเอกสารเอชทีเอ็มแอล โดยการระบุตัวเลข <!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.5 --> <HTML> <HEAD> <TITLE>การกาหนดสีของตัวอักษร โดยการระบุรหัสสี</TITLE> </HEAD> <BODY TEXT = #FFOOFF> การกาหนดสีของตัวอักษร โดยการระบุรหัสสีเป็น FFOOFF
  • 12. </BODY> </HTML> การกาหนดสีของตัวอักษร โดยการระบุรหัสสีเป็น #FF00FF รูปที่ 3.7 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.5 โดยใช้โ ปรแกรมเว็บเบราว์เชอร์ ตัวอย่างที่ 3.6 การกาหนดสีพื้นหลังและสีตัวอักษรของเอกสารเอชทีเอ็มแอล <!-- คาสั่งภาษาเอชทีเอ็มแอลสาหรับตัวอย่างที่ 3.6 --> <HTML> <HEAD> <TITLE>การกาหนดสีของพื้นหลังและตัวอักษรของเอกสาร</TITLE> </HEAD> <BODY BGCOLOR= yellow TEXT = #FFOOFF> การกาหนดสีพื้นหลังและตัวอักษร </BODY> </HTML>
  • 13. การกาหนดสีพื้นหลังและตัวอักษร รูปที่ 3.8 ผลที่ไ ด้จ ากการแสดงผล ตัว อย่างที่ 3.6 โดยใช้ โ ปรแกรมเว็บเบราว์เชอร์