การสร้างเว็บเพจด้วย HTML

การสร้างเว็บเพจ
เราสามารถสร้างเว็บเพจได้ 2 ทาง คือ
1. TextEditor โดยเราต้องรู้คำสั่งของภาษา HTML แล้วพิมพ์โปรแกรมเข้าไปทางTextEditor เช่น Notepad เป็นต้น
2. ตัวช่วยสร้าง โดยใช้โปรแกรมที่มีความสามารถในการสร้างเว็บเพจโดยเราไม่จำเป็นต้องรู้ภาษา HTML เพราะโปรแกรมเหล่านี้จะทำการแปลงให้เราอัตโนมัติ

ขั้นตอนในการสร้างเว็บเพจ
1. เปิดโปรแกรม TextEditor แล้วทำการพิมพ์คำสั่ง HTML แล้วเซฟเป็นไฟล์นามสกุล .htm หรือ .html
2. เปิดโปรแกรม WebBrowser เพื่อใช้ในการดูผลลัพธ์ที่ได้จากการเขียนภาษา HTML จากที่ได้เขียนจาก TextEditor

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

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

ข้อความ.... </p>

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

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

ตัวอย่าง

การกำหนดหัวข้อ (Heading)
คำอธิบาย
ใช้ในการกำหนดขนาดให้กับข้อความที่เป็นหัวข้อเรื่อง ในเอกสารที่มีหัวข้อเป็นปลีกย่อย สามารถแยกเป็นลำดับของหัวเรื่องได้อย่างชัดเจน
รูปแบบ
<hx> ..... </hx>
ตัวอย่าง
<html>
<head>
<title> Education Technology </title>
</head>
<body>
<h1>Test Heading if x=1</h1>
<h2>Test Heading if x=2 </h2>
<h3> Test Heading if x=3 </h3>
<h4> Test heading if x=4 </h4>
<h5> Test heading if x=5 </h5>
<h6> Test heading if x=6 </h6>
</body>
</html>

การกำหนดจุดสิ้นสุดบรรทัด (Break Rule)
คำอธิบาย
ใช้ในการกำหนดจุดสิ้นสุดบรรทัด และขึ้นบรรทัดใหม่ คำสั่งนี้เหมือนการกด Enter บน keyboard นั่นเอง
รูปแบบ
.....

ตัวอย่าง
<html>
<head>
<title> Break Rule Tag </title>
</head>
<body>
Test Normal Message
Test Normal Message
Test Break Rule Tag

Test Break Rule Tag

</body>
</html>

การขึ้นย่อหน้าใหม่ (Paragraph)
คำอธิบาย
ใช้แสดงข้อความในลักษณะพารากราฟ หรือย่อหน้าในเว็บเพจ และยังสามารถใช้ในการขึ้นบรรทัดใหม่ครั้งละ 2 บรรทัด
รูปแบบ

... </p>
<p align="left/center/right"> ... </p>
ตัวอย่าง
<html>
<head>
<title> Paragraph Tag </title>
</head>
<body>

Test Normal Paragraph Tag
<p align="right"> Test Righ Paragraph Tag
<p align="center"> Test Center Paragraph Tag
<p align="left"> Test Left Paragraph Tag
</body>
</html>

แสดงข้อความแบบจัดกึ่งกลาง (Center)
คำอธิบาย
ใช้แสดงข้อความหรือรูปภาพใช้จัดกึ่งกลางเว็บเพจ
รูปแบบ
<center> ... </center>
ตัวอย่าง
<html>
<head>
<title> Paragraph Tag </title>
</head>
<body>
Test Normal Message
<center> Test Center Message </center>
</body>
</html>

การกำหนดรูปแบบตัวอักษร (FONT)
คำอธิบาย
ใช้กำหนดรูปแบบตัวอักษร ในข้อความที่อยู่ภายใน เช่น ฟอนต์ สี และ ขนาดตัวอักษร
รูปแบบ
<font face="text"> ..... </font> กำหนดแบบอักษร
<font size="number"> ..... </font> กำหนดขนาดอักษร
<font color="color"> ..... </font> กำหนดสีอักษร
ตัวอย่าง
<html>
<head>
<title>Font Tag</title>
</head>
<body>
<font size="3"> Font Tag</font>

<font color="blue"> Font Tag</font>

<font face="JasmineUPC"> Font Tag</font>

<font size="5" color="#0000ff"> Font Tag</font>

<font face="AngsanaUPC" color="green"> Font Tag</font>

<font face="CordiaUPC" size="4" color="yellow"> Font Tag</font>

</body>
</html>

การกำหนดข้อความแบบตัวหนา (Bold)
คำอธิบาย
ใช้กำหนดข้อความที่อยู่ภายใจคำสั่งให่แสดงผลด้วยตัวอักษร ตัวหนา โดยมีจุดประสงค์ก็เพื่อเน้นข้อความในประโยคนั้นๆ
รูปแบบ
....
ตัวอย่าง
<html>
<head>
<title>Bold Tag</title>
</head>
<body>
<font size="7">
Normal Text

Bold Text
</font>
</body>
</html>

การกำหนดข้อความแบบตัวเอียง (Italic)
คำอธิบาย
ใช้กำหนดข้อความให้ตัวอักษรเอน โดยมีจุดประสงค์เพื่อเน้นข้อความนั้นๆ
รูปแบบ
...
ตัวอย่าง
<html>
<head>
<title>Italic Tag</title>
</head>
<body>
<font size="7">
Normal Text

ItalicText
</font>
</body>
</html>

การกำหนดข้อความขีดเส้นใต้ (Underline)
คำอธิบาย
ใช้แสดงความแบบขีดเส้นใต้ เพื้อเน้นข้อความในประโยคนั้นๆ
รูปแบบ
...
ตัวอย่าง
<html>
<head>
<title>Underline Tag</title>
</head>
<body>
<font size="7">
Normal Text

Underline Text
</font>
</body>
</html>

การกำหนดข้อความตัวขีดเส้นทับ (Strikeout)
คำอธิบาย
ใช้แสดงข้อความแบบมีเส้นขีดฆ่า โดยใช้เมื่อต้องการยกเลิกข้อความที่ไม่ใช้แล้ว โดยคำสั่งนี้สามารถใช้แทนคำสั่ง STRIKE ได้
รูปแบบ
<s> .... </s> or <strike> .... </strike>
ตัวอย่าง
<html>
<head>
<title>Strikeout Tag</title>
</head>
<body>
<font size="7">
Normal Text

<s> Strikeout Text</s>
</font>
</body>
</html>

การแสดงรายการแบบไม่มีเลขลำดับ (Unorder List)
คำอธิบาย
ใช้แสดงรายการข้อมูลแบบแจกแจงเป็นข้อๆ โดยไม่มีเลขลำดับ จะมีสัญลักษณ์นำหน้าข้อมูลแต่ละหัวข้อแทน โดยใช้คำสั่ง <LI> ในการสร้างหัวข้อแต่ละหลายรายการ
รูปแบบ

ข้อความส่วนหัว
ข้อความย่อย
ข้อความย่อย
ข้อความย่อย

ตัวอย่าง
<html>
<head>
<title>Unnorder List Tag</title>
</head>
<body>

Unnorder List
First Item
Second Item
Third Item

</body>
</html>

การแสดงรายการแบบไดเรคทอรี่ (DIRectory)
คำอธิบาย
ใช้แสดงข้อมูลแบบแจกแจงเป็นข้อๆ ที่มีความยาวไม่เกิน 20 ตัวอักษรต่อ 1 รายการ และใช้กับคำสั่ง <LI> เพื่อใช้แสดงแถวรายการ
รูปแบบ
<dir> ข้อความส่วนหัว[*] ข้อความย่อย[*] ข้อความย่อย[*] ข้อความย่อย
</dir>
ตัวอย่าง
<html>
<head>
<title>Directory Tag</title>
</head>
<body>
HARDWARE
<dir>[*]ROM[*]RAM[*]CD-ROM[*]HardDisk
</dir>
</body>
</html>

การแสดงรายการแบบเมนูลิสต์ (MENU)
คำอธิบาย
ใช้แสดงรายการข้อมูลแบบแจกแจงเป็นข้อๆ ที่ไม่ซับซ้อน มีลักษณะคล้ายกับคำสั่ง
แต่มีซับซ้อนน้อยกว่า ใช้คำสั่ง <LI> เช่นเดียวกับคำสั่งอื่นๆ
รูปแบบ
<menu> ข้อความส่วนหัว
ข้อความย่อย
ข้อความย่อย
ข้อความย่อย
</menu>
ตัวอย่าง
<html>
<head>
<title>Menu Tag</title>
</head>
<body>
Software
<menu>
Word
Excel
PowerPoint
Access
</menu>
</body>
</html>

การแสดงรายการแบบใช้ตัวเลข (Order List)
คำอธิบาย
การแสดงรายการแบบแจกแจงเป็นข้อๆ โดยใช้หมายเลขกำกับในการเรียงลำดับ โดยสร้างรายการจากคำสั่ง <LI> และยังสามารถกำหนดรูปแบบของหมายเลขกำกับได้ด้วยให้เป็นเลขอารบิก, เลขโรมัน หรือตัวอักษร
รูปแบบ

ข้อความส่วนหัว
ข้อความย่อย
ข้อความย่อย
ข้อความย่อย

ตัวอย่าง
<html>
<head>
<title>Order List Tag</title>
</head>
<body>
<h1>Order List</h1>

Item One
Item Two
Item Three

Item Four
Item Five

Item Six
Item Seven

</body>
</html>

การแสดงรายการโดยกำหนดหัวข้อ (Definition List)
คำอธิบาย
ใช้แสดงรายการแบบให้คำนิยาม โดยแบ่งองค์ประกอบเป็น 2 ส่วน ส่วนที่อยู่บนคือหัวข้อ (Definition Term) โดยใช้คำสั่ง <DT> ส่วนที่อยู่ล่างคือ คำอธิบาย (Definition Description) ใช้คำสั่ง <DD> โดยหากจะให้ ส่วนหัวข้ออยู่ทางซ้าย แล้วคำอธิบายอยู่ทางขวาก็ให้ใช้ attribute COMPACT ในกรณีที่รายการเป็นข้อความสั้นๆ
รูปแบบ
<dl> ข้อความส่วนหัว
<dt> หัวข้อ <dd> คำอธิบาย
<dt> หัวข้อ <dd> คำอธิบาย
<dt> หัวข้อ <dd> คำอธิบาย

ตัวอย่าง
<html>
<head>
<title>Definition Tag</title>
</head>
<body>
<h1> Definition List</h1>
<dl>
<dt>com<dd>องค์การเอกชน (Commercial Organization)
<dt>edu<dd>สถาบันการศึกษา (Education Organization)
<dt>net<dd>องค์กรให้บริการเคลือข่าย (Network Organization)
</dl>

<dl compact>
<dt>org<dd>องค์กรไม่แสวงผลกำไร (Non-Commercial Organization)
<dt>gov<dd>องค์การของรัฐ (Government Organization)
<dt>mil<dd>องค์กรทางทหราร (Millitary Organization)
</dl>
</body>
</html>

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

การสร้างตาราง (TABLE)
คำอธิบาย
ใช้ในการสร้างตารางข้อมูล โดยจะมีคำสั่งที่ใช้ร่วมกันคือ คำสั่ง <TR> ในการสร้างแถวเซลล์ข้อมูล, คำสั่ง <TD> ในการสร้างเซลล์ข้อมูล, คำสั่ง <TH> ในการสร้างหัวตาราง
รูปแบบ
<table> .... </table>
<table bgcolor="color"> .... </table> กำหนดสีพื้นในตาราง
<table border="pixels"> .... </table> กำหนดขนาดของขอบตาราง
<table width="pixels/%"> .... </table> กำหนดความกว้างของตาราง
ตัวอย่าง
<html>
<head>
<title> Table Tags </title>
</head>
<body>
<table>
<tr>
<th>หัวข้อ</th>
<th>หัวข้อ</th>
<th>หัวข้อ</th>
</tr>
<tr>
<td>ข้อมูล</td>
<td>ข้อมูล</td>
<td>ข้อมูล</td>
</tr>
<tr>
<td>ข้อมูล</td>
<td>ข้อมูล</td>
<td>ข้อมูล</td>
</tr>
</table>
</body>
</html>

การกำหนดข้อความกำกับตาราง (table CAPTION)
คำอธิบาย
ใช้แสดงคำอธิบาย หรือ ข้อความประกอบตารางไว้บนส่วนบนหรือส่วนล่างของตารางข้อมูล
รูปแบบ
<caption align=" top | bottom | left | right "> กำหนดตำแหน่งของคำอธิบายตาราง
ตัวอย่าง
<html>
<head>
<title> Table Tags </title>
</head>
<body>
<table border>
<caption align="bottom">ตารางรายรับรายจ่ายประจำเดือน</caption>
<tr>
<th>เดือน</th>
<th>มกราคม</th>
<th>กุมภาพันธ์</th>
<th>มีนาคม</th>
</tr>
<tr>
<td>รายรับ</td>
<td>25000</td>
<td>23000</td>
<td>24500</td>
</tr>
<tr>
<td>รายจ่าย</td>
<td>21000</td>
<td>22500</td>
<td>23100</td>
</tr>
</table>
</body>
</html>

การสร้างแถวของตาราง (Table Row)
คำอธิบาย
เป็นการสร้าง แถวเซล์ข้อมูล เพื่อไว้สร้าง เซล์ข้อมูล และ การสร้างหัวเรื่องของตาราง
รูปแบบ
<tr align=" left | center | right "> .... </tr> กำหนดตำแหน่งของข้อความ
<tr bgcolor="color"> .... </tr> กำหนดสีของพื้นหลังในตาราง
ตัวอย่าง
<html>
<head>
<title> Table Tags </title>
</head>
<body>
<table border>
<tr align="center" bgcolor="green">
<th>สินค้า</th>
<th>โทรทัศน์</th>
<th>วิทยุ</th>
<th>ตู้เย็น</th>
</tr>
<tr align="right" bgcolor="orange">
<td>ราคา</td>
<td>7000</td>
<td>1750</td>
<td>9500</td>
</tr>
</table>
</body>
</html>

การสร้างหัวเรื่องของตาราง (Table Heading)
คำอธิบาย
เป็นการสร้างเซลล์ หัวตาราง ซึ่งทำหน้าที่กำกับเซล์ข้อมูลในแนวคอลัมน์ที่กำหนด
รูปแบบ
<th align="left | right | center | justify | char"> .... </th> กำหนดตำแหน่งของข้อความในตารางตามแนวนอน
<th valign="top | middle | bottom | baseline"> .... </th> กำหนดตำแหน่งของข้อความในตารางตามแนวตั้ง
<th bgcolor="color"> .... </th> กำหนดสีพื้นของตาราง
<th height="pixels | %"> .... </th> กำหนดความสูงของตาราง
<th width="pixels | %"> .... </th> กำหนดความกว้างของตาราง
<th rowspan="number"> .... </th> กำหนดการรวมช่องเซลล์ในแนวตั้ง
<th colspan="number"> .... </th> กำหนดการรวมช่องเซลล์ในแนวนอน
การสร้างเซลล์ข้อมูล (Table Data)
คำอธิบาย
ใช้สร้างเซลล์ข้อมูลเพื่อใช้ในการแสดงข้อมูลรายละเอียดต่างๆของเอกสาร
รูปแบบ
<td align="left | right | center | justify | char"> .... </td> กำหนดตำแหน่งของข้อความในตารางตามแนวนอน
<th valign="top | middle | bottom | baseline"> .... </td> กำหนดตำแหน่งของข้อความในตารางตามแนวตั้ง
<td bgcolor="color"> .... </td> กำหนดสีพื้นของตาราง
<td height="pixels | %"> .... </td> กำหนดความสูงของตาราง
<td width="pixels | %"> .... </td> กำหนดความกว้างของตาราง
<td rowspan="number"> .... </td> กำหนดการรวมช่องเซลล์ในแนวตั้ง
<td colspan="number"> .... </td> กำหนดการรวมช่องเซลล์ในแนวนอน
ตัวอย่าง
<html>
<head>
<title> Table Tags </title>
</head>
<body>
<table border>
<tr>
<th colspan="2" bgcolor="#ffffe0">CPU</th>
<th colspan="2">RAM</th>
</tr>
<tr>
<td rowspan="2">Mhz</td>
<td>450</td>
<td>500</td>
<td>550</td>
</tr>
<tr>
<td>600</td>
<td>700</td>
<td>750</td>
</tr>
</table>
</body>
</html>

การใส่รูปภาพ

การใส่รูปภาพลงไปในเอกสาร (IMaGe)
คำอธิบาย
ใช้ในการแสดงรูปภาพกราฟฟิก โดยจะต้องเป็นไฟล์กราฟฟิกที่เว็บบราวเซอร์รู้จัก เช่น GIF,JPEG,XPM,XBM เป็นต้น
รูปแบบ
[img]url[/img]
ตัวอย่าง
<html>
<head>
<title> Image Tags</title>
</head>
<body>
[img]love.jpg[/img]
</body>
</html>

รูปแบบ (ต่อ)
<img align="top | middle | bottom | left | right"> การกำหนดตำแหน่งให้กับรูปภาพ
<img width="pixels"> การกำหนดความกว้างรูปภาพ
<img height="pixels"> การกำหนดความสูงรูปภาพ
<img border="number"> การกำหนดความสูงรูปภาพ
<img hspace="number"> การกำหนดช่องว่างแนวนอนระหว่างรูปภาพกับข้อความ
<img vspace="number"> การกำหนดช่องว่างแนวตั้งระหว่างรูปภาพกับข้อความ
ตัวอย่าง
<html>
<head>
<title> Image Tags</title>
</head>
<body>
[img]love.jpg[/img]

[img]love.jpg[/img]TEST IMAGE TAG
</body>
</html>

การทำพื้นฉากหลัง (body BACKGROUND)
คำอธิบาย
การนำรูปภาพนำมาทำเป็น วอลเปเปอร์
รูปแบบ
<body background="url">
ตัวอย่าง
<html>
<head>
<title> Image Tags</title>
</head>
<body background="love.jpg">
<h1>TEST Wallpaper</h1>
</body>
</html>

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

การสร้างจุดเชื่อมโยง (A)
คำอธิบาย
ทำหน้าที่กำหนดข้อความหรือภาพกราฟฟิกที่อยู่ภายในให้ทำหน้าที่เป็นจุดเชื่อมโยงไปยังเว็บเพจอื่น หรือข้อมูลชนิดต่างๆ
รูปแบบ
....
ตัวอย่าง
<html>
<head>
<title> Image Tags</title>
</head>
<body>
Click Here

[img]love.jpg[/img]
</body>
</html>

การกำหนดสีให้จุดเชื่อมโยง
คำอธิบาย
เป็นการกำหนดสีอักษรที่จุดเชื่อมโยง โดย
• link คือสีจุดเชื่อมโยงที่ยังไม่ได้ทำการคลิ๊กเป้าหมาย
• vlink คือสีจุดเชื่อมโยงที่ไปยังเป้าหมายแล้ว
• alink คือสีจุดเชื่อมโยงที่ไปอยู่ขณะนั้น
นอกจากนี้ยังมี
• text สีตัวหนังสือธรรมดา
• bgcolor คือสีพื้นหลังของเอกสาร
รูปแบบ
<body tag="color">
ตัวอย่าง
<html>
<head>
<title> Image Tags</title>
</head>
<body bgcolor="black" text="write" link="yellow" vlink="lime" alink="aqua">
Click Here
Click Here
</body>
</html>