PPT
advertisement
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, modify images. How to Display “images” on web pages Here is a simple rule of thumb: “ GIF ” Solid colors and sharp lines “ JPG ” Lots of colors “ GIF ” Solid colors and sharp lines “ JPG ” Lots of colors “ JPG ” Low Resolution 57K bytes Resolution = 72 DPI Size to fit High Resolution 1,079K bytes How to Display “images” on web pages Image Tag <img src =“file.gif ”> How to Display “images” on web pages Image Tag < img src =“file.gif ” alt=“alt text” > How to Display “images” on web pages Image Tag < img src =“file.gif ” alt=“alt text” > Options: Border Border = “0” Border = “1” How to Display “images” on web pages Image Tag <img src=“horse.gif” alt=“My Horse” border=“1”> Options: Border = “ # ” Align = left, right, top, middle, bottom This is an example of an image that is aligned to the left of the text. If more text is displayed than the size of the picture it will wrap around the picture like this. This is an example of an image that is aligned to the right of the text. Options: Border = “ # ” Align = left, right, top, middle, bottom This is top This is middle Options: Border = “ # ” Align = left, right, top, middle, bottom This is bottom Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Width OR Height <img src=“horse.gif” alt=“My Horse”> Height = 125 Width = 125 Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Width OR Height <img src=“horse.gif” alt=“My Horse”> Height = 125 Width = 125 Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Width OR Height <img src=“horse.gif” alt=“My Horse” Width = “200” Actual size 125 pixels > Displayed size 200 pixels Options: Border = “ # ” Align = left, right, top, middle, bottom Width = “pixels” Height = “pixels” Width OR Height <img src=“horse.gif” alt=“My Horse” width=“200 height=“100” > 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”> My Web Page Here is a picture of my horse My Web Page Here is a picture of my horse Background Image <body> <body background=“back.gif”> <body background=“back.gif” bgproperties=“fixed”> A review! .gif = Solid colors and sharp lines = Clipart .jpg = Lots of colors = Pictures Resolution = 72 DPI - Size to fit Image Tag: <img src=“filname.gif” >alt=“ A picture of my horse ” > Options: Align = left, right, top, middle, bottom Width or Height = “pixels ” Border = “pixels” Title = “My Dog” Background Image < body background = “ bg.gif ”> Option: bgproperties = “fixed” spacer.gif Width = “1” pixel Height = “1” pixel Border = “0” Color = “transparent” Eat: Fruits & Veggies Eat: Fruits & Veggies Eat:&nbsp; &nbsp; &nbsp; Fruits & Veggies spacer.gif Eat: <img src=“spacer.gif” width=“25” height=“1” > Fruits & Veggies Eat: Fruits & Veggies Eat: Fruits & Veggies Eat: Fruits & Veggies Eat:&nbsp; &nbsp; &nbsp; Fruits & Veggies Wake up class! It’s time to get to work! Class Web site: udel.edu/~cordeicf 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, pict1.gif nisl. Phasellus eleifend lorem etpict2.gif 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 pet1.gif pet2.gif pet3.gif interdum. Sed eget mi vel quam semperpet4.gif placerat. Donec sed justo non odio dignissim lobortis. Praesent nec elit vel lacus consectetuer aliquet. Vivamus tincidunt placerat ipsum. Duis justo. bg1.gif, bg2.gif,lipsom.txt bg3.gif, bg4.gif, bg5.gif 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"
