ภาษา html คือภาษาคอมพิวเตอร์ที่ใช้ในการสร้างโฮมเพจเนื่องจากสามารถ Run คำสั่งต่างๆ ได้บนโปรแกรม Web Browser ทั่วไป โรงเรียนพระกุมารร้อยเอ็ดได้กำหนดหลักสูตรภาษา html ให้กับนักเรียนชั้น ม.2 ซึ่งในปีการศึกษา 2546 นี้ นักเรียนจะสามารถใช้คำสั่งต่างๆ ได้เพื่อเป็นพื้นฐานในการสร้าง โฮมเพจทั่วไป และพัฒนาถึงขั้น Dynamic Page

HyperText Markup Language <HTML> *for M2 PK. Student โดย..ยิ่งยศ บุญมั่งมี
ความหมายของ HTML โครงสร้างของภาษา HTML คำสั่งพื้นฐานทั่วไปของภาษา html ตัวอย่าง code html
แสดงความคิดเห็นเกี่ยวกับการใช้ภาษา HTML
ความหมายของ HTML
HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วยHTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ WWW เติบโตขยายตัวอย่างกว้างขวางตามไปด้วย Tag

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


Tag เปิด/ปิด
เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash
( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <BLINK>…</BLINK> เป็นต้น

กลับข้างบน
โครงสร้างของภาษา HTML
ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่ายๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag <HTML>…</HTML>

<html>
  <head>
      <tag คำสั่ง>
  </head>
  <body>
      <tag คำสัง>
  </body>
</html>

กลับข้างบน
คำสั่งพื้นฐานทั่วไปของภาษา 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 ที่จะรวม">
กลับข้างบน
ตัวอย่าง code html
<html>
<head>
<title>ทดสอบการสร้างตาราง</title>
</head>
<body background="Picforweb/04_2.jpg">
<center><table width="80%" border="1" bordercolor=blue>
<tr>
<td colspan="4" bgcolor=black><font size="5" color=yellow><b><marquee behavior="alternate">โรงเรียนพระกุมารร้อยเอ็ด</marquee></b></font></td>
</tr>
<tr>
<td rowspan="3" bgcolor=blue border="1" bordercolor=black width="33%"><center><img src="Picforweb/b_1.jpg" widht="80" height="100" alt="อาคารมีคาแอล"></center></td>
<td bgcolor=pink ><center><font size="5" color=red face="AngsanaUPC"><b><a href="history.htm" target="_blank">ประวัติโรงเรียน</a></b></font></center></td>
<td bgcolor=gold><center><font size="5" color=red face="AngsanaUPC"><b><a href="menager.htm" target="_blank">ผู้บริหาร</a></b></font></center></td>
</tr>
<tr>
<td bgcolor=pink><center><font size="5" color=red face="AngsanaUPC"><b><a href="menager2.htm" target="_blank">แผนผังการบริหารงาน</a></b></font></center></td>
<td bgcolor=gold><center><font size="5" color=red face="AngsanaUPC"><b><a href="map.htm" target="_blank">แผนผังโรงเรียน</a></b></font></center></td>
</tr>
<tr>
<td bgcolor=pink><center><font size="5" color=red face="AngsanaUPC"><b><a href="vision.htm" target="_blank">ปรัชญา-คำขวัญ</a></b></font></center></td>
<td bgcolor=gold><center><font size="5" color=red face="AngsanaUPC"><b><a href="taecher.htm" target="_blank">บุคลกร</a></b></font></center></td>
</tr>
</table></center>
<br>
<hr>
<center><a href="http://www.holy.ac.th" target="_blank"><b>โฮมเพจโรงเรียนพระกุมารร้อยเอ็ด</b></a></center>
<hr>
</body>
</html>
ผลลัพธ์
โรงเรียนพระกุมารร้อยเอ็ด
อาคารมีคาแอล
ประวัติโรงเรียน
ผู้บริหาร
แผนผังการบริหารงาน
แผนผังโรงเรียน
ปรัชญา-คำขวัญ
บุคลกร

โฮมเพจโรงเรียนพระกุมารร้อยเอ็ด
แสดงความคิดเห็นเกี่ยวกับการใช้ภาษา HTML
กลับข้างบน