HTML
เกริ่นนำ HTML
เว็บเพจทั้งหลายที่เห็นกันบนอินเตอร์เน็ตนั้น ล้วนเป็นเอกสารชนิดหนึ่ง ที่เรียกว่าเอกสาร HTML (HyperText Markup Language) ทั้งสิ้น
HTML ก็คือเอกสารข้อความธรรมดาๆ ที่มี <TAG> กำกับแต่ละส่วนของเอกสาร เพื่อบอกให้เว็บบร๊าวเซอร์รู้ว่า ส่วนนั้น ส่วนนี้จะต้องแสดงผลอย่างไร หรือจะต้องทำอย่างไรหากมีการคลิกเมาส์ ตรงบริเวณที่กำหนด เป็นต้น
หน้าตาของ TAG
แท็ก (TAG) คือป้ายกำกับข้อความ มีลักษณะตายตัวคือจะเริ่มต้นด้วยเครื่องหมาย < และปิดท้ายด้วย > คำหรือข้อความ ที่อยู่ภายในเครื่องหมายทั้งสองนี้ บราวเซอร์จะถือว่าเป็นคำสั่งกำกับข้อความ และจะไม่ถูกแสดงให้ผู้ท่องเว็บเห็น โดยทั่วไปแล้วแท็กจะมีเป็นคู่เสมอ เช่น <center> ..... </center> ขอบข่ายของแท็ก จะเริ่มต้นและสิ้นสุด ภายใต้คู่แท็กนั้นๆ โดย
- ตัวแรกเรียกว่าแท็กเปิด
- ส่วนตัวหลังจะเริ่มด้วยเครื่องหมาย / และตามด้วยชื่อแท็กนั้นและเรียกว่าแท็กปิด
ส่วนขยายของ TAG
แท็กต่างๆที่ใช้บนเอกสาร HTML อาจมีส่วนขยาย เพื่อเพิ่มรายละเอียดของแท็กนั้นๆ ได้ด้วย โดยส่วนขยาย จะถูกระบุไว้ที่แท็กเปิดเสมอ เช่น <font face="Tahoma" color="#FEAE67">ข้อความ</font> เป็นการให้รายละเอียด 2 อย่างคือ แบบของฟ้อนต์ และสีของฟ้อนต์ เป็นต้น
รูปแบบของเอกสาร HTML
รูปแบบมาตรฐานของเอกสาร HTML จะมีอยู่สองส่วน ส่วนแรกเรียกว่าส่วนหัว (head) และส่วนที่สองเรียกว่า ส่วนตัว(body) และทั้งสองส่วนจะต้องอยู่ภายใต้คู่แท็ก <HTML>....</HTML> เสมอ
แท็กมาตราฐานของเอกสาร HTML
<html>
<head>
..........................
..........................
</head>
<body>
.......................... เป็นส่วนของ
.......................... เนื้อหาของเอกสาร
</body>
</html>
TAG HTML ที่ใช้ในการสร้างสื่อบน thaigoodview.com
- สามารถใช้ TAG เหล่านี้ได้ โดยการ disable rich-text ส่วนของ Editor
- ไม่จำเป็นต้องใช้ TAG เหล่านี้ <html> <head>...</head> <body>...</body> </html>
การทำตัวหนา ใช้คำสั่ง <strong>ข้อความ</strong>
ผลลัพธ์คือ ข้อความ - การทำตัวเอียง ใช้คำสั่ง <em>ข้อความ</em>
ผลลัพธ์คือ ข้อความ - การขีดเส้นใต้ ใช้คำสั่ง <u>ข้อความ</u>
ผลลัพธ์คือ ข้อความ - การขึ้นบรรทัดใหม่ ใช้คำสั่ง ข้อความ 1<br>ข้อความ 2
ผลลัพธ์คือ ข้อความ 1
ข้อความ 2 - การขึ้นย่อหน้าใหม่ ใช้คำสั่ง ข้อความ 1<p>ข้อความ 2</p> หรือ <div>ข้อความ</div>
ผลลัพธ์คือ ข้อความ 1
ข้อความ 2
- การจัดชิดซ้าย ใช้คำสั่ง <p align "left">ข้อความ</p> หรือ <div align "left">ข้อความ</div>
- การจัดกึ่งกลาง ใช้คำสั่ง <p align "center">ข้อความ</p> หรือ <div align "center">ข้อความ</div>
- การจัดชิดขวา ใช้คำสั่ง <p align "right">ข้อความ</p> หรือ <div align "right">ข้อความ</div>
- การใส่ลิงค์ แบบเปิดทับหน้าเดิม ใช้คำสั่ง <a href = "ลิงค์ที่จะวิ่งไป">ข้อความ</a>
เช่น <a herf = "http://www.thaigoodview.com">หน้าบ้าน</a>
แบบเปิดหน้าต่างใหม่ ใช้คำสั่ง <a target="_blank" href = "ลิงค์ที่จะวิ่งไป">ข้อความ</a>
เช่น <a target="_blank" herf = "http://www.thaigoodview.com">หน้าบ้าน</a> - การกำหนดสีตัวอักษร <span style="color: #รหัสสี">ข้อความ</span>
เช่น <span style="color: #FF0000">ข้อความ</span> - การกำหนดขนาดตัวอักษร <span style="font-size: ขนาดตัวอักษร">ข้อความ</span>
เช่น <span style="font-size: 12 pt">ข้อความ</span> - การกำหนดสี และขนาดตัวอักษร <span style="color: #รหัสสี" "font-size: ขนาดตัวอักษร">ข้อความ</span>
เช่น <span style="color: #FF0000" "font-size: 12 pt">ข้อความ</span> - การแทรกรูปภาพ
<img border="ความหนาของกรอบภาพ" width="ความกว้างของภาพ" src="ที่อยู่ของภาพ" height="ความสูงของภาพ" />
เช่น <img border="0" width="162" src="/files/u9/logodailynews.gif" height="52" /> - การแทรกตาราง
<table border="ความหนาของเส้นขอบตาราง" width="ความกว้างของตาราง(ไม่ควรเกิน 600px)" cellPadding="ระยะห่างทั้ง 4 ด้าน ระหว่างข้อความภายในเซลล์และขอบในของเซลล์" cellSpacing="ระยะห่างระหว่างเซลล์ และมีผลให้กรอบระหว่างเซลล์กว้างมากขึ้น">
<tbody>
<tr> แถวที่ 1
<td> </td> คอลัมน์ที่ 1 ของแถวที่ 1
<td> </td> คอลัมน์ที่ 2 ของแถวที่ 1
</tr> จบตารางที่ 1
<tr> แถวที่ 2
<td> </td> คอลัมน์ที่ 1 ของแถวที่ 2
<td> </td> คอลัมน์ที่ 2 ของแถวที่ 2
</tr> จบตารางที่ 2
</tbody>
</table> จบคำสั่งตาราง
เช่น
<table border="1" width="550" cellPadding="0" cellSpacing="0">
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>