webpage by html

24
การสร้างเว็บเพจด้วยภาษา 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>

Upload: tay-chaloeykrai

Post on 12-Nov-2014

342 views

Category:

Documents


1 download

DESCRIPTION

เป็นใบความรู้ในการสร้างเว็บเพจให้สวยด้วยภาษา HTML

TRANSCRIPT

Page 1: Webpage by html

การสรางเวบเพจดวยภาษา 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: Webpage by html

การก าหนดโครงสรางหลก

การจดวางทเหนเปนการจดวางแบบมาตรฐาน ซงประกอบไปดวย 4 สวน ซงเวลาเรมเขยนภาษาHTML ควรเรมจากตรงนกอนทกครง

ค าสงหลก <HTML> .... </HTML> เปนค าสงทไวก าหนดจดเรมตนและจดจบของเอกสาร

ค าสงหลก <HEAD> .... </HEAD> เปนค าสงทท าหนาทก าหนดสวนหวเรอง โดยภายในค าสงนจะประกอบไปดวย

o ค าสงหลก <TITLE> .... </TITLE> เปนค าสงทใชก าหนดขอความทตองการใหขนอยในสวนของ Title Bar

โดยสามารถพมพไดยาว 64 ตวอกษร

ค าสงหลก <BODY> .... </BODY> เปนค าสงทใชในการก าหนดรปแบบของเอกสารทงหมด วาจะใหมลกษณะอยางไร

ตวอยาง

Page 3: Webpage by html

การจดรปแบบเอกสาร

การก าหนดหวขอ (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: Webpage by html

การก าหนดจดสนสดบรรทด (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: Webpage by html

<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: Webpage by html

<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: Webpage by html

<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: Webpage by html

<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: Webpage by html

การก าหนดขอความแบบตวเอยง (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: Webpage by html

<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: Webpage by html

การแสดงรายการแบบไมมเลขล าดบ (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: Webpage by html

แสดงแถวรายการ

รปแบบ

<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: Webpage by html

รปแบบ

<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: Webpage by html

<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: Webpage by html

สวนหวขออยทางซาย แลวค าอธบายอยทางขวากใหใช 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: Webpage by html

ใชในการสรางตารางขอมล โดยจะมค าสงทใชรวมกนคอ ค าสง <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: Webpage by html

</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: Webpage by html

</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: Webpage by html

<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: Webpage by html

ใชสรางเซลลขอมลเพอใชในการแสดงขอมลรายละเอยดตางๆของเอกสาร

รปแบบ

<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: Webpage by html

<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: Webpage by html

<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: Webpage by html

ตวอยาง <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: Webpage by html

<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/