Presentation is loading. Please wait.

Presentation is loading. Please wait.

Adding pictures to your website Week 8 Displaying “images” on web pages How to Display “images” on web pages What to Display…. How to create, change,

Similar presentations


Presentation on theme: "Adding pictures to your website Week 8 Displaying “images” on web pages How to Display “images” on web pages What to Display…. How to create, change,"— Presentation transcript:

1

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

9 How to Display “images” on web pages Image Tag “alt

10 How to Display “images” on web pages Image Tag “alt 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

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"


Download ppt "Adding pictures to your website Week 8 Displaying “images” on web pages How to Display “images” on web pages What to Display…. How to create, change,"

Similar presentations


Ads by Google