workshop10
การสร้างตารางด้วยภาษา HTML



คำสั่ง ให้นักเรียนสร้างหน้าเว็บเพจ ด้วยภาษา HTML ให้ได้ผลลัพธ์ตามตัวอย่างต่อไปนี้ example.html


ภาษา HTML

HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเบราเซอร์

Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
1. Tag เดี่ยวเป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น
2. 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>
<bgcolor> ใช้รวมกับ <body> หรือ <table> เพื่อกำหนดสีของพื้นหลัง <body bgcolor=รหัสสี>
<font
color
size
face>		 แสดงข้อความ
กำหนดสีของข้อความ
กำหนดขนาดของข้อความ
กำหนดชนิดของข้อความ		 <font color=รหัสสี size="ขนาดกำหนดได้ตั้งแต่ 1 ถึง 7" face="ชนิดของตัวอักษร
เช่น AngsanaUPC เป็นต้น">ข้อความ</font>
<b>
<i>
<u> 		ข้อความหนา
ข้อความเอียง
ข้อความขีดเส้นใต้ 		<b>ข้อความ</b>
<i>ข้อความ</i>
<u>ข้อความ</u>
<marquee>
<marquee behavior=alternate> 		ทำให้ข้อความเลื่อนจากซ้ายไปขวา
ทำให้ข้อความเลื่อนจากซ้ายไปขวาแล้วย้อนกลับ		 <marquee>ข้อความ</marquee>
<marquee behavior=alternate>ข้อความ</marquee>
<br>
<hr>		 ขึ้นบรรทัดใหม่
ขีดเส้น

<br>
<hr>
<hr color=รหัสสี align=การจัดวาง width=ขนาดความกว้าง size=ขนาดเส้น>
<hr color=black align=center width=50% size=3>

<a
href
target>

กำหนดการเชื่อมโยง
กำหนดจุดเชื่อมโยง
กำหนดการเปิดหน้าต่างใหม่

<a href="จุดเชื่อมโยง" target="ลักษณะการเปิดหน้าต่าง">ข้อความ</a>
เช่น
<a href="http://www.suananun.in.th" target="blank">โฮมเพจโรงเรียนสวนอนันต์</a>
<img
src
alt
width
height> 		แสดงรูปภาพ
กำหนดรูปภาพ
กำหนดข้อความเมื่อเอาเมาส์วางบนภาพ
กำหนดความกว้างของภาพ
กำหนดความยาวของภาพ		 <img src="ชื่อ.นามสกุลของภาพ" width="ความกว้าง" height="ความยาว" alt="ข้อความ">
เช่น
<img src="image\worm.gif" width="100" height="100" alt="นางสาวหนอน">
<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 มีข้อความว่า คำอธิบาย