|
|
เนื้อหาประกอบด้วย
1. การสร้างเว็บเพจด้วยภาษา HTML
2. หลักการสร้างเว็บเพจด้วยภาษา HTML
3. โครงสร้างของภาษา HTML
4. วิธีการเขียนโปรแกรมด้วยภาษา HTML เบื้องต้น
5. การแสดงข้อความบนเว็บเพจเป็นภาษาไทย
6. การเปิดแฟ้มเอกสารเก่า
ในอดีตการที่จะสร้างเว็บเพจสักหน้าให้มีความสวยงามดูเป็นเรื่องที่ยากและยังต้องจดจำคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรมอย่างมากมาย ทำให้ผู้ใช้ไม่ค่อยนิยมที่จะศึกษาและพยายามทำเว็บเพจด้วยตนเอง โดยส่วนใหญ่จะไปจ้างบริษัทต่าง ๆ ที่มีโปรแกรมเมอร์ฝีมือดีเขียนให้ แต่ปัจจุบันมีโปรแกรมสำเร็จรูปที่ช่วยในการสร้างเว็บเพจของตัวเองได้แล้ว การสร้างเว็บเพจในปัจจุบันสามารถทำได้ 2 วิธี คือ
1. สร้างขึ้นด้วยตนเอง โดยการใช้คำสั่งต่าง ๆ ของภาษา HTML แล้วสั่งงานผ่านทางโปรแกรม Text Editor เช่น Notepad
2. สร้างจากโปรแกรมสำเร็จรูปทั่วไป โดยใช้โปรแกรมต่าง ๆ ที่มีความสามารถในการสร้างเว็บเพจ ซึ่งปัจจุบันมีให้เลือกใช้อย่างมากมาย เช่น FrontPage, Dreamweaver หรือแม้แต่โปรแกรม Microsoft Office ก็สามารถสร้างเว็บเพจได้ ผู้ที่ใช้โปรแกรมสำเร็จรูปพวกนี้ไม่จำเป็นต้องรู้คำสั่งต่าง ๆ ของภาษา HTML ให้ยุ่งยากเลย เพราะโปรแกรมเหล่านี้จะทำการเปลี่ยนข้อมูลต่าง ๆ ที่ทำไว้ให้เป็นภาษา HTML โดยอัตโนมัติ
1. การสร้างเว็บเพจด้วยภาษา HTML
ภาษา HTML (Hyper Text Markup Language) เป็นภาษาแรกที่ใช้ในการเขียนโปรแกรม เพื่อให้ข้อมูลที่เขียนไปแสดงผลบนเครือข่ายอินเทอร์เน็ตในลักษณะของข้อความ รูปภาพ เสียง และภาพเคลื่อนไหวต่าง ๆ ภาษา HTML เป็นภาษาที่ง่ายต่อการเรียนรู้ สามารถกำหนดรูปแบบและโครงสร้างได้ง่าย ทำให้ได้รับความนิยมและมีการพัฒนาอย่างตอ่เนื่อง เพื่อให้ใช้งานง่ายขึ้น และตอบสนองต่องานด้านกราฟิกมากยิ่งขึ้น ซึ่งในปัจจุบันโปรแกรมภาษา HTML รุ่นใหม่ ๆ มีข้อดี ต่างๆ เพิ่มขึ้นมากมาย เช่น
- สามารถแสดงผลบนเว็บเบราว์เซอร์ทุกตัวที่สนับสนุน HTML เช่น Microsoft Internet Explorer, Netscape, American Online เป็นต้น
- HTML ที่ถูกบันทึกใน Text Editor จะมีชนิดของไฟล์เป็น HTM สำหรับระบบปฏิบัติการ DOS และจะมีชนิดของไฟล์เป็น HTML หรือ HTM ในระบบปฏิบัติการ Windows หรือ ระบบปฏิบัติการ Unix
- สามารถใช้งานร่วมกับโปรแกรมสำเร็จรูปที่ใช้สำหรับสร้างเว็บเพจทั่วไปได้ง่าย และไฟล์ที่ได้จะมีขนาดเล็ก เช่น เมื่อเขียนโปรแกรม HTML จาก Notepad แล้วสามารถนำไปเปิดแก้ไขหรือตกแต่งเพิ่มเติมในโปรแกรม FrontPage หรือ Dreamweaver และโปรแกรมอื่น ๆ ได้ อย่างสะดวกและรวดเร็ว
2. หลักการสร้างเว็บเพจด้วยภาษา HTML
การจะสร้างเว็บเพจด้วยภาษา HTML ได้นั้นจะต้องมีเครื่องมือที่ใช้ในการสร้างเว็บเพจอยู่ 2 อย่าง คือ เท็กซ์เอดิเตอร์ (Text Editor) และเว็บเบราว์เซอร์ (Web Browser)
1. เท็กซ์เอดิเตอร์ (Text Editor) คือโปรแกรมต่าง ๆ ที่ใช้ในการกำหนดข้อความ และรูปแบบคำสั่งต่าง ๆ ของภาษา HTML ซึ่งปัจจุบันผู้เขียนโปรแกรมส่วนใหญ่จะใช้โปรแกรม Notepad ในการเขียนโปรแกรม HTML เป็นหลัก
2. เว็บเบราว์เซอร์ (Web Browser) คือส่วนที่ใช้สำหรับแสดงผลลัพธ์ของเอกสารที่เขียนด้วยภาษา HTML เหมือนกับกการคอมไพล์ (Compiled) หรือ รัน (Run) โปรแกรมภาษาทางคอมพิวเตอร์ทั่ว ๆ ไป
3. โครงสร้างของภาษา HTML
การเขียนโปรแกรมด้วยภาษา HTML มีส่วนประกอบทีสำคัญอยู่ 2 ส่วน คือ ส่วนที่เป็นข้อความที่จะพิมพ์ และส่วนที่เป็นคำสั่ง ส่วนที่เป็นคำสั่งที่ใช้ในการจัดการรูปร่างและรูปแบบของตัวอักษรหรือเอกสารจะเรียกว่า แท็ก (TAG) และส่วนที่เป็นคำสั่งแท็ก (TAG) นี้จะถูกเขียนอยู่ในเครื่องหมาย < > ทุกคำสั่ง เช่น <BR>, <BODY>, <HEAD> เป็นต้น
รูปแบบของแท็ก <TAG> แบ่งออกเป็น 2 กลุ่ม คือ
1. รูปแบบคำสั่งที่มีเพียงคำสั่งเดียวหรือมีเพียงแท็ก (TAG) เดียวก็สามารถใช้งานได้ เช่น <BR>
2. รูปแบบคำสั่งที่เป็นสองส่วนหรือแท็กคู่ คือมีส่วนเริ่มต้นและต้องมีส่วนจบของคำสั่งถึงจะสามารถทำงานได้สมบูรณ์ โดยส่วนจบของแต่ละคำสั่งจะมีเครื่องหมาย Slash ( / ) ไว้หน้าแท็ก (TAG) คำสั่งนั้น เช่น <HTML>…………..</HTML>
3. การเขียนโปรแกรมด้วยภาษา HTML จะมีโครงสร้างหลักและการจัดวางคำสั่งหลักที่เป็นมาตรฐานเหมือนกันทั่วโลก โดยจะประกอบด้วยคำสั่งหลัก ๆ อยู่ 4 คำสั่งด้วยกันดังนี้
1. <HTML>……….</HTML> เป็นคำสั่งหลักที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML
2. <HEAD>……….</HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง
3. <TITLE>……….</TITLE>เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผลบนแถบ Title bar คำสั่งนี้จะอยู่ภายในคำสั่งส่วน <HEAD>……….</HEAD> โดยกำหนดความยาวของตัวอักษรไม่เกิน 64 ตัวอักษร
4. <BODY>……….</BODY>เป็นคำสั่งที่กำหนดข้อความและรูปแบบของคำสั่งต่าง ๆ ที่ใช้สำหรับปรับแต่งเอกสารที่จะนำเสนอออกทางจอภาพ
ตัวอย่างการเขียนโปรแกรมโครงสร้างหลักของภาษา HTML
4. วิธีการเขียนโปรแกรมด้วยภาษา HTML เบื้องต้น
ถ้าต้องการแสดงข้อความทางอินเทอร์เน็ตว่า Hello this is my first web page. และแสดงข้อความบนแถบ Title Bar ว่า TEST FIRST WEB PAGE ให้เปิดโปรแกรมที่ใช้สำหรับเขียน HTML ในที่นี้ใช้โปรแกรม Notepad ให้ปฏิบัติตามขั้นตอนต่อไปนี้
ขั้นตอนในการสร้างเว็บเพจด้วยภาษา HTML
1. คลิกที่ Start
2. เลือก Program
3. เลือก Accessories
4. เลือก Notepad
รูปแสดงวิธีการเรียกใช้โปรแกรม Notepad
5. เมื่อเปิดโปรแกรม Notepad ได้แล้วให้พิมพ์คำสั่งต่าง ๆ ดังตัวอย่างต่อไปนี้
รูปแสดงตัวอย่างการเขียนโปรแกรม HTML ด้วย Notepad
6. เมื่อพิมพ์ข้อมูลต่าง ๆ เสร็จให้จัดเก็บข้อมูลโดยคลิกที่เมนู File เลือก Save
รูปแสดงตัวอย่างวิธีการจัดเก็บเอกสาร
7. ในการจัดเก็บครั้งแรกโปรแกรมจะขึ้นกรอบมาให้ตั้งชื่อให้กับเอกสารดังตัวอย่างในรูปภาพให้เลือกที่เก็บข้อมูลในช่อง Save in : ว่าจะเก็บไว้ในแผ่นดิสก์ หรือในฮาร์ดดิสก์ และตั้งชื่อให้กับเอกสารในช่อง File name : ในที่นี้ต้องการจัดเก็บในไฟล์ที่ชื่อว่า TEST เมื่อพิมพ์ชื่อเสร็จแล้ว อย่าลืมพิมพ์ส่วนขยายของไฟล์ให้เป็น HTML ด้วย ดังตัวอย่างนี้ TEST.HTM เสร็จแล้วคลิกที่ปุ่ม Save
รูปแสดงวิธีการตั้งชื่อให้กับเอกสาร HTML
8. เรียกดูผลลัพธ์จากการเขียนเว็บเพจนี้บนเว็บเบราว์เซอร์ วิธีเรียกใช้มีหลายวิธี ดังตัวอย่างต่อไปนี้
วิธีที่ 1 คลิกที่ Start เลือก Run
จะปรากฏหน้าจอดังนี้
คลิกที่ปุ่ม Browse... จะปรากฏหน้าจอดังนี้
1) เลือกที่เก็บไฟล์ HTML ที่เก็บไว้ในช่อง Look in :
2) ในช่อง Files of type : เลือกเป็นแบบ All Files ถึงจะมองเห็นเอกสารที่เป็น HTML
3) คลิกเลือกชื่อไฟล์ที่ต้องการ
4) คลิกที่ปุ่ม Open
จะปรากฏหน้าจอดังนี้
คลิกที่ปุ่ม OK เครื่องคอมพิวเตอร์จะทำการเรียกโปรแกรมเว็บเบราว์เซอร์ขึ้นมาพร้อมทั้งแสดงผลลัพธ์ของข้อมูลตามที่ต้องการเขียนไว้ดังนี้
จะสังเกตเห็นว่าโครงสร้างทั้งหมดที่เขียนจะไม่ถูกนำมาแสดงบนหน้าเว็บเพจ จะมีเพียงส่วนที่อยู่ในคำสั่ง <BODY>................</BODY> เท่านั้นที่ได้แสดงอยู่ที่หน้าเว็บเพจ
มีแผนการสอนเรื่อง การสร้างเว็บไซต์ด้วยภาษา HTML บ้างไหมคะ