Session4 part1

Orjix

www.RongRean.com

หลกสตร สรางเวบดวย HTML: Session ท 4 ตอนท 1

www.rongrean.com Orjix

Contents

รจกกบภาพกราฟฟกชนดตางๆ1

แสดงภาพบนเวบ <img>2

การใสขอความกำากบภาพ3

ปรบขนาดรปภาพ4

การใสกรอบใหรปภาพ5

การจดตำาแหนงรปภาพ6

เพมระยะระหวางรปกบขอความ7

Contents


การทงระยะระหวางขอความใหพนขอบเขตรป 

8

แสดงภาพเปนฉากหลง <body>9

แสดงภาพฉากหลงอยกบท10

รจกกบภาพกราฟกชนดตางๆ

ภาพกราฟกมรปแบบการจดเกบอยหลายชนด โดยแตละ ชนดจะแตกตางกนในเรองของขนาดไฟล และจำานวนสท

แสดงได สำาหรบเวบนนสวนใหญเปนชนด (. ) GIF gif และ (. )JPEG jpg


ภาพชนด GIF คดคนโดยบรษท Compuserve แสดงรปบนเครองท

แตกตางกนได โดยสามารถแสดงสได 256 ส ภาพรปแบบนจะ ใชการบบ

อดไฟลเพอลดพนทในการเกบ ขอมล จะใชไดผลดกบกราฟกทมส สมาเสมอกน เชนภาพการตน

หรอโลโกทมการใชสไมมากนก ภาพชนด JPEG

พฒนาโดย Joint Photographic Experts Group เปนกราฟกทสามารถทางานกบเครองตางแบบตางรนไดเชน

กน สามารถแสดงสไดสงสด 16.7 ลานส แตอาจทาใหสญเสยรายละเอยดไปบางจากการบบอดขอมลเพอลดขนาดภาพ

ภาพ JPEG เหมาะสาหรบแสดงภาพทมสสนมาก และตองการประหยดเนอทในการ เกบ

ภาพแบบGIF

ภาพแบบjpeg

แสดงภาพบนเวบ <img>


การแสดงภาพเราจะใชแทก <img/> ในการทำางานดงน<body>

<img src="band.jpg"/><img src="847000.gif"/>

</body>

ภาพแบบ jpeg

ภาพแบบ gif

*สงเกตวาการแสดง เฉดสของภาพรปแบบ

jpeg จะมสสนมากกวาภาพรปแบบ gif

การใสขอความกำากบภาพ

ขอความกำากบภาพ (alternate text) จะปรากฏขนมาเมอ บราวเซอรไมสามารถแสดงภาพขนมาได เพอใหผใชทราบ

วาภาพนนคออะไร


<body><img alt="band" src="band.jpg"/><img alt="847000" src="847000.gif"/>

</body>

* สาเหตทแสดงภาพไมไดอาจเปนเพราะเกดขอผดพลาดในการเชอมโยงเชน

ภาพเสยหาย ถกลบ หรอวายาย directory ไป ในกรณน หากไมมขอความกากบภาพไว ผใชจะไมมทางรไดเลยวาภาพนน

เปนภาพอะไร

* ประโยชนอกอยางของขอความกากบภาพคอ ในบางบราวเซอรถาเรานาเมาสไปวางไวบนรปภาพกจะแสดงขอความกากบภาพขนมาใหเหนดวย

ปรบขนาดรปภาพ

บางครงภาพทเรานำามาแสดงในเวบกอาจมขนาดใหญหรอ เลกมากเกนไป เราสามารถกำาหนดขนาดของภาพไดโดย

การระบ width และ height ของภาพ


<body><img src="band.jpg"/><img src="band.jpg" width="300px" height="200px"/>

</body>

ภาพขนาดปรกต

ภาพขนาด width=“300px” height=“200px”

การใสกรอบใหรปภาพ

การใสกรอบใหรปภาพบางครงทำาเพอเนนรปนน หรอแยกรปออกจากขอความใหชดเจน

ทำาไดโดยใช attribute ‘border’ ภายใตแทก <img>


<body><img src="band.jpg"/><img src="band.jpg" border="5px"/>

</body>

Border=“5px”

Border=“none”

การจดตำาแหนงรปภาพ

การจดตำาแหนงใชเพอทำาใหรปภาพมตำาแหนงเขากบขอความทมอยเดม โดยใช attribute ‘align’


<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 ขอบบนของภาพเสมอขอบบนของขอความ

การจดตำาแหนงรปภาพ

ตวอยาง


เพมระยะระหวางรปกบขอความ

ภาพทแสดงปรกตจะถกวางชดกบขอความ เราสามารถเพมระยะหางของภาพกบขอความเพอเพมความสวยงาม

ได โดยใช attribute ‘vspace’ และ ‘hspace’


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

ภาพดงเดม

vspace

vspace

hspace hspace

การจดรปรวมกบขอความ สวนของขอความจะถกพมพตอ เนองไปเรอยๆ ซงบางครงดไมงามซกเทาไหร สามารถ

แกไขไดดวยการทงระยะขอความใหพนขอบเขตรปดวยattribute ‘clear’ ประกาศไวภายใตแทก 


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

</body>

ใช ธรรมดา ใช

•ตวอยาง


all ขนบรรทดใหมในบรเวณทดานซายและขวาไมมวตถใดขวางอยleft ขนบรรทดใหมในบรเวณทดานซายไมมวตถใดขวางอยright ขนบรรทดใหมในบรเวณทดานขวาไมมวตถใดขวางอยnone ขนบรรทดใหมแบบปรกต เปนคา default อยแลว


แสดงภาพเปนฉากหลง <body>

เราสามารถตกแตงเวบเพจใหมภาพเปนพนหลงได โดยใสattribute ‘background’ ไวภายใตแทก <body>


<body background="4008482.jpg">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 

</body>

แสดงภาพฉากหลงอยกบท

นอกจากใสภาพเปนฉากหลงแลว เรายงสามารถเพมลก เลนใหกบฉากหลงไดอก โดยทำาใหฉากหลงอยกบทขณะท

เราเลอนแถบเลอน(scroll bar) ไปเรอยๆ<body background="4008482.jpg" bgproperties="fixed">

1 2 3 …30 

</body>

สงเกตวาเวลาเลอนแถบเลอน(scroll

bar) พนหลงจะไมเลอนตาม

Session4 part1

Documents

Transcript of Session4 part1