ความรู้พื้นฐานทาง HTML
ภาษา HTML คือภาษาหลักย่อมาจาก Hypertext Markup Language เป็นภาษาพื้นฐานที่ใช้สำหรับสร้างเว็บเพจ จะแสดงผลผ่านทางเว็บเบราว์เซอร์ ส่วนเว็บบราวเซอร์ที่เราคุ้นเคยก็จะมี Google Chrome, Firefox , Microsoft Edge เป็นต้น บราวเซอร์จะมีหน้าที่สำหรับรัน HTML file ขึ้นมาหรือรันหน้าเว็บที่เราเขียนขึ้นมา โดยจะแสดงข้อมูลตัวอักษร ภาพ วิดีโอ เสียง และไฟล์ในรูปแบบอื่นๆ มีการเชื่อมโยงลิงค์ของแต่ละเพจด้วย ที่มา ดาวน์โหลดเป็นเอกสาร ที่มาของเอกสาร
1.1 การสร้าง Homepage
โฮมเพจจัดอยู่ในรูปไฮเปอร์เท็กซ์ที่ผู้เข้าไปใช้บริการบนอินเทอร์เน็ตพบเห็นกันได้มากที่สุด และเป็นจุดเด่นให้ผู้ใช้บริการเกิดความสนใจที่จะใช้อินเทอร์เน็ตมากขึ้นนอกเหนือจากบริการพื้นฐานทั่วไป
ผู้ใช้บริการอินเทอร์เน็ต (ISP) และศูนย์บริการเว็บ (Web Site) ทุกแห่งต่างมีโฮม เพจเป็นของตนเองเพื่อเป็นข้อมูลเบื้องต้นที่แสดงให้ผู้ใช้บริการทราบว่าในสถานีนั้น ๆ ให้บริการสิ่งใดบ้างและเมื่อเข้าสู่โฮมเพจนั้น ๆ แล้วเราจะเดินทางไปยังแห่งใดได้ ทำหน้าที่เป็นจุดรวมของการเดินทางเข้าไปสู่ดินแดนแห่งใหม่ นับได้ว่าโฮมเพจเป็นหน้าตา เป็นการประชาสัมพันธ์ของสถานีหรือองค์กรนั้น และเราเรียกข้อมูลอื่น ๆ ซึ่งอาจเชื่อมโยงต่อจากโฮมเพจว่า "เว็บเพจ" (Web Page)
รูปร่างหน้าตาของโฮมเพจแต่ละแห่งจะแตกต่างกันออกไป ขึ้นอยู่กับประเภทและรูปแบบขององค์กรนั้น ในโฮมเพจการใส่รูปภาพก็เป็นส่วนสำคัญแต่ต้องมีการเตรียมรูปภาพก่อนที่จะใส่ หากรูปภาพมีขนาดไฟล์ใหญ่ก็อาจทำให้การทำงานช้าลง ไม่ควรมีหลายหน้าและควรจะมีส่วนแสดงให้ผู้ใช้ทราบว่าในส่วนนั้นมีอะไรอยู่บ้าง
ด้วยการพัฒนาของไฮเปอร์เท็กซ์ ได้เกิดภาษาใหม่ที่กลายมาเป็นมาตรฐานบนอินเทอร์เน็ตภาษาหนึ่ง นิยมนำมาใช้สร้างโฮมเพจและเว็บเพจบนอินเทอร์เน็ตคือ ภาษา HTML
การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทำได้โดยการใช้โปรแกรม Text Editor ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น Notepad, WordPad นอกจากนี้ยังสามารถที่จะใช้งานโปรแกรมประเภท Word หรือโปรแกรมที่ใช้ในการจัดสิ่งพิมพ์ในการเขียนไฟล์ HTML ได้อีกด้วย เมื่อเขียนคำสั่งเสร็จแล้วให้ทำการบันทึกไฟล์ให้มีนามสกุล .html (ชื่อไฟล์.html)
ในบทเรียนนี้จะใช้โปรแกรม Notepad ใช้ในการสร้างโฮมเพจ แหล่งที่มา
1.2 ความรู้เบื้องต้นภาษา HTML
HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถุ อื่น ๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วย HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ www เติบโตขยายตัวอย่างกว้างขวาง
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 กำหนดการเชื่อมโยงข้อมูล) เป็นต้น
3. Tag เปิด/ปิด บาง tag ละ tag ปิดได้ เช่น <tr> (Tag กำหนดแถวตาราง), <th> (Tag กำหนดคอลัมภ์ตาราง)
4. คำสั่งใน Tag เขียนด้วยอักษรตัวใหญ่หรือเล็กก็ได้ เช่น <Body> หรือ <BODY> หรือ <body>
1.3 โครงสร้างของภาษา HTML
การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ 2 ส่วน ดังนี้
1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง (Title) ของหน้าต่างการทำงานในระบบ Windows
2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML
ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้
<html>
<head> <title> ส่วนชื่อเอกสาร </title> </head>
<body>
tag คำสั่ง
</body>
</html>
คำสั่ง หรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า "<" ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า ">" เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม "/" (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย
ในการเขียนคำสั่งภาษา HTML สามารถเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนคละกันได้ เช่น <HTML> หรือ <Html> หรือ <html> ซึ่งจะให้ผลเหมือนกัน
คำสั่งเริ่มต้นของเอกสาร HTML
<HTML>..........</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ (Head Section)
<HEAD>..........</HEAD>
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ
<TITLE>..........</TITLE >
ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะ
พิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุม
ถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคำสำคัญในการค้นหา (Keyword)
<BODY>..........</BODY>
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>
ในบทเรียนนี้ได้ทำการจัดเนื้อหาสำหรับการสร้างโฮมเพจด้วยภาษา HTML สำหรับกลุ่มคำสั่งได้ดังนี้
1. กลุ่มคำสั่งจัดรูปแบบตัวอักษร
2. กลุ่มคำสั่งการจัดรูปแบบเอกสาร
3. กลุ่มคำสั่งจัดการรูปภาพ
4. กลุ่มคำสั่งการจัดรูปแบบฉากหลัง
5. กลุ่มคำสั่งจัดการตาราง
6. กลุ่มคำสั่งเกี่ยวกับการเชื่อมโยง
สรุป
<HTML>....</HTML> คำสั่งเริ่มต้น คำสั่ง html เป็นคำสั่งเริ่มการเขียน
<HEAD>....</HEAD> เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ
<TITLE>....</TITLE> ใช้บอกชื่อของเว็บเพจ
<BODY>....</BODY> เป็นส่วนสำคัญที่สุด เพราะเป็นส่วนที่แสดงเนื้อหา
ทั้งหมด อาจรวมถึง ข้อความ รูปภาพ ตาราง
การเชื่อมโยง
1.4 เริ่มต้นกับภาษา HTML ด้วย Notepad
ในการสร้าง Homepage สามารถทำได้โดย
1. การใช้โปรแกรมสำเร็จรูป และ
2. การใช้โปรแกรม Notepad
ซึ่งในบทเรียนนี้จะสอนการเขียนโฮมเพจด้วยภาษา HTML โดยใช้โปรแกรม Notepad ในระบบปฏิบัติการ windows ซึ่งต้องเขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad
Notepad นี้จัดเป็นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรือเขียนภาษา HTML ได้ และ Notepad นี้เป็นโปรแกรมที่นิยมใชในการเขียนโฮมเพจ สามารถใช้งานได้ง่าย และเป็นโปรแกรมที่ทำงานบนระบบ Windows
การเรียกใช้งานโปรแกรม Notepad สามารถทำได้ดังนี้
คลิกที่ Start --> เลือก Programs --> เลือก Accessories --> เลือก Notepad
ได้โปรแกรม Notepad สำหรับเขียนโฮมเพจ ดังนี้
ทดสอบการใช้โปรแกรม Notepad โดยพิมพ์คำสั่งพื้นฐานของภาษา HTML ดังนี้
การบันทึกไฟล์โปรแกรม Notepad ให้เป็นไฟล์ HTML
หลังจากใส่คำสั่งพื้นฐานของภาษา HTML ลงใน Notepad ให้ Save เป็น file นามสกุล ดอท.html ดังนี้
คลิก File --> เลือก save ในช่อง File name ให้พิมพ์ชื่อ File ที่ต้องการลงไป
เช่น test.html (test.html อ่านว่า เทส ดอท เอช ที เอ็ม แอล)
จะได้ File 1 File ที่เขียนด้วยภาษา HTML ชื่อ test.html จะเปิดโปรแกรม Internet Explorer (IE)
หมายเหตุ เมื่อทำการ save file เป็น file HTML แล้ว ถ้าต้องการแก้ไขเอกสาร HTML ที่เปิดดูด้วยโปรแกรม Internet Explorer เลือก view ที่ menu bar >> เลือก source จะปรากฏข้อมูลที่เขียนด้วยภาษา HTML ในโปรแกรม notepad