IMAGES
Graphic Formats for the Web
Jpeg and gif. File size should be as small as possible without too much loss in quality.
To put it in basic terms for now, Jpeg’s are used for photographic images while gif’s are used for solid color images such as buttons.
Image Tags
Images are “sourced” or viewed through web pages. Sourced meaning that they are referenced from another location.
Example:
<img src=”images/logo.gif” alt=”tiwi” width=”117″ height=”50″/>
img - “image”
src - “source” which tells the browser where the image is located (relative or absolute)
alt - “alternative description” – NECESSARY by HTML STANDARDS – provides a text alternative in case the image does not load, while the image is loading and to users with disabilities using a text browser
width and height -define the dimensions of the image which helps in keeping the page layout consistent while downloading
NOTE: The image source tag is a standalone tag and must close on it’s own “/>”
Images can be used with anchors to make an image “clickable”.
Example:
<a href=”../index.html”><img src=”images/logo.gif” alt=”tiwi” width=”117″ height=”50″/></a>
CSS – BACKGROUND IMAGES
Background Images
Images in placed into the background using HTML is very limiting as the image repeats horizontally and vertically to fill up the browser window without any other options. CSS allows us to have control the orientation of the repeat – horzontally, vertically, or no repeat.
Example:
body {background:white; background-image: url(homelogo.jpg); background-repeat: no-repeat;}
The above rule gives the page a background color of white, places an image in the background and tells the browser to not repeat the image. If you wanted the browser to repeat horizontally use background-repeat:repeat-x. For vertical repeat use y instead of x.
Other options are to position the image by using background-postion followed by a value for the x-axis and y-axis.
Example:
body {background:white; background-image: url(homelogo.jpg); background-repeat: no-repeat; background-position: 150px 150px;}
Another option is to “fix”the image so that it does not scroll with the contents of the window. The property is background-attachment while the value is fixed.SEE BELOW.
Example:
body {background:white; background-image: url(homelogo.jpg); background-repeat: no-repeat; background-position: 150px 150px; background-attachment:fixed;}
ALSO: you can now apply background images to other elements such as paragraphs, lists, table, etc. The following is an example of a background image being applied to a paragraph. It is also recommended to have an image that does not distract from the text.
Example:
P.repeatImage {background-image:url(oilsmlogo.gif); background-repeat: repeat-y; color:white;}
Try the background-attachment property.
Example:
P.fixed {background-image:url(oilsmlogo.gif);color:white; background-attachment:fixed;}
NOTE: it is important to have the background-color rule applied first when using both background-color and background-image properties.
EXERCISES
- Add a photo or an image to your resume, maybe a logo.m
- Add an image to each of the pages on your website
- make the image clickable to your home page.
RESOURCES
w3schools.com