15
Orjix www.RongRean.com หหหหห หหหหหหหหหหหหห HTML: Session หหห

Session4 part1

Embed Size (px)

Citation preview

Page 1: Session4 part1

Orjix

www.RongRean.com

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

Page 2: Session4 part1

www.rongrean.com Orjix

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

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

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

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

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

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

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

Page 3: Session4 part1

Contents

www.rongrean.com Orjix

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

8

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

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

Page 4: Session4 part1

รจกกบภาพกราฟกชนดตางๆภาพกราฟกมรปแบบการจดเกบอยหลายชนด โดย

แตละชนดจะแตกตางกนในเรองของขนาดไฟล และจำานวนสทแสดงได สำาหรบเวบนนสวนใหญเปนชนด GIF(.gif) และ JPEG(.jpg)

www.rongrean.com Orjix

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

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

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

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

พฒนาโดย Joint Photographic Experts Group เปน กราฟกทสามารถทำางานกบเครองตางแบบตางรนไดเชนกน สามารถแสดงสไดสงสด 167. ลานส แตอาจทำาใหสญเสยรายละเอยดไปบางจากการบบอดขอมลเพอลดขนาดภาพ

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

ภาพแบบGIF

ภาพแบบjpeg

Page 5: Session4 part1

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

www.rongrean.com Orjix

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

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

</body>

ภาพแบบ jpeg

ภาพแบบ gif

*สงเกตวาการแสดงเฉดสของภาพรปแบบ jpeg จะมสสนมากกวาภาพรปแบบ gif

Page 6: Session4 part1

การใสขอความกำากบภาพขอความกำากบภาพ (alternate text ) จะปรากฏ

ขนมาเมอบราวเซอรไมสามารถแสดงภาพขนมาได เพอใหผใชทราบวาภาพนนคออะไร

www.rongrean.com Orjix

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

</body>

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

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

Page 7: Session4 part1

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

หรอเลกมากเกนไป เราสามารถกำาหนดขนาดของภาพไดโดยการระบ width และ height ของภาพ

www.rongrean.com Orjix

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

</body>

ภาพขนาดปรกต

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

Page 8: Session4 part1

การใสกรอบใหรปภาพการใสกรอบใหรปภาพบางครงทำาเพอเนนรปนน หรอ

แยกรปออกจากขอความใหชดเจนทำาไดโดยใช attribute ‘border’ ภายใตแทก <img>

www.rongrean.com Orjix

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

</body>

Border=“5px”

Border=“none”

Page 9: Session4 part1

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

ขอความทมอยเดม โดยใช 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 ขอบบนของภาพเสมอขอบบน

ของขอความ

Page 10: Session4 part1

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

www.rongrean.com Orjix

Page 11: Session4 part1

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

สามารถเพมระยะหางของภาพกบขอความเพอเพมความสวยงามได โดยใช 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

Page 12: Session4 part1

การทงระยะระหวางขอความใหพนขอบเขตรป <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”>

Page 13: Session4 part1

•ตวอยาง

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

all ขนบรรทดใหมในบรเวณทดานซายและขวาไมมวตถใดขวางอย

left ขนบรรทดใหมในบรเวณทดานซายไมมวตถใดขวางอย

right ขนบรรทดใหมในบรเวณทดานขวาไมมวตถใดขวางอย

none ขนบรรทดใหมแบบปรกต เปนคา default อยแลว

www.rongrean.com Orjix

Page 14: Session4 part1

แสดงภาพเปนฉากหลง <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>

Page 15: Session4 part1

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

ลกเลนใหกบฉากหลงไดอก โดยทำาใหฉากหลงอยกบทขณะทเราเลอนแถบเลอน(scroll bar ) ไปเรอยๆ<body background="4008482.jpg" bgproperties="fixed">1<br>2<br>3<br>…30<br>

</body>

สงเกตวาเวลาเลอนแถบเลอน(scroll bar) พนหลงจะไมเลอนตาม