รู้จักกับ HTML
HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์ (Hypertext Document : ข้อความในเอกสารที่เชื่อมโยงถึงข้อมูลต่างๆ ได้) ซึ่งพัฒนาขึ้นมาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee ในปี ค.ศ.1990 ซึ่งใช้ในระบบของ CERN (Conseil Europeen pour la Recherche Nucleaire) เบื้องต้นได้เริ่มใช้ที่สวิตเซอร์แลนด์ จากนั้นก็ได้แพร่ขยายออกไป ระบบนี้ได้ถูกตั้งชื่อว่า World Wide Web : WWW ที่เรารู้จักกันจนมาถึงยุคปัจจุบัน
HTML = Hypertext+SGML
HTML เกิดจากการสร้างเอกสาร Hypertext โดยพัฒนาจากภาษา SGML
ลักษณะของภาษา HTML
องค์ประกอบของภาษา HTML สามารถแบ่งออกเป็น 2 ส่วน คือ ส่วนที่เป็นข้อความทั่วๆไป และส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกคำสั่งนี้ว่า แท็ก (Tag) โดยแท็กคำสั่งของ HTML จะอยู่ในเครื่องหมาย < และ > ซึ่งมีหลักในการเขียน คือ
- รูปแบบแท็กจะแยกเป็น 2 ส่วน โดยจะต้องมีส่วนเริ่มต้นของแท็ก เรียกว่า “แท็กเปิด” และส่วนจบของแท็ก เรียกว่า “แท็กปิด” โดยส่วนของแท็กปิดจะต้องมีเครื่องหมาย Slash (/) ดังนี้
<แท็กเปิด> ข้อความ </แท็กปิด> เช่น <title>…</title>
ในกรณีที่เราต้องการใช้แท็กซ้อนกันมากกว่า 1 แท็ก เราจะต้องใช้แท็กปิด ปิดแท็กในสุดก่อน แล้วจึงไล่ปิดแท็กอื่นๆ ตามลำดับ เช่น
- บางแท็กอาจจะไม่ต้องมีแท็กปิดก็สามารถใช้งานได้ เช่น <br>
- เราสามารถพิมพ์เป็นตัวเล็ก หรือตัวใหญ่ก็ได้ (เวอร์ชัน 4 ขึ้นไป) เช่น <HTML>, <html>, <Html> จะมีความหมายเหมือนกัน
- บางแท็กจะมีตัวกำหนดคุณสมบัติเรียกว่า แอตทริบิวต์ (Attribute) และค่าที่ถูกำหนดให้ใช้ในแท็ก (Value) โดยจะเขียนไว้หลังแท็ก
เช่น <hr width=600 size=5>
| แท็ก | hr | เป็นการกำหนดเส้นคั่นทางแนวนอน |
| แอตทริบิวต์ | width | กำหนดคุณสมบัติความยาวของเส้น |
| ค่าที่กำหนดให้ใช้ | 600 | ค่าความยาวของเส้น |
โครงสร้างพื้นฐานของ HTML
โครงสร้างของภาษา HTML แบ่งออกได้เป็น 4 ส่วนหลัก ดังนี้
<html>…</html> เป็นแท็กแรกที่ต้องมีในภาษา HTML ซึ่งบ่งบอกว่านี่คือภาษา HTML โดยจะอยู่ที่จุดเริ่มต้นของเอกสารและท้ายเอกสารในแต่ละแฟ้ม
<head>…</head> เป็นส่วนกำหนดรายละเอียดหัวเอกสาร HTML เช่น
- การกำหนดชื่อเพจ โดยใช้แท็ก <title>…</title> ซึ่งข้อความภายในแท็กนี้จะเป็นชื่อหัวเรื่องเว็บเพจที่ต้องการ ซึ่งจะต้องมีความยาวไม่เกิน 64 ตัวอักษร ข้อความนี้จะไปปรากฏที่ title bar ของบราวเซอร์ที่เราใช้งานอยู่ และปรากฏบน Bookmark ของโปรแกรมบราวเซอร์ด้วย
- การกำหนดรูปแบบของข้อความและเลย์เอาต์ในหน้าเว็บเพจ ที่เรียกว่า สไตล์ชีต ซึ่งจะกล่าวถึงในบทนั้น
- การแทรก หรือใส่สคริปต์โปรแกรม เช่น JavaScript ซึ่งจะกล่าวในบทนั้นอีกครั้ง
<body>…</body> ส่วนนี้เป็นส่วนของเนื้อหาเว็บเพจของเรา ไม่ว่าจะเป็นข้อความ รูปภาพ ตาราง และการเชื่อมต่อไปยังเอกสารอื่นๆ ที่จะไปแสดงผลที่เว็บบราวเซอร์
คำสั่งเริ่มต้นสำหรับ HTML
คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทำหน้าที่ตกแต่ง ข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร
คำสั่งเริ่มต้น
รูปแบบ <HTML>…..</HTML>
คำ สั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง
Beign และ End ใน Pascal
คำสั่งการทำหมายเหตุ
รูปแบบ <!– ….. –>
ตัวอย่าง <!– END WEBSTAT CODE –>
ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
ส่วนหัว
รูปแบบ <HEAD>…..</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>…..</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็น
ส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
ส่วนของเนื้อหา
รูปแบบ <BODY>…..</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ