วันจันทร์ที่ 16 สิงหาคม พ.ศ. 2553

บทที่ 3 ความรู้เบื้องต้นเกี่ยวกับภาษาHTML

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

ภาษา HTML

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

ป้ายระบุ

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

- ป้ายระบุเดี่ยว หมายถึงป้ายระบุที่เป็นคำสั่งสำหรับควบคุมการแสดงผล เช่นคำสั่งการขึ้นบรรทัดใหม่ < BR > เป็นต้น
- ป้ายระบุเปิด/ปิด หมายถึงป้ายระบุที่เป็นคำสั่งสำหรับการควบคุมการแสดงผลเป็นกลุ่มเช่นกำหนดให้กลุ่มตัวอักษรเป็น
ตัวหนา < B > .....< /B > หรือตัวเอียง < I >....< /I> เป็นต้น โดยใช้เครื่องหมายทับ (Slash) นำหน้าคำสั่งที่ต้องการควบคุม
จะอยู่ระหว่างป้ายระบุเปิด และป้ายระบุปิด


ลักษณะพิเศษ

ลักษณะพิเศษ (Attributes) เป็นส่วนที่จะทำหน้าที่ขยายความสามารถของป้ายระบุ (Tag) หรือคำสั่ง โดยการบอกลักษณะ พิเศษในเครื่องมายมากกว่า หรือ น้อยกว่า ในส่วนของป้ายระบุเปิดหรือป้ายระบุเดี่ยว โดยคำสั่งของภาษาเอชทีเอ็มแอล แต่ละคำสั่งจะมีการบอกลักษณะพิเศษ ที่แตกต่างกัน การระบุลักษณะพิเศษนั้นสามารถกำหนดได้มากกว่า 1 ลักษณะ โดย ใช้ช่องว่างเป็นตัวแยกแต่ละลักษณะพิเศษ ตัวอย่าง เช่น ลักษณะพิเศษ ของป้ายระบุ หรือคำสั่งที่เกี่ยวกับการจัดย่อหน้าหรือคำสั่ง < P > ประกอบด้วยลักษณะพิเศษดังนี้คือ

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

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


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

- META เป็นส่วนที่ไม่ปรากฏผลบนโปรแกรมเว็บเบราว์เซอร์ ส่วนนี้จะเป็นส่วนที่ใช้ในการทำคลังบัญชีเว็บเพจ สำหรับใช้
ในการสืบค้นเว็บเพจ (Search Engine)จากผู้อื่น
- TITLE ใช้สำหรับบอกชื่อเรื่องของเอกสารเว็บ โดยข้อความนี้จะปรากฏที่แถวชื่อด้านบนสุดของโปรแกรมเว็บเบารว์เซอร์
โดยข้อความนี้ควรครอบคลุมถึงเนื้อหาทั้งหมดของเอกสารเว็บ


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

การเขียนป้ายระบุ (Tag)หรือคำสั่ง จะไม่มีข้อความจำกัดสามารถป้อนคำสั่งติดกันหลายคำสั่งในหนึ่งบรรทัด หรือจะมีเพียง
1 บรรทัดต่อ 1 คำสั่งก็ได้ โดยทั่งไปแล้วจะยึดหลักการจัดวางที่ทำให้ผู้ที่สร้างเอกสารเว็บนั้นสามารถทำความเข้าใจได้ง่าย
เช่นทำการจัดย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกันให้อยู่ในย่อหน้าระดับเดียวกัน ซึ่งคำสั่งที่ใช้กำหนดรูปแบบการแสดงผล
ทั้งหมด ที่เป็นส่วนของเนื้อหาของเอกสาร จะอยู่ระหว่างป้ายระบุ (Tag)หรือคำสั่ง BODY/BODY สามารถแบ่งกลุ่มคำสั่งได้
ดังนี้



- กลุ่มคำสั่งการจัดการย่อหน้า
- กลุ่มคำสั่งจัดควบคุมรูปแบบตัวอักษร
- กลุ่มคำสั่งการจัดทำเอกสารแบบรายการ
- กลุ่มคำสั่งการเชื่อมโยงเอกสาร
- กลุ่มคำสั่งจัดการรูปภาพ
- กลุ่มคำสั่งจัดการตาราง
- กลุ่มคำสั่งการแบ่งส่วนของเอกสาร
- กลุ่มคำสั่งอื่น ๆ

การสร้างเอกสารเว็บเพจเบื้องต้น

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



คำสั่งเบื้องต้นสำหรับการสร้างเว็บเพจ

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


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




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


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







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


การกำหนดสีของพื้นหลังเอกสาร
การกำหนดสีพื้นหลังของเอกสารเว็บหรือเอกสารเอชทีเอ็มแอล นั้นสามารถทำได้โดยใช้การอธิบายลักษณะพิเศษ(Attribute)คือBGCOLOR ซึ่งการกำหนดสีพื้นของเอกสารเอชทีเอ็มแอลนั้น สามารถกำหนดภายใต้คำสั่งเปิดของคำสั่ง BODY โดยการกำหนดสีของพื้นหลังของเอกสารเอชทีเอ็มแอลสามารถแสดงได้ดังนี้



ไม่มีความคิดเห็น:

แสดงความคิดเห็น