Session4 part1
Transcript of Session4 part1
Orjix
www.RongRean.com
หลกสตร สรางเวบดวย HTML: Session ท 4 ตอนท 1
www.rongrean.com Orjix
Contents
รจกกบภาพกราฟฟกชนดตางๆ1
แสดงภาพบนเวบ <img>2
การใสขอความกำากบภาพ3
ปรบขนาดรปภาพ4
การใสกรอบใหรปภาพ5
การจดตำาแหนงรปภาพ6
เพมระยะระหวางรปกบขอความ7
Contents
www.rongrean.com Orjix
การทงระยะระหวางขอความใหพนขอบเขตรป <br>
8
แสดงภาพเปนฉากหลง <body>9
แสดงภาพฉากหลงอยกบท10
รจกกบภาพกราฟกชนดตางๆ
ภาพกราฟกมรปแบบการจดเกบอยหลายชนด โดยแตละ ชนดจะแตกตางกนในเรองของขนาดไฟล และจำานวนสท
แสดงได สำาหรบเวบนนสวนใหญเปนชนด (. ) GIF gif และ (. )JPEG jpg
www.rongrean.com Orjix
ภาพชนด GIF คดคนโดยบรษท Compuserve แสดงรปบนเครองท
แตกตางกนได โดยสามารถแสดงสได 256 ส ภาพรปแบบนจะ ใชการบบ
อดไฟลเพอลดพนทในการเกบ ขอมล จะใชไดผลดกบกราฟกทมส สมาเสมอกน เชนภาพการตน
หรอโลโกทมการใชสไมมากนก ภาพชนด JPEG
พฒนาโดย Joint Photographic Experts Group เปนกราฟกทสามารถทางานกบเครองตางแบบตางรนไดเชน
กน สามารถแสดงสไดสงสด 16.7 ลานส แตอาจทาใหสญเสยรายละเอยดไปบางจากการบบอดขอมลเพอลดขนาดภาพ
ภาพ JPEG เหมาะสาหรบแสดงภาพทมสสนมาก และตองการประหยดเนอทในการ เกบ
ภาพแบบGIF
ภาพแบบjpeg
แสดงภาพบนเวบ <img>
www.rongrean.com Orjix
การแสดงภาพเราจะใชแทก <img/> ในการทำางานดงน<body>
<img src="band.jpg"/><img src="847000.gif"/>
</body>
ภาพแบบ jpeg
ภาพแบบ gif
*สงเกตวาการแสดง เฉดสของภาพรปแบบ
jpeg จะมสสนมากกวาภาพรปแบบ gif
การใสขอความกำากบภาพ
ขอความกำากบภาพ (alternate text) จะปรากฏขนมาเมอ บราวเซอรไมสามารถแสดงภาพขนมาได เพอใหผใชทราบ
วาภาพนนคออะไร
www.rongrean.com Orjix
<body><img alt="band" src="band.jpg"/><img alt="847000" src="847000.gif"/>
</body>
* สาเหตทแสดงภาพไมไดอาจเปนเพราะเกดขอผดพลาดในการเชอมโยงเชน
ภาพเสยหาย ถกลบ หรอวายาย directory ไป ในกรณน หากไมมขอความกากบภาพไว ผใชจะไมมทางรไดเลยวาภาพนน
เปนภาพอะไร
* ประโยชนอกอยางของขอความกากบภาพคอ ในบางบราวเซอรถาเรานาเมาสไปวางไวบนรปภาพกจะแสดงขอความกากบภาพขนมาใหเหนดวย
ปรบขนาดรปภาพ
บางครงภาพทเรานำามาแสดงในเวบกอาจมขนาดใหญหรอ เลกมากเกนไป เราสามารถกำาหนดขนาดของภาพไดโดย
การระบ width และ height ของภาพ
www.rongrean.com Orjix
<body><img src="band.jpg"/><img src="band.jpg" width="300px" height="200px"/>
</body>
ภาพขนาดปรกต
ภาพขนาด width=“300px” height=“200px”
การใสกรอบใหรปภาพ
การใสกรอบใหรปภาพบางครงทำาเพอเนนรปนน หรอแยกรปออกจากขอความใหชดเจน
ทำาไดโดยใช attribute ‘border’ ภายใตแทก <img>
www.rongrean.com Orjix
<body><img src="band.jpg"/><img src="band.jpg" border="5px"/>
</body>
Border=“5px”
Border=“none”
การจดตำาแหนงรปภาพ
การจดตำาแหนงใชเพอทำาใหรปภาพมตำาแหนงเขากบขอความทมอยเดม โดยใช attribute ‘align’
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%"><tr>
<td><img src="band.jpg" align="bottom"/>bottom</td><td><img src="band.jpg" align="left"/>left</td><td><img src="band.jpg" align="middle"/>middle</td>
</tr><tr>
<td><img src="band.jpg" align="right"/>right</td><td><img src="band.jpg" align="top"/>top</td><td></td>
</tr></table>
bottom ขอบลางของภาพเสมอขอบลางของขอความleft จดภาพอยทางซาย
middle กงกลางของภาพเสมอกงกลางของขอความright จดภาพอยทางขวา
top ขอบบนของภาพเสมอขอบบนของขอความ
การจดตำาแหนงรปภาพ
ตวอยาง
www.rongrean.com Orjix
เพมระยะระหวางรปกบขอความ
ภาพทแสดงปรกตจะถกวางชดกบขอความ เราสามารถเพมระยะหางของภาพกบขอความเพอเพมความสวยงาม
ได โดยใช attribute ‘vspace’ และ ‘hspace’
www.rongrean.com Orjix
<body><img src="band.jpg" vspace="50px" hspace="50px" align="left" border="1px"/>rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com <br></body>
ภาพดงเดม
vspace
vspace
hspace hspace
การทงระยะระหวางขอความใหพนขอบเขตรป <br>
การจดรปรวมกบขอความ สวนของขอความจะถกพมพตอ เนองไปเรอยๆ ซงบางครงดไมงามซกเทาไหร สามารถ
แกไขไดดวยการทงระยะขอความใหพนขอบเขตรปดวยattribute ‘clear’ ประกาศไวภายใตแทก <br>
www.rongrean.com Orjix
<body> <img src="band.jpg" align="left" border="1px"/>
rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com<br clear="left">rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com
</body>
ใช <br> ธรรมดา ใช <br clear=“left”>
•ตวอยาง
การทงระยะระหวางขอความใหพนขอบเขตรป <br>
all ขนบรรทดใหมในบรเวณทดานซายและขวาไมมวตถใดขวางอยleft ขนบรรทดใหมในบรเวณทดานซายไมมวตถใดขวางอยright ขนบรรทดใหมในบรเวณทดานขวาไมมวตถใดขวางอยnone ขนบรรทดใหมแบบปรกต เปนคา default อยแลว
www.rongrean.com Orjix
แสดงภาพเปนฉากหลง <body>
เราสามารถตกแตงเวบเพจใหมภาพเปนพนหลงได โดยใสattribute ‘background’ ไวภายใตแทก <body>
www.rongrean.com Orjix
<body background="4008482.jpg"><p>rongrean.com rongrean.com rongrean.com <br>rongrean.com rongrean.com rongrean.com rongrean.com <br>rongrean.com rongrean.com rongrean.com rongrean.com <br>rongrean.com rongrean.com rongrean.com rongrean.com <br></p>
</body>
แสดงภาพฉากหลงอยกบท
นอกจากใสภาพเปนฉากหลงแลว เรายงสามารถเพมลก เลนใหกบฉากหลงไดอก โดยทำาใหฉากหลงอยกบทขณะท
เราเลอนแถบเลอน(scroll bar) ไปเรอยๆ<body background="4008482.jpg" bgproperties="fixed">
1<br>2<br>3<br>…30<br>
</body>
สงเกตวาเวลาเลอนแถบเลอน(scroll
bar) พนหลงจะไมเลอนตาม