HTML ย่อมาจากคำว่า " H yper T ext M arkup L anguage" เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์ ที่แสดงผลในลักษณะของเว็บเพจ ซึ่งสามารถแสดงผลได้ในรูปแบบต่างๆ ไม่ว่าเป็นภาพกราฟิก ภาพนิ่ง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซต์อื่นๆ
         ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ จึงสามารถกำหนดรูปแบบและโครงสร้างได้ง่าย

โครงสร้างภาษา HTML

การเขียนภาษา HTML นั้นมีส่วนประกอบหลักอยู่ 2 ส่วน คือ ส่วนที่เป็นเนื้อหา และส่วนที่เป็นคำสั่ง ส่วนที่เป็นคำสั่งนั้นจะอยู่ในรูปของ Tag ซึ่งจะเขียนอยู่ในเครื่องหมาย มากกว่า และ น้อยกว่า < > แต่ละ Tag มีหน้าที่ที่แตกต่างกันออกไป ซึ่งจะกล่าวในบทต่อไป

Tag แบ่งออกเป็น 2 ประเภท คือ

  1. แท็กเดี่ยว คือ คำสั่งที่มีคำสั่งเพียงอย่างเดียว ซึ่งสามารถใช้และสิ้นสุดคำสั่งได้ด้วยตัวของมันเอง เช่น
    ข้อความ.... <br>
    <hr>
    <! - ข้อความ - >
  1. แท็กคู่ คือ คำสั่งที่ต้องมีส่วนเริ่มต้นและส่วนจุดจบของคำสั่งนั้นๆ โดยแท็กที่เป็นส่วนจบนั้นจะมีเครื่องหมาย slash / ติดเอาไว้ เช่น
    <html> ส่วนของเนื้อหา ..... </html>
    <center> ข้อความ..... </center>
    <p> ข้อความ.... </p>

*** ถ้าหากมีการใช้แท็กคู่หลายๆ คำสั่ง เช่น คำสั่งตัวขีดเส้นใต้ <U> .... </U> และตามด้วย คำสั่ง ตัวเอียง <I>....</I> จะต้องปิดคำสั่งตัวเอียงก่อน แล้วจึงจะมาปิดคำสั่งตัวหนา***
<I> U> ข้อความ.... </U> </I>
         การกำหนดโครงสร้างหลัก การจัดวางที่เห็นเป็นการจัดวางแบบมาตรฐาน ซึ่งประกอบไปด้วย 4 ส่วน ซึ่งเวลาเริ่มเขียนภาษาHTML ควรเริ่มจากตรงนี้ก่อนทุกครั้ง

  • คำสั่งหลัก <HTML> .... </HTML> เป็นคำสั่งที่ไว้กำหนดจุดเริ่มต้นและจุดจบของเอกสาร
  • คำสั่งหลัก <HEAD> .... </HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง โดยภายในคำสั่งนี้จะประกอบไปด้วย
    • คำสั่งหลัก <TITLE> .... </TITLE> เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการให้ขึ้นอยู่ในส่วนของ Title Bar โดยสามารถพิมพ์ได้ยาว 64 ตัวอักษร
  • คำสั่งหลัก <BODY> .... </BODY> เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของเอกสารทั้งหมด ว่าจะให้มีลักษณะอย่างไร

    <hx> ..... </hx>
    ใช้ในการกำหนดขนาดให้กับข้อความที่เป็นหัวข้อเรื่อง ในเอกสารที่มีหัวข้อเป็นปลีกย่อย สามารถแยกเป็นลำดับของหัวเรื่องได้อย่างชัดเจน

    ..... <br>
    ใช้ในการกำหนดจุดสิ้นสุดบรรทัด และขึ้นบรรทัดใหม่ คำสั่งนี้เหมือนการกด Enter บน keyboard นั่นเอง

    <p> ... </p>
    <p align="left/center/right"> ... </p>
    ใช้แสดงข้อความในลักษณะพารากราฟ หรือย่อหน้าในเว็บเพจ และยังสามารถใช้ในการขึ้นบรรทัดใหม่ครั้งละ 2 บรรทัด

    <center> ... </center>
    ใช้แสดงข้อความหรือรูปภาพใช้จัดกึ่งกลางเว็บเพจ

    <hr>
    <hr align="left/center/right"> กำหนดตำแหน่งเส้น
    <hr width="pixels or %"> กำหนดความยาวเส้น
    <hr size="pixels"> กำหนดขนาดเส้น
    <hr noshade> กำหนดลักษณะเส้น
    ใช้แสดงเส้นคั่นแนวนอน โดยใช้ในการแบ่งเนื้อหาหรือคั่นเพื่อความสวยงามและความเป็นระเบียบของเนื้อหา

    <font face="text"> ..... </font> กำหนดแบบอักษร
    <font size="number"> ..... </font> กำหนดขนาดอักษร
    <font color="color"> ..... </font> กำหนดสีอักษร
    ใช้กำหนดรูปแบบตัวอักษร ในข้อความที่อยู่ภายใน เช่น ฟอนต์ สี และ ขนาดตัวอักษร

    <b>....</b>
    ใช้กำหนดข้อความที่อยู่ภายใจคำสั่งให่แสดงผลด้วยตัวอักษร ตัวหนา โดยมีจุดประสงค์ก็เพื่อเน้นข้อความในประโยคนั้นๆ

    <i> ... </i>
    ใช้กำหนดข้อความให้ตัวอักษรเอน โดยมีจุดประสงค์เพื่อเน้นข้อความนั้นๆ

    <u> ... </u>
    ใช้แสดงความแบบขีดเส้นใต้ เพื้อเน้นข้อความในประโยคนั้นๆ

    <table> .... </table>
    <table bgcolor="color"> .... </table> กำหนดสีพื้นในตาราง
    <table border="pixels"> .... </table> กำหนดขนาดของขอบตาราง
    <table width="pixels/%"> .... </table> กำหนดความกว้างของตาราง
    ใช้ในการสร้างตารางข้อมูล โดยจะมีคำสั่งที่ใช้ร่วมกันคือ คำสั่ง <TR> ในการสร้างแถวเซลล์ข้อมูล, คำสั่ง <TD> ในการสร้างเซลล์ข้อมูล, คำสั่ง <TH> ในการสร้างหัวตาราง

    <img src="url">
    <img align="top | middle | bottom | left | right"> การกำหนดตำแหน่งให้กับรูปภาพ
    <img width="pixels"> การกำหนดความกว้างรูปภาพ
    <img height="pixels"> การกำหนดความสูงรูปภาพ
    <img border="number"> การกำหนดความสูงรูปภาพ
    <img hspace="number"> การกำหนดช่องว่างแนวนอนระหว่างรูปภาพกับข้อความ
    <img vspace="number"> การกำหนดช่องว่างแนวตั้งระหว่างรูปภาพกับข้อความ
    ใช้ในการแสดงรูปภาพกราฟฟิก โดยจะต้องเป็นไฟล์กราฟฟิกที่เว็บบราวเซอร์รู้จัก เช่น GIF,JPEG,XPM,XBM เป็นต้น

    <body background="url">
    การนำรูปภาพนำมาทำเป็น วอลเปเปอร์

    <a href="url"> .... </a>
    ทำหน้าที่กำหนดข้อความหรือภาพกราฟฟิกที่อยู่ภายในให้ทำหน้าที่เป็นจุดเชื่อมโยงไปยังเว็บเพจอื่น หรือข้อมูลชนิดต่างๆ

    ที่มา : http://www.yupparaj.ac.th/CAI/create_web/htm5.htm                                       

1