HTML

รูปภาพของ ssspoonsak

เกริ่นนำ 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>

สร้างโดย: 
ครูพูนศักดิ์ สักกทัตติยกุล

มหาวิทยาลัยศรีปทุม ผู้ใหญ่ใจดี
 

 ช่วยด้วยครับ
นักเรียนที่สร้างบล็อก กรุณาอย่า
คัดลอกข้อมูลจากเว็บอื่นทั้งหมด
ควรนำมาจากหลายๆ เว็บ แล้ววิเคราะห์ สังเคราะห์ และเขียนขึ้นใหม่
หากคัดลอกทั้งหมด จะถูกดำเนินคดี
ตามกฎหมายจากเจ้าของลิขสิทธิ์
มีโทษทั้งจำคุกและปรับในอัตราสูง

ช่วยกันนะครับ 
ไทยกู๊ดวิวจะได้อยู่นานๆ 
ไม่ถูกปิดเสียก่อน

ขอขอบคุณในความร่วมมือครับ

อ่านรายละเอียด

ด่วน...... ขณะนี้
พระราชบัญญัติลิขสิทธิ์ (ฉบับที่ 2) พ.ศ. 2558 
มีผลบังคับใช้แล้ว 
ขอให้นักเรียนและคุณครูที่ใช้งาน
เว็บ thaigoodview ในการส่งการบ้าน
ระมัดระวังการละเมิดลิขสิทธิ์ด้วย
อ่านรายละเอียดที่นี่ครับ

 

สมาชิกที่ออนไลน์

ขณะนี้มี สมาชิก 0 คน และ ผู้เยี่ยมชม 16 คน กำลังออนไลน์