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


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

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

ผู้ใช้บริการอินเทอร์เน็ต (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. ส่วนสำหรับแสดงสิ่งต่างๆ ที่ต้องการแสดงบนหน้าเว็บ

         <html>...</html>

      เป็นแท็กแรกที่ต้องมีในภาษา HTML เพื่อบอกว่านี่คือเอกสารภาษา HTML โดยจะอยู่ที่จุดเริ่มต้นของเอกสารและท้ายเอกสาร

        <head>...</head>

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

        <body>...</body>

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

เครื่องมือที่ใช้สร้างเอกสารภาษา HTML

      ในการสร้างเว็บด้วย HTML ต้องมีเครื่องมือใช้ในการเขียนและแก้ไขโค้ดเรียกว่า Text Editor ซึ่งเป็นโปรแกรมสำหรับการสร้างและแก้ไขข้อความ ปัจจุบันมีอยู่มากมายที่สมารถใช้แก้ไขโค้ด HTML เช่น Notpad, EditPlus และ Dreamweaver ทั้งนี้จะขอนำเสนอโปรแกรมที่สามารถใช้ง่ายและหาได้ทั่วไปคือ Notepad

การบันทึกเอกสารภาษา HTML

      เมื่อสร้างเอกสารเสร็จแล้ว จะต้องบันทึกเป็นเอกสาร HTML โดยบันทึกเป็นนามสกุล .htm หรือ .html ดังนี้
- คลิกที่เมนู File หรือ Ctrl + S
- เลื่อนเมาส์มาที่ Save
- ทำการเลือกไดร์ฟ และโฟลเดอร์ ที่จะบันทึกแฟ้ม
- พิมพ์ชื่อไฟล์พร้อมสกุล .html  เลื่อนเมาส์มาคลิกที่ปุ่ม Save 

การดูผลลัพธ์เอกสารภาษา HTML

      หลังจากที่เราบันทึกเอกสารเรียบร้อยแล้ว ให้เราดับเบิ้ลคลิกที่ไฟล์เว็บเพจที่สร้างขึ้น