Adding pictures to your website Week 8
description
Transcript of Adding pictures to your website Week 8
![Page 1: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/1.jpg)
![Page 2: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/2.jpg)
Adding pictures to your website
Week 8
![Page 3: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/3.jpg)
Displaying “images” on web pages
How to Display “images” on web pages
What to Display….How to create, change, modify images.
![Page 4: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/4.jpg)
How to Display “images” on web pages
“ GIF ”
“ JPG ”
Here is a simple rule of thumb:
Lots of colors
Solid colors and sharp lines
![Page 5: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/5.jpg)
“ GIF ” Solid colors and sharp lines
![Page 6: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/6.jpg)
“ JPG ” Lots of colors
![Page 7: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/7.jpg)
“ JPG ”
High ResolutionLow Resolution
1,079K bytes57K bytes
Resolution = 72 DPISize to fit
![Page 8: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/8.jpg)
How to Display “images” on web pages
Image Tag
<img src =“file.gif ”>
![Page 9: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/9.jpg)
How to Display “images” on web pages
Image Tag
< img src=“file.gif ” alt=“alt text” >
![Page 10: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/10.jpg)
How to Display “images” on web pages
Image Tag
< img src=“file.gif ” alt=“alt text” > Options:
Border = “0”
Border = “1”
Border
![Page 11: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/11.jpg)
How to Display “images” on web pages
Image Tag
<img src=“horse.gif” alt=“My Horse” border=“1”>
![Page 12: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/12.jpg)
Options: Border = “ # ”
Align = left, right, top, middle, bottom
This is an example ofan image that is aligned to the left of the text.
This is an example ofan image that is aligned to the right of the text.If
more text is displayed than the size of the picture it will wrap around the picture like this.
![Page 13: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/13.jpg)
Options: Border = “ # ”
Align = left, right, top, middle, bottom
This is top
This is middle
![Page 14: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/14.jpg)
Options: Border = “ # ”
Align = left, right, top, middle, bottom
This is bottom
![Page 15: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/15.jpg)
Options: Border = “ # ”
Align = left, right, top, middle, bottom
Width = “pixels”Height = “pixels”
Width OR Height
<img src=“horse.gif” alt=“My Horse”>
Height = 125Width = 125
![Page 16: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/16.jpg)
Options: Border = “ # ”
Align = left, right, top, middle, bottom
Width = “pixels”Height = “pixels”
Width OR Height
<img src=“horse.gif” alt=“My Horse”>
Height = 125Width = 125
![Page 17: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/17.jpg)
<img src=“horse.gif” alt=“My Horse” >
Options: Border = “ # ”
Align = left, right, top, middle, bottom
Width = “pixels”Height = “pixels”
Width OR Height
Width = “200”
Actual size125 pixels
Displayed size200 pixels
![Page 18: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/18.jpg)
<img src=“horse.gif” alt=“My Horse” width=“200 height=“100” >
Options: Border = “ # ”
Align = left, right, top, middle, bottom
Width = “pixels”Height = “pixels”
Width OR Height
![Page 19: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/19.jpg)
Options: Border = “ # ”
Align = left, right, top, middle, bottom
Width = “pixels”Height = “pixels”
Title = “My Dog Fido”
<img src=“horse.gif” alt=“My Horse” width=“200” title=“My Dog Fido”>
![Page 20: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/20.jpg)
My Web Page
Here is a picture of my horse
![Page 21: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/21.jpg)
My Web Page
Here is a picture of my horse
![Page 22: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/22.jpg)
Background ImageUsed in <BODY> tag
<body><body background=“back.gif”>
<body background=“back.gif” bgproperties=“fixed”>
![Page 23: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/23.jpg)
A review!
Image Tag:<img src=“filname.gif” >
.gif = Solid colors and sharp lines
.jpg = Lots of colors = Pictures
= Clipart
alt=“ A picture of my horse ” >Options:
Align = left, right, top, middle, bottom
Width or Height = “pixels ”Border = “pixels”
Background Image < body background = “ bg.gif ”>
Option: bgproperties = “fixed”
Resolution = 72 DPI - Size to fit
Title = “My Dog”
![Page 24: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/24.jpg)
spacer.gifWidthHeightBorderColor
= “1” pixel= “1” pixel= “0”= “transparent”
Eat: Fruits & Veggies
Eat: Fruits & Veggies
Eat: Fruits & Veggies
![Page 25: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/25.jpg)
spacer.gif
Eat: Fruits & Veggies
Eat: Fruits & Veggies
Eat: Fruits & Veggies
Eat: <img src=“spacer.gif” width=“25” height=“1” > Fruits & Veggies
Eat: Fruits & Veggies
![Page 26: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/26.jpg)
Wake up class!
It’s time to get to work!
![Page 27: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/27.jpg)
Class Web site:
udel.edu/~frankr
![Page 29: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/29.jpg)
pict1.gif pict2.gif
pet4.gifpet3.gifpet2.gifpet1.gif
bg1.gif, bg2.gif, bg3.gif, bg4.gif, bg5.gif
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida. Fusce non orci. Proin lacinia pellentesque ante. Donec dictum molestie elit. Pellentesque pede tortor, congue in, suscipit id, lacinia ac, nisl. Phasellus eleifend lorem et est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lacinia ligula nec sapien. Maecenas libero felis, molestie in, placerat a, vulputate quis, ligula. Ut convallis. Aliquam erat volutpat. Phasellus egestas. Vestibulum vel est tempus eros faucibus interdum. Sed eget mi vel quam semper placerat. Donec sed justo non odio dignissim lobortis. Praesent nec elit vel lacus consectetuer aliquet. Vivamus tincidunt placerat ipsum. Duis justo.
lipsom.txt
![Page 30: Adding pictures to your website Week 8](https://reader036.fdocuments.in/reader036/viewer/2022062518/5681423f550346895dae6067/html5/thumbnails/30.jpg)
Lesson 10 - EXAMPLES
ex01.html - basic image tagex02.html - border range from 0 through 100ex03.html - Image in various sizes using Height and/or Widthex04.html - Image aligned to LEFT of textex05.html - Image aligned to RIGHT of textex06.html - TOP, MIDDLE & BOTTOM alignex07.html - TOP align ( with more than one line )ex08.html - Multiple images w/ various aligning
ex09.html - Background 1ex10.html - Background 2 ( too busy )ex11.html - Background 3 ( use of a Table #1)ex12.html - Background 4 ( use of a Table #2)ex13.html - Same background as "ex10.html" with table & bgproperties="fixed"