รู้จักภาษา HTML เบื้องต้น

ความหมายของ HTML

               ภาษา HTML (HyperText Markup Language) เป็นภาษาหลักที่ใช้ในการสร้างเวบเพจ (Web Page) เป็นภาษาประเภท Markup Language เกิดขึ้นจากการพัฒนาระบบ World Wide Web ในเดือนมีนาคม 1989 โดยนักวิจัยจากสถาบัน CERN (Conseil European Pour La Recherche Nucleaire) ซึ่งเป็นห้องทดลองในเมืองเจนีวา ประเทศสวิสเซอร์แลนด์ ชื่อ ทิม เบอร์เนอร์ – ลี (Tim Berners – Lee) ซึ่ง ทิม เบอร์เนอร์ – ลี ได้นำแนวความคิดในเรื่อง Hypertext ของ Vannevar Bush และ Ted Nelson มาใช้เพื่อกระจายข้อมูลในองค์กร ต่อมามีการพัฒนาและกำหนดมาตรฐานโดยองค์กรที่ชื่อว่า W3C (World Wide Web Consortium)

ภาษา HTML เป็นภาษาที่มีลักษณะของข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปของเอกสารข้อความ (Text Document) จึงกำหนดรูปแบบและโครงสร้างได้ง่าย ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Level 1 (รุ่นดั้งเดิม), HTML 2.0, HTML 3.0, HTML 3.2 และ HTML 4.0 ซึ่งเป็นรุ่นที่นิยมเขียนกันในปัจจุบัน (ขณะนี้ W3C ได้พัฒนา HTML 4.01 ออกมาแล้ว เพื่อลองรับมาตรฐานภาษา XML) จึงทำให้ภาษา HTML ในปัจจุบันสามารถแสดงภาพทางกราฟฟิกและระบบเสียงได้ เพื่อตอบสนองในการทำงานในปัจจุบัน

ภาษา HTML สามารถสร้างขึ้นได้จากโปรแกรมสร้างไฟล์ข้อความ (Text Editor) ทั่ว ๆ ไป เช่น Notepad หรือ Word Processing ได้ อีกทั้งง่ายต่อการเรียนรู้เพราะภาษา HTML ไม่มีโครงสร้างความเป็น Programming เลยแม้แต่น้อย และไฟล์ที่ได้จากการสร้างเอกสาร HTML ยังมีขนาดเล็กอีกด้วย

นามสกุลของไฟล์ HTML จะเป็นไฟล์นามสกุล .htm หรือ .html ซึ่งใช้ในทั้งระบบปฏิบัติการยูนิกซ์ (UNIX) และระบบปฏิบัติการ Windows และเรียกใช้งานได้จากเว็บบราวเซอร์ (Web Browser) เช่น Internet Explorer หรือ NetScape

 

 

ความหมายของ Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
        Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR> <img> <HR>เป็นต้น
Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <BLINK>…</BLINK> เป็นต้น

 

 

โครงสร้างของภาษา html

โครง สร้างของภาษา HTML ประกอบไปด้วยส่วนสำคัญ 2 ส่วน ได้แก่ ส่วนหัว (Head) และส่วนเนื้อหา (Body) โดยทั้ง 2 ส่วนนี้ต้องเขียนอยู่ระหว่างแทก <HTML>…</HTML> ดังนี้

<html>
<head>
<title>……….</title>
</head>
<body>
……………………<tag คำสัง>……………………
……………………<tag คำสัง>……………………
</body>
</html>

แทก ที่เขียนเป็นส่วนหัวนั้นต้องเขียนอยู่ระหว่างแทก <HEAD>…</HEAD> ประกอบด้วยแทก<TITEL>…</TITEL>และ<META> แทกที่เขียนเป็นส่วนเนื้อหาต้องเขียนอยู่ระหว่างแทก <BODY>…</BODY> ประกอบไปด้วยแทกต่าง ๆ มากมาย

 

 

กฎในการใช้ HTML

  1. แต่ละ tag จะต้องอยู่ในเครื่องหมาย <> เท่านั้น
  2. ใช้ตัวพิมพ์เล็กหรือใหญ่ก็ได้ มีความหมายเดียวกัน เช่น <titel> <Titel> หรือ <TITLE> ต่าง ก็ให้ความหมายเดียวกัน
  3. tag จะมี tag เปิด และ tag ปิดโดย tag ปิด จะมี / รวมอยู่ด้วย แต่ก็มีบาง tag ที่ไม่มีตัวปิด เช่น <BR>,<P>

 

 

คำสั่งพื้นฐานทั่วไปของภาษา html

คำสั่ง ความหมาย รูปแบบ
<title> กำหนดข้อความบนไตเติลบาร์ เป็นคำสั่งในในส่วน <head> <head>
<title>ข้อความ</title>
</head>
<background> ใช้รวมกับ <body> หรือ <table> เพื่อกำหนดพื้นหลังเป็นรูปภาพ <body background=”ชื่อ.นามสกุลรูปภาพ”>
<bgcolor> ใช้รวมกับ <body> หรือ <table> เพื่อกำหนดสีของพื้นหลัง <body bgcolor=ชื่อสี>
<font
color
size
face>
แสดงข้อความ
กำหนดสีของข้อความ
กำหนดขนาดของข้อความ
กำหนดชนิดของข้อความ
<font color=ชื่อสี size=”ขนาดกำหนดได้ตั้งแต่ 1 ถึง 7″ face=”ชนิดของตัวอักษรเช่น Angsana new เป็นต้น”>ข้อความ</font>
<b>
<i>
<u>
ข้อความหนา
ข้อความเอียง
ข้อความขีดเส้นใต้
<b>ข้อความ</b>
<i>ข้อความ</i>
<u>ข้อความ</u>
<marquee>
<marquee behavior=alternate>
ทำให้ข้อความเลื่อนจากซ้ายไปขวา
ทำให้ข้อความเลื่อนจากซ้ายไปขวาแล้วย้อนกลับ
<marquee>ข้อความ</marquee>
<marquee behavior=alternate>ข้อความ</marquee>
<br>
<hr>
ขึ้นบรรทัดใหม่
ขีดเส้น
<br>
<hr>
<img
src
alt
width
height>
แสดงรูปภาพ
กำหนดรูปภาพ
กำหนดข้อความเมื่อเอาเมาส์วางบนภาพ
กำหนดความกว้างของภาพ
กำหนดความยาวของภาพ
<img src=”ชื่อ.นามสกุลของภาพ” width=”ความกว้าง” height=”ความยาว” alt=”ข้อความ”> เช่น <img src=”pic1.jpg width=”80″ height=”250″ alt=”ภาพหมูอรเอ้ยหมูอ้วน”>
<a
href
target>
กำหนดการเชื่อมโยง
กำหนดจุดเชื่อมโยง
กำหนดการเปิดหน้าต่างใหม่
<a href=”จุดเชื่อมโยง” target=”ลักษณะการเปิดหน้าต่าง”>ข้อความ</a> เช่น
<a href=”http://www.holy.ac.th” target=”_blank”>โฮมเพจโรงเรียนพระกุมารร้อยเอ็ด</a>
<table
width
bgcolor
border
bordercolor>
<tr>
<td>
สร้างตาราง
กำหนดความกว้างของตาราง
กำหนดสีพื้นของตาราง
กำหนดความหนาของเส้นขอบ
กำหนดสีของเส้นขอบ
กำหนดจำนวนแถว(แนวนอน)
กำหนดจำนวนสดมน์(แนวตั้ง)
เช่น <table width=”80%” bgcolor=blue border=”2″ bordercolor=red>
<tr>
<td>ฟุตบอล</td>
<td>วอลเล่บอล</td>
<tr>
จะได้ ตาราง 1 แถว 2 สดมน์ ความยาว 80% ของหน้าจอ สีน้ำเงิน และขอบ 2 pixel สีแดง สดมน์ที่ 1 มีข้อความ ฟุตบอล สดมน์ที่ 2 มีข้อความว่า วอลเล่บอล
rowspan
colspan
รวมแถว
รวมสดมน์
<td rowspan=”จำนวน cell ที่จะรวม”>
<td colspan=”จำนวน cell ที่จะรวม”>

 

 

 

จัดทำโดย นายจีระพงษ์   โพพันธุ์
อ้างอิง
:   1. pyayam.com. “ประวัติและความหมายของ HTML”. http://www.pyayam.com/html/mean.php . 2548
2. ยิ่งยศ บุญมั่งมี. “ความหมายของ HTML”. http://www.holy.ac.th/holy/html.htm . 2546
3. BenNy. “ความหมายของภาษา html และ php”. http://coollybenja.blogspot.com/2009/07/html-php.html . 2552
3. มหาวิทยาลัยราชภัฏธนบุรร. “การใช้งาน macromedia dreamweaver”. http://wbi.dru.ac.th/dcc/e-lea/drea/homedrea.php