Download presentation
Presentation is loading. Please wait.
2
Adding pictures to your website Week 8
3
Displaying “images” on web pages How to Display “images” on web pages What to Display…. How to create, change, modify images.
4
How to Display “images” on web pages “ GIF ” “ JPG ” Here is a simple rule of thumb: Lots of colors Solid colors and sharp lines
5
“ GIF ” Solid colors and sharp lines
6
“ JPG ” Lots of colors
7
“ JPG ” High Resolution Low Resolution 1,079K bytes 57K bytes Resolution = 72 DPI Size to fit
8
How to Display “images” on web pages Image Tag <img src =“file.gif ”>
9
How to Display “images” on web pages Image Tag <img src =“file.gif ” alt=“alt text” >
10
How to Display “images” on web pages Image Tag <img src =“file.gif ” alt=“alt text” > Options: Border = “0” Border = “1” Border
11
How to Display “images” on web pages Image Tag
12
Options: Border = “ # ” Align = left, right, top, middle, bottom This is an example of an image that is aligned to the left of the text. This is an example of an 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.
13
Options: Border = “ # ” Align = left, right, top, middle, bottom This is top This is middle
14
Options: Border = “ # ” Align = left, right, top, middle, bottom This is bottom
15
Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Width OR Height Height = 125 Width = 125
16
Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Width OR Height Height = 125 Width = 125
17
Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Width OR Height Width = “200” Actual size 125 pixels Displayed size 200 pixels
18
Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Width OR Height
19
Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Title = “My Dog Fido”
20
My Web Page Here is a picture of my horse
21
My Web Page Here is a picture of my horse
22
Background Image Used in tag <body background=“back.gif”>
23
A review! Image Tag:.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 Option: bgproperties = “fixed” Resolution = 72 DPI - Size to fit Title = “My Dog”
24
spacer.gif Width Height Border Color = “1” pixel = “0” = “transparent” Eat: Fruits & Veggies Eat: Fruits & Veggies
25
spacer.gif Eat: Fruits & Veggies Eat: Fruits & Veggies Eat: Fruits & Veggies Eat:Fruits & Veggies
26
Wake up class! It’s time to get to work!
27
Class Web site: udel.edu/~frankr
28
Download: Sample pictures
29
pict1.gif pict2.gif pet4.gif pet3.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
30
Lesson 10 - EXAMPLES ex01.html - basic image tag ex02.html - border range from 0 through 100 ex03.html - Image in various sizes using Height and/or Width ex04.html - Image aligned to LEFT of text ex05.html - Image aligned to RIGHT of text ex06.html - TOP, MIDDLE & BOTTOM align ex07.html - TOP align ( with more than one line ) ex08.html - Multiple images w/ various aligning ex09.html - Background 1 ex10.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"
Similar presentations
