การจัดลําดับหวั ขอ และเนื้อหาโดยใช
<OL>
<P>การจัดหัวขอ โดยใช OL <OL>
<OL>
<LI>ขอความท่ี 1 </LI>
<LI>ขอ ความท่ี 2</LI>
<LI>ขอความที่ 3</LI>
</OL>
<P>การจัดหัวขอโดยใช OL TYPE="A“
<OL TYPE="A">
<LI>ขอความท่ี 1 </LI>
<LI>ขอ ความที่ 2</LI>
<LI>ขอ ความท่ี 3</LI>
</OL>
<BR>
การจดั หวั ขอ โดยใช OL TYPE="I" <OL TYPE="I"><BR>
<OL TYPE="I">
<LI>INPUT UNIT หรือหนว ยรบั ขอมูล ไดแ ก Keyboard, Mouse,
Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรอื หนว ยประมวลผล
กลาง </LI>
<LI>OUTPUT UNIT หรอื หนวยแสดงผล ไดแก Monitor, Printer,
Plotter</LI>
</OL>
อธิบายคําส่งั
<OL> เริม่ ตน ลาํ ดบั ขอมูล
TYPE="A" กําหนดเครอ่ื งหมายเพื่อใชใ นการ
ลาํ ดับขอ มูล ไดแ ก A, a, I, i
ถาไมก าํ หนดจะเริ่มตนดว ย 1 เสมอ
<LI> เรม่ิ ตนขอ มลู ใน List
</LI> สิ้นสุดขอ มลู ใน List
</OL> สิน้ สดุ การลําดบั ขอ มลู
การจัดลําดบั หัวขอ และเน้ือหาโดยใช
<DL>
<BODY>
องคประกอบท่ีสาํ คัญของคอมพิวเตอร มดี ังตอ ไปน<ี้ BR>
<DL>
<DT>INPUT UNIT</DT>
<DD>หนว ยรับขอมูล ไดแก Keyboard, Mouse, Scanner</DD>
<DT>CENTRAL PROCESSING UNIT<DT>
<DD>CPU หรอื หนว ยประมวลผลกลาง </DD>
<DT>OUTPUT UNIT</DT>
<DD>หนวยแสดงผล ไดแ ก Monitor, Printer, Plotter</DD>
</DL>
</BODY>
การใสร ปู ภาพประกอบในเว็บเพจ
<BODY>
<CENTER>
นค่ี อื ภาพดาราคนโปรดของฉัน<BR><BR>
<IMG SRC="full.jpg" BORDER=0 WIDTH=250
HEIGHT=250 ALT="Super Star">
<BR><BR>
ลองทายดูซวิ าเธอคอื ใคร
</CENTER>
</BODY>
<IMG SRC="ชื่อไฟลร ูปภาพ" > เปนการบอกใหรวู าน่ีคอื แท็ก
รูปภาพ ช่ือของรูปภาพที่จะนาํ มาประกอบเวบ็ เพจ (ตองระบ)ุ
BORDER=0 กาํ หนดใหม ีหรือไมมีเสน
ขอบรอบรูปภาพ 0=ไมม ีเสน ขอบ (คาปกต)ิ
WIDTH=120 กําหนดขนาดความกวางของรูปภาพ (Pixel)
(ไมตอ งกาํ หนดก็ได)
HEIGHT=120 กําหนดขนาดความสงู ของรปู ภาพ (Pixcel)
(ไมต อ งกาํ หนดกไ็ ด)
ALT="คาํ อธิบาย"
คาํ อธิบายนีจ้ ะแสดงในกรณที ่ไี มสามารถแสดงรปู ภาพได
หรอื เม่อื วางเมาสบนรูปภาพ
การจดั ตาํ แหนง ของรปู ภาพรว มกบั ขอความ
<BODY>
<CENTER>
<IMG SRC=" dog.gif" BORDER=0 ALIGN=LEFT
width=“300“ height=“400">
<FONT COLOR="Blue">
การ Chat คือแหลงรวมชุมชนคนออนไลน ท่ีกลมุ วยั รุน
สมยั นม้ี กั จะนยิ มกนั มาก...แตจะตองเปน ผทู ชี่ า งคดิ ชาง
เจรจา และท่ีสาํ คญั จะตองพมิ พด ีดคลองดว ย<BR>
</FONT>
</CENTER>
</BODY>
อธบิ ายคาํ ส่งั
ALIGN=LEFT กาํ หนดใหรูปภาพอยูท างดานซายของ
ขอความ (Default)
ALIGN=RIGHT กําหนดใหรปู ภาพอยทู างดานขวาของ
ขอความ
ALIGN=TEXTTOP กําหนดใหข อบบนของรูปภาพในอยู
ระดบั เดียวกนั กบั ขอบบนของขอความ (ไมค อยไดใ ช)
ALIGN=BOTTOM กาํ หนดใหข อบลางของรูปภาพในอยู
ระดับเดยี วกนั กับขอบบนของขอ ความ (ไมค อยไดใช)
การกําหนดระยะหา งของรูปภาพ
<BODY>
<CENTER>
<IMG SRC="BlueMoon.jpg" BORDER=0
ALIGN=LEFT HSPACE=10>
<FONT COLOR="Blue"> ภาพพระจันทรสนี าํ้ เงิน
สวยมากๆ <BR>
</FONT>
</CENTER>
</BODY>
อธิบายคาํ สั่ง
<--- สังเกตุระยะหา งของรปู ภาพกบั ขอ ความ (10 Pixel)
HSPACE=10 กําหนดระยะหา ง (ทางแนวนอน)
ของรปู ภาพ คาท่กี าํ หนดมีหนว ยเปน Pixel
VSPACE=10 กําหนดระยะหาง (ทางแนวตั้ง)
ของรปู ภาพ คาท่ีกาํ หนดมีหนว ยเปน Pixel
การทําภาพฉากหลังในหนาเว็บเพจ
<BODY BACKGROUND="bg.jpg">
อธิบายคาํ ส่งั
BACKGROUND="ช่ือรูปภาพ" เปน การกําหนดให
นาํ รปู ภาพมาเปน ฉากหลงั ในหนาเวบ็ เพจ
การสรา งตาราง (TABLE)
<table border = 5>
<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>
<table border= 1 width=100%>
<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>
คาํ อธบิ าย
รปู แบบ<table> .... </table>
<table bgcolor="color"> .... </table> กาํ หนดสพี นื้ ในตาราง
<table border="pixels"> .... </table> กาํ หนดขนาดขอบตาราง
<table width="pixels/%"> .... </table> กําหนดความกวาง
การสรางตารางขอมลู โดยจะมีคาํ สัง่ ท่ีใชร ว มกันคอื คาํ สัง่
<TR> ในการสรา งแถวเซลลขอ มลู , คําสง่ั <TD> ในการสรา ง
เซลลขอมูล, คําสง่ั <TH> ในการสรางหวั ตาราง
<body>
<table border= 1 width=100% borderColor=steelblue>
<tr width="30%" bgColor=skyblue>
<th>หวั ขอ</th> <th>หัวขอ</th> <th>หัวขอ</th>
</tr>
<tr>
<TD width="30%">ขอมูล</TD><TD width="30%">
ขอมลู </TD>
<TD width="30%">ขอมลู </TD>
</tr>
<tr>
<td>ขอมลู </td><td>ขอมูล</td><td>ขอมูล</td>
</tr>
</table>
</body>
การกาํ หนดขอ ความกาํ กบั ตาราง
(table CAPTION)
<body>
<table border=1>
<caption align="top">ตารางรายรบั รายจายประจําเดือน</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>
คําอธบิ าย
ใชแ สดงคําอธิบาย หรือ ขอ ความประกอบตารางไว
บนสว นบนหรือสว นลางของตารางขอ มลู รปู แบบ
<caption align=" top | bottom | left | right ">
กําหนดตําแหนงของคําอธบิ ายตาราง
การสรางหัวเรอ่ื งของตาราง
(Table Heading)
และ การสรางเซลลขอมลู
(Table Data)
<br>
<table border=3>
<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>
ตารางขายสินคา
ลาํ ดับ ช่ือสนิ คา จํานวน ราคา
1
2
3
4
<tr><td colspan=3>รวมเปน เงิน
</td><td>10,000</td></tr>
คาํ อธบิ าย
เปนการสรา งเซลล หวั ตาราง ซง่ึ ทาํ หนาท่ีกาํ กบั เซลขอ มลู ในแนวคอลมั นท ่ี
กาํ หนด รปู แบบ<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> กําหนดการรวมชองเซลลในแนวนอน
การใสเ พลงประกอบในเว็บเพจ
<BODY BACKGROUND="blobkgde.gif">
<BGSOUND SRC="beliveme.mp3" LOOP="Infinite">
<CENTER>
<FONT COLOR="Blue"> FORT MINOR : WE
MAJOR
</FONT>
<BR><BR>
<IMG SRC="001.gif">
</CENTER>
</BODY>
BGSOUND เปนแท็กคาํ สง่ั เพือ่ บอกใหเ บราสเซอรรวู า จะตอง
ดาวนโ หลดเพลงมาบรรเลงประกอบหนา เว็บเพจ
SRC="ชอ่ื เพลง" เปนการกําหนดแหลง ท่ีเกบ็ และชอื่ เพลงที่
ตอ งการใหเบราสเ ซอรด าวนโหลดมาบรรเลง
LOOP="infinite" เปน การกําหนดใหเบราสเซอรเลน เพลงไป
เรื่อยๆ ถาไมตอ งการใหลบขอ ความนอี้ อกไป
การสรา งจุดเช่ือมโยง (A)
การเชอ่ื มโยงไปยงั ขอมูลหรือวัตถตุ า งๆ
<body>
<a href="img-src-target-music.html">
Click Here</a><br><br>
<img src="bluemoon.jpg"></a>
</body>
คาํ อธบิ าย
ทาํ หนา ทก่ี ําหนดขอ ความหรือภาพกราฟฟกทอี่ ยู
ภายในใหท ําหนา ทีเ่ ปน จุดเช่ือมโยงไปยังเว็บเพจ
อืน่ หรือขอ มลู ชนิดตา งๆ
รูปแบบ<a href="url"> .... </a>
การทําลงิ้ คเชอ่ื มโยงภายในหนา เวบ็
เพจเดยี วกัน
<BODY BACKGROUND="blobkgde.gif" >
<FONT COLOR="#cc9999">
คุณคดิ วาราศีใดเปนคนหวั บวั ราณทสี่ ดุ (คลิกเพ่อื ดูคําตอบ)<br>
1. <A HREF="#one">ราศมี ังกร</A><br>
2. <A HREF="#two">ราศเี มษ Web</A><br>
3. <A HREF="#three">ราศธี นู</A><p>
<br><IMG SRC="BlueMoon.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
1. <A NAME="one">ตอบถูกดวย<p></A><br>
<IMG SRC="111.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
2. <A NAME="two">ไมใ ชๆๆ<p> </A><br>
<IMG SRC="222.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
3. <A NAME="three">ฮมื ผดิ นะขอน้ีนะ<p></A><br>
<IMG SRC="333.jpg">
</FONT>
</BODY>
อธิบายคําส่ัง
สวนท่ี 1 กาํ หนดขอความลง้ิ ค (ตนทาง)
<A แท็กคําสง่ั เริม่ ตนเพื่อบอกเบราสเซอรใ หรูวา นคี่ อื ล้ิงค
HREF="#ชอ่ื หัวขอ" ชอ่ื หัวขอหรอื ตําแหนง ของขอความที่ตอ งการลงิ้ ค (ตองระบ)ุ
> อยา ลืมปด ทายดว ยเคร่อื งหมาย ">" น้ีทุกครั้ง
ขอความ ขอความที่ใชแ สดงวา นี่คอื ลงิ้ ค
</A> แทก็ ปด ทายขอ ความล้ิงค
สวนท่ี 2 กําหนดชอ่ื หรอื ตําแหนง ของล้งิ ค (ปลายทาง)
<A แทก็ คําสั่งเร่มิ ตนเพื่อบอกเบราสเซอรใ หรูวาน่คี ือลง้ิ ค
NAME="ชอ่ื หวั ขอ " ช่ือหวั ขอหรอื ตาํ แหนงปลายทางของลิ้งค (ตองระบ)ุ
> อยา ลืมปด ทา ยดว ยเคร่ืองหมาย ">" นี้ทกุ ครง้ั
ขอ ความ ขอความทใี่ ชแสดงเปนหวั ขอและตําแหนง ปลายทาง
</A> แท็กปดทายขอ ความล้ิงค
การทาํ ลิ้งคไปยังเวบ็ เพจหนา อนื่ หรือเวบ็ ไซต
อน่ื
<BODY>
กรณุ าเลือกหัวขอท่ีทา นตองการ<BR>
<UL>
<!-- ลง้ิ คไ ปยงั เวบ็ เพจหนาอน่ื ภายในเว็บไซตข องเรา -->
<LI><A HREF="index.html">คยุ กนั กอ นหนาแรก</A></LI>
<LI><A HREF="music.html" >วัตถปุ ระสงคก ารกอต้ังฯ</A></LI>
<!-- ลิง้ คไ ปยงั หนาเวบ็ เพจ ของเวบ็ ไซตอ ื่น -->
<LI><A HREF="http://wsabstract.com/cutpastejava.shtml">Free
JavaScripts!</A></LI>
<LI><A HREF="http://www.scriptsolutions.com/home.html">Script
Solutions</A></LI>
</UL>
</BODY>
อธิบายคาํ สงั่
<A แท็กคาํ สง่ั เร่มิ ตนเพอ่ื บอกเบราสเซอรใหรูว า นค่ี อื ลงิ้ ค
HREF="ชือ่ ไฟล/ทีอ่ ยู URL" ช่ือไฟล/ที่อยเู ว็บไซต
ปลายทางทีต่ องการเช่ือมโยงไปถงึ (ตองระบุ)
> อยา ลมื ปด ทา ยดวยเครื่องหมาย ">" นที้ ุกคร้ัง
ขอ ความ ขอ ความท่ใี ชแ สดงวาน่ีคอื ลง้ิ ค
</A> แท็กปดทายขอ ความลงิ้ ค
การทําลิง้ คโดยใชรูปภาพแทนขอ ความ
<BODY>
<!-- ล้ิงคโ ดยใชรูปภาพที่มีอยใู นเวบ็ ไซตข องเราเอง -->
<A HREF="index.html"><IMG SRC="home.gif"></A>
<A HREF="music.html" ><IMG SRC=“music.gif"></A>
<!-- ลิ้งคโดยใชร ูปภาพจากเวบ็ ไซตอ ่ืนทเี่ ปนเวบ็ ไซต
ปลายทาง -->
<A HREF="http://www.mthai.com">
<IMG SRC="http://www.mthai.com/mthai.gif"></A>
<A HREF="http://www.happy-box.com">
<IMG SRC=http://www.happy-box.com/box.gif"></A>
</BODY>
อธิบายคาํ สั่ง
<A แท็กคําสง่ั เรมิ่ ตนเพ่อื บอกเบราสเซอรใหรวู า นค่ี ือลงิ้ ค
HREF="ชอ่ื ไฟล/ที่อยู URL" ชื่อไฟล/ท่ีอยเู ว็บไซต
ปลายทางท่ีตอ งการเชอ่ื มโยงไปถึง (ตอ งระบุ)
> อยาลมื ปดทา ยดวยเครื่องหมาย ">" นท้ี กุ ครั้ง
รปู ภาพ รูปภาพท่ใี ชแสดงวา นคี่ ือล้ิงค (ดรู ายละเอยี ด
คาํ สั่ง IMG ในบทท่ี 11)
</A> แท็กปด ทา ยขอ ความล้งิ ค
การทาํ ลิงคแ์ บบเปิ ดเป็ น
วินโดวใ์ หม่
<BODY>
กรุณาเลือกหัวขอท่ีทา นตองการ<BR>
<UL>
<!-- ลิ้งคภายในเวบ็ ไซตเดียวกนั แตเ ปดเปน หนาตา งใหม --><LI><A
HREF= "music.html" TARGET="_blank">ฟง เพลง IRC</A></LI>
<LI><A HREF="picture.html" TARGET="_blank">ภาพสวยๆ</A></LI>
<!-- ลง้ิ คไ ปเว็บไซตอน่ื โดยเปดเปน หนา ตา งใหม -->
<LI><A HREF="http://www.hunsa.com" TARGET="_blank">
Hunsa.Com</A></LI>
<LI><A HREF="http://www.mthai.com" TARGET="_blank">
Mthai.Com</A></LI>
</UL>
</BODY>
การทาํ ล้ิงคเพ่อื ใชสงอีเมล
(Mailto:)
<BODY>
แบบท่ี 1 ลง้ิ คข อ ความธรรมดา<p>
<A HREF="Mailto:[email protected]">สง
อเี มลถ งึ อ.วิรยา สขี าว</A>
แบบที่ 2 ใชร ปู ภาพเปนลงิ้ ค เพื่อเพิม่ ความ
นาสนใจ<p>
<A HREF=" [email protected]"><IMG
SRC="mail2.gif" BORDER="0"></A>
</BODY>
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
e-book หน่วยที่ 2 การเขียนภาษา html
Discover the best professional documents and content resources in AnyFlip Document Base.
Search