หลักการสร้างและโครงสร้างภาษาการเขียนเว็บเพจ


การสร้างเว็บเพจ

เว็บเพจจัดอยู่ในรูปไฮเปอร์เท็กซ์ที่ผู้เข้าไปใช้บริการบนอินเทอร์เน็ตพบเห็นกันได้มากที่สุด และเป็นจุดเด่นให้ผู้ใช้บริการเกิดความสนใจที่จะใช้อินเทอร์เน็ตมากขึ้นนอกเหนือจากบริการพื้นฐานทั่วไป

ผู้ใช้บริการอินเทอร์เน็ต (ISP) และศูนย์บริการเว็บ (Web Site) ทุกแห่งต่างมีเว็บเพจเป็นของตนเองเพื่อเป็นข้อมูลเบื้องต้นที่แสดงให้ผู้ใช้บริการทราบว่าในสถานีนั้น ๆ ให้บริการสิ่งใดบ้างและเมื่อเข้าสู่เว็บเพจนั้น ๆ แล้วเราจะเดินทางไปยังแห่งใดได้ ทำหน้าที่เป็นจุดรวมของการเดินทางเข้าไปสู่ดินแดนแห่งใหม่ นับได้ว่าเว็บเพจเป็นหน้าตา เป็นการประชาสัมพันธ์ของสถานีหรือองค์กรนั้น และเราเรียกข้อมูลอื่น ๆ ซึ่งอาจเชื่อมโยงต่อจากโฮมเพจว่า "เว็บเพจ" (Web Page) 

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

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

การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทำได้โดยการใช้โปรแกรม Text Editor ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น Notepad, WordPad นอกจากนี้ยังสามารถที่จะใช้งานโปรแกรมประเภท Word หรือโปรแกรมที่ใช้ในการจัดสิ่งพิมพ์ในการเขียนไฟล์ HTML ได้อีกด้วย เมื่อเขียนคำสั่งเสร็จแล้วให้ทำการบันทึกไฟล์ให้มีนามสกุล .html (ชื่อไฟล์.html) 

ความรู้เบื้องต้นภาษา HTML

ต้นกำเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สำหรับนักวิจัยของสถาบันเพื่อแบ่งข้อมูลกัน และถูกพัฒนามาเรื่อยๆจนถึงปัจจุบัน

HTML เป็นภาษาหลักที่ใช้ในการสร้างเว็บเพจ โดยลักษณะของภาษา HTML แบ่งออกเป็น 2 ส่วน คือ ส่วนข้อความทั่วไป และส่วนที่เป็นคำสั่งในการกำหนดรูปแบบของข้อความ ซึ่งเรียกว่า แท็ก (tag) ก่อนการสร้างเว็บไซต์ต้องเข้าใจเกี่ยวกับโครงสร้างพื้นฐานของภาษา HTML เสียก่อนซึ่งโครงสร้างภาษา HTML แบ่งออกเป็น 4 ส่วนหลักด้วยกัน ทั้งนี้เว็บไซต์ที่พบเห็นโดยทั่วไปมักประกอบด้วยข้อความต่าง  ๆ  เป็นจำนวนมาก  เราจึงต้องศึกษาวิธีการจัดการเนื้อหาเบื้องต้นเพื่อช่วยในการจัดวางข้อความต่าง ๆ บนหน้าเว็บเพจให้เป็นระเบียบและสวยงาม  ได้แก่  การตัดคำขึ้นย่อหน้าใหม่  การจัดคำขึ้นบรรทัดใหม่  การจัดวางตำแหน่งข้อความให้อยู่กึ่งกลาง การจัดการเนื้อหาบนเว็บไซต์นอกจากช่วยให้เว็บไซต์เกิดความสวยงามแล้วสามารถประยุกต์การจัดการเนื้อหา  เพื่อช่วยอำนวยความสะดวกในเรื่องการใช้งานอีกด้วย ได้แก่ การจัดรูปแบบเอกสารตามกำหนด  การสร้างเส้นคั่นแนวนอน การกำหนดหมายเหตุในเอกสารเว็บเพจ

ความหมายของคำว่า HTML ย่อมาจาก Hypertext Markup Lanage เป็นภาษาหลัก ที่ใช้ในการสร้างไฟล์เว็บเพจ และความสำคัญของภาษา HTMLองค์ประกอบของภาษา HTML แบ่งออกเป็น 2 ส่วน คือ ส่วนที่เป็นข้อความทั่วไปและส่วนที่เป็นคำสั่งในการกำหนดรูปแบบข้อความที่แสดง ใช้คำว่า "แท็ก" (tag) เรียกแทนคำว่า "คำสั่ง" และจะใช้เครื่องหมาย < และ > มีแท็กเปิดเป็นแท็กเริ่มต้น และ แท็กปิด เป็นแท็กจบ โดยมีเครื่องหมาย slash (/) 

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

     1. Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>(Tag กำหนดเส้นคั่น), <br> (Tag กำหนดขึ้นบันทัดใหม่) เป็นต้น
2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้น ๆ เช่น <B>……</B> (Tag กำหนดตัวหนา), <a href=URL>…จุด link..</a> (Tag กำหนดการเชื่อมโยงข้อมูล)   เป็นต้น
Tag เปิด/ปิด บาง tag ละ tag ปิดได้ เช่น <tr> (Tag กำหนดแถวตาราง), <th> (Tag กำหนดคอลัมภ์ตาราง)
คำสั่งใน Tag เขียนด้วยอักษรตัวใหญ่หรือเล็กก็ได้ เช่น <Body> หรือ <BODY> หรือ <body> 

โครงสร้างพื้นฐานของภาษา HTML แบ่งออกเป็น 4 ส่วนหลัก คือ <html>...</html> เป็นแท็ก

ที่บอกว่านี่คือภาษา HTML จะอยู่ที่จุดเริ่มต้นของเอกสารและท้ายเอกสาร<head>...</head> เป็นแท็กกำหนดรายละเอียดหัวเอกสาร HTML ในการกำหนดชื่อเว็บจะใช้แท็ก <title>...</title> จะแทรกอยู่ในส่วนนี้ด้วย <body>...</body> เป็นส่วนสำหรับการแสดงเนื้อหาต่างๆ ของเอกสาร HTML

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

ที่มาของคำว่า HTML นั้นย่อมาจาก Hypertext Markup Lanage ซึ่งเป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจ และความสำคัญของภาษา HTML มีองค์ประกอบโดยแบ่งออกเป็น 2 ส่วน  ใช้คำว่า "แท็ก" (tag) เรียกแทนคำว่า "คำสั่ง" และจะใช้เครื่องหมาย < และ > มีแท็กเปิดเป็นแท็กเริ่มต้น และ แท็กปิด เป็นแท็กจบ โดยมีเครื่องหมาย slash (/) ควรศึกษาและทำความเข้าใจเกี่ยวกับโครงสร้างพื้นฐานของภาษา HTML และฝึกฝนการเขียน  โครงสร้างพื้นฐานของภาษา HTML นี้ให้แม่นยำเพราะจะเป็นการต่อยอดความรู้เกี่ยวกับเรื่องการใช้แท็กต่างๆ ในภาษา HTML อื่น

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

โครงสร้างพื้นฐานของภาษา HTML

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

โครงสร้างของภาษา HTML แบ่งออกได้เป็น 4 ส่วนหลัก ได้แก่
1.  ส่วนสำหรับแสดงเอกสารนี้เป็นเอกสาร HTML
2. ส่วนสำหรับแสดงส่วนหัวของหน้าเว็บเพจ
3. ส่วนกำหนดชื่อเว็บ กำหนดรูปแบบข้อความและเลย์เอาท์ และสามารถแทรกสคริปต์
4. ส่วนสำหรับแสดงสิ่งต่างๆ ที่ต้องการแสดงบนหน้าเว็บ