หลักการสร้างและโครงสร้างภาษาการเขียนเว็บเพจ
การสร้างเว็บเพจ
เว็บเพจจัดอยู่ในรูปไฮเปอร์เท็กซ์ที่ผู้เข้าไปใช้บริการบนอินเทอร์เน็ตพบเห็นกันได้มากที่สุด และเป็นจุดเด่นให้ผู้ใช้บริการเกิดความสนใจที่จะใช้อินเทอร์เน็ตมากขึ้นนอกเหนือจากบริการพื้นฐานทั่วไป
ผู้ใช้บริการอินเทอร์เน็ต (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
หลังจากที่เราบันทึกเอกสารเรียบร้อยแล้ว ให้เราดับเบิ้ลคลิกที่ไฟล์เว็บเพจที่สร้างขึ้น