Page 1
การสรางเวบเพจดวยภาษา HTML HTML ยอมาจากค าวา "HyperText Markup Language" เปนภาษาทใชในการเขยนโปรแกรมภาษาหนงของคอมพวเตอร ทแสดงผลในลกษณะของเวบเพจ ซงสามารถแสดงผลไดในรปแบบตางๆ ไมวาเปนภาพกราฟก ภาพนง ภาพเคลอนไหว เสยง หรอการเชอมโยงไปยงเวบไซตอนๆ ภาษา HTML เปนภาษาทมลกษณะของโคด กลาวคอ จะเปนไฟลทเกบขอมลทเปนตวอกษรในมาตรฐานของรหสแอสก (ASCII Code) โดยเขยนอยในรปแบบของเอกสารขอความ จงสามารถก าหนดรปแบบและโครงสรางไดงาย
การสรางเวบเพจ เราสามารถสรางเวบเพจได 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. แทกเดยว คอ ค าสงทมค าส งเพยงอยางเดยว ซงสามารถใชและสนสดค าสงไดดวยตวของมนเอง เชน ขอความ.... <br> <hr> <! - ขอความ - >
2. แทกค คอ ค าสงทตองมสวนเรมตนและสวนจดจบของค าสงนนๆ โดยแทกทเปนสวนจบนนจะมเครองหมาย slash / ตดเอาไว เชน <html> สวนของเนอหา ..... </html> <center> ขอความ..... </center> <p> ขอความ.... </p>
*** ถาหากมการใชแทกคหลายๆ ค าสง เชน ค าสงตวขดเสนใต <U> .... </U> และตามดวย ค าสง ตวเอยง <I>....</I> จะตองปดค าสงตวเอยงกอน แลวจงจะมาปดค าสงตวหนา*** <I> U> ขอความ.... </U> </I>
Page 2
การก าหนดโครงสรางหลก
การจดวางทเหนเปนการจดวางแบบมาตรฐาน ซงประกอบไปดวย 4 สวน ซงเวลาเรมเขยนภาษาHTML ควรเรมจากตรงนกอนทกครง
ค าสงหลก <HTML> .... </HTML> เปนค าสงทไวก าหนดจดเรมตนและจดจบของเอกสาร
ค าสงหลก <HEAD> .... </HEAD> เปนค าสงทท าหนาทก าหนดสวนหวเรอง โดยภายในค าสงนจะประกอบไปดวย
o ค าสงหลก <TITLE> .... </TITLE> เปนค าสงทใชก าหนดขอความทตองการใหขนอยในสวนของ Title Bar
โดยสามารถพมพไดยาว 64 ตวอกษร
ค าสงหลก <BODY> .... </BODY> เปนค าสงทใชในการก าหนดรปแบบของเอกสารทงหมด วาจะใหมลกษณะอยางไร
ตวอยาง
Page 3
การจดรปแบบเอกสาร
การก าหนดหวขอ (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>
Page 4
การก าหนดจดสนสดบรรทด (Break Rule)
ค าอธบาย
ใชในการก าหนดจดสนสดบรรทด และขนบรรทดใหม ค าสงนเหมอนการกด Enter บน keyboard นนเอง
รปแบบ
..... <br>
ตวอยาง
<html>
<head>
<title> Break Rule Tag </title>
</head>
<body>
Test Normal Message
Test Normal Message
Test Break Rule Tag <br>
Test Break Rule Tag <br>
</body>
</html>
การขนยอหนาใหม (Paragraph)
ค าอธบาย
ใชแสดงขอความในลกษณะพารากราฟ หรอยอหนาในเวบเพจ และยงสามารถใชในการขนบรรทดใหมครงละ 2 บรรทด
รปแบบ
<p> ... </p>
Page 5
<p align="left/center/right"> ... </p>
ตวอยาง
<html>
<head>
<title> Paragraph Tag </title>
</head>
<body>
<p> 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>
Page 6
<title> Paragraph Tag </title>
</head>
<body>
Test Normal Message
<center> Test Center Message </center>
</body>
</html>
การแสดงเสนคนทางแนวนอน (Horizontal Rule)
ค าอธบาย
ใชแสดงเสนคนแนวนอน โดยใชในการแบงเนอหาหรอคนเพอความสวยงามและความเปนระเบยบของเนอหา
รปแบบ
<hr>
<hr align="left/center/right"> ก าหนดต าแหนงเสน
<hr width="pixels or %"> ก าหนดความยาวเสน
<hr size="pixels"> ก าหนดขนาดเสน
<hr noshade> ก าหนดลกษณะเสน
ตวอยาง
<html>
<head>
<title> Horizontal Rule Tag </title>
</head>
<body>
<hr>
Page 7
<hr width="100%">
<hr width="50%">
<hr width="200">
<hr size="3">
<hr size="7">
<hr align="right">
<hr align="center" width="75% size="3">
<hr noshade>
</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> <br>
Page 8
<font color="blue"> Font Tag</font> <br>
<font face="JasmineUPC"> Font Tag</font> <br>
<font size="5" color="#0000ff"> Font Tag</font> <br>
<font face="AngsanaUPC" color="green"> Font Tag</font> <br>
<font face="CordiaUPC" size="4" color="yellow"> Font Tag</font> <br>
</body>
</html>
การก าหนดขอความแบบตวหนา (Bold)
ค าอธบาย
ใชก าหนดขอความทอยภายใจค าสงใหแสดงผลดวยตวอกษร ตวหนา โดยมจดประสงคกเพอเนนขอความในประโยคนนๆ
รปแบบ
<b>....</b>
ตวอยาง <html>
<head>
<title>Bold Tag</title>
</head>
<body>
<font size="7">
Normal Text <br>
<b> Bold Text</b>
</font>
</body>
</html>
Page 9
การก าหนดขอความแบบตวเอยง (Italic)
ค าอธบาย
ใชก าหนดขอความใหตวอกษรเอน โดยมจดประสงคเพอเนนขอความนนๆ
รปแบบ
<i> ... </i>
ตวอยาง <html>
<head>
<title>Italic Tag</title>
</head>
<body>
<font size="7">
Normal Text <br>
<i> ItalicText</i>
</font>
</body>
</html>
การก าหนดขอความขดเสนใต (Underline)
ค าอธบาย
ใชแสดงความแบบขดเสนใต เพอเนนขอความในประโยคนนๆ
รปแบบ
<u> ... </u>
ตวอยาง <html>
<head>
Page 10
<title>Underline Tag</title>
</head>
<body>
<font size="7">
Normal Text <br>
<u> Underline Text</u>
</font>
</body>
</html>
การก าหนดขอความตวขดเสนทบ (Strikeout)
ค าอธบาย
ใชแสดงขอความแบบมเสนขดฆา โดยใชเมอตองการยกเลกขอความทไมใชแลว โดยค าสงนสามารถใชแทนค าสง STRIKE ได
รปแบบ
<s> .... </s> or <strike> .... </strike>
ตวอยาง <html>
<head>
<title>Strikeout Tag</title>
</head>
<body>
<font size="7">
Normal Text <br>
<s> Strikeout Text</s>
</font>
</body>
</html>
Page 11
การแสดงรายการแบบไมมเลขล าดบ (Unorder List)
ค าอธบาย
ใชแสดงรายการขอมลแบบแจกแจงเปนขอๆ โดยไมมเลขล าดบ จะมสญลกษณน าหนาขอมลแตละหวขอแทน โดยใชค าสง <LI> ในการสรางหวขอแตละหลายรายการ
รปแบบ
<ul> ขอความสวนหว <li> ขอความยอย <li> ขอความยอย <li> ขอความยอย </ul>
ตวอยาง <html>
<head>
<title>Unnorder List Tag</title>
</head>
<body>
<ul> Unnorder List
<li> First Item
<li> Second Item
<li> Third Item
</ul>
</body>
</html>
การแสดงรายการแบบไดเรคทอร (DIRectory)
ค าอธบาย
ใชแสดงขอมลแบบแจกแจงเปนขอๆ ทมความยาวไมเกน 20 ตวอกษรตอ 1 รายการ และใชกบค าสง <LI> เพอใช
Page 12
แสดงแถวรายการ
รปแบบ
<dir> ขอความสวนหว <li> ขอความยอย <li> ขอความยอย <li> ขอความยอย </dir>
ตวอยาง <html>
<head>
<title>Directory Tag</title>
</head>
<body>
<b>HARDWARE</b>
<dir>
<li>ROM
<li>RAM
<li>CD-ROM
<li>HardDisk
</dir>
</body>
</html>
การแสดงรายการแบบเมนลสต (MENU)
ค าอธบาย
ใชแสดงรายการขอมลแบบแจกแจงเปนขอๆ ทไมซบซอน มลกษณะคลายกบค าสง <UL> แตมซบซอนนอยกวา ใชค าสง <LI> เชนเดยวกบค าสงอนๆ
Page 13
รปแบบ
<menu> ขอความสวนหว <li> ขอความยอย <li> ขอความยอย <li> ขอความยอย </menu>
ตวอยาง <html>
<head>
<title>Menu Tag</title>
</head>
<body>
<u>Software</u>
<menu>
<li>Word
<li>Excel
<li>PowerPoint
<li>Access
</menu>
</body>
</html>
การแสดงรายการแบบใชตวเลข (Order List)
ค าอธบาย
การแสดงรายการแบบแจกแจงเปนขอๆ โดยใชหมายเลขก ากบในการเรยงล าดบ โดยสรางรายการจากค าสง <LI> และยงสามารถก าหนดรปแบบของหมายเลขก ากบไดดวยใหเปนเลขอารบก, เลขโรมน หรอตวอกษร
รปแบบ
Page 14
<ol type="1 / a / A / i / I" start="number"> ขอความสวนหว <li> ขอความยอย <li> ขอความยอย <li> ขอความยอย </ol>
ตวอยาง <html>
<head>
<title>Order List Tag</title>
</head>
<body>
<h1>Order List</h1>
<ol>
<li>Item One<li>Item Two<li>Item Three
</ol>
<ol type="A" start="5">
<li>Item Four<li>Item Five
<ol type="i">
<li>Item Six<li>Item Seven
</ol></ol>
</body>
</html>
การแสดงรายการโดยก าหนดหวขอ (Definition List)
ค าอธบาย
ใชแสดงรายการแบบใหค านยาม โดยแบงองคประกอบเปน 2 สวน สวนทอยบนคอหวขอ (Definition Term) โดยใชค าสง <DT> สวนทอยลางคอ ค าอธบาย (Definition Description) ใชค าสง <DD> โดยหากจะให
Page 15
สวนหวขออยทางซาย แลวค าอธบายอยทางขวากใหใช attribute COMPACT ในกรณทรายการเปนขอความสนๆ
รปแบบ
<dl> ขอความสวนหว <dt> หวขอ <dd> ค าอธบาย <dt> หวขอ <dd> ค าอธบาย <dt> หวขอ <dd> ค าอธบาย </ol>
ตวอยาง <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>
<p>
<dl compact>
<dt>org<dd>องคกรไมแสวงผลก าไร (Non-Commercial Organization)
<dt>gov<dd>องคการของรฐ (Government Organization)
<dt>mil<dd>องคกรทางทหราร (Millitary Organization)
</dl>
</body>
</html>
การสรางตาราง (TABLE)
ค าอธบาย
Page 16
ใชในการสรางตารางขอมล โดยจะมค าสงทใชรวมกนคอ ค าสง <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>
Page 17
</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>
Page 18
</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>
Page 19
<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)
ค าอธบาย
Page 20
ใชสรางเซลลขอมลเพอใชในการแสดงขอมลรายละเอยดตางๆของเอกสาร
รปแบบ
<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>
Page 21
<td>750</td>
</tr>
</table>
</body>
</html> การใสรปภาพลงไปในเอกสาร (IMaGe)
ค าอธบาย
ใชในการแสดงรปภาพกราฟฟก โดยจะตองเปนไฟลกราฟฟกทเวบบราวเซอรรจก เชน GIF,JPEG,XPM,XBM เปนตน
รปแบบ
<img src="url">
ตวอยาง <html>
<head>
<title> Image Tags</title>
</head>
<body>
<img src="love.jpg">
</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>
Page 22
<title> Image Tags</title>
</head>
<body>
<img src="love.jpg" width="100" height="80">
<p><p>
<img src="love.jpg" align="top" hspace="2">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)
ค าอธบาย
ท าหนาทก าหนดขอความหรอภาพกราฟฟกทอยภายในใหท าหนาทเปนจดเชอมโยงไปยงเวบเพจอน หรอขอมลชนดตางๆ
รปแบบ
<a href="url"> .... </a>
Page 23
ตวอยาง <html>
<head>
<title> Image Tags</title>
</head>
<body>
<a href="page06c.html">Click Here</a><br>
<a href="love.jpg"><img src="love.jpg"></a>
</body>
</html>
การก าหนดสใหจดเชอมโยง
ค าอธบาย
เปนการก าหนดสอกษรทจดเชอมโยง โดย link คอสจดเชอมโยงทยงไมไดท าการคลกเปาหมาย vlink คอสจดเชอมโยงทไปยงเปาหมายแลว alink คอสจดเชอมโยงทไปอยขณะนน
นอกจากนยงม
text สตวหนงสอธรรมดา bgcolor คอสพนหลงของเอกสาร
รปแบบ
<body tag="color">
ตวอยาง <html>
<head>
<title> Image Tags</title>
</head>
Page 24
<body bgcolor="black" text="write" link="yellow" vlink="lime" alink="aqua">
<a href="page06c.html">Click Here</a>
<a href="page06d.html">Click Here</a>
</body>
</html>
แหลงอางองขอมล ขอขอบคณ http://www.yupparaj.ac.th/CAI/create_web/