HTML2 2

การกำาหนดตำาแหน่งข้อความข้อความและรูปภาพ
โดยใช้แอตทริบิวต์ ALIGN
<IMG SRC=IMAGE URC ALIGN=ตำาแหน่งที่ต้องการวางข้อความ>
คำาสั่งในการกำาหนดตำาแหน่งข้อความและรูปภาพ จะเป็นคำาสั่งที่กำาหนดตำาแหน่ง
ข้อความและรูปภาพ ให้วางอยู่ในตำาแหน่งใดของการแสดงผลในโปรแกรม
เว็บบราวเซอร์ โดยปกติแล้วการแสดงผลในข้อความร่วมกับไฟล์รูปภาพ ข้อความ
จะแสดงผลอยู่ที่ส่วนล่างของรูปภาพทางขวามือเสมอ ซึ่งเป็นการแสดงผลแบบ
มาตรฐานอยู่แล้วแต่ถ้าเราต้องการกำาหนดตำาแหน่งข้อความและรูปภาพเราสามารถ
กำาหนดได้ โดยฝช้คำาสั่ง ALIGN ซึ่งสามารถกำาหนดตำาแหน่งการแสดงผลได้ 2 แบบ
คือ ทางแนวตั้ง ทางแนวนอน
รูปแบบการแสดงตำาแหน่ง
การแสดงผล คำาสัง่ ที่ใช้กำาหนดตำาแหน่ง ตำาแหน่งที่แสดงผลของข้อควา
ข้อความและรูปภาพ มและรูปภาพ
แบบแนวตัง้ เป็
ALIGN=LEFT
นคำาสั่งที่ใช้กับ ALIGN=RIGHT ตำาแหน่งซ้ายของจอภาพ
รูปภาพ ตำาแหน่งขวาของจอภาพ
แบบแนวนอนเ
ป็นคำาสั่งทีใช้กั ALIGN=TOP,TEXTOP
ตำาแหน่งบนสุดของรูปภาพ
ALIGN=MIDDLE,ABSMIDDLE
บข้อความ ALIGN=BOTTOM,BASELINE ตำาแหน่งกึ่งกลางของรูปภาพ
ตำาแหน่งล่างสุดของรูปภาพ
<body bgcolor=black text=yellow>
<center>
<h1><img src =barrel.gif>IMAGE PICTURE
<img src =barrel.gif></h1>
</center>
<hr width=75%>
<p><img src=002.jpg ALT=Y2K ALIGN=bottom><font size=4>
ทะเลนั้นเป็นชีวิตของเรา</font></p><p><font size=4>
<font color=AF40D5>
<u>ความหนาวเย็นเป็นสิ่งที่น่ากลัวที่สดุ ของคนไทย</u></font>
<img src=004.jpg ALT=Y2K ALIGN="left">ความหนาวเย็นนั้นจะทำาให้ชีวิต
ของคนไทยนั้นต้องลำาบากเพราะประเทศของเรานั้นเป็นเมืองร้อนจึงทำาให้ความ
หนาวเย็นจึงเป็นปัญหาของคนไทย</font></p>
</body>
การกำาหนดขนาดของรูปภาพ โดยแอตทริบิวต์ WIDTH และ HEIGHT
<IMG SRC=“Image URL” WIDTH=“number”

HEIGHT=“number”>
คำาสั่งกำาหนดขนาดของรูปภาพด้วยแอตทริบิวต์ WIDTH และ HEIGHT

เป็นคำาสั่งที่ทำาให้รูปภาพที่เราต้องการ ในการแสดงผลคำาสั่ง WIDTH
จะเป็นคำาสั่งที่แสดงความกว้างของขนาดรูปภาพ และคำาสั่งต่อมา คือ
คำาสั่ง HEIGHT จะเป็นคำาสั่งที่แสดงความสูงของรูปภาพ โดยจะแทนด้วย
ตัวเลขทีม่ ีหน่วยเป็นจุดพิเซล (Pixels)
<BODY BGCOLOR=FFFFFF TEXT=000000>
<H1><B><I>IMAGE SIZE</I></B></H1>
<HR WIDTH= 80%>
<H3><IMG SRC=castor1.gif ALT=Y2K>Image normal Size</H3>
<P> <H3><img src=castor1.gif ALT=Y2K width=70 height=60>
Image width=70 height=60</H3>
<P> <H3><img src=castor1.gif ALT=Y2K width=100 height=80>
Image width=100 helght=80</H3>
</BODY>
การปรับขนาดของรูปภาพให้มีสัดส่วนสมดุล โดยใช้แอตทริบิวต์ WIDTH
<IMG SRC = “Image URL” WIDTH= x% >

คำาสั่งในการปรับขนาดของรูปภาพ ให้มีสัดส่วนสมดุล หรือให้มีอัตราส่วน
ที่ถูกต้อง จะเป็นคำาสั่งที่กำาหนดความกว้างของรูปภาพทีเ่ ราต้องการ โดยจะมี
ผลโดยตรงต่อความสูงในรูปแบบอัตโนมัติ ดังนั้น อาจเรียกได้ว่าเป็นการกำาหนด
เปอร์เซอร์โดยจะมีเทียบกับขนาดรูปภาพเดิมเป็นหลัก ในคำาสั่ง
WIDTH = X% ตัวกำาหนด X จะเป็นค่าตัวเลขที่จะต้องตามหลังด้วย
เครือ่ งหมาย % (Percent) เสมอ คำาสั่งดังกล่าวถึงจะแสดงผลได้อย่างถูกต้อง คือ
มีอัตราส่วนของรูปภาพถูกต้องสมดุล
<BODY BGCOLOR= FFFFFF TEXT=009900>
<FONT SIZE=6><B> SLENDER IMAGE</B></FONT>
<HR NOSHADE>
<P><IMG SRC= hc_buckt.jpg ALT= Y2K>Normal Image</P>
<P><IMG SRC= hc_buckt.jpg ALT= Y2K WIDTH=30%> Image30%
</P>
<P><IMG SRC= hc_buckt.jpg ALT= Y2K WIDTH=40%>Image 40%
</P>
</BODY>
การกำาหนดเส้นกรอบของรูปภาพ โดยใช้แอตทริบวิ ต์ BORDER
<IMG SEC = “Image URL” BORDER= “number”>
คำาสั่งกำาหนดเส้นกรอบของรูปภาพ โดยแอตทริบิวต์ BORDER เป็นการกำาหนด
ให้รูปภาพที่แสดงผลมีเส้นกรอบโดยเราสามารถกำาหนดขนาดของรูปได้จากค่า
ตัวเลข<BORDER=“number”>ค่าของตัวเลขยิ่งมากกรอบรูปภาพก็ยิ่งหนา
หรือมีขนาดใหญ่ตาามค่าตัวเลขนั้นด้วย ซึ่งปกติในรูปภาพทั่วไปจะไม่มีกรอบ
รูปภาพคือ <BORDER = “0”> หรือ nมีค่าเป็น 0 สำาหรับคำาสั่งกำาหนดเส้นกรอบ
รูปภาพจะมีค่าตัวเลขโดยมีหน่วยเป็นจุดสี(Pixels)
<BODY BGCOLOR=FFF055 TEXT=FF550F>
<CENTER><H1>การกำาหนดเส้นกรอบ</H1></CENTER>
<HR WIDTH=80%>
<P><IMG SRC=castor1.gif ALT=Y2K>รูปที่ยังไม่ได้กำาหนดเส้นกรอบ
<CENTER>
<IMG SRC=castor1.gif ALT=Y2K BORDER=5>กำาหนดเส้นกรอบ=5
</CENTER>
<P ALIGN=RIGHT>
<IMG SRC=castor1.gif ALT=Y2K
BORDER=10>กำาหนดเส้นกรอบ=15</P>
</body>
การกำาหนดภาพฉากหลัง โดยการใช้แอตทริบิวต์ BACKGROUND
<BODY BACKGROUND=“Image URL”>

คำาสั่งกำาหนดภาพฉากหลังโดยใช้แอตทริบิวต์ BACKGROUND จะใช้สำาหรับคำาสั่ง
<BODY>เสมอ แต่มีข้อควรระวังอยู่ที่รปู ภาพหลังที่เราต้องการจะแสดงผล จะต้อง
ไม่ดึงดูดความสนใจมากกว่าข้อมูลที่เราต้องการแสดงผล
<BODY BACKGROUND = cat_holidayBg.jpg TEXT=0000FF>
<CENTER><H1>BACKGROUND</H1></CENTER>
<HR WIDTH=60%>
<IMG SRC=gato5.gif><Font Size=7>CAT</Font>
</BODY>
การเชือ่ มโยงข้อมูล (LINK)
<A HREF= “URL หรือ เป้าหมายที่ต้องการ

เชื่อมโยงข้อมูล”>ข้อความที่เชื่อมโยง</A>
คำาสั่งในการเชื่อมโยงข้อมูล จะประกอบไปด้วยคำาสั่ง 2 คำาสั่ง
1. คำาสั่ง anchor หรือ <A> เป็นคำาสั่งพื้นฐานในการเชื่อมโยงสำาหรับการสร้าง

Hypertextและ Hypermedia link
2. คำาสั่งแอตทริบิวต์ HREF ย่อมาจาก Hypertext Reference
สำาหรับคำาสั่งในการเชื่อมโยงข้อมูล เมื่อแสดงผลในโปรแกรมเว็บบราวเซอร์
ข้อความที่ต้องการให้เชื่อมโยงภายในคำาสั่ง <A HREF> จะถูกขีดเส้นใต้ให้โดย
อัตโนมัติ นอกจากนั้นมีสีที่แตกต่างจากสีตัวอักษรทั่วไปคือ สีนำ้าเงิน หรือ
เป็นสีที่เรากำาหนดไว้ในคำาสั่ง <BODY LINK>ตั้งแต่เริม่ แรก จุดสำาคัญอีกอย่าง
หนึ่ง คือสัญลักษณ์ลูกศรของเมาส์จะเปลีย่ นเป็นรูปมือทันทีที่เรานำาเมาส์ไปชี้ที่
ข้อความบริเวณที่กำาหนดให้เป็นตัวเชื่อมโยง
การเชื่อมโยงเอกสาร
<BODY BACKGROUND =back.jpg TEXT=FF0000
LINK=55ABFF VLINK=00FF00 ALINK=FF55FF>
<CENTER><H1><Font Size=7>LINK</Font></H1>
</CENTER><HR>
<CENTER>
<A HREF=test18.html><Font Size=6 >LINK</Font></A>
<IMG SRC= angel12.gif></CENTER>
</BODY>
<BODY BACKGROUND =espnbg8.jpg TEXT=yellow LINK=red
VLINK =green ALINK=00FFAA>
<CENTER><Font Size=7><B>LINK TO</B></Font></CENTER>
<HR WIDTH 65%>
<IMG SRC=castor1.gif><A HREF="http://www.whitehouse.gov">
<Font Size=6>
เราจะไปเที่ยวกันที่ทำาเนียบขาว</Font></A>
</BODY>
การกำาหนดรูปภาพเป็นจุดเชื่อมโยงข้อมูล
<A HREF = “URL” ><IMSRC=“Image”></A>
สำาหรับคำาสั่งกำาหนดรูปภาพเป็นจุดเชื่อมโยงดังกล่าว จะเป็นการนำาเอาคำาสั่ง
<IMG SRC=“Image”>เข้ามาแทนข้อความที่เป็นตัวกำาหนดการเชื่อมโยง
ซึ่งสามารถใช้แทนกันได้ โดยใช้รูปภาพเป็นจุดเชื่อมโยงข้อมูลในคำาสั่ง
<A HREF>
<BODY BACKGROUND=bg_res1.jpg TEXT=AAooFF>
<CENTER><Font Size=7>PICTURE</Font></CENTER>
<HR>
<A HREF=test19.html><img src=galinha3.gif ></A>
<CENTER>
<H1><B>WELCOME TO HOME PAGE</B></H1>
<H2>This page test for Image Link</H2>
</BODY>
การแสดงผลแบบรายการ ( LIST )
การแสดงข้อมูลแบบรายการ (List) จะมีการแสดงผล 3 แบบ

1. การแสดงข้อมูลรายการแบบมีหมายเลขกำากับ หรือแบบลำาดับตัวเลข
ในการแสดงผล (Number Styles)
2. การแสดงข้อมูลรายการแบบมีสัญลักษณ์ขกำากับ หรือแบบไม่มีลำาดับตัวเลข
ในการแสดงผล (Bulleted Styles)
3. การแสดงข้อมูลรายการแบบไม่มสี ัญลักษณ์ขกำากับ หรือแบบคำาจำากัดความ
( No Bulleted Styles)
การแสดงรายการแบบมีหมายเลขกำากับ (Number/Order List) < OL>
<OL>
<LI>Item number one
<LI>Item number two
<LI>Item number three
</OL>
สำาหรับคำาสั่งแสดงข้อมูลรายการแบบมีหมายเลขกำากับหรือ<OL> จะประกอบ
ไปด้วยคำาสั่ง <LI> เป็นส่วนประกอบสำาคัญที่แสดงข้อมูลรายการต่างๆ ภายใน
<OL>หรือเป็นการแสดงรายการย่อย และ<LI>ที่อยู่ภายในคำาสั่ง<OL>จะมี
จำานวนเท่าใดก็ได้ แต่หลังจากจบรายการแสดงข้อมูลแล้วจะต้องมีคำาสั่ง
</OL>ปิดเสมอ
<BODY BACKGROUND=cat_holidayBg.jpg TEXT= black>
<CENTER><H1><B><I>ORDER
LIST</I></B></H1></CENTER>
<HR WIDTH=80%>
MY COMPUTER
<OL>
<LI> Internet Explorer
<LI> Microsoft
<LI> WinNT
<LI> HTML
</OL>
</BODY>
การแสดงรายการแบบมีสัญลักษณ์กำากับ(Bulleted/Unordered List) <UL>
<UL>
<LI> First Item
<LI>Second Item
<LI>Third Item
<UL>
สำาหรับคำาสั่งแสดงข้อมูลรายการแบบมีสัญลักษณ์กำากับ หรือ <UL> จะมีคำาสั่ง
<LI>เป็นคำาสั่งทีแ่ สดงรายการย่อยเหมือนกับคำาสั่ง <OL> โดยจะแตกต่างกัน
ตรงที่ว่า การแสดงรายการย่อยจะไม่มีตัวเลขหรือตัวอักษรกำากับ แต่จะมี
สัญลักษณ์หรือเครื่องหมายเข้ามาแทนที่ โดยปกติลักษณะของสัญลักษณ์จะ
แสดงผลเป็นจุดกลมใหญ่ทึบสีดำาหน้าข้อมูลรายการย่อย
ตัวอย่างโปรแกรม
<BODY BGCOLOR =black TEXT=yellow>

<CENTER><H1>Unordered List</H1></CENTER><HR>
<Font Size=7 color = red> มหาวิทยาลัยธรรมศาสตร์ </Font>
<UL>
<LI>คณะวิศวกรรมศาสตร์
<LI>คณะแพทย์ศาสตร์
<LI>คณะวิทยาศาสตร์
<UL>
<img src=homer1.gif>
</body>
ในคำาสั่ง <UL>เราสามารถใช้แอตทริบิวต์ TYPE=N เพื่อกำาหนดลักษณะ
หรือรูปแบบของสัญลักษณ์ในคำาสั่งได้โดยเราสามารถกำาหนด N ให้แสดง
ผลลักษณะสัญลักษณ์ต่างๆดังนี้
ตารางแสดงลักษณะการแสดงผล
N เท่ากับ ลักษณะการแสดงสัญลักษณ์
DISC จุดกลมใหญ่ทึบเหมือนสัญลักษณ์
มาตราฐาน
CIRCLE จุดกลมใหญ่
SQUARE สี่เหลีย่ มทึบ
<BODY BACKGROUND =cat_holidayBg.jpg
TEXT=FF0000>
<Font Size=7>มหาวิทยาลัยธรรมศาสตร์</Font>
<HR WIDTH=85%>
<UL TYPE=DISC>
<LI>ฝ่ายทะเบียน <UL type=square>
<LI>ฝ่ายการศึกษาต่อเนื่อง <LI>ฝ่ายทะเบียน
</UL> <LI>ฝ่ายการศึกษาต่อเนื่อง
<UL type=circle> </UL>
<LI>ฝ่ายทะเบียน </BODY>
<LI>ฝ่ายการศึกษาต่อเนื่อง
</UL>
การสร้างตาราง
<TABLE>
<TR><TD>แถวที่ 1 ข้อมูล 1</TD><TD>แถวที่ 1 ข้อมูล 2</TD><TD>แถวที่ 1 ข้อมูล 3</TD></TR>
</TABLE>
สำาหรับโครงสร้างของตารางจะประกอบไปด้วยคำาสั่งเปิด คือ <TABLE>

และคำาสั่งปิด</TABLE> นอกจากนั้น ยังประอบไปด้วยคำาสั่งย่อยอีก
คำาสั่ง<TR>(Table Row)เป็นคำาสั่งทีก่ ำาหนดในตารางประกอบด้วย
<TD>มีคำาสั่งปิด คือ</TR>
คำาสั่ง<TD>(Table Data) เป็นคำาสั่งทีแ่ สดงข้อมูลในตาราง จะมีคำาสั่ง
</TD>เป็นคำาสั่งปิดและเป็นคำาสั่งย่อยของ</TR>
สรุป
<TR> จะเป็นตัวบ่งบอกถึงจำานวนแถวหรือจำานวนบรรทัดของตาราง
ข้อมูลต่างๆ
<TD>จะเป็นตัวบ่งบอกถึงคอลัมน์ของตาราง
<TABLE>
<TR><TD>กีฬา</TD><TD>สีที่ชอบ</TD><TD>อายุ</TD></TR>
<TR><TD>ว่ายนำา</TD><TD>ดูหนัง</TD><TD>25</TD></TR>
<TR><TD>เทนนิส</TD><TD>ฟังเพลง</TD><TD>20</TD></TR>
<TR><TD>ฟุตบอล</TD><TD>นอนหลับ</TD><TD>35</TD></TR>
</TABLE>
การเพิม่ เส้นตาราง โดยการใช้แอตทริบวิ ต์ <BORDER>
<TABLE BORDER>
</TABLE>
สำาหรับคำาสั่งเพิ่มเส้นตารางโดยการใช้แอตทริบิวต์ BORDER จะเป็น

คำาสั่งที่กำาหนดให้โปรแกรมเว็บบราวเซอร์แสดงผลเส้นกรอบตาราง
เพื่อเพิ่มจุดสนใจให้กับข้อมูล และแบ่งแยกข้อมูลในแต่ละแถว
แต่ละคอลัมน์ให้ชัดเจนยิ่งขึ้นทำาให้ตารางที่เราต้องการจะแสดงผลมี
รูปแบบทีส่ มบูรณ์ขึ้น ส่วนสีของเส้นกรอบตารางนั้นจะเป็นสีเทา
ถ้าต้องการให้เส้นกรอบให้มีความหนาขึ้นเราจะทำาการใส่ตัวเลขต่อจาก
BORDER
เช่น <TABLE BORDER=8>
หมายความว่า เส้นกรอบจะมีขนาดเพิ่มขึ้นจากเดิม 8 เท่า
<TABLE BORDER>
<CAPTION>ยอดขายรถที่มียอดจำาหน่าย (%)</CAPTION>
<TR><TD>ปี พ.ศ.</TD><TD>รถยนต์</TD><TD>มอเตอร์ไซด์</TD></TR>
<TR><TD>2540</TD><TD>41%</TD><TD>25%</TD></TR>
</TABLE>
<BODY BGCOLOR=000000 TEXT=AA9900> ตัวอย่างโปรแกรม
<CENTER><H1>การขยายเส้นกรอบ</H1></CENTER>
<HR WIDTH=85%>
<TABLE BORDER=8>
<TR><TD>ปี พ.ศ.</TD><TD>รถยนต์</TD><TD>มอเตอร์ไซด์</TD></TR>
</TABLE>
</BODY>
การปรับขนาดความกว้างของตาราง
เราสามารถปรับขนาดความกว้างและความสูงของตารางได้โดยใช้ Properties
Width = Number ในการกำาหนดความกว้าง และ
Height = Number ในการกำาหนดความสูง ให้กับ Cell ที่ต้องการ
<TABLE BORDER=3>
<TR><TD>ปี พ.ศ.</TD><TD>รถยนต์</TD></TR>
<TR><TD>2540</TD><TD>41%</TD></TR>
</TABLE>
<P>
<TABLE BORDER=3>
<TR><TD width = 50% >ปี พ.ศ.</TD><TD WIDTH =25%>รถยนต์</TD></TR>
<TR><TD height = 150 >2540</TD><TD HEIGHT = 150>41%</TD></TR>
</TABLE>
การนำาภาพมาใส่ในตาราง
<TABLE BORDER>
<TR><TD>ปี พ.ศ.</td><td>รถยนต์</td><td>มอเตอร์ไซด์</TD></TR>
<TR><TD><img src="castor1.gif"></TD><
TD><img src="castor1.gif"></TD>
<TD><img src="castor1.gif"></TD></TR>
</TABLE>
การผนวกแถว , หลัก
* ROWSPAN การผนวกแถว (ROW)
*COLSPAN การผนวกหลัก (COLUMN)

การผนวกหลัก หรือ การ Span หลัก
<table border>
<caption>ยอดขายรถที่มียอดจำาหน่าย (%)</caption>
<tr><td>ปี พ.ศ.</td><td>รถยนต์</td><td>มอเตอร์ไซด์</td></tr>
<tr><td>2540</td><td>41%</td><td>25%</td></tr>
<tr><td>2541</td><td>35%</td><td>45%</td></tr>
</table>
<TABLE BORDER>
ยอดขายรถที่มยี อดจำาหน่าย (%)
<TR><TD>ปี พ.ศ.</TD><TD COLSPAN =
2>ยอดขายรถที่มยี อดจำาหน่าย (%)</TD></TR>
<TR> <TD></TD><TD>รถยนต์</TD><TD>มอเตอร์ไซด์</
TD></TR>
</TABLE>
การผนวกแถว หรือ การ Span แถว
<TABLE BORDER>
<TR><TD ROWSPAN = 2>ปี พ.ศ.</TD><TD COLSPAN = 2>
ยอดขายรถทีม่ ียอดจำาหน่าย (%)</TD></TR>
</TD><TD>รถยนต์</TD><TD>มอเตอร์ไซด์</TD></TR>
</TABLE>
การตกแต่งตาราง
<TABLE BORDER=4 BGCOLOR = BULE BORDERCOLOR = YELLOW>
<TR><TD ROWSPAN = 2>ปี พ.ศ.</TD>
<TD COLSPAN = 2>ยอดขายรถที่มียอดจำาหน่าย (%)</TD></TR>
<TR><TD BGCOLOR = PINK>รถยนต์</TD>
<TD BGCOLOR = 000000>มอเตอร์ไซด์</TD></TR>
</TABLE>
MAILTO
เราสามารถใช้ คำาสั่ง E-Mail เข้าไปใน Link ได้ดว้ ย URL ชื่อ mailto
เช่น
<A HREF = “mailto:webmaster@y2k.com”> Mail to Me </A>

HTML2 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML2 2

Uploaded by

Copyright:

Available Formats

การกำาหนดตำาแหน่งข้อความข้อความและรูปภาพ

<IMG SRC=IMAGE URC ALIGN=ตำาแหน่งที่ต้องการวางข้อความ>

<IMG SRC=“Image URL” WIDTH=“number”

คำาสั่งกำาหนดขนาดของรูปภาพด้วยแอตทริบิวต์ WIDTH และ HEIGHT

<IMG SRC = “Image URL” WIDTH= x% >

<BODY BACKGROUND=“Image URL”>

<A HREF= “URL หรือ เป้าหมายที่ต้องการ

1. คำาสั่ง anchor หรือ <A> เป็นคำาสั่งพื้นฐานในการเชื่อมโยงสำาหรับการสร้าง

<A HREF = “URL” ><IMSRC=“Image”></A>

การแสดงข้อมูลแบบรายการ (List) จะมีการแสดงผล 3 แบบ

<BODY BGCOLOR =black TEXT=yellow>

สำาหรับโครงสร้างของตารางจะประกอบไปด้วยคำาสั่งเปิด คือ <TABLE>

สำาหรับคำาสั่งเพิ่มเส้นตารางโดยการใช้แอตทริบิวต์ BORDER จะเป็น

* ROWSPAN การผนวกแถว (ROW)

*COLSPAN การผนวกหลัก (COLUMN)

<A HREF = “mailto:webmaster@y2k.com”> Mail to Me </A>

You might also like