เรื่อง การเริ่มต้นกับ HTML

  การเริ่มต้นกับ HTML

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

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

          HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์  ที่แสดงผลในลักษณะของเว็บเพจ  ซึ่งสามารถแสดงผลได้ในรูปแบบต่างๆ ไม่ว่าเป็นภาพกราฟิก  ภาพนิ่ง  ภาพเคลื่อนไหว  เสียง  หรือการเชื่อมโยงไปยังเว็บไซต์อื่นๆ

          ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด คือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี้(ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ  จึงสามารถกำหนดรูปแบบโครงสร้างได้ง่าย

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

 2.  โครงสร้างของภาษา HTML
          การเขียนโฮมเพจด้วยภาษา HTML  นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ2 ส่วน ดังนี้
       1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง(Title) ของหน้าต่างการทำงานในระบบ Windows
       2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML            ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้

คำสั่งเริ่มต้นของเอกสาร HTML

          1.  <HTML>..........</HTML>
                         <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง

                   </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ

          2.  <HEAD>..........</HEAD>
                   เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ   

3.  <BODY>..........</BODY>
          Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>
3.  เริ่มต้นกับภาษา HTML ด้วย Notepad
          คลิกที่ Start --> เลือก Programs -->เลือก Accessories --> เลือก 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