 รูปแบบของ HTML
มีศัพท์อยู่ 2 คำที่เราควรทราบเกี่ยวกับการสร้าง Web Page ด้วย HTML ได้แก่
|
- text
|
หมายถึง ข้อความทั่ว ๆ ไปในเว็บเพจ
|
|
- tag
|
หมายถึง คำสั่งที่ใช้ในการกำหนดรูปแบบของ text โดยคำสั่งของ text
โดยคำสั่งของ HTML จะอยู่ภายในเครื่องหมาย < และ >
|
ตัวอย่าง
|
This is <B>Assumption College Thonburi</B>
|
ความหมาย
- <B> และ </B> คือ Tag โดยทั่วไปจะมี Tag เริ่มต้นและ Tag จบท้ายโดยจะใช้ตัวเล็กหรือตัวใหญ่ก็
มีผลเหมือนกัน จากตัวอย่างหมายถึงการทำข้อความ Assumption College Thonburi ให้เป็นตัวเข้ม ผลลัพธ์ที่ได้คือ
ผลลัพธ์ This is Assumption College Thonburi ซึ่งเป็นตัวหนา
- ส่วนข้อความที่ไม่ได้อยู่ใน tag <และ> ถือว่าเป็นข้อความหรือ Text ทั่วไปทั้งสิ้น
กฎเกณฑ์ในการใช้ HTML
>> แต่ละ Tag จะต้องอยู่ในเครื่องหมาย < > เท่านั้น
>> จะใช้ตัวพิมพ์ตัวเล็กหรือใหญ่ก็ได้ มีความหมายเดียวกัน เช่น <title>, <Title> หรือ <TITLE> ต่างก็ให้ความหมายเดียวกัน
>> แทบทุก Tag จะมี Tag เปิด และ Tag ปิด โดย Tag ปิด จะมี/รวมอยู่ด้วย แต่ก็มีบาง Tag ที่ไม่มีตัวปิด เช่น <BR>, <P> เป็นต้น
>> ในการพิมพ์เอกสาร HTML นั้นจะพิมพ์ติดต่อกันทั้งข้อความและคำสั่งหรือพิมพ์แยกบรรทัดหรือเคาะช่องว่างก็แล้วแต่ผู้พิมพ์ แต่การพิมพ์ให้ดูสวย
งามจะทำให้ง่ายต่อการอ่านและแก้ไขในภายหลัง
การทำงานของ HTML กับ Browser
ปกติถ้าเรานำข้อมูลที่สร้างจากโปรแกรมทั่ว ๆ ไปที่ไม่ใช่ HTML มาแสดงใน Web Browser ผลลัพธ์ที่ได้จะไม่ถูกต้องตามเอกสารต้นฉบับ
เนื่องจากตัว Browser ไม่เข้าใจในโครงสร้างของข้อมูล แต่ก็จะแสดงผลให้โดยนำข้อความทั้งหมดมาต่อกัน
ตัวอย่างที่ 1 เป็นตัวอย่างของเอกสารโดยทั่วไปที่ไม่มีการใช้คำสั่งของ HTML
จากภาพตัวอย่างเป็นไฟล์เอกสารที่พิมพ์จาก Notepad บนวินโดวส์ ซึ่งถ้าเรา
นำไปเปิดใน Web Browser จะได้ผลลัพธ์โดยการกดปุ่มด้านล่างนี้
ตัวอย่างที่ 2 เป็นตัวอย่างของเอกสารโดยทั่วไปที่ใช้คำสั่ง HTML
จากภาพจะเป็นไฟล์เอกสารที่มีการใช้คำสั่ง HTML ซึ่งเมื่อมีการนำไปเปิดใน Web Browser จะได้ผลดังปุ่มด้านล่างนี้
บราวเซอร์เป็นเครื่องมือสำหรับแปลภาษา HTML ที่แปลคำสั่งต่าง ๆ อย่างตรงไปตรงมา ซึ่ง
ถ้าโครงสร้าง ๆ แบบผิด ๆ ผลลัพธ์ที่แสดงก็จะแสดงออกมาแบบผิด ๆ แต่ถ้าโครสร้าง
ถูกต้องเราก็จได้ผลลัพธ์ตามต้องการโดยจะไม่มีการบอกถึงความผิดพลาด (Error) ที่ตำแหน่ง
ใด ๆ เหมือนกับการเขียนโปรแกรมภาษาอื่น ๆ แต่จะแสดงผลลัพธ์ให้เห็นเลย ดังนั้นผู้เขียน
จึงจำเป็นต้องค้นหาส่วนที่ผิดให้ได้ด้วยตนเอง
โปรแกรมสำหรับการเขียนโฮมเพจ
การเขียนโฮมเพจนั้น เราสามารถใช้โปรแกรมสำหรับเขียนภาษา HTML ได้
หลายตัว ซึ่งในปัจจุบันโปรแกรมสำหรับเขียน Web Page มีอยู่ด้วยกันมาก
มาย เช่น Homesite, Hotdog, Nestcape Editor, FrontPage, NetObject และ
อื่น ๆ อีกมากมาย แต่ถ้าผู้ใช้ไม่มีโปรแกรมเหล่านี้ เราก็สามารถเขียนได้
โดยการใช้โปรแกรมที่มากับระบบปฏิบัติการวินโดวส์ที่ให้มาได้อย่าง
ง่าย ๆ คือ Notepad ครับ
สิ่งจำเป็นสำหรับการเขียนโฮมเพจ
ขอแนะนำคุณสมบัติของเครื่องคอมพิวเตอร์สำหรับบุคคลที่สนใจจะนำมาใช้เพื่อการสร้าง WebPage
CPU อย่างน้อยควรเป็นรุ่น 486 DX ขึ้นไป
หน่วยความจำอย่างน้อย 8 MB (ยิ่งเยอะยิ่งดีครับ)
พื้นสำหรับเก็บ WebPage อย่างน้อย 30 MB
โมเด็มความเร็วอย่างน้อยควรอยู่ที่ 28.8 Kbps
ระบบมัลติมีเดีย
โปรแกรม Web Browser ได้แก่ Netscape Navigator หรือ Internet Explorer
โครงสร้าง HTML พื้นฐาน
โครงสร้างพื้นฐานของภาษา HTML เราสามารถแบ่งออกได้เป็น 2 ส่วนได้แก่ Head และ Body ซึ่งภาษา HTML จะ
เกี่ยวข้องกับการกำหนดหัวข้อของ Web Page และภาษา HTML ในส่วนของ Body ก็จะเป็นส่วนของ
รายละเอียดสำหรับ Web Page ดังโครงสร้างด้านล่างนี้ครับ
<HTML>
<HEAD>
<TITLE> หัวข้อของ WebPage ซึ่งจะปรากฎที่ Title Bar ของวินโดว์ </Title>
</HEAD>
<BODY>
เป็นส่วนที่ใส่เนื้อหา และข้อมูลต่าง ๆ ไม่ว่าจะเป็นภาพ การเชื่อมโยงต่าง ๆ
ที่ปรากฎใน WebPage
</BODY>
</HTML>
|
ตัวอย่าง
จากภาพจะเป็นการใช้คำสั่ง HTML พื้นฐาน ซึ่งถือว่าเป็นคำสั่งที่จะต้องยึดถือ
เป็นโครงสร้างของภาษา HTML ที่ทุก WebPage นั้นจำเป็นต้องมี เพื่อ
ให้การแสดงผลเป็นไปตามที่ได้ตั้งไว้รวมไปถึงการเข้ากันได้ของโปรแกรม Web Browser ที่
มีหน้าที่แปลภาษา HTML ให้เป็นเอกสาร HTML โดยสมบูรณ์และเพื่อความถูกต้องตามหลักของ
โครงสร้างในภาษา HTML ซึ่งจากรูปจะได้ผลลัพธ์ ตามที่คุณกดที่ปุ่มด้านล่างนี้ครับ
เริ่มต้นการเขียนเวปเพจด้วยภาษา HTML เบื้องต้น
 การกำหนดชื่อเอกสารให้แสดงบน Browser
|
<TITLE> หัวเรื่อง </TITLE>
|
เราสามารถแสดงชื่อเนื้อเรื่องไว้ใน Browser ได้ด้วยคำสั่ง <TITLE> และ </TITLE> โดยจะต้องวางไว้ระหว่างคำสั่ง <HEAD> และ </HEAD> เสมอ ดังตัวอย่างต่อไปนี้
ตัวอย่าง
จากรูป ถ้าคุณต้องการดูผลลัพธ์ คุณสามารถดูผลลัพธ์ได้ด้วยการกดปุ่มด้านล่าง โดยการสังเกตที่ตรง Title Bar ของวินโดวส์ที่เปิดขึ้นครับ
การกำหนดขนาดของอักษรในหัวเรื่อง
กรณีที่เอกสารถูกแบ่งออกเป็นหลาย ๆ ส่วน และเราต้องการกำหนดขนาดของตัวอักษรในแต่ละส่วน (Section) ให้
แตกต่างกันออกไป เราก็ทำได้โดยง่าย โดยการใช้คำสั่ง <Hn> และ </Hn> โดย n แทนตัวเลข 1 ถึง 6 โดย 1 คือ
ขนาดที่เล็กที่สุด และ 6 คือขนาดที่ใหญ่ที่สุด แก้ไขขนาดเองไม่ได้ เนื่องจากกำหนดมาไว้แล้วในตัวโครงสร้างของภาษา HTML โดย
คำสั่ง Headline จะอยู่ระหว่างคำสั่ง <BODY> และ </BODY> ซึ่ง
ข้อความที่ถูกกำหนดด้วย Headline จะเริ่มต้นบรรทัดใหม่ทุกครั้ง ดังตัวอย่างต่อไปนี้
ตัวอย่าง
จากรูป ถ้าคุณต้องการดูผลลัพธ์ คุณสามารถดูผลลัพธ์ได้ด้วยการกดปุ่มด้านล่าง โดยการสังเกตที่ตรงขนาดของอักษรที่แตกต่างกันครับ
การกำหนด Footer
|
<ADDRESS> ข้อความ </ADDRESS>
|
เป็นข้อความที่นิยมใส่ไว้ด้านล่างของเอกสาร เช่น ที่อยู่ที่เราติดต่อได้ คำสั่ง <ADDRESS> และ </ADDRESS> ซึ่ง
ข้อความที่อยู่ระหว่าง Tag นี้จะถูกกำหนดให้เป็นตัวเอน (Italic) โดยอัตโนมัติ
ตัวอย่าง
จากรูป ถ้าคุณต้องการดูผลลัพธ์ คุณสามารถดูผลลัพธ์ได้ด้วยการกดปุ่มด้านล่าง โดยการสังเกตที่ตรงด้านล่างของหน้าต่างที่เปิดขึ้นครับ
เพิ่มหมายเหตุเพื่อเตือนความจำ
เราควรเขียนหมายเหตุไว้ในส่วนต่าง ๆ ของโปรแกรมเพื่ออธิบายการทำงาน เพราะเราอาจหลง
ลืมโปรแกรมที่เราเขียนขึ้นมาก็ได้ หรือต้องส่งต่อให้ผู้อื่นไปทำการปรับปรุงแก้ไข หมายเหตุมีรูปแบบดังนี้
|
<! ข้อความที่เป็นหมายเหตุ >
|
หมายเหตุจะปรากฎในตัวโปรแกรมที่เราเขียนเท่านั้น ไม่ถูกนำมาแสดงเมื่อเปิดดูทางโปรแกรม Web Browser ดัง
ตัวอย่างด้านนี้เป็นโปรแกรมที่มีการบอกหมายเหตุ เพื่อช่วยในการอธิบายโปรแกรม โดยเมื่อเราใช้
โปรแกรม Web Browser เปิดโปรแกรมตัวนี้ขึ้นมาก็จะไม่เห็นข้อความที่อยู่ใน Tag หมายเหตุเลย
ตัวอย่าง
จากรูป ถ้าคุณต้องการดูผลลัพธ์ คุณสามารถดูผลลัพธ์ได้ด้วยการกดปุ่มด้านล่าง โดยการสังเกตที่ส่วนของ Body ว่าจะไม่มีข้อความที่อยู่ Tag หมายเหตุปรากฎอยู่ครับ
การขึ้นบรรทัดใหม่และวรรคใหม่
เราสามารถจัดข้อความต่าง ๆ บน WebPage ได้โดยการใช้คำสั่งขึ้นบรรทัดใหม่ <BR> หรือคำสั่งขึ้นย่อหน้าใหม่ คือคำสั่ง <P>
ตัวอย่าง
จากภาพจะสังเกตว่า เมื่อเราต้องการให้ข้อความช่วงใดขึ้นบรรทัดใหม่หรือขึ้นย่อหน้าใหม่เราก็
จะใส่ Tag คำสั่งเหล่านั้นลงไปเลยนะครับ
จากรูป ถ้าคุณต้องการดูผลลัพธ์ คุณสามารถดูผลลัพธ์ได้ด้วยการกดปุ่มด้านล่าง โดยการสังเกตที่ข้อความที่ถูกกำหนดให้ขึ้นบรรทัดใหม่หรือ
ขึ้นย่อหน้าใหม่มีความเปลี่ยนแปลง คือข้อความจะมีการขึ้นบรรทัดใหม่และขึ้นย่อหน้าใหม่ครับ และความแตกต่าง
อีกอย่างหนึ่งคือ ระยะบรรทัดของการขึ้นบรรทัดใหม่จะสั้นกว่าการขึ้นย่อหน้าใหม่ครับ
|
Mr.Phadungsak Sangsawong | ICQ # is 36212331