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

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

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

<html> ส่วนของเนื้อหา ..... </html>
<center> ข้อความ..... </center>
<p> ข้อความ.... </p>

 

*** ถ้าหากมีการใช้แท็กคู่หลายๆ คำสั่ง เช่น คำสั่งตัวขีดเส้นใต้ <U> .... </U> และตามด้วย คำสั่ง ตัวเอียง <I>....</I> จะต้องปิดคำสั่งตัวเอียงก่อน แล้วจึงจะมาปิดคำสั่งตัวหนา***

<I> U> ข้อความ.... </U> </I>

การกำหนดโครงสร้างหลัก

การจัดวางที่เห็นเป็นการจัดวางแบบมาตรฐาน ซึ่งประกอบไปด้วย 4 ส่วน ซึ่งเวลาเริ่มเขียนภาษาHTML ควรเริ่มจากตรงนี้ก่อนทุกครั้ง

 

  • คำสั่งหลัก <HTML> .... </HTML> เป็นคำสั่งที่ไว้กำหนดจุดเริ่มต้นและจุดจบของเอกสาร
  • คำสั่งหลัก <HEAD> .... </HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง โดยภายในคำสั่งนี้จะประกอบไปด้วย
    • คำสั่งหลัก <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 นั่นเอง

รูปแบบ

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

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

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

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

 

 

 

การกำหนดข้อความแบบตัวเอียง (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>

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

 

 

 

การกำหนดหัวข้อเรื่อง

 


การแสดงรายการแบบไม่มีเลขลำดับ (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> เพื่อใช้แสดงแถวรายการ

รูปแบบ

<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> เช่นเดียวกับคำสั่งอื่นๆ

รูปแบบ

<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> และยังสามารถกำหนดรูปแบบของหมายเลขกำกับได้ด้วยให้เป็นเลขอารบิก, เลขโรมัน หรือตัวอักษร

รูปแบบ

<ol 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 start="5">

<li>Item Four<li>Item Five

<ol>

<li>Item Six<li>Item Seven

</ol></ol>

</body>

</html>

 

 

 

 

การแสดงรายการโดยกำหนดหัวข้อ (Definition List)

คำอธิบาย

ใช้แสดงรายการแบบให้คำนิยาม โดยแบ่งองค์ประกอบเป็น 2 ส่วน ส่วนที่อยู่บนคือหัวข้อ (Definition Term) โดยใช้คำสั่ง <DT> ส่วนที่อยู่ล่างคือ คำอธิบาย (Definition Description) ใช้คำสั่ง <DD> โดยหากจะให้ ส่วนหัวข้ออยู่ทางซ้าย แล้วคำอธิบายอยู่ทางขวาก็ให้ใช้ 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)

คำอธิบาย

ใช้ในการสร้างตารางข้อมูล โดยจะมีคำสั่งที่ใช้ร่วมกันคือ คำสั่ง <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 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>

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

ตัวอย่าง

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

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

 

 

 

 

บันทึกนี้เขียนที่ GotoKnow โดย 

 คำสำคัญ: เว็บเพจ html 
 หมายเลขบันทึก: 311324
 เขียน:  
 อ่าน: คลิก 
 สัญญาอนุญาต: ครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน
 แจ้งลบ
 
 แจ้งลบ

ความเห็น

 อนุญาตให้แสดงความเห็นได้เฉพาะสมาชิก
 ไม่อนุญาตให้แสดงความเห็น
{{ kv.current_user.preferred_name }} - เพิ่มความเห็นเพิ่มความเห็น
 ใส่รูปหรือไฟล์
 
บันทึกก่อนนี้
บันทึกใหม่กว่า