back to the Agenda | Assignment #4

Adding Images

Backgrounds

and c o L O r to your pages.

Look at the source code for this page. In the code in the heading section you will find examples of how to add images. The IMG SRC tag (image source) is set equal to the file name of the image you want displayed. You may set its width and height in pixels. The images that are displayed above are of different qualities. The picture becomes blotchy when it is made a different size than it was meant to be displayed. If the middle image is made smaller, it doesn't look as good.

To download an image from the Internet, simply right click on it and choose "Save Image" (or however your browser refers to it), navigate to your image folder and save it there. It is handy to have all your images in the same folder. Be sure to save the image with a suffix of either jpg (or jpeg, Joint Photographic Expert Group) or gif (Graphics Interchange Format). Images take time to load and take up much more space than text on your computer. Use them to enhance a page. Don't over do it. Here are some sites to look for images. (You can use any website you want though.)

The tag that colors the background should be in the style attribute of the body tag.

ie. <body style='background-color: #123456;'>

The numbers and/or letters that follow the # sign are the hexadecimal RGB (Red, Green, Blue) numbers for the color. Each number runs from 00 to FF (0-255 in base 10) and you can mix them like you would paint to make different colors. All colors, FFFFFF, is white and no color, 000000, is black. You can also use an image as a background.

Go to this page to see how. Then go here for another example. Look at the source code for each page. Also notice that the text in some of the colors is very hard to read. The background should enhance your page. It should not make it busy or difficult to read. There is one example of changing the font color to "black" on the second background page. Most browsers allow you to name common colors.

Browsers, by default, generally adhere to the following:

It is best to leave the links and vlinks the default so a user is not confused by your colors. However, if you have a background that causes a default color to "disappear" you must change it.

We will also look at the Bootstrap framework in a few weeks - and different templates that change the default colors.

Assignment 4

  1. Open up your a3.htm and save it as 'a4.htm'.
  2. Add color and images to that page (your interest page).
  3. Make sure the additions enhance the page.
  4. Make a list of sites related to your interests at the bottom of your interest page.
  5. Look at the list of links in the source code for this page to see how.
  6. Check your links to make sure they are suitable for access from school (i.e. they are not blocked).
  7. Submit your link.