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 แบ่งได้ ดังนี้
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>
โครงสร้างของภาษา
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> เป็นส่วนสำคัญที่สุด
เพราะเป็นส่วนที่แสดงเนื้อหา
ทั้งหมด
อาจรวมถึง ข้อความ รูปภาพ ตาราง
การเชื่อมโยง
เริ่มต้นกับภาษา
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
VDO สอนการสร้างเว็บเพจเบื้องต้น
