Category Archives: ภาษา html

การสร้างตาราง

เขียนใน ภาษา html by

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

1. โครงสร้างของตาราง

<table>
<caption>………</caption>
<tr>
<th>………</th>
<th>………</th>
</tr>
<tr>
<td>………</td>
<td>………</td>
</tr>
<tr>
<td>………</td>
<td>………</td>
</tr>
</table>

  • <table> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </table>
  • <caption> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ </caption>
  • <tr> (Table Row) เป็นการกำหนดแถวของตารางในแนวนอน และมีคำสั่งปิดคือ </tr>
  • <th> (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และมีคำสั่งปิดคือ </th>
  • <td> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ </td>

 

คุณสมบัติของตาราง <table>

แอตทริบิวต์ คุณสมบัติ
align= “align-type” กำหนดตำแหน่งตาราง โดย
left=กำหนดตารางให้อยู่ทางซ้าย
center = กำหนดตารางให้อยู่กึ่งกลาง
right=กำหนดตารางให้อยู่ทางขวา
background=“url” ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพ
bgcolor=“n” กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสี
border=“n” กำหนดเส้นขอบตาราง โดย n เป็นค่าความหนาของขอบตาราง
bordercolor=“n” กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสี
cellpadding=“n” กำหนดระยะห่างระหว่างตัวหนังสือและเส้นแบ่งตาราง โดย n เป็นค่าระยะห่าง
cellspacing=“n” กำหนดขนาดความห่างของซ่องเซลล์  โดย n เป็นขนาดของความห่าง
width=“n” กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น %
height=“n” กำหนดความสูงของตารางเป็นตัวเลขและเป็น %

 

คุณสมบัติของแท็ก <tr>

แอตทริบิวต์ คุณสมบัติ
align= “align-type” กำหนดตำแหน่งตาราง โดย
left=กำหนดตารางให้อยู่ทางซ้าย
center = กำหนดตารางให้อยู่กึ่งกลาง
right=กำหนดตารางให้อยู่ทางขวา
background=“url” ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพ
bgcolor=“n” กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสี
bordercolor=“n” กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสี
valign=“align-type” จัดตำแหน่งข้อมูลในแนวตั้ง โดย
top= จัดอยู่ข้างบน
middle = จัดอยู่ตรงกลาง
bottom= จัดอยู่ข้างล่าง

 

คุณสมบัติของแท็ก <th>

แอตทริบิวต์ คุณสมบัติ
align= “align-type” กำหนดตำแหน่งตาราง โดย
left=กำหนดตารางให้อยู่ทางซ้าย
center = กำหนดตารางให้อยู่กึ่งกลาง
right=กำหนดตารางให้อยู่ทางขวา
background=“url” ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพ
bgcolor=“n” กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสี
bordercolor=“n” กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสี
colspan=“n” ปรับขนาดของคอลัมน์ให้มีขนาดเป็นเท่าของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี โดย n คือ ค่าตัวเลขของคอลัมน์
rowspan=“n” ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี โดย n คือ ค่าตัวเลขของแถว
valign=“align-type” จัดตำแหน่งข้อมูลในแนวตั้ง โดย
top= จัดอยู่ข้างบน  middle = จัดอยู่ตรงกลาง  bottom= จัดอยู่ข้างล่าง

 

คุณสมบัติของแท็ก <td>

แอตทริบิวต์ คุณสมบัติ
align= “align-type” กำหนดตำแหน่งตาราง โดย
left=กำหนดตารางให้อยู่ทางซ้าย
center = กำหนดตารางให้อยู่กึ่งกลาง
right=กำหนดตารางให้อยู่ทางขวา
background=“url” ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพ
bgcolor=“n” กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสี
bordercolor=“n” กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสี
colspan=“n” ปรับขนาดของคอลัมน์ให้มีขนาดเป็นเท่าของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี โดย n คือ ค่าตัวเลขของคอลัมน์
rowspan=“n” ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี โดย n คือ ค่าตัวเลขของแถว
valign=“align-type” จัจัดตำแหน่งข้อมูลในแนวตั้ง โดย
top= จัดอยู่ข้างบน  middle = จัดอยู่ตรงกลาง  bottom= จัดอยู่ข้างล่าง

 

2. การสร้างตาราง

ชื่อแท็ก                              table, tr, td
ตำแหน่งของแท็ก            table อยู่ภายในแท็ก <body>…</body>
tr อยู่ภายในแท็ก <table>…</table>
td อยู่ภายในแท็ก <tr>…</tr>
รูปแบบแท็ก HTML
          <table>
<tr><td>ข้อมูล</td><td>ข้อมูล</td></tr>
<tr><td>ข้อมูล</td><td>ข้อมูล</td></tr>
…
<table>

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
<body>
<table>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

1

3. การใส่หัวเรื่อง <th> และตีเส้นตาราง

รูปแบบแท็ก HTML  (การใส่หัวเรื่อง)    
<tr><th>หัวข้อ1</th><th>หัวข้อ2</th></tr>

รูปแบบแท็ก HTML  (การตีเส้นตาราง)     

<table border=“ความหนาของเส้น”>

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″>
<tr><th>หัวข้อ1</th><th>หัวข้อ2</th></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

2

4. การกำหนดข้อความกำกับให้กับตาราง

รูปแบบแท็ก HTML    <caption align=“ตำแหน่ง”>ข้อความกำกับ</caption>
ค่าที่กำหนดให้ใช้          ตำแหน่งของข้อความกำกับ ได้แก่ top (กลางบน), bottom (กลางล่าง), left (ซ้ายบน), right (ขวาบน)

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″>
<caption align=”top”>ตารางแสดงการกำหนดข้อความกำกับตาราง</caption>
<tr><th>หัวข้อ1</th><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><th>หัวข้อ2</th><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

4

5. การปรับความห่างและการเว้นระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์

รูปแบบแท็ก HTML    <table cellspacing=“ความห่าง”>
ค่าที่กำหนดให้ใช้          ขนาดเป็นพิกเซล (pixels) เช่น 5, 7, 10

รูปแบบแท็ก HTML    <table cellpadding=“ระยะที่ต้องการเว้น”>
ค่าที่กำหนดให้ใช้          ขนาดเป็นพิกเซล (pixels) เช่น 5, 7, 10

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ cellspacing=”0″ cellspacing=”0″>
<tr><th>หัวข้อ1</th><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><th>หัวข้อ2</th><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

t3

6. การปรับความกว้างและความสูงของตาราง

รูปแบบแท็ก HTML    <table width=“ความกว้าง” height=“ความสูง”>
ค่าที่กำหนดให้ใช้          ขนาดเป็นพิกเซล (pixels) เช่น 5, 7, 10 หรือ %

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ width=”50%” height=”50%”>
<tr><th>หัวข้อ1</th><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><th>หัวข้อ2</th><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

7

7. การปรับขนาดช่องเซลล์

หากเราต้องการปรับขนาดช่องเซลล์จากปกติ 1 ช่อง ที่มีขนาด 1 แถว 1 คอลัมน์เป็นแบบ 1 แถว 3 คอลัมน์ เราก็สามารถทำได้ดังนี้

รูปแบบแท็ก HTML     <td colspan=“จำนวนคอลัมน์ที่ต้องการขยาย”>
ค่าที่กำหนดให้ใช้           จำนวนคอลัมน์ที่ต้องการขยาย

ตัวอย่างการขยายเซลล์เกิน 1 คอลัมน์

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ width=”50%” height=”50%”>
<tr><td colspan=”2″>ข้อมูล1</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

8

รูปแบบแท็ก HTML      <td rowspan=“จำนวนแถวที่ต้องการขยาย”>
ค่าที่กำหนดให้ใช้             จำนวนแถวที่ต้องการขยาย

ตัวอย่างการขยายเซลล์เกิน 1 แถว

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ width=”50%” height=”50%”>
<tr><td rowspan=”2″>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

9

8. การใส่สีในช่องเซลล์

รูปแบบแท็ก HTML   bgcolor=“ชื่อสี/#รหัสสี”
ค่าที่กำหนดให้ใช้          สีที่กำหนดเป็นสีพื้นฐานหรือเลขฐาน 16

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ bgcolor=”pink”>
<tr bgcolor=”yellow”><th>หัวเรื่อง1</th><th>หัวเรื่อง2</th></tr>
<tr><td bgcolor=”sky blue”>ข้อมูล1</td><td bgcolor=”white”>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

10

9. การกำหนดสีกรอบตาราง

รูปแบบแท็ก HTML     bordercolor=“ชื่อสี/#รหัสสี”
ค่าที่กำหนดให้ใช้            สีที่กำหนดเป็นสีพื้นฐานหรือเลขฐาน 16

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ bordercolor=”blue”>
<tr><th>หัวเรื่อง1</th><th>หัวเรื่อง2</th></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

11

10. การใส่รูปภาพพื้นหลังตาราง

รูปแบบแท็ก HTML     background=“ตำแหน่งรูปภาพ”
ค่าที่กำหนดให้ใช้           ชื่อตำแหน่งและไฟล์รูปภาพ

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ bordercolor=”blue” background=”pic/background-31.jpg”>
<tr><th>หัวเรื่อง1</th><th>หัวเรื่อง2</th></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

12

11. การจัดตำแหน่งตาราง แถว และคอลัมน์

รูปแบบแท็ก HTML    <table align=“ตำแหน่งของข้อมูล” >, <tr align=”ตำแหน่งของข้อมูล”>, <td align=”ตำแหน่งของข้อมูล”>
ค่าที่กำหนดให้ใช้           ตำแหน่งของข้อมูล ได้แก่ center (กลาง), left (ซ้าย), right (ขวา) และ justify (เต็มช่อง)

ตัวอย่างการจัดตำแหน่งข้อมูลแนวนอน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table width=”40%” border=”1″ align=”center”>
<tr align=”center”><th>หัวเรื่อง1</th><th>หัวเรื่อง2</th></tr>
<tr align=”center”><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr align=”center”><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

t7

รูปแบบแท็ก HTML    <td vlign=“ตำแหน่งของข้อมูล”>
ค่าที่กำหนดให้ใช้          ตำแหน่งของข้อมูล ได้แก่ baseline (ตามเส้นฐาน), bottom (ชิดล่าง), middle (กลาง) และ top (ชิดบน), right (ขวา) และ justifty (เต็มช่อง)

ตัวอย่างการจัดตำแหน่งข้อมูลแนวตั้ง

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table width=”100%” height=”50%” border=”2″>
<tr>
<td valign=”baseline”>Baseline</td>
<td valign=”top”>top</td>
<td valign=”middle”>middle</td>
<td valign=”bottom”>bottom</td>
</tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

15

12. การกำหนดการแสดงเส้นตาราง

เป็นการกำหนดให้แสดงเส้นตารางบางด้านเพื่อความเหมาะสมสำหรับการแสดงข้อมูล เช่น ต้องการแสดงเส้นเฉพาะคอลัมน์

รูปแบบแท็ก HTML      <table frame=“ตัวเลือก” rules=“ตัวเลือก”>
ค่าที่กำหนดให้ใช้            กำหนดให้แสดงหรือไม่แสดงเส้นขอบตาราง

ตัวเลือกของแอตทริบิวต์  frame ประกอบด้วย

คำสั่ง รายละเอียด   คำสั่ง รายละเอียด
Above แสดงเฉพาะด้านบนของช่องเซลล์ Ins แสดงเฉพาะด้านซ้ายของช่องเซลล์
Below แสดงเฉพาะด้านล่างของช่องเซลล์ Rhs แสดงเฉพาะด้านขวาของช่องเซลล์
Border แสดงเส้นทุกด้าน Void ไม่มีเส้นกรอบ
box แสดงเส้นทุกด้าน vsides แสดงเส้นแนวตั้งทุกเส้น
hsides แสดงเส้นแนวนอนทุกเส้น

ตัวเลือกของแอตทริบิวต์ rules ประกอบด้วย

คำสั่ง รายละเอียด
all แสดงเส้นแบ่งช่องเซลล์ทุกเส้น
cols แสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวคอลัมน์ (แนวตั้ง)
groups แสดงเฉพาะเส้นแบ่งกลุ่มเซลล์ที่เกิดจากแท็ก thead, tbody, tfoot หรือ colgroup
none ไม่แสดงเส้นแบ่งช่องเซลล์
rows แสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวแถว (แนวนอน)

ตัวอย่างการเปิด/ปิดเส้นตาราง

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table frame=”border” rules=”rows” border=”1″>
<thead><td>หัวเรื่อง1</td><td>หัวเรื่อง2</td></thead>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
<tfoot><td>ส่วนล่าง1</td><td>ส่วนล่าง</td></tfoot>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

13

13. การสร้างตารางซ้อนตาราง

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ bordercolor=”pink”>
<tr align=”center”><td colspan=”2″>การสร้างตารางซ้อนตาราง</td></tr>
<td><table border=”1″ bordercolor=”green” align=”center”>
<tr align=”center”><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table></td>
<tr align=”center”><td colspan=”2″>ข้อมูล5</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

16

14. การใส่รูปภาพในตาราง

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<b>การแทรกรูปภาพในตาราง</b><br />
<table border=”1″ bordercolor=”pink”>
<tr><td><img src=”pic/146.gif” /></td>
<td><img src=”pic/178.gif” /></td></tr>
</table>
</body>
</html>

17

15. การกำหนดความกว้างของคอลัมน์

รูปแบบแท็ก HTML    <colgroup span=“จำนวน” width=“ความกว้าง”>…</colgroup>
ค่าที่กำหนดให้ใช้          span จำนวนคอลัมน์ที่ใช้กำหนดความกว้าง
width ความกว้างของคอลัมน์มีหน่วยเป็น % หรือพิกเซล

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″>
<colgroup span=”2″ width=”150″></colgroup>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td><td>ข้อมูล3</td>
<td>ข้อมูล4</td><td>ข้อมูล5</td><td>ข้อมูล6</td></tr>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

18

16. การกำหนดความกว้างแต่ละคอลัมน์

รูปแบบแท็ก                    <col span=“จำนวน” width=“ความกว้าง” />
ค่าที่กำหนดให้ใช้          span จำนวนคอลัมน์ที่ใช้กำหนดความกว้าง
width ความกว้างของคอลัมน์มีหน่วยเป็น % หรือพิกเซล

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″>
<colgroup>
<col span=”2″ width=”100″ />
<col span=”2″ width=”80″ />
<col span=”2″ width=”50″ />
</colgroup>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td><td>ข้อมูล3</td>
<td>ข้อมูล4</td><td>ข้อมูล5</td><td>ข้อมูล6</td></tr>
<tr><td>ข้อมูล7</td><td>ข้อมูล8</td><td>ข้อมูล9</td>
<td>ข้อมูล10</td><td>ข้อมูล11</td><td>ข้อมูล12</td></tr>
</table>
</body>
</html>

19

คำอธิบาย
จากตัวอย่างมีการใส่แท็ก col อยู่ด้วย 3 ที ซึ่งแต่ละที่มีความหมาย ดังนี้

  • <col span=“2” width=“100” /> หมายถึง คอลัมน์ที่ 1-2 กำหนดขนาด 100 พิกเซล
  • <col span=“2” width=“80” /> หมายถึง คอลัมน์ที่ 3-4 กำหนดขนาด 80 พิกเซล
  • <col span=“2” width=“50” /> หมายถึง คอลัมน์ที่ 5-6 กำหนดขนาด 50 พิกเซล

 

17. การแบ่งเส้นตาราง <thead>, <tfoot>, <tbody>

การแบ่งส่วนตาราง เราสามารถทำได้ 3 ส่วนคือ

  • แท็ก thead (Table Header) ส่วนของหัวตาราง
  • แท็ก tbody (Table Body) ส่วนของข้อมูลในตาราง
  • แท็ก tfoot (Table Footer) ส่วนของสรุปรวมข้อมูลในตาราง

โดยทั้งสามส่วนเราไม่ต้องเรียงลำดับกันก็ได้ เช่น อาจวางแท็ก tfoot มาก่อนแท็ก tbody ก็ได้ แต่ตอนแสดงผลบราวเซอร์จะจัดแท็ก tfoot ไว้ข้างล่างสุด

ลักษณะของแท็กทั้ง 3 ประการจะเป็นดังนี้

รูปแบบแท็ก HTML  <thead><tr><td>…</td></tr></thead>
<tbody><tr><td>…</td></tr></tbody>
<tfoot><tr><td>…</td></tr></tfoot>

ตัวอย่างการใช้งาน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ width=”30%”>
<thead bgcolor=”#6699FF”>
<tr><td>ส่วนหัว1</td><td>ส่วนหัว2</td></tr></thead>
<thead bgcolor=”#00FFFF”>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr></tbody>
<tfoot bgcolor=”EEEEEE”>
<tr><td>ส่วนล่าง1</td><td>ส่วนล่าง2</td></tr></tfoot>
</table>
</body>
</html>

ผลลัพธ์ที่ได้

20

การแบ่งตารางเป็นส่วน ๆ ทำให้สามารถจัดรูปแบบ ตกแต่งตารางได้ง่าย โดยสามารถกำหนดรูปแบบตัวอักษร ขนาดตัวอักษร สีตัวอักษร สีพื้นหลัง ฯลฯ โดยจะทำให้ข้อมูลส่วนนั้นแสดงผลทั้งหมด อีกทั้งยังสามารถกำหนดรูปแบบการแสดงผลข้อมูลได้อย่างเหมาะสมอีกด้วย

 

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • รูปภาพประกอบสืบค้นจากอินเทอร์เน็ต
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

การเชื่อมโยงเว็บเพจ (Link)

เขียนใน ภาษา html by

การสร้างลิงค์จะทำให้เอกสารเว็บเพจธรรมดากลายเป็นเว็บเพจที่ประกอบด้วยเนื้อหาที่น่าสนใจโดยผ่านการคลิกเลือกดูเนื้อหาในแต่ละหน้าที่น่าสนใจ

การสร้างลิงค์
ลิงค์สามารถเชื่อมโยงข้อมูลได้ วิธี คือ

  • การเชื่อมโยงข้อมูลภายในเว็บหน้าเดียวกัน
  • การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น
  • การเชื่อมโยงข้อมูลไปเว็บไซต์อื่น

1. การเชื่อมโยงข้อมูลภายในเว็บเพจเดียวกัน

คือ การเชื่อมโยงข้อมูลในหน้าเว็บเพจเดียวกัน โดยการคลิกลิงค์เพื่อเลื่อนขึ้นหรือลง หรือไปตำแหน่งที่ต้องการภายในหน้าเดียวกัน

รูปแบบของแท็ก HTML        
<a href=”jump”>…</a> (สร้างจุดปลายทางชื่อ jump)
<a href=”#jump”>…</a> (เชื่อมโยงไปจุดปลายทางชื่อ jump)
ค่าที่กำหนดให้ใช้          ชื่อจุดหมายปลายทาง ที่ไม่ซ้ำชื่ออื่นที่อยู่ในหน้าเว็บเดียวกัน

ตัวอย่างการใช้งาน

<html>
<head>
<title>การเชื่อมโยงเว็บเพจหน้าเดียวกัน</title>
</head>
<body>
<b>รายชื่อเว็บไซต์ที่น่าสนใจ</b>
<!—กำหนด Link กระโดดไปยังจุดเชื่อมต่อต่าง ๆ ในเว็บเพจ—><br />
<a href=”#computer”>เว็บไซต์เกี่ยวกับคอมพิวเตอร์</a><br />
<a href=”#graphic”>เว็บไซต์เกี่ยวกับงานกราฟิก</a><br />
<a href=”#travel”>เว็บไซต์เกี่ยวกับท่องเที่ยว</a><br />
<hr>
<!—กำหนดจุดเชื่อม—>
<a name=”computer”>เว็บไซต์เกี่ยวกับคอมพิวเตอร์</a><br />
<a name=”graphic”>เว็บไซต์เกี่ยวกับงานกราฟิก</a><br />
<a name=”travel”>เว็บไซต์เกี่ยวกับท่องเที่ยว</a><br />
</body>
</html>

 

2. การเชื่อมโยงข้อมูลไปยังเว็บเพจอื่นภายในเว็บไซต์เดียวกัน

คือ การเชื่อมโยงข้อมูลไปยังหน้าเว็บเพจอื่นที่อยู่เว็บไซต์เดียวกัน เพื่อให้สามารถเลือกดูเนื้อหาตามลิงค์ของเรื่องที่ต้องการเยี่ยมชม

รูปแบบของแท็ก HTML        
<a href=“ชื่อเว็บเพจที่ต้องการเชื่อมโยง”>เรื่องที่จะเป็นจุดเชื่อมโยง</a>
ค่าที่กำหนดให้ใช้          ชื่อเว็บเพจที่เชื่อมโยงจะเป็นชื่อภาษาอังกฤษ.html

ตัวอย่างการเชื่อมโยงเว็บเพจกับหน้าอื่น

l1

  • หน้าแรกของเว็บเพจ หรือ โฮมเพจ จะมีเนื้อหา 2 เรื่อง คือ งานสวนทิวลิปนนท์ จะลิงค์ไปยังหน้า tulip.htmlและ งานธันวาพฤกษชาติ ครั้งที่ 11จะลิงค์ไปยังหน้า tanwa.html
  • หน้าเว็บเพจงานสวนทิวลิปนนท์ จะลิงค์กลับมาที่แรกของเว็บ คือ index.htmlและ งานธันวาพฤกษชาติ จะลิงค์กลับมาที่แรกของเว็บ คือ index.html

ตัวอย่างการเขียนคำสั่งเชื่อมโยงเว็บเพจไปยังเว็บเพจอื่น

<html>
<head>
<title>ตัวอย่างการเชื่อมโยงเว็บเพจไปยังเว็บเพจหน้าอื่น</title>
</head>
<body>
…
<a href=“tulip.html”>งานสวนทิวลิปนนท์</a>
…
<a href=“tanwa.html”>งานธันวาพฤกษชาติ</a>
…
</body>
</html>

ทำความเข้าใจ

  • การเชื่อมโยงเว็บเพจแบบ Relative Path Names ซึ่งเป็นวิธีที่ใช้ในการอ้างอิงไฟล์เว็บเพจ ไฟล์เอกสาร ไฟล์ให้ดาวน์โหลดที่เก็บในเว็บไซต์เดียวกัน
  • การเชื่อมโยงเว็บเพจไปยังเว็บเพจอื่นในไดเรกทอรีเดียวกันจะสามารถเชื่อมโยงโดยใช้แท็ก  <a href…> โดยพิมพ์ชื่อเว็บเพจที่ต้องการลงไป

เช่น<a href=“history.html”>ประวัติของโรงเรียน</a>

  • หากต้องการเชื่อมโยงเว็บเพจไปยังไดเรกทอรีที่ต่ำกว่า เราสามารถใช้ <a href…> แล้วอ้างอิงตำแหน่งของเว็บปลายทางตั้งแต่เริ่มต้นจนถึงปลายทาง

<a href=“person/thai.html”>กลุ่มสาระการเรียนรู้ภาษาไทย</a>

โดยเราจะใส่ชื่อไดเรกทอรีและคั่นด้วยเครื่องหมาย “/” ตามด้วยไฟล์ที่เราต้องการเชื่อมโยง หากมีหลายชั้นเราก็ต้องกำหนดไดเรกทอรีให้ครบ หากอ้างอิงไม่ครบหรือระบุผิดจะทำให้ทำงานผิดพลาด

  • หากต้องการเชื่อมโยงเว็บเพจไปยังปลายทางที่อยู่ในไดเรกทอรีที่อยู่เหนือกว่า 1 ระดับจะมีวิธีการกำหนดคือ <a href=“../person.html”>บุคลากรของโรงเรียน</a>
  • หากต้องการเชื่อมโยงเว็บเพจไปยังปลายทางที่อยู่ในไดเรกทอรีที่อยู่เหนือกว่า 2 ระดับจะมีวิธีการกำหนดคือ <a href=“../../person.html”>บุคลากรของโรงเรียน</a>

 

3. การเชื่อมโยงข้อมูลไปยังเว็บไซต์ที่อื่น

คือ การเชื่อมโยงข้อมูลไปยังหน้าเว็บไซต์ที่เกี่ยวข้องหรือน่าสนใจ โดยวิธีการระบุ URL ของเว็บไซต์นั้นในแท็ก <a href…>

รูปแบบการใช้งาน

รูปแบบ  <a href= “URL ของเว็บไซต์ที่ต้องการเชื่อมโยง”>ข้อความที่จะเชื่อมโยง</a>

เช่น <a href=http://www.swt.ac.th>โรงเรียนเสริมงามวิทยาคม</a>

ตัวอย่างการใช้งาน

<html>
<head>
<title>การเชื่อมโยงข้อมูลไปยังเว็บไซต์</title>
<body>
<b>เว็บไซต์ที่น่าสนใจ</b><br />
<a href=”http://www.google.com”>google</a><br />
<a href=”http://www.sanook.com”>sanook</a><br />
<a href=”http://www.pantip.com”>pantip</a><br />
</body>
</html>

ผลลัพธ์ที่ได้

4

เราสามารถเปิด URL ในเว็บบราวเซอร์ใหม่ โดยใช้คำสั่งว่า target=“_blank” ลงไปหลัง URL

<a href=“http://www.swt.ac.th” target=“_blank”>โรงเรียนเสริมงามวิทยาคม</a>

 

4. การเชื่อมโยงด้วยรูปภาพ

การใช้รูปภาพเป็นจุดเชื่อมโยง เป็นการทำให้เว็บเพจน่าสนใจและสามารถใช้แทนข้อความธรรมดาได้

รูปแบบของแท็ก             <img src= “ตำแหน่งของรูปภาพ/รูปภาพที่ใช้”>
ค่าที่กำหนดให้ใช้          ชื่อรูปภาพที่ใช้เป็นสัญลักษณ์ในการเชื่อมโยง

ตัวอย่างการเชื่อมโยงเว็บไซต์ด้วยรูปภาพ

<html>
<head>
<title>การเชื่อมโยงเว็บไซต์ด้วยรูปภาพ</title>
<body>
<b>เว็บไซต์ที่น่าสนใจ</b><br />
<a href=”http://www.google.com”><img src=”pic/google.jpg” /></a><br />
<a href=”http://www.sanook.com”><img src=”pic/sanook.jpg” /></a><br />
<a href=”http://www.pantip.com”><img src=”pic/pantip.jpg” /></a><br />
</body>
</html>

5

 

5. การเชื่อมโยงไปยังไฟล์ต่าง ๆ

เป็นการเชื่อมโยงไปยังไฟล์ต่าง ๆ  เช่น ไฟล์รูปภาพ, ไฟล์วีดีโอ, ไฟล์โปรแกรม, ไฟล์เสียง, ไฟล์ .zip,  และไฟล์มัลติมีเดีย ซึ่งการเชื่อมโยงจะเหมือนการลิงค์แบบธรรมดา เพียงแต่ระบุปลายทางไปยังไฟล์นั้น ๆ โดยและระบุนามสกุล หากเป็นไฟล์รูปภาพจะแสดงอัตโนมัติ แต่ถ้าเป็นไฟล์อื่น ๆ จะขึ้นหน้าจอให้เราบันทึกและดาวน์โหลดเอกสาร

รูปแบบ  <a href=“ชื่อโฟลเดอร์ หรือไดเรกทอรี/ชื่อไฟล์ที่ต้องการลิงค์”>ข้อความที่จะเชื่อมโยง</a>

l2

 

6. การเชื่อมโยงไปอีเมล์ (E-mail)

ใช้ในกรณีที่ต้องการให้คนอื่นติดต่อเรา โดยให้สร้างลิงค์ชี้ไปยังอีเมล์แอดเดรสของเรา เมื่อผู้ใช้คลิกที่ลิงค์จะส่งไปยังอีเมล์ของเราโดยอัตโนมัติ

รูปแบบ  <a href=“mailto: ชื่อ E-mail Adree”>ข้อความที่เป็นลิงค์</a>

ตัวอย่างการลิงค์ไปยังไฟล์ต่าง ๆ

<html>
<head>
<title>การเชื่อมโยงเว็บไซต์ด้วยรูปภาพ</title>
<body>
<a href=”mailto:piyadanai_w@hotmail.com”>ติดต่อผู้จัดทำ</a>
</body>
</html>

10

 

นอกจากนี้เรายังสามารถลิงค์ไปยังบริการต่าง ๆ ได้ เช่น การโอนย้ายไฟล์ โดยใช้คำสั่ง

<a href=ftp://ที่อยู่ของ Address ที่ต้องการลิงค์>

 

7. การกำหนดสีของลิงค์

ปกติหากเราไม่กำหนดค่าสีของลิงค์ ค่าปกติคือสีน้ำเงินและมีเส้นใต้ การเปลี่ยนสีลิงค์เป็นการเปลี่ยนสีสันของลิงค์ให้มีสีต่าง ๆ เพื่อให้สังเกตง่าย ๆ ซึ่งสีของลิงค์จะมีสถานะต่าง ๆ แตกต่างกัน ดังนี้

  • สีของลิงค์ที่ยังไม่เคยถูกคลิก (Hyperlink)
  • สีของลิงค์ที่เคยถูกคลิกไปแล้ว (Visited Hyperlink)
  • สีของลิงค์ตอนที่ถูกคลิก (Active Link)

เพื่อป้องกันไม่ให้สีของลิงค์กลืนสีฉากหลัง เราสามารถกำหนดสีของลิงค์ในสถานะต่าง ๆ ได้ ดังนี้

รูปแบบแท็ก HTML และ XHTML
          <body link=“สี/รหัสสี” vlink=“สี/รหัสสี” alink=“สี/รหัสสี”>

ตัวอย่างการกำหนดสีของลิงค์

<html>
<head>
<title>ตัวอย่างการเชื่อมโยงเว็บเพจไปยังเว็บเพจหน้าอื่น</title>
</head>
<body link=”green” vlink=”blue” alink=”red”>
<a href=“tulip.html”>งานสวนทิวลิปนนท์</a><br />
<a href=“tanwa.html”>งานธันวาพฤกษชาติ</a>
</body>
</html>

11

 

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • รูปภาพประกอบสืบค้นจากอินเทอร์เน็ต
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

การสร้างลิสต์รายการ

เขียนใน ภาษา html by

การสร้างลิสต์รายการ

การสร้างลิสต์รายการ คือ การนำเสนอข้อมูลอีกรูปแบบเพื่อช่วยยกข้อมูลที่เป็นประเด็นมาจัดเป็นรายการหรือลิสต์

1. การสร้างลิสต์แบบไม่มีลำดับ

ลิสต์แบบไม่เรียงลำดับ (Unordered List) เป็นลิสต์ที่เหมาะสำหรับการนำเสนอข้อมูลที่เป็นประเด็นสั้น ๆ ไม่ต้องการของตัวเลข หรือตัวอักษรให้ยุ่งยาก

รูปแบบการใช้แท็ก <ul>

<ul>

<li>รายการ1</li>
<li>รายการ2</li>

</ul>

การกำหนดรายละเอียดแอตทริบิวต์ type

<ul type=“ชนิดเครื่องหมาย”>
<li type=“ชนิดเครื่องหมาย”>

ค่าที่กำหนด  ชนิดของเครื่องหมายหน้าลำดับ เช่น disc, circle, และ square

li2

หากไม่มีการกำหนดชนิดของเครื่องหมายหน้ารายการจะแสดงวงกลมทึบเป็นเครื่องหมายปกติ

ตัวอย่างการกำหนดเครื่องหมายให้กับลิสต์แบบไม่มีลำดับ

<!DOCTYPE HTML>

<html>

<head>

<title>การกำหนดเครื่องหมายให้กับลิสต์แบบไม่มีลำดับ</title>

</head>

<body>

<ul type=”circle”>สถานที่ท่องเที่ยวอำเภอเกาะคา จังหวัดลำปาง

<li type=”disc”>วัดพระธาตุลำปางหลวง</li>

<li type=”square”>วัดไหล่หินหลวง</li>

<li>วัดพระธาตุจอมปิง</li>

</ul>

</body>

</html>

ผลลัพธ์ที่ได้

1

2. การสร้างลิสต์แบบมีลำดับ

ลิสต์แบบเรียงลำดับ จะเป็นการนำเสนอข้อมูลรายการแบบมีตัวเลข ตัวอักษร ซึ่งลิสต์แบบนี้นำมาใช้เพื่อบอกให้ทราบลำดับของข้อมูลที่นำเสนอ

รูปแบบการใช้งานแท็ก <ol>

<ol>

<li>รายการ1</li>
<li>รายการ2</li>

</ol>

การกำหนดชนิดของตัวจัดลำดับ

<ul type=“ชนิดของลำดับ”>

ค่าที่กำหนด  ชนิดของลำดับหน้าหัวข้อ เช่น A, a, I (ไอตัวใหญ่), i และ 1


ชนิดของตัวจัดอันดับ
li5

ตัวอย่างการกำหนดเครื่องหมายให้กับลิสต์แบบมีลำดับ

 

<html>

<head>

<title>การกำหนดเครื่องหมายให้กับลิสต์แบบมีลำดับ</title>

</head>

<body>

<ol type=”1″>สถานที่ท่องเที่ยวอำเภอเกาะคา จังหวัดลำปาง

<li>วัดพระธาตุลำปางหลวง</li>

<li>วัดไหล่หินหลวง</li>

<li>วัดพระธาตุจอมปิง</li>

</ol>

</body>

</html>

ผลลัพธ์ที่ได้
2

การกำหนดลำดับเริ่มต้นให้กับข้อมูล

<ol start=“ตัวเลข”> และ <li value=“ตัวเลข”>

ค่าที่กำหนด  เป็นการกำหนดเลขเริ่มต้นของลำดับ

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>

<head>

<title>การกำหนดเลขเริ่มต้นของลำดับ</title>

</head>

<body>

5 อับดับหนังสือขายดีประจำร้าน

<ol>หมวดคอมพิวเตอร์

<li>Photoshop CS5</li>

<li>เรียนลัดการสร้างเว็บ</li>

<li>การสร้างงานนำเสนอ</li>

</ol>

<ol start=”4″>หมวดทั่วไป

<li>ชีวิตยิ่งกว่าละคร</li>

<li>ความฝันของนายโข่ง</li>

</ol>

</body>

</html>

ผลลัพธ์ที่ได้

3

3. การสร้างลิสต์แบบแบบจำกัดความ 

ลิสต์แบบจำกัดความ (Definition List) มักถูกนำไปใช้กับการจำกัดความ โดยมีการแบ่งลิสต์เป็น 2 ส่วน เช่น พจนานุกรม ส่วนแรก คือ คำศัพท์  ส่วนที่สอง คือ คำจำกัดความ จะเยื้องไปหลังคำศัพท์

รูปแบบการใช้งานแท็ก <dl>

<dl>

<dt>คำศัพท์</dt>
<dd>ความหมาย</dd>
<dt>คำศัพท์</dt>
<dd>ความหมาย</dd>
…

</dl>

 

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>

<head>

<title>การสร้างลิสต์แบบแบบจำกัดความ</title>

</head>

<body>

<dl>อธิบายคำศัพท์อินเทอร์เน็ต

<dt>HTTP</dt>

<dd>โพรโตคอลในการสืบค้นข้อมูล</dd>

<dt>FTP</dt>

<dd>โพรโตคอลในการโอนย้ายไฟล์ข้อมูล</dd>

</dl>

</body>

</html>

ผลลัพธ์ที่ได้

6

4. การสร้างลิสต์ซ้อนลิสต์

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

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>

<head>

<title>การสร้างลิสต์ซ้อนลิสต์</title>

</head>

<body>

<ol>

<li>จังหวัดใดอยู่ในภาคเหนือตอนบน</li>

<ol type=”a”>

<li>เชียงใหม่</li>

<li>เพชรบูรณ์</li>

<li>ตาก</li>

<li>สุโขทัย</li>

</ol>

<li>จังหวัดใดอยู่ในภาคเหนือตอนล่าง</li>

<ol type=”a”>

<li>เชียงใหม่</li>

<li>เพชรบูรณ์</li>

<li>ลำปาง</li>

<li>พะเยา</li>

</ol>

</ol>

</body>

</html>

ผลลัพธ์ที่ได้

7

 

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

การจัดการข้อความ

เขียนใน ภาษา html by

1. การกำหนดรูปแบบหัวเรื่อง <hn>

การกำหนดรูปแบบหัวเรื่องเป็นการกำหนดขนาดตัวอักษรให้แตกต่างกันเพื่อแยกแต่ละหัวเรื่องอย่างชัดเจนสำหรับเอกสารที่มีหลาย ๆ หัวเรื่อง จากลำดับหัวเรื่องใหญ่ไปหัวเรื่อง ซึ่งสามารถกำหนดขนาดหัวเรื่องได้ 6 ระดับ ดังนี้

ชื่อแท็ก                                        hn (n มีค่าตั้งแต่ 1 ถึง 6)
รูปแบบในภาษา HTML      <hn>หัวเรื่อง</hn>

ตัวอย่างการใช้แท็ก

<!DOCTYPE HTML>
<html>
<head>
<title>การกำหนดหัวเรื่อง</title>
</head>
<body>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
</body>
</html>

ผลลัพธ์ที่ได้

k1

2. การกำหนดลักษณะตัวอักษร

การกำหนดลักษณะตัวอักษรในเว็บเพจนั้น มีอยู่ 2 วิธี  ได้แก่

  • แบบ Physical  เป็นการกำหนดรูปแบบตัวอักษรอย่างเจาะจง
  • แบบ Logical ที่ผู้ใช้บราวเซอร์สามารถกำหนดรูปแบบตัวอักษรได้ด้วยตัวเอง

การกำหนดลักษณะตัวอักษรแบบ Physical

ชี่อแท็ก รูปแบบแท็ก  HTML ตัวอย่าง
Bold (ตัวหนา) <b>…..</b> This is Bold
Italic (ตัวเอียง) <i>…..</i> This is Italic
Underline (ขีดเส้นใต้) <u>…..</u> This is Underline
Strike (ขีดฆ่า) <s>…..</s> This is Strike
Typewriter Text (ตัวพิมพ์ดีด) <tt>…..</tt> This is Typewriter Text
Superscript (ตัวอักษรยก) <sup>…..</sup> This is Superscript
Subscript (ตัวอักษรห้อย) <sub>…..</sub> This is Subscript
Big (ตัวอักษรขนาดใหญ่) <big>…..</big> This is big
Small (ตัวอักษรขนาดเล็ก) <small>.….</small> This is small
Delete (ขีดฆ่า) <del>…..</del> This is Delete
Insert (ขีดเส้นใต้เป็นสัญลักษณ์) <ins>…..</ins> This is Insert
หมายเหตุ  แท็ก sup, sub, small, big สามารถซ้อนกันได้ เพื่อให้การกำหนดค่ามีมากกว่าเดิม

เช่น <big><big>Big</big></big>

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>
<head>
<title>การจัดการหน้าเอกสารและข้อความ</title>
</head>
<body bgcolor=”yellow”>
<center><u><b><h3>การสื่อสารข้อมูล</h3></b></u></center>
<hr width=”50%” color=”green” align=”center” />
<b>การสื่อสารข้อมูล</b> <i>หมายถึง</i> กระบวนการถ่ายโอน<sup>หรือ</sup>แลกเปลี่ยนข้อมูลระหว่างผู้รับ<sub>และ</sub>ผู้ส่งโดยผ่าน ช่องทางสื่อสาร
<s>เช่น</s> <big>อุปกรณ์</big>อิเล็กทรอนิกส์หรือ<small>คอมพิวเตอร์</small>เป็นตัวกลางในการส่งข้อมูล เพื่อให้ผู้ส่งและผู้รับ เกิดความเข้าใจซึ่งกันและกัน
</body>
</html>

ผลลัพธ์ที่ได้

format

การกำหนดลักษณะตัวอักษรแบบ Logical

การกำหนดลักษณะตัวอักษรแบบ Logical นั้น เป็นการกำหนดรูปแบบตัวอักษรตามความหมายของข้อความนั้น

ชี่อแท็ก รูปแบบแท็ก  HTML ตัวอย่าง
Emphasis(ใช้เน้นข้อความคำพูดหรือวลี) <em>…..</em> Emphasis
Strong(ข้อความที่สำคัญมาก) <strong>…..</strong> Strong
Computer Code(ข้อความเป็นโค้ดโปรแกรม) <code>…..</code> Computer Code
Citations(ข้อความที่อ้างอิงถึงแหล่งที่มาของเนื้อหา) <cite>…..</cite> Citations
Definition(ข้อความที่เป็นคำนิยาม) <dfn>…..</dfn> Definition
Keyboard(ข้อความที่เหมือนแป้นพิมพ์) <kbd>…..</kbd> Keyboard
Samples(ข้อความที่เหมือนแป้นพิมพ์) <samp>…..</samp> Samples
Variable Name(ใช้เน้นข้อความที่ถูกเปลี่ยนแปลง) <var>…..</var> Variable Name
Example(ให้แท็ก html ปรากฏบนหน้าจอเว็บเพจ) <xmp>.….</xmp> Example
Address(กำหนดข้อความให้กับชื่อและที่อยู่) <address>…..</address> address
Abbreviate(ใช้แสดงชื่อย่อ) <abbr>…..</abbr> Abbreviate
Acronym(กำหนดคำย่อจากอักษรแรกของแต่ละคำ) <acronym>…..</acronym> Acronym
Bi-directional algorithm(ตัวอักษรเขียนย้อนกลับ) <bdo>…..</bdo>
Blockquote(กำหนดรูปแบบข้อมูลที่อ้างอิงจากที่อื่น) <blockquote>..</blockquote>
Quote(กำหนดรูปแบบของข้อมูลที่อ้าวอิงจากที่อื่นแบบสั้น) <q>…..</q> Quote
หมายเหตุ 1แท็ก bdo จะมีแอตทริบิวต์ชื่อ dir=“rtl” และจะมีการใส่ “rtl” (right to left เขียนจากขวามาซ้าย) และ “ltr” (left to right เขียนจากซ้ายมาขวา)ตัวอย่างเช่น <bdo dir=“rtl”>Bi-directional algorithm</bdo>หมายเหตุ 2

       แท็ก abbr และ acronym จะมีการใช้เหมือนกัน คือ การกำหนดชื่อเต็มของคำย่อ เช่น <acronym title=“World Wide Web”>WWW</acronym> ผลลัพธ์ที่ได้เมื่อเอาเมาส์ไปวางจะปรากฏชื่อเต็มขึ้นมา

ถึงแม้ทั้ง 2 แท็กจะใช้เหมือนกันแต่จะต้องเลือกใช้ตามกรณี คือ แท็ก abbr จะใช้สำหรับคำย่อของคำ หรือกลุ่มคำ เช่น กทม. คือ กรุงเทพมหานคร  ส่วน acronym จะเป็นคำย่อที่เกิดจากพยัญชนะของแต่ละคำมาต่อกัน เช่น WWW คือ World Wide Web, IOU คือ I love you เป็นการดีงอักษรของแต่ละคำมาสร้างคำย่อ

ที่จริงเราสามารถใช้แท็ก abbr และ acronym แทนกันได้ แต่ถ้าให้ควรเลือก acronym เพราะ abbr ไม่สามารถแสดงผลบราวเซอร์ IE

 

3. การเปลี่ยนขนาดตัวอักษร

การเปลี่ยนขนาดตัวอักษรเป็นการปรับเปลี่ยนหน้าเว็บเพจให้มีขนาดแตกต่างกัน โดยมีรูปแบบดังนี้

ชื่อแอตทริบิวต์                                size
รูปแบบในภาษา HTML            <font size=“”>ข้อความ</font>
ค่าที่กำหนดให้ใช้                          ขนาดตัวอักษร n ซึ่งมีค่าตั้งแต่ 1 ถึง 7

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>
<head>
<title>ขนาดตัวอักษร</title>
</head>
<body>
<font size=”7″>Font size=7</font><br />
<font size=”6″>Font size=6</font><br />
<font size=”5″>Font size=5</font><br />
<font size=”4″>Font size=4</font><br />
<font size=”3″>Font size=3</font><br />
<font size=”2″>Font size=2</font><br />
<font size=”1″>Font size=1</font><br />
</body>
</html>

ผลลัพธ์ที่ได้

k10

ตัวอักษรปกติ (ปกติอยู่ที่ 3) ให้มีขนาดใหญ่ (+) และเล็กลง (-) แต่ต้องไม่เกินตัวอักษรปกติ คือ 1 ถึง 7 มีรูปแบบการใช้งานดังนี้

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>
<head>
<title>ขนาดตัวอักษร</title>
</head>
<body>
<font size=”5″>ข้อความมีขนาดเท่ากับ 5</font><br />
<font size=”+2″>ข้อความมีขนาดใหญ่ขึ้น 2 ระดับ</font><br />
</body>
</html>

ผลลัพธ์ที่ได้

k11

4. การกำหนดรูปแบบตัวอักษร

ชื่อแอตทริบิวต์                                face
รูปแบบในภาษา HTML             <font face=“ชื่อฟอนต์”>ข้อความ</font>
ค่าที่กำหนดให้ใช้                           ชื่อฟอนต์ที่ต้องการใช้งาน

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>
<head>
<title>รูปแบบตัวอักษร</title>
</head>
<body>
<font face=”A “>รูปแบบตัวอักษร AngsanaNEW</font><br />
<font face=”TH SarabunPSK”>รูปแบบตัวอักษร TH SarabunPSK</font><br />
</body>
</html>

ผลลัพธ์ที่ได้

k12

หมายเหตุ หากเครื่องใดไม่มีฟอนต์ดังกล่าวจะทำให้การแสดงผลผิดพลาด ดังนั้นเราควรใช้ฟอนต์ที่มีในทุกเครื่อง หรือฟอนต์มาตรฐาน

 

5. คำสั่งเว้นวรรคข้อความ

&nbsp; (Non Breaking Space) เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติบราวเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้นว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม

&nbsp; นี้เป็นหนึ่งในจำนวนรหัสใช้แทนอักษรพิเศษ ในภาษา HTML ซึ่งใช้ประโยชน์สำหรับแทนตัวอักษรที่มีความหมาย

 

6. ตัวอักษรพิเศษ

ตัวอักษรพิเศษ คือ ตัวอักษรที่ไม่มีบนแป้นพิมพ์จึงต้องใช้วิธีการเรียกใช้ โดยการใช้รหัสหรือโดยการเรียกโดยใช้ชื่อ

ตัวอักษรพิเศษ คำอธิบาย
&#[ASCII CODE]; สั่งให้แสดงสัญลักษณ์ที่เราต้องการออกมาบนหน้าจอด้วยรหัส ASCII
&lt; เครื่องหมาย < (less than)
&gt; เครื่องหมาย > (greater than)
&amp; เครื่องหมาย & (ampersand)
&quot; เครื่องหมาย “
&copy; เครื่องหมายลิขสิทธิ์ © (Copyrights)
&reg; เครื่องหมายทะเบียนการค้า ® (Registered)
™ เครื่องหมายทะเบียนการค้า ™
&yen; เครื่องหมาย ¥ (Yen)
&euro; เครื่องหมาย €(Euro)
&cent; เครื่องหมาย ¢(Cent)
&deg; เครื่องหมาย Degrees
&divide; เครื่องหมายหาร ÷

 

7. การตกแต่งสีสันเว็บเพจ

เราสามารถกำหนดค่าสีได้ 2 แบบ คือ

1. สี=”#xxxxxx” ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด 1 ชุดแทนด้วยตัวอักษร 2 ตัว แสดงค่าของแม่สี แดง เขียว นํ้าเงิน (RGB) โดยเขียนตามหลังเครื่องหมาย # เช่น”#FFFFFF” จะให้ สีขาว ,”#000000″ จะให้ สีดำ

สี รหัสสี
ขาว #FFFFFF
ดำ #000000
เทา #BBBBBB
แดง #FF0000
เขียว #00FF00
น้ำเงิน #0000FF

2. สี=color ระบุสีลงไปเลย เช่น AQUA, BULE, GRAY, LIME, NAVY, PURPLE, SILVER, WHITE (สีขาว), BLACK, FUCHSIA, GREEN, MAROON, OLTVE, RED, TEAL, YELLOW

 

8. การกำหนดสีพื้นหลังและสีตัวอักษร

ชื่อแอตทริบิวต์                                bgcolor (สีพื้นหลัง) และ Text (สีตัวอักษรทั้งเว็บเพจ)
รูปแบบในภาษา HTML             <body bgcolor=“รหัสสี/ชื่อสี” Text=“รหัสสี/ชื่อสี”>
ค่าที่กำหนดให้ใช้                           รหัสสีเลขฐาน 16 เช่น “#FFFFFF”, #FF0000   ชื่อสีมาตรฐาน เช่น blue, pink

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>
<head>
<title>การตกแต่งด้วยสี</title>
</head>
<body bgcolor=”#FFE4A4″ text=”blue”>
การทดลองการใส่สีพื้นหลังและสีตัวอักษร
</body>
</html>

ผลลัพธ์ที่ได้

k13

9. การกำหนดสีตัวอักษรเฉพาะที่

รูปแบบในภาษา HTML       <font color=“รหัสสี/ชื่อสี”>…</font>
ค่าที่กำหนดให้ใช้                     รหัสสีเลขฐาน 16 เช่น “#FFFFFF”, #FF0000   ชื่อสีมาตรฐาน เช่น blue, pink

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>
<head>
<title>การตกแต่งด้วยสี</title>
</head>
<body>
<font color=”#0000FF”>การกำหนดสีตัวอักษรสีน้ำเงิน</font> <br />
<font color=”red”>การกำหนดสีตัวอักษรสีชมพู</font>
</body>
</html>

ผลลัพธ์ที่ได้

k14

10. การกำหนดสีตัวอักษรที่เป็นจุดคลิกเมาส์

รูปแบบLINK=”#รหัสสี” ALINK=”#รหัสสี” VLINK”#รหัสสี”
ตัวอย่าง <BODY BGCOLOR=”000000″ TEXT=”#F0F0F0″ LINK=”#FFFF00″ ALIGN=”#0077FF” VLINK=”#22AA22″>
กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้
LINK = สีของตัวอักษรก่อนมีการคลิก
ALIGN = สีของตัวอักษรขณะถูกคลิก
VLINK = สีของอักษรหลังจากคลิกแล้ว

 

11. การกำหนดตัวอักษรวิ่ง <marquee>

ชื่อแท็ก                                        marquee
รูปแบบของแท็ก                       <marquee>ข้อความ</marquee>

การกำหนดแอตทริบิวต์เพิ่มเติมให้กับแท็ก marquee

scroll คือ ให้ข้อความวิ่งจากขวามาซ้าย เมื่อถึงขอบซ้าย ก็ให้ข้อความวิ่งออกมาจากขวาใหม่ (เป็นค่าปกติถ้าไม่มีการกำหนดอะไรจะได้แบบนี้)การกำหนดรูปแบบการวิ่งของข้อความ มี 3 รูปแบบ ดังนี้

slide คือ ให้ข้อความวิ่งจากขวามาซ้าย เมื่อถึงขอบซ้ายแล้วจะหยุดนิ่งไม่วิ่งไปไหนอีก

alternate คือ ให้ข้อความวิ่งจากขอบซ้ายมาขอบขวา เมื่อถึงขอบขวาก็ให้วิ่งกลับไปทางซ้าย วิ่งกลับไปกลับมา

directionกำหนดทิศทางการเคลื่อนที่ ดังนี้

¨    Left     ด้านซ้าย

¨    Right    ด้านขวา

¨    Up       ด้านบน

¨    Down   ด้านล่าง

width  กำหนดความกว้างของกรอบ marquee  กำหนดค่าแบบเจาะจง (pixel) หรือเป็นเปอร์เซ็นต์เทียบจากบราวเซอร์

height  กำหนดความสูงของกรอบ marquee  กำหนดค่าแบบเจาะจง (pixel) หรือเป็นเปอร์เซ็นต์เทียบจากบราวเซอร์

hspace  กำหนดระยะห่างของข้อความที่เคลื่อนไหวและกรอบทางด้านซ้ายและด้านขวา

vspace  กำหนดระยะห่างของข้อความที่เคลื่อนไหวและกรอบทางด้านบนและด้านล่างloopกำหนดจำนวนรอบการวิ่ง

scrollamount=n  กำหนดระยะเวลาในการขยับข้อความ (ยิ่งมาก ข้อความจะขยับไปไกลในแต่ละครั้ง)

scrolldelay=n  กำหนดเวลารอเป็นหน่วย Milliseconds (ยิ่งมาก ข้อความจะรอนานกว่าจะขยับแต่ละครั้ง)

bgcolor=”รหัสสี/ชื่อสี”  กำหนดสีพื้นหลังของกรอบอักษรวิ่ง กำหนดเป็นรหัสสีหรือชื่อสี เช่น bgcolor=“#FFCCCC”, bgcolor=“green”

onmouseOver=”this.stop()”  กำหนดให้เมื่อนำเมาส์มาชี้ให้หยุดวิ่ง

onmouseOut=”this.start()”  กำหนดให้เมื่อเอาเมาส์ออกจากกรอบอักษรวิ่งให้วิ่งต่อ หากต้องการให้เมื่อเอาเมาส์มาชี้แล้วให้วิ่ง เมื่อเอาเมาส์ออกให้หยุด ก็สามารถทำได้โดยสลับค่าระหว่าง “this.stop()” กับ “this.start()”

ตัวอย่างการทำอักษรวิ่ง

<!DOCTYPE HTML>
<html>
<head>
<title>การตกแต่งด้วยสี</title>
</head>
<body>
<marquee>การทำอักษรวิ่ง</marquee>
<marquee behavior=”scroll” direction=”up” width=”400″ height=”100″ bgcolor=”#F5F5F5″ scrolldelay=”10″ scrollamount=”5″ onmouseOver=”this.stop()” onmouseOut=”this.start()”>ข้อความวิ่งที่มีการกำหนดคุณสมบัติเพิ่มเติม</marquee>
</body>
</html>

ผลลัพธ์ที่ได้

k15

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

การจัดวางเนื้อหาบนเว็บ

เขียนใน ภาษา html by

โดยปกติเมื่อเราเขียนข้อมูลต่าง ๆ ใน Text Editor เมื่อนำไปแสดงผลที่บราวเซอร์จะไม่เหมือนกับรูปแบบที่เราเขียนใน Text Editor เพราะว่าการจัดรูปแบบเอกสารต้องใช้คำสั่งภาษา HTML เพื่อกำหนดให้เอกสารมีรูปแบบตามต้องการ เมื่อแสดงผลในเว็บบราวเซอร์

1. การตัดคำขึ้นบรรทัดใหม่<br />

แท็ก <br /> เป็นคำสั่งที่กำหนดจุดสิ้นสุดของบรรทัด (break rule) แล้วทำการขึ้นบรรทัดใหม่เพื่อแสดงข้อความส่วนที่เหลือในบรรทัดถัดไป คำสั่งนี้จึงให้ผลเสมือนการกดคีย์ ENTER บนคีย์บอร์ดนั่นเอง

ข้อสังเกต

แท็ก <br /> ส่วนใหญ่มักนิยมจะวางไว้ในตำแหน่งสุดท้ายของประโยค โดยต้องการให้แสดงผลประโยคใหม่ในบรรทัดต่อมา

ตัวอย่างการใช้แท็ก <br />

<!DOCTYPE HTML>

<html>

<head>

<title>การตัดคำขึ้นบรรทัดใหม่</title>

</head>

<body>

<body>

การใช้งานคำสั่ง br  <br />ซึ่งเป็นคำสั่งที่ทำให้ข้อความขึ้นบรรทัดใหม่

</body>

</html>

ผลลัพธ์ที่ได้

p1

2. การตัดคำขึ้นย่อหน้าใหม่ <p>

แท็ก <p> เป็นแท็กที่สั่งให้โปรแกรมเว็บบราวเซอร์ขึ้นย่อหน้าใหม่ (paragraph) โดยจะมีการเว้นบรรทัดว่างไว้ 1 บรรทัด

รูปแบบแท็ก  

<p>ข้อความที่ต้องการขึ้นย่อหน้าใหม่</p>

ตัวอย่างการใช้งานแท็ก <p>

<!DOCTYPE HTML>

<html>

<head>

<title>การตัดคำขึ้นย่อหน้าใหม่</title>

</head>

<body>

การใช้งานคำสั่ง p <p>ซึ่งเป็นคำสั่งที่ทำให้ข้อความขึ้นย่อหน้าใหม่</p>

</body>

</html>

ผลลัพธ์ที่ได้

p2

ข้อสังเกต
จะเห็นได้ว่าการขึ้นบรรทัดใหม่ของคำสั่ง <br> และ <p> นั้น การเว้นว่างระหว่างบรรทัดของทั้งสองมีความแตกต่างกัน โดยที่คำสั่ง <br> ช่องว่างระหว่างบรรทัดจะน้อยกว่าคำสั่ง <p>

 

3. การจัดวางตำแหน่งข้อความในย่อหน้า

เราสามารถจัดเรียงข้อความในแต่ละย่อหน้าของเว็บเพจได้  โดยการกำหนดตำแหน่งในแอตทริบิวต์ align (Alignment) ของแท็ก p ดังนี้

รูปแบบของแท็ก  <p align= “ตำแหน่ง”>ข้อความ</p>
ค่าที่กำหนด           ตำแหน่งของการจัดวางข้อความได้แก่ left (ซ้าย), center (ตรงกลาง), right (ขวา) และ justify (จัดเต็มพื้นที่)

ตัวอย่างการใช้งานแท็ก

<!DOCTYPE HTML>

<html>

<head>

<title>การจัดตำแหน่งการตัดคำขึ้นย่อหน้าใหม่</title>

</head>

<body>

<p align=”left”>การจัดวางตำแหน่งข้อความในย่อหน้าด้านซ้าย</p>

<p align=”center”>การจัดวางตำแหน่งข้อความในย่อหน้าตรงกลาง</p>

<p align=”right”>การจัดวางตำแหน่งข้อความในย่อหน้าด้านขวา</p>

<p align=”justify”>การจัดวางตำแหน่งข้อความในย่อหน้าแบบจัดเต็มพื้นที่ ซึ่งข้อความจะมีลักษณะเท่ากันทั้งด้านซ้ายและด้านขวา</p>

</body>

</html>

ผลลัพธ์ที่ได้

p3

4. การจัดวางตำแหน่งข้อความให้อยู่กึ่งกลาง <center>

รูปแบบของแท็ก  <center>ข้อความ</center>

5. การจัดรูปแบบเอกสารตามที่กำหนด <pre>

เป็นการกำหนดให้แสดงข้อความที่อยู่ในย่อหน้าที่อยู่ในชุดคำสั่งดังกล่าว เหมือนกับที่พิมพ์ไม่ว่าจะเป็นการเว้นวรรค หรือขึ้นบรรทัดใหม่ แต่จะบังคับใช้ fixed width fonts

รูปแบบแท็ก  <pre>ข้อความ</pre>

ตัวอย่างการใช้แท็ก pre (Preformatted)

<!DOCTYPE HTML>

<html>

<head>

<title>การใช้แท็ก pre (Preformatted)</title>

</head>

<body>

<pre>ข้อดีของ HTML คือ

สามารถใช้ได้กับเครื่องคอมพิวเตอร์ และระบบปฏิบัติการได้หลากหลายชนิด

</pre>

</body>

</html>

ผลลัพธ์ที่ได้

p4

6. การสร้างเส้นคั่น<hr>

แท็ก <hr> เป็นแท็กที่แสดงเส้นขีดคั่นทางแนวนอน (horizontal rule) โดยอาจใช้เป็นเส้นแบ่งเนื้อหาระหว่างบท หรือเป็นเส้นขีดคั่นเพื่อความสวยงามและเป็นระเบียบของเนื้อหา เป็นการกำหนดเส้นคั่นซึ่งเป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag)

รูปแบบแท็ก  

<hr /> (เป็นแท็กว่างต้องปิดแท็กด้วย / หลังจากแท็กคำสั่ง)

แอตทริบิวต์ (Attribute) คำอธิบาย รูปแบบการใช้งาน
width กำหนดความยาวของเส้นคั่น มีหน่วยเป็นพิกเซล หรือ % <hr width=“50” /> หรือ
<hr width=“50%” />
size กำหนดความหนาของเส้นคั่น มีหน่วยเป็นพิกเซล หรือ % <hr size=“50”> หรือ
<hr size=“50%”>
noshade กำหนดให้เส้นคั่นเป็นเส้นทึบ <hr noshade=“noshade”>
align กำหนดตำแหน่งของเส้นคั่นให้ตำแหน่งของการจัดวางข้อความได้แก่ left (ซ้าย), center (ตรงกลาง) right (ขวา) <hr align=“left” />
<hr align=“right” />
<hr align=“center” />
color การระบุสีเส้นคั่น แสดงผลเฉพาะ IE โดยสามารถใส่ชื่อสีหรือ #รหัสสีอย่างใดอย่างหนึ่ง <hr color=“red” /> หรือ
<hr color=“#f0f8ff” />

ตัวอย่างการใช้แท็ก hr (Horizontal Rule)

<!DOCTYPE HTML>

<html>

<head>

<title>การใช้แท็ก hr (Horizontal Rule)</title>

</head>

<body>

<body>

เส้นคั่นยาว=50% ความหนา=5 พิกเซล ตำแหน่ง=ซ้าย สีเส้นคั่น=สีแดง เส้นทึบ

<hr width=”50%” size=”5″ align=”left” color=”red” noshade=”noshade” />

<div align=”right”>เส้นคั่นยาว=50% ความหนา=5 พิกเซล ตำแหน่ง=ขวา สีเส้นคั่น=สีเหลือง เส้นทึบ</div>

<hr width=”50%” size=”5″ align=”right” color=”yellow” noshade=”noshade” />

<div align=”center”>เส้นคั่นยาว=50% ความหนา=5 พิกเซล ตำแหน่ง=ขวา สีเส้นคั่น=สีน้ำเงิน เส้นทึบ</div>

<hr width=”50%” size=”5″ align=”center” color=”blue” noshade=”noshade” />

</body>

</html>

ผลลัพธ์ที่ได้

p5

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

ทดลองเขียนเว็บเพจด้วยภาษา HTML

เขียนใน ภาษา html by

วิธีการเปิดโปรแกรม

1. เลือก Start >> All Programs >> Accessories >> Notepad

1           2. ลองพิมพ์โครงสร้างพื้นฐาน ดังรูป

<!DOCTYPE HTML>
<html>
<head>
<title>หัวข้อเว็บเพจ</title>
</head >
<body>
…ส่วนของเนื้อหา หรือข้อความที่จะใช้แสดงเนื้อหาในเว็บเพจ …
</body>
</html>

 

วิธีการเปลี่ยนรูปแบบตัวอักษร

Menu >> Format >>Font >>จากนั้นเปลี่ยนข้อมูลตามต้องการ >>จากนั้นคลิก OK

n3

n4

วิธีการบันทึกเอกสาร HTML

การบันทึกเอกสาร HTML ที่สร้างเสร็จแล้ว จะบันทึกนามสกุลเป็น .html หรือ .htm ซึ่งมีวิธีการบันทึกเอกสาร ดังนี้

1. เมื่อพิมพ์เสร็จแล้วไปที่ File >> Save

## หากเป็นการบันทึกชื่อใหม่ให้เลือก   File >> Save As..

3

2. บันทึกชื่อไฟล์และตามด้วยนามสกุล .html หรือ .htm   เช่น Test.html

4

วิธีการดูผลลัพธ์

วิธีที่ 1

หลังจากบันทึกเอกสารเรียบร้อยแล้วให้เราไปดับเบิลคลิกที่ไฟล์เอกสารเว็บที่เราสร้าง จะปรากฏดังรูป
5

วิธีที่ 2

เปิดโปรแกรม Internet Explorer

File >> Open >> Browse.. >> เลือกไฟล์เอกสารที่เราสร้าง >> Open >> OK  จะปรากฏเอกสาร HTML ที่เราสร้าง
k8

วิธีการแก้ไขเอกสาร HTML

           การแก้ไขเว็บเพจให้เรากลับไปที่ Notepad และทำการแก้ไขได้เลย เมื่อทำการแก้ไขเสร็จแล้ว ให้ทำการบันทึกไฟล์ และกลับไปที่เว็บบราวเซอร์อีกครั้ง จากนั้นกดปุ่ม F5 ที่แป้นพิมพ์ เพื่อให้บราวเซอร์ทำการโหลดเว็บเพจที่เราได้แก้ไข

1. เปิดอิดิเตอร์ Notepad

2. File >> Open

7           3. เลือก All Files

11

4. เลือกเอกสาร HTML ที่ต้องการแก้ไข >> คลิก Open >> ปรากฏเอกสาร HTML ที่ต้องการแก้ไข

k9

5. เมื่อทำการแก้ไขเสร็จแล้ว ให้ทำการบันทึกไฟล์ และกลับไปที่เว็บบราวเซอร์อีกครั้ง จากนั้นกดปุ่ม F5 ที่แป้นพิมพ์ เพื่อให้บราวเซอร์ทำการโหลดเว็บเพจที่เราได้แก้ไข

          หากพบว่าเนื้อหาที่เขียนในเว็บเพจไม่ปรากฏเป็นภาษาไทย ให้เรากำหนดการแสดงผลของบราวเวอร์ใหม่  โดยการคลิกเมาส์ขวา เลือกคำสั่ง >> Encoding >> Thai (Windows)

17

16

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad

พื้นฐานภาษา XHTML

เขียนใน ภาษา html by

images_1

ภาษา XHTML

           XHTML (ย่อมาจาก Extensible HyperText Markup Language) XHTML เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML (Extensible Markup Language) และ HTML มารวมกันกลายเป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป

จากข้อเสียของ HTML ที่เมื่อแสดงผลผ่านบราวเซอร์ของค่ายต่างๆ เช่น Internet Explorer, Firefox, Netscape, Opera และอื่นๆ  ได้ผลที่แตกต่างกัน เว็บเพจที่ออกแบบมาอย่างดีของเรา อาจดูสวยงามถูกต้องใน IE แต่กลับผิดเพี้ยนไปเมื่อดูด้วย Firefox

องค์กร W3C จึงได้นำ HTML 4.0 มาปรับปรุงใหม่ โดยยึดหลักการของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การใช้งานมีความเข้มงวด และเป็นมาตรฐานยิ่งขึ้น ซึ่งจะเป็นแนวทางให้บราวเซอร์ค่ายต่างๆ พัฒนาโปรแกรมเว็บบราวเซอร์โดยใช้มาตรฐานเดียวกัน รวมไปถึงเว็บบราวเซอร์ที่ติดตั้งบน Platforms ต่างๆ เช่น PDA โทรศัพท์มือถือ ด้วย

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

images_1ข้อดีของภาษา XHTML

  • การเริ่มต้นใช้งานไม่ยุ่งยาก เนื่องจากคำสั่งใน XHTML พัฒนามาจากภาษา HTML4 ซึ่งนักเขียนเว็บคุ้นเคยกันดีอยู่แล้ว เพียงแต่เขียนรูปแบบเหมือน XML นอกจากนี้เว็บเพจที่สร้างขึ้นสามารถใช้กับบราวเซอร์ที่มีทันที
  • การใช้คำสั่งและโมดูลร่วมกันได้ ในภาษา XHML จะให้เราสามารถพัฒนา Element Attribute และโมดูลการทำงานของเราเอง และสามารถส่งต่อให้ผู้อื่นสามารถนำไปใช้ ทำให้นักสร้างเว็บคนอื่นสามารถนำคำสั่งหรือโมดูลเราไปใช้ได้ทันที โดยไม่ต้องเสียเวลาคิดใหม่
  •  การพัฒนาบราวเซอร์ทำได้ง่ายและสะดวก เนื่องจากการเขียนเว็บด้วย XHTML จะมีรูปแบบแน่นอนตายตัว ดังนั้นการออกแบบและพัฒนาบราวเซอร์จะไม่ต้องเขียนโปรแกรมรองรับรูปแบบเพี้ยน มากนัก
  • การทำงานเข้ากับทุกระบบ เพราะ XHTML เป็นภาษาที่ไม่ซับซ้อนและมีความแน่นอน จึงไม่จำเป็นต้องใช้บราวเซอร์และโปรเซสเซอร์ในการประมวลผลที่สูงมากนัก ซึ่งส่งผลทำให้อุปกรณ์ต่างๆ พัฒนาระบบให้สามารถเปิดใช้เว็บได้มากยิ่งขึ้น

images_1กฎเกณฑ์พื้นฐานในการเขียนภาษา XHTML

image11sการกำหนด DOCTYPE

DOCTYPE (Document Type Definition : DTD ) เป็นการกำหนดชนิดของเอกสารซึงมีผลต่อรูปแบบ และคุณสมบัติการทำงานของแท็กที่เราจะใช้ในเอสารหน้านั้น

การประกาศ <!DOCTYPE> ก็เพื่อบอกให้เว็บเบราเซอร์์ทราบว่า เว็บเพจของเราใช้ภาษา HTML หรือ XHTML และคำสั่ง HTML/XHTML ที่ใช้เป็นรุ่นใด และบอกชนิดของเอกสาร (Document Type Definition : DTD) ที่ใช้ ซึ่งจะช่วยให้เว็บเบราเซอร์แปลเอกสารได้อย่างถูกต้อง

k10

image11sDocument Type Definitions (DTD) ของ XHTML

1. XHTML 1.0 Strict

เป็นการกำหนดรูปแบบที่เคร่งครัด โดยไม่สนับสนุนการแสดงผลแอตทริบิวต์ที่ถูกตัดหรือยกเลิกใช้งาน จะรองรับการแสดงผลด้วยบราวเซอร์ที่สนับสนุน Cascading Style Sheet (CSS) จึงเหมาะสมกับกับการสร้างเว็บใหม่ที่ต้องการรองรับเทคโลยีแห่งอนาคต

การเลือก DOCTYPE ชนิดนี้ จะต้องเขียนคำสั่งทุกจุดให้ถูกต้องตามมาตรฐานของ XHTML ไม่สามารถใช้ Tag และ Attribute เก่า ที่ W3C ย้ายไปไว้ในส่วน Style Sheet ได้ (เช่น tag <font>) และการตกแต่งเอกสารจะใช้ CSS เท่านั้น ไม่สามารถใส่ Attribute ใน Element ได้ เช่น ไม่สามารถเขียน <body bgcolor=”white”>…</body> ได้

k11

2. XHTML 1.0 Transitional

เป็นการกำหนดรูปแบบให้กับเว็บเพจที่กำลังเริ่มใช้ XHTML เพื่อให้สามารถใช้แท็กและแอตทริบิวต์ที่ยกเลิกไปแล้วได้ และยังรองรับการแสดงผลด้วยบราวเซอร์รุ่นเก่าที่ไม่สนับสนุน Cascading Style Sheet (CSS) เป็นการสร้างและเรียกใช้รูปแบบข้อความ รวมทั้งเอาต์ของเว็บเพจให้ทำงานได้สะดวก และควบคุมการทำงานการปรับแต่งได้ง่ายขึ้น

การเลือก DOCTYPE ชนิดนี้ จะค่อนข้างยืดหยุ่น เรายังสามารถใช้ Tag และ Attribute เก่า ที่ W3C ย้ายไปไว้ในส่วน Style Sheet ได้ การตกแต่งเอกสารเราสามารถเขียนเป็น <bgcolor=”white”>…</body> หรือ เขียนแบบใช้ CSS ก็ได้ <body style=”background-color: white;”> แต่ยังต้องเขียนคำสั่งให้ถูกต้องตาม syntax ของ XHTML

k12

3. XHTML 1.0 Frameset

เป็นการกำหนดรูปแบบให้กับเว็บเพจที่มีการใช้เฟรม หรือที่รู้จักในคำสั่ง Frameset จะมีรูปแบบเลือกใช้ doctype ชนิดนี้ เมื่อเราจะใช้งาน Framset (เป็นการระบุว่าเอกสาร HTML นั้นใช้เฟรมในการสร้างหน้าเว็บเพจแทนการใช้ tag <body>

k13
images_1ข้อกำหนดของภาษา XHTML

image11sการเรียงลำดับแท็กที่ซ้อนกัน

XHTML จะเคร่งครัดในแท็กที่ซ้อนกัน โดยต้องมีการเรียงลำดับแท็กที่ถูกต้อง เช่น

k14

image11sแท็กและแอตทริบิวต์ทุกตัวเขียนด้วยตัวพิมพ์เล็กเสมอ

ภาษา XHTML มีโครงสร้างจากภาษา XML ซึ่งมองว่าตัวพิมพ์ใหญ่และตัวพิมพ์เล็กแตกต่างกัน ดังนั้นเพื่อลดความผิดพลาดของการใช้งานควรกำหนดแท็กและแอตทริบิวต์ทุกตัวเป็นตัวพิมพ์เล็ก

image11sทุกแท็กเปิดต้องมีแท็กปิด

ภาษา XHTML กำหนดให้แท็กเปิดและแท็กปิด เช่น <p> นี้คือการกำหนดพารากราฟ</p>

image11sต้องกำหนดค่าแอตทริบิวต์ในเครื่องหมาย “…” เสมอ

ค่าที่กำหนดแอตทริบิวต์ทั้งหมดต้องอยู่ภายในเครื่องหมาย “…” ซึ่งแตกต่างจากภาษา HTML แบบเดิมที่ใส่เฉพาะค่าตัวเลขเท่านั้น

k15image11sห้ามย่อแอตทริบิวต์

ภาษา XHTML จะเหมือนกับภาษา XML จะไม่รองรับการย่อแอตทริบิวต์ โดยเฉพาะแอตทริบิวต์ที่ชื่อเหมือนกัน ซึ่งการเขียนภาษา XHTML บังคับให้เขียนชื่อแอตทริบิวต์ทั้งหมด

k16image11sแท็กที่มีแอตทริบิวต์ name ให้เปลี่ยนมาใช้แอตทริบิวต์ id แทน

ภาษา XHTML จะมีการยกเลิกแท็ก name ซึ่งมีการใช้ในภาษา HTML และใช้แอตทริบิวต์ id แทน ดังนี้

k17images_1ตัวอย่างการเขียนเอกสารภาษา XHTML

19
20

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ HTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

พื้นฐานภาษา HTML

เขียนใน ภาษา html by

images_1

 รู้จักภาษา HTML

         HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์ (Hypertext Document) ซึ่งพัฒนาขึ้นมาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee เป็นภาษามาตรฐานที่ใช้พัฒนาเอกสารในรูปแบบของเว็บเพจเผยแพร่บนระบบเครือข่ายอินเทอร์เน็ต มีโครงสร้างการเขียนที่อาศัยตัวกำกับ เรียกว่า แท็ก (Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรือวัตถุอื่นๆ เรียกใช้เอกสารเหล่านี้โดยการใช้โปรแกรมเว็บบราวเซอร์ (Web Browser) เช่น Mozilla Firefox, Opera , Nescape navigator, Internet Explorer ฯลฯ เป็นต้น

ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบันขณะที่ HTML รุ่น 5 ยังคงยังอยู่ในระหว่างการพิจารณาในการใช้งาน

 images_1ลักษณะของภาษา HTML 

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

    • รูปแบบแท็กจะแยกเป็น 2 ส่วน โดยแต่ละส่วนเริ่มต้นของแท็ก เรียกว่า “แท็กเปิด” และส่วนจบของแท็ก เรียกว่า “แท็กปิด” โดยในส่วนของแท็กปิดต้องมีเครื่องหมาย Slash (/)
    • แท็ก (Tag)  เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
      Ø Tag เดี่ยว  เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <br>, <hr> เป็นต้น
      Ø Tag เปิด/ปิด  เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>k5
      ในกรณีต้องการซ้อนแท็กมากกว่า 1 แท็ก เราต้องทำการเปิด ปิดแท็กให้ถูกต้อง โดยการปิดแท็กในสุดก่อน แล้วจึงไล่ปิดแท็กอื่น ๆ ตามลำดับ
    • k4บางแท็กอาจจะไม่ต้องมีแท็กปิดก็ก็ใช้งานได้ เช่น <br>
    • เราสามารถพิมพ์เป็นตัวเล็กตัวใหญ่ เช่น <HTML>,<html>,<Html> จะมีความหมายเหมือนกันเพื่อรองรับเอกสารแบบ XHTML
    • บางแท็กจะต้องมีตัวกำหนดคุณสมบัติ เรียกว่า แอตทริบิวต์ (Attribute) และค่าที่ถูกกำหนดให้ใช้ในแท็ก (Value) โดยจะเขียนไว้หลังแท็ก
      o แอตทริบิวต์ (Attributes)  เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น

k6
images_1 โครงสร้างพื้นฐานของภาษา HTML
<html>
<head>
<title>หัวข้อเว็บเพจ</title>
</head >
<body>
…ส่วนของเนื้อหา หรือข้อความที่จะใช้แสดงเนื้อหาในเว็บเพจ …
</body>
</html>

  • <html>…</html> เป็นแท็กแรกที่ต้องมีในภาษา HTML ซึ่งบอกให้ทราบว่านี้คือ ภาษา HTML ใช้ในการกำหนดจุดเริ่มและจุดสิ้นสุดของเอกสาร HTML
  • <head>…</head>  เป็นส่วนกำหนดรายละเอียดหัวเอกสาร HTML
  • <title>…<.title>  เป็นแท็กที่ใช้กำหนดชื่อเว็บเพจ ซึ่งภายแท็กจะเป็นชื่อเรื่องเว็บที่ต้องการ ซึ่งความยาวไม่เกิน 64 ตัวอักษร ข้อความนี้จะปรากฏที่ title bar ของบราวเซอร์ที่เราใช้งานอยู่
  • <body>…</body>  ส่วนที่เป็นเนื้อหาเว็บเพจของเรา ไม่ว่าจะเป็นข้อความ รูปภาพ ตาราง และการเชื่อมโยงต่อไปยังเอกสารอื่น ๆ

images_1เครื่องมือในการสร้างเอกสาร HTML

ในการสร้างเว็บเพจด้วยภาษา HTML เราจะมีเครื่องมือที่ใช้ในการเขียนและแก้ไขโค้ดเรียกว่า Text Editorซึ่งเป็นโปรแกรมที่ใช้สำหรับการสร้างและแก้ไขข้อความ ปัจจุบันมีอยู่มากมายที่ใช้สำหรับแก้ไขโค้ด HTML เช่น Notepad, EditPlus, Dreamweaver ฯลฯ เป็นต้น

k7

images_1ทดลองเขียนเว็บเพจด้วยภาษา HTML

วิธีการเปิดโปรแกรม

1. เลือก Start >> All Programs >> Accessories >> Notepad

1           2. ลองพิมพ์โครงสร้างพื้นฐาน ดังรูป

2

วิธีการบันทึกเอกสาร HTML

การบันทึกเอกสาร HTML ที่สร้างเสร็จแล้ว จะบันทึกนามสกุลเป็น .html หรือ .htm ซึ่งมีวิธีการบันทึกเอกสาร ดังนี้

1. เมื่อพิมพ์เสร็จแล้วไปที่ File >> Save

## หากเป็นการบันทึกชื่อใหม่ให้เลือก   File >> Save As..

3

2. บันทึกชื่อไฟล์และตามด้วยนามสกุล .html หรือ .htm   เช่น Test.html

4

วิธีการดูผลลัพธ์

วิธีที่ 1

หลังจากบันทึกเอกสารเรียบร้อยแล้วให้เราไปดับเบิลคลิกที่ไฟล์เอกสารเว็บที่เราสร้าง จะปรากฏดังรูป
5

วิธีที่ 2

เปิดโปรแกรม Internet Explorer

File >> Open >> Browse.. >> เลือกไฟล์เอกสารที่เราสร้าง >> Open >> OK  จะปรากฏเอกสาร HTML ที่เราสร้าง
k8

วิธีการแก้ไขเอกสาร HTML

           การแก้ไขเว็บเพจให้เรากลับไปที่ Notepad และทำการแก้ไขได้เลย เมื่อทำการแก้ไขเสร็จแล้ว ให้ทำการบันทึกไฟล์ และกลับไปที่เว็บบราวเซอร์อีกครั้ง จากนั้นกดปุ่ม F5 ที่แป้นพิมพ์ เพื่อให้บราวเซอร์ทำการโหลดเว็บเพจที่เราได้แก้ไข

1. เปิดอิดิเตอร์ Notepad

2. File >> Open

7           3. เลือก All Files

11

4. เลือกเอกสาร HTML ที่ต้องการแก้ไข >> คลิก Open >> ปรากฏเอกสาร HTML ที่ต้องการแก้ไข

k9

5. เมื่อทำการแก้ไขเสร็จแล้ว ให้ทำการบันทึกไฟล์ และกลับไปที่เว็บบราวเซอร์อีกครั้ง จากนั้นกดปุ่ม F5 ที่แป้นพิมพ์ เพื่อให้บราวเซอร์ทำการโหลดเว็บเพจที่เราได้แก้ไข

          หากพบว่าเนื้อหาที่เขียนในเว็บเพจไม่ปรากฏเป็นภาษาไทย ให้เรากำหนดการแสดงผลของบราวเวอร์ใหม่  โดยการคลิกเมาส์ขวา เลือกคำสั่ง >> Encoding >> Thai (Windows)

17

16

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ HTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

พื้นฐานการสร้างเว็บ

เขียนใน ภาษา html by

ก่อนจะเริ่มต้นการสร้างเว็บเพจซักหนึ่งเว็บ เราควรทราบถึงความรู้พื้นฐานเกี่ยวกับการสร้างเว็บก่อน เพื่อจะทราบถึงความหมายและหลักการทำงานของเว็บว่าเป็นอย่างไร

‡ คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บไซต์ ‡

Internetรูปภาพประกอบจากอินเทอร์เน็ต

‡ อินเตอร์เน็ต (Internet) คืออะไร

อินเตอร์เน็ต (Internet) เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกซึ่งรวมเอาเครือข่ายย่อยเป็น จำนวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกัน เป็นเครือข่ายเดียวกันได้ในแพลตฟอร์มของ เวิลด์ไวด์เว็บ (World Wide Web)

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

ในปัจจุบันมีคนจากทั่วโลกนับพันล้านคนที่เข้าถึงบริการบนอินเทอร์เน็ต เช่น เวิลด์ไวด์เว็บ อีเมล์ (e-mail) พาณิชย์อิเล็กทรอนิกส์ (e-commerce) ห้องคุย (chat room) การส่งสารทันที (instant messaging) และวอยซ์โอเวอร์ไอพีหรือวีโอไอพี (Voice over IP: VoIP)


‡ เวิล์ดไวด์เว็บ (World Wide Web) คืออะไร?

เวิลด์ไวด์เว็บ (World Wide Web) หรือเรียกสั้นๆ ว่าเว็บ เป็นการให้บริการข้อมูลแบบไฮเปอร์เท็กซ์ (hypertext) ที่ประกอบไปด้วยเอกสารจำนวนมากที่มีการเชื่อมโยงกัน ซึ่งเป็นแหล่งของข้อมูลขนาดใหญ่ที่ผู้ใช้อินเทอร์เน็ตสามารถเข้าถึงผ่านโพรโทคอลที่เรียกว่า เอชทีทีพี (Hypertext Transfer Protocol: HTTP)

เวิลด์ไวด์เว็บ (World Wide Web) เป็นอินเตอร์เน็ตชนิดหนึ่งที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ (Text)  ภาพ (Graphic)  เสียง (Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้น ผู้ใช้ทั่วไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูลครบถ้วนปัจจุบัน ถ้าพูดถึงอินเตอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของอินเตอร์เน็ตเท่านั้น


‡ เว็บไซต์  (Website) คืออะไร?

เว็บไซต์ (Website) เป็นกลุ่มของเว็บเพจที่มีความเกี่ยวข้องกัน และอยู่ภายใต้ชื่อโดเมนเดียวกันเป็นแหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ของแต่ละบริษัทหรือหน่วยงานโดยเรียกเอกสารแต่ละหน้าของเว็บไซต์ว่า เว็บเพจ (Web Page) และเรียกเว็บหน้าแรกของแต่ละเว็บไซต์ว่า โฮมเพจ (Home Page)

อาจกล่าวได้ว่า เว็บไซต์ก็คือ เว็บเพจอย่างน้อยสองหน้าที่มีลิงก์ (Links) ถึงกัน หรือเปรียบได้กับหนังสือหนึ่งเล่ม ยกตัวอย่างเช่น http://www.swt.ac.th เป็น คือ เว็บไซต์ของโรงเรียนเสริมงามวิทยาคม

swtรูปแสดง เว็บไซต์โรงเรียนเสริมงามวิทยาคม http://www.swt.ac.th

‡ เว็บเพจ (Webpage) คืออะไร?

เว็บเพจ (Webpage) เป็นหน้าเอกสารที่เขียนขึ้นในรูปแบบภาษาเอชทีเอ็มแอล (Hypertex Markup Language: HTML) ซึ่งสามารถเชื่อมโยงไปยังเอกสารหน้าอื่นได้ โดยเรียกดูผ่านเว็บเบราว์เซอร์

เว็บเพจ (Webpage) เป็นเอกสารที่ใช้เผยแพร่ข้อมูลข่าวสารซึ่งประกอบด้วยข้อความ ภาพ เสียง ภาพยนต์ กราฟิก และมัลติมีเดีย ผ่านทางเครือข่ายอินเทอร์เน็ต เว็บเพจจะถูกนำมาใช้ในการประชาสัมพันธ์ และนำเสนอข้อมูลความรู้ต่าง ๆ จึงส่งผลทำให้แต่ละเว็บเพจมีความแตกต่างกันไปตามวัตถุประสงค์ของการนำไปใช้งาน ซึ่งอาจเปรียบเว็บเพจได้กับหน้าหนังสือแต่ละหน้านั่นเอง

‡ โฮมเพจ (Homepage) คืออะไร?

โฮมเพจ (Homepage) คือ คำที่ใช้เรียกหน้าแรกของเว็บไซต์ โดยเป็นทางเข้าหลักของเว็บไซต์ เมื่อเปิดเว็บไซต์นั้นขึ้นมา โฮมเพจก็จะเปรียบเสมือนกับเป็นสารบัญและคำนำที่เจ้าของเว็บไซต์นั้นได้สร้างขึ้น เพื่อใช้ประชาสัมพันธ์เว็บไซต์ของตนเองหรือองค์กร นอกจากนี้ภายในโฮมเพจก็อาจมีเอกสารหรือข้อความที่เชื่อมโยงต่อไปยังเว็บเพจอื่นๆ อีกด้วย


‡ เว็บเบราว์เซอร์ (Web browser) อะไร?

เว็บเบราว์เซอร์ (Web browser) เป็นโปรแกรมใช้สำหรับการแสดงเว็บเพจ และสามารถเชื่อมโยงไปยังส่วนอื่นในเว็บเพจเดียวกันหรือเว็บเพจอื่นผ่านการเชื่อมโยงหลายมิติ หรือไฮเปอร์ลิงค์ (hyperlink) เรียกสั้นๆว่า ลิงค์ (link)

เว็บเบราว์เซอร์ช่วยเพิ่มความน่าสนใจในการใช้งานอินเทอร์เน็ต นอกเหนือไปจากการสื่อสารหรือการแลกเปลี่ยนไฟล์ระหว่างเครือข่าย ตัวอย่างเว็บเบราว์เซอร์ เช่น Mozilla Firefox, Microsoft Internet Explorer, Apple Safali, Google Chrome และ Opera


‡ เว็บเซิร์ฟเวอร์ (Webserver) คืออะไร?

           เว็บเซิร์ฟเวอร์ (Webserver) เป็นเครื่องคอมพิวเตอร์ที่ให้บริการเว็บเพ็จ เมื่อผู้ใช้ร้องขอเว็บเพจผ่านเว็บเบราว์เซอร์ โดยใช้ยูอาร์แอล (uniform Resource Location: URL) ระบุตำแหน่งของเว็บเพจ เว็บเซิร์ฟเวอร์จะส่งเว็บเพจที่ค้นหาได้กลับไปแสดงผลผ่านเว็บเบราว์เซอร์ของผู้ใช้


‡ เว็บโฮสติง (Web Hosting) คืออะไร?

           เว็บโฮสติง (Web Hosting) เป็นการให้บริการพื้นที่สำหรับสร้าง และจัดเก็บเว็บไซต์ของหน่วยงาน หรือบุคคลทั่วไป เพื่อให้บุคคลอื่นเข้าถึงได้ผ่านอินเทอร์เน็ต


‡ URL คืออะไร?

URL (Uniform Resource Locator) คือ แหล่งที่อยู่ของเว็บไซต์ใดๆ  เพราะฉะนั้นเราสามารถเข้าถึง website หนึ่งได้ โดยการพิมพ์ URL เช่น URL ของโรงเรียนเสริมงามวิทยาคม คือ http://www.swt.ac.th


‡ ไคลเอนต์ – เซิร์ฟเวอร์ (Client – Server) คืออะไร?

ในการติดต่อสื่อสารบนเครือข่ายอินเทอร์เน็ตที่คอมพิวเตอร์ทั่วโลกเชื่อมโยงถึงกันนั้น จะมีการติดต่อสื่อสารอยู่ 2 แบบ แบบส่งข้อมูลและรับข้อมูล โดยเครื่องคอมพิวเตอร์ที่ทำการส่งข้อมูลเรียกว่า เครื่องให้บริการ (Server) และเครื่องคอมพิวเตอร์ที่รับข้อมูล เราจะเรียกว่า เครื่องรับบริการ (Client)


‡ การกำหนดที่อยู่บนอินเทอร์เน็ต  ‡

‡ เลขที่อยู่ไอพี

IP Address ย่อมาจากคำเต็มว่า Internet Protocal Address คือหมายเลขประจำเครื่องคอมพิวเตอร์แต่ละเครื่องในระบบเครือข่ายที่ใช้โปรโตคอลแบบ TCP/IP ซึ่งประกอบด้วยตัวเลข 4 ชุด มีเครื่องหมายจุดขั้นระหว่างชุด  ตัวอย่าง IP Address 192.168.0.1 เป็นต้น

การกำหนดหมายเลขประจำเครื่องที่เราเรียกว่า IP Address กำหนดขึ้นเพื่อไม่ให้เกิดความสับสนและซ้ำกัน จึงได้มีการก่อตั้งองค์กรเพื่อแจกจ่าย IP Address โดยเฉพาะ ชื่อองค์กรว่า InterNIC (International Network Information Center) อยู่ที่ประเทศสหรัฐอเมริกา การแจกจ่ายนั้นทาง InterNIC จะแจกจ่ายเฉพาะ Network Address ให้แต่ละเครือข่าย ส่วนลูกข่ายของเครื่องทางเครือข่ายนั้นก็จะเป็นผู้แจกจ่ายอีกทอดหนึ่ง ดังนั้นพอสรุปได้ว่า IP Address จะประกอบด้วยตัวเลข 2 ส่วน คือ

  1. Network Address
  2. Computer Address

การแบ่งขนาดของเครือข่าย

เราสามารถแบ่งขนาดของการแจกจ่าย Network Address ได้ 3 ขนาดคือ

1. Class A nnn.ccc.ccc.ccc (nnn ชุดแรก ตัวเลขอยู่ระหว่าง 1-126)

เครือข่าย Class A สามารถแจกจ่าย IP Address ได้มากที่สุดถึง 16 ล้านหมายเลข

2. Class B nnn.nnn.ccc.ccc (nnn ชุดแรก ตัวเลขอยู่ระหว่าง 128-191)

เครือข่าย Class A สามารถแจกจ่าย IP Address ได้มากเป็นอันดับสอง คือ 65,000 หมายเลข

3. Class c nnn.nnn.nnn.ccc (nnn ชุดแรก ตัวเลขอยู่ระหว่าง 192-233)

เครือข่าย Class A สามารถแจกจ่าย IP Address ได้น้อยที่สุด คือ 256 หมายเลข

* nnn หมายถึง Network Address ccc หมายถึง Computer Address

หมายเลขต้องห้าม สำหรับ IP Address

สำหรับภายในองค์กร ก็มีหมายเลขต้องห้ามเช่นกัน

  1. 127.xxx.xxx.xxx หมายเลขนี้ใช้สื่อสารกับตัวเอง?
  2. 0.0.0.0?

‡ ระบบชื่อโดเมน

           ชื่อโดเมน (Domain Name) ความหมายโดยทั่วไป คือ ชื่อเว็บไซต์ ที่ตั้งขึ้นเพื่อให้ง่ายต่อการจดจำและการนำไปใช้งาน  เนื่องจากการจดจำหมายเลข IP ถึง 16 หลัก ทำให้ยุ่งยาก และไม่สามารถจำได้เวลาท่องไปในระบบอินเทอร์เน็ต

ดังนั้นจึงกำหนดให้มีระบบชื่อโดเมน (Domain Name System: DNS) ซึ่งแปลงเลขที่อยู่ไอพีให้เป็นชื่อโดเมนที่อยู่ในรูปของชื่อย่อภาษาอังกฤษหลายส่วนคั่นด้วยเครื่องหมายจุด ซึ่งมักจะเป็นชื่อที่สื่อความหมายถึงหน่วยงาน วัตถุประสงค์ เนื้อหา หรือเจ้าของเว็บไซต์นั้นๆ โดยแต่ละเว็บไซต์จะมีชื่อโดเมนเฉพาะที่ไม่ซ้ำกัน ผู้ใช้สามารถจดทะเบียนชื่อโดเมนสำหรับคอมพิวเตอร์ของตนผ่านผู้ให้บริการจดทะเบียนชื่อโดเมนที่ได้รับอนุญาต

หลักที่ใช้ในการตั้งชื่อ Domain name

1. ความยาวของชื่อ Domain ตั้งได้ไม่เกิน 63 ตัวอักษร

2. สามารถใช้ตัวอักษรภาษาอังกฤษผสมกับตัวเลข หรือเครื่องหมายขีด (-) ได้

3. ตัวอักษรภาษาอังกฤษ ตัวเล็กหรือตัวใหญ่ ถือว่าเหมือนกัน

4. ห้ามใช้เครื่องหมายขีด (-) นำหน้าชื่อ Domain name แต่สามารถใช้ในระหว่างคำได้

5. ห้ามเว้นวรรคในชื่อ Domain

6. การตั้งชื่อ Domain ควรสื่อ ถึงความหมาย ของเว็บไซต์เราให้มากที่สุด เนื่องจากมีผลต่อ Search Engine ( SEO )

รูปแบบการตั้ง Domain Name ตามหลักการของ Internet

มีรูปแบบ 3 รูปแบบใหญ่ๆ คือ

1. โดเมนขั้นสูงสุด – Top Level Domain เป็นรูปแบบที่ยังสามารถแบ่งได้ อีก 2 แบบย่อย คือ
* โดเมนเนมสากล หรือ gTLD (generic Top-Level Domain Name) เป็นการจัดแบ่งตามลักษณะการใช้งาน เช่น .com, .net, .org สามารถใช้ได้ทั่วไป ไม่ว่าจะเป็นประเทศใด

* โดเมนเนมประจำสัญชาติ หรือ ccTLD (country code Top-Level Domain Name) เป็นหลักการจัดแบ่งตามลักษณะขอบเขตทางภูมิศาสตร์ หรือชื่อประเทศ เช่น .th (ไทย), .uk (อังกฤษ), .jp (ญี่ปุ่น), เป็นต้น

2. โดเมนขั้นที่สอง – Second Level Domain เป็น Sub โดเมนที่แบ่งออกจาก TLD โดยอยู่ตำแหน่งถัดจาก TLD มาทางด้านซ้ายมือ เช่น.ac สำหรับสถาบันทางการศึกษา .co สำหรับองค์กรธุรกิจ
3. โดเมนขั้นที่ 3 – Third Level Domain เป็น Sub โดเมนที่ถูกแบ่งออกจาก SLD อีกชั้นหนึ่งและมีตำแหน่งถัดจาก SLD ทางด้ายซ้ายมือ ใช้เป็นชื่อย่อขององค์กร เช่น thaihostclub เป็นต้น

ส่วนประกอบสุดท้ายในชื่อโดเมนเรียกว่า ชื่อโดเมนระดับบนสุด (top-level domainname) ใช้สำหรับแยกกลุ่มของชื่อโดเมน ในกรณีที่ชื่อโดเมนระดับบนสุดเป็นชื่อโดเมนสากล ชื่อดังกล่าวเป็นส่วนที่ใช้บอกลักษณะขององค์ที่เป็นเจ้าของชื่อโดเมน ในกรณีที่เป็นชื่อโดเมนระดับประเทศ ชื่อดังกล่าวใช้บอกชื่อประเทศที่โดเมนนั้นตั้งอยู่ ตัวอย่างชื่อโดเมนระดับบนสุดแสดงดังตาราง

ตัวอย่างชื่อโดเมนระดับบนสุด

โดเมนระดับบนสุด

ย่อมาจาก

ความหมาย

.arpa

 arpanet เป็นเครือข่ายในโครงการ Advanced  Research Project Agencies

.com

 commercial เป็นเครือข่ายขององค์กรเอกชน

.gov

 Government agency เป็นเครือข่ายของหน่วยงานภาครัฐบาล

.edu

 educational เป็นเครือข่ายของหน่วยงานการศึกษาหรือมหาวิทยาลัย

.mil

 United States Military เป็นเครือข่ายของหน่วยงานทหาร

.net

 network เป็น Network operator หรือ บริษัท provider ต่าง ๆ

.org

 organization เป็นเครือข่ายองค์กรที่ไม่หวังผลกำไร

.biz

 business เป็นเครือข่ายองค์กร บริษัท ห้างหุ้นส่วน คล้ายกับ .com

.info

 information เป็นเครือข่ายข้อมูลสารสนเทศ

.int

 international organizations เป็นเครือข่ายสำหรับองค์กรนานาชาติ

ชื่อย่อประเทศนั้น ๆ

 ประเทศที่ตั้งเครือข่ายนั้นในอินเตอร์เน็ต เช่น .th หมายถึงเครือข่ายที่อยู่ในประเทศไทย



ตางรางแสดง รายชื่อ Domain Name ในประเทศไทย

Domain สากล

Domain
ในไทย

ย่อมาจาก

ความหมาย

.com

.co.th

 Commerce of Thailand องค์กรธุรกิจภาคเอกชนในประเทศไทย

.gov

.go.th

 Government of Thailand หน่วยงานภาครัฐบาลของประเทศไทย

.edu

.ac.th

 Academic of Thailand สถาบันการศึกษาของประเทศไทย

.mil

.mi.th

 Military of Thailand หน่วยงานทางการทหารของประเทศไทย

.org

.or.th

 Organization of Thailand องค์กรที่ไม่หวังผลกำไรในประเทศไทย

.net

.net.th

 Network of Thailand หน่วยงานด้านระบบเครือข่ายในไทย

.int

.in.th

 Induval in thailand สำหรับบุคคลทั่ว ๆ ไปในประเทศไทย

‡ ที่อยู่เว็บ

ในการอ้างอิงตำแหน่งของแหล่งข้อมูลบนอินเทอร์เน็ตที่ผู้ใช้ร้องขอ เช่น เว็บเพจ สามารถทำได้โดยการระบุยูอาร์แอล (Uniform Resource Location: URL) ซึ่งมีรูปแบบดังนี้

  • โพรโทคอล ใช้สำหรับระบุมาตรฐานที่ใช้ในการแลกเปลี่ยนข้อมูลผ่านเว็บ เช่น เอชทีทีพี และเอฟทีพี (File Transfer Protocol: FTP ) ในกรณีของเอชทีทีพี ส่วนใหญ่แล้วผู้ใช้สามารถจะละส่วนของโพรโทคอลนี้ได้  เนื่องจากถ้าไม่ระบุโพรโทคอล เว็บเบราว์เซอร์จะเข้าใจว่าผู้ใช้มีความประสงค์จะใช้โพรโทคอล เอชทีทีพีเพื่อเข้าถึงเว็บเพจ
  • ชื่อโดเมน ใช้สำหรับระบุชื่อโดเมนของเว็บเซิร์ฟเวอร์ของผู้ให้บริการข้อมูล เช่น ชื่อโดเมน www.swt.ac.th
  • เส้นทางเข้าถึงไฟล์ (path) ใช้สำหรับระบุตำแหน่งของไฟล์จากเว็บเซิร์ฟเวอร์
  • ชื่อข้อมูล ชื่อไฟล์ที่ร้องขอ เช่น ไฟล์ไฮเปอร์เท็กซ์ ไฟล์รูปภาพ ไฟล์วีดีทัศน์ ไฟล์เสียง

ในกรณีที่ยูอาร์แอลระบุเฉพาะชื่อโดเมนโดยไม่ระบุเส้นทางเข้าถึงไฟล์ และ / หรือชื่อไฟล์ มีความหมายว่าให้เข้าถึงหน้าหลัก หรือโฮมเพจ (homepage) ของเว็บเซิร์ฟเวอร์นั้น ซึ่งโดยทั่วไปเป็นการเข้าถึงชื่อไฟล์ที่กำหนดไว้ เช่น index.html, main.php และ default.asp

 swt

ตัวอย่างโฮมเพจของเว็บโรงเรียนเสริมงามวิทยาคม


‡ โปรแกรมที่ใช้ในการสร้างเว็บ ‡

โปรแกรมที่ใช้ในการสร้างเว็บเพจมีหลายโปรแกรม ขึ้นอยู่กับลักษณะการสร้างเว็บเพจ ดังนี้

 ‡ โปรแกรมที่ใช้เขียนเว็บเพจด้วยภาษา HTML

การสร้างเว็บเพจด้วยภาษา HTML จะเป็นการสร้างเว็บเพื่อให้เข้าใจโครงสร้างของภาษา และคำสั่ง ซึ่งเป็นพื้นฐานของการสร้างเว็บ  การสร้างเว็บด้วยภาษา HTML สามารถใช้โปรแกรม Text Editor ทั่วไป เช่น โปรแกรม Notepad ที่มาพร้อมกับ Windows  หรือโปรแกรม EditPlus เป็นต้น

‡ โปรแกรมที่ใช้สร้างเว็บและจัดองค์ประกอบของหน้าเว็บ

                ปัจจุบันการจะผลิตเว็บไซต์ซักหนึ่งเว็บไม่ยากมากจนเกินไป เนื่องจากมีผู้ผลิตโปรแกรมสำเร็จรูปที่ช่วยสร้างเว็บไซต์ได้อย่างง่าย แค่คลิก ลาก วาง เลือก ก็ทำให้เว็บเพจออกมาสวยงามได้ แถมยังมีเครื่องมือที่ช่วยจัดวางหน้าเว็บ แทรกลูกเล่น หรือภาพเคลื่อนไหว โดยโปรแกรมที่ใช้สร้างเว็บไซต์ เช่น Macromedia Dreamweaver, Microsoft FrontPage เป็นต้น ซึ่งโปรแกรมเหล่านี้เป็นโปรแกรมประเภท What You See Is What You Get (WYSIWYG) คือ จัดวางอย่างไรจะปรากฏรูปแบบอย่างนั้น โปรแกรมจะทากรสร้างโค้ด HTML ให้อัตโนมัติ