HTML
บทนำ
HTML หมายถึง Hyper Text Markup Language.เป็นภาษาจัดรูปแบบที่ใช้เพื่อกำหนดลักษณะและเนื้อหาของหน้าเว็บ ช่วยให้เราสามารถจัดระเบียบข้อความกราฟิกเสียงและวิดีโอบนหน้าเว็บ
Key Points:
คำว่า Hypertext หมายถึงข้อความที่ทำหน้าที่เป็นลิงค์
คำว่ามาร์กอัปหมายถึงสัญลักษณ์ที่ใช้กำหนดโครงสร้างของข้อความ สัญลักษณ์มาร์กอัปบอกเบราว์เซอร์ว่าจะแสดงข้อความอย่างไรและมักเรียกว่าแท็ก
คำว่า Language หมายถึงไวยากรณ์ที่คล้ายกับภาษาอื่น ๆ
HTML ถูกสร้างขึ้นโดย Tim Berners-Lee ที่ CERN.
เวอร์ชัน HTML
ตารางต่อไปนี้แสดง HTML เวอร์ชันต่างๆ:
เวอร์ชัน | ปี |
---|---|
HTML 1.0 | พ.ศ. 2534 |
HTML 2.0 | พ.ศ. 2538 |
HTML 3.2 | พ.ศ. 2540 |
HTML 4.0 | พ.ศ. 2542 |
XHTML | พ.ศ. 2543 |
HTML5 | 2555 |
แท็ก HTML
Tag เป็นคำสั่งที่บอกให้เว็บเบราว์เซอร์แสดงข้อความเสียงกราฟิกหรือวิดีโอบนหน้าเว็บ
Key Points:
แท็กจะระบุด้วยวงเล็บมุมคู่
เริ่มต้นด้วยอักขระน้อยกว่า (<) และลงท้ายด้วยอักขระมากกว่า (>)
ชื่อแท็กถูกระบุระหว่างวงเล็บมุม
แท็กส่วนใหญ่มักเกิดขึ้นเป็นคู่: แท็กเริ่มต้นและแท็กปิด
แท็กเริ่มต้นเป็นเพียงชื่อแท็กที่อยู่ในวงเล็บมุมขณะที่ระบุแท็กปิดรวมทั้งเครื่องหมายทับ (/)
แท็กบางแท็กเป็นแท็กว่างกล่าวคือไม่มีแท็กปิด
แท็กไม่คำนึงถึงขนาดตัวพิมพ์
ชื่อแท็กเริ่มต้นและแท็กปิดต้องเหมือนกัน ตัวอย่างเช่น <b> สวัสดี </i> ไม่ถูกต้องเนื่องจากทั้งสองต่างกัน
หากคุณไม่ระบุวงเล็บเหลี่ยม (<>) สำหรับแท็กเบราว์เซอร์จะถือว่าชื่อแท็กเป็นข้อความธรรมดา
แท็กยังสามารถมีแอตทริบิวต์เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับแท็กไปยังเบราว์เซอร์
แท็กพื้นฐาน
ตารางต่อไปนี้แสดงแท็ก HTML พื้นฐานที่กำหนดเว็บเพจพื้นฐาน:
แท็ก | คำอธิบาย |
---|---|
<html> </html> | ระบุเอกสารเป็นเว็บเพจ |
<head> </head> | ระบุข้อมูลเชิงบรรยายเกี่ยวกับเอกสารเว็บ |
<title> </title> | ระบุหัวเรื่องของเว็บเพจ |
<body> </body> | ระบุเนื้อหาของเอกสารเว็บ |
โค้ดต่อไปนี้แสดงวิธีใช้แท็กพื้นฐาน
<html>
<head> Heading goes here…</head>
<title> Title goes here…</title>
<body> Body goes here…</body>
</html>
การจัดรูปแบบแท็ก
ตารางต่อไปนี้แสดงแท็ก HTML ที่ใช้ในการจัดรูปแบบข้อความ:
แท็ก | คำอธิบาย |
---|---|
<b> </b> | ระบุข้อความเป็นตัวหนา เช่น.this is bold text |
<em> </em> | เป็นข้อความวลี ระบุข้อความที่เน้น เช่น. ข้อความที่เน้น |
<strong> </strong> | เป็นแท็กวลี ระบุข้อความที่สำคัญ เช่น. this is strong text |
<i> </i> | เนื้อหาของแท็กตัวเอียงจะแสดงเป็นตัวเอียง เช่น. ข้อความตัวเอียง |
<sub> </sub> | ระบุข้อความที่ห้อยลงมา เช่น. X 1 |
<sup> </sup> | กำหนดข้อความที่เป็นตัวยก เช่น. X 2 |
<ins> </ins> | ระบุข้อความที่แทรก เช่น. ราคาของปากกาตอนนี้ |
<del> </del> | ระบุข้อความที่ถูกลบ เช่น. ราคาของปากกาตอนนี้ |
<mark> </mark> | ระบุข้อความที่ทำเครื่องหมาย เช่น. มันคือฝนตก |
แท็กตาราง
ตารางต่อไปนี้อธิบายแท็กตารางที่ใช้กันทั่วไป:
แท็ก | คำอธิบาย |
---|---|
<table> </table> | ระบุตาราง |
<tr> </tr> | ระบุแถวในตาราง |
<th> </th> | ระบุเซลล์ส่วนหัวในตาราง |
<td> </td> | ระบุข้อมูลในเซลล์ของตาราง |
<caption> </caption> | ระบุคำอธิบายตาราง |
<colgroup> </colgroup> | ระบุกลุ่มคอลัมน์ในตารางสำหรับการจัดรูปแบบ |
แท็กรายการ
ตารางต่อไปนี้อธิบายแท็กรายการที่ใช้กันทั่วไป:
แท็ก | คำอธิบาย |
---|---|
<ul> </ul> | ระบุรายการที่ไม่ได้เรียงลำดับ |
<ol> </ol> | ระบุรายการสั่งซื้อ |
<li> </li> | ระบุรายการ |
<dl> </dl> | ระบุรายการคำอธิบาย |
<dt> </dt> | ระบุคำศัพท์ในรายการคำอธิบาย |
<dd> </dd> | ระบุคำอธิบายของคำศัพท์ในรายการคำอธิบาย |
เฟรม
Framesช่วยให้เราแบ่งหน้าต่างของเบราว์เซอร์ออกเป็นพื้นที่สี่เหลี่ยมหลาย ๆ แต่ละภูมิภาคมีหน้าเว็บ html แยกกันและแต่ละภูมิภาคทำงานอย่างอิสระ
ชุดของเฟรมในเบราว์เซอร์ทั้งหมดเรียกว่าเฟรมเซ็ต จะบอกเบราว์เซอร์ว่าจะแบ่งหน้าต่างเบราว์เซอร์ออกเป็นเฟรมและหน้าเว็บที่แต่ละคนต้องโหลดอย่างไร
ตารางต่อไปนี้อธิบายแท็กต่างๆที่ใช้ในการสร้างเฟรม:
แท็ก | คำอธิบาย |
---|---|
<frameset> </frameset> | เป็นการแทนที่แท็ก <body> ไม่มีแท็กที่ปกติใช้ในองค์ประกอบ <body> แต่จะมีองค์ประกอบ <frame> ที่ใช้ในการเพิ่มแต่ละเฟรม |
<frame> </frame> | ระบุเนื้อหาของเฟรมต่างๆในเว็บเพจ |
<base> </base> | ใช้เพื่อตั้งค่าเฟรมเป้าหมายเริ่มต้นในเพจใด ๆ ที่มีลิงก์ที่มีเนื้อหาแสดงในเฟรมอื่น |
แบบฟอร์ม
Formsใช้ในการป้อนค่า ค่าเหล่านี้จะถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล ฟอร์มใช้องค์ประกอบการป้อนข้อมูลเช่นช่องข้อความกล่องกาเครื่องหมายปุ่มตัวเลือกรายการปุ่มส่ง ฯลฯ เพื่อป้อนข้อมูลลงในนั้น
ตารางต่อไปนี้อธิบายแท็กที่ใช้บ่อยในขณะสร้างฟอร์ม:
แท็ก | คำอธิบาย |
---|---|
<form> </form> | ใช้เพื่อสร้างแบบฟอร์ม HTML |
<input> </input> | ระบุฟิลด์อินพุต |
<textarea> </textarea> | ระบุตัวควบคุมพื้นที่ข้อความที่อนุญาตให้ป้อนข้อความหลายบรรทัด |
<label> </label> | ระบุเลเบลสำหรับองค์ประกอบอินพุต |