Week 3

Colors Backgrounds Fonts Images Lesson 1
Adding attributes to the body tag. Several attributes can be added to the opening body tag to alter the appearance of the whole page.

<body bgcolor="#CCFFFF">: will create a solid aqua bkgd.
Attributes to alter in body

bgcolor - background color

<body bgcolor="#000000">

background - graphic image as bkgd

<body background="bubbles.jpg">

text- color of text. Only used in opening body tag.

<body text="#000000">

link- color of new links on page, undiscovered territory

<body link="#000000">

alink - color of active link when clicked on

<body alink="#000000">

vlink - color of visited link, tells viewer they've been there done that

<body vlink="#000000"&ft;

Whole shebang together would appear on one continuous line: <body bgcolor="#000000" background="bubbles.gif" text="#000000" link="#000000" alink="#000000" vlink="#000000"></body>
It would be good to note that in the above example, all the RGB codes are set to black, you would not be able to see any of the text on the bgcolor, however it would all show on the background .gif.
If you use textured or graphic bkgd, also select a corresponding bgcolor so if graphic does not load the viewer can still read the colored text. Check contrast of text to bkgd, including link colors. Hard to read will send viewers away.
To the Top

Color on Web
Color code in equivalent hexadecimal RGB values. Formula. RGB ranges from 0 to 255. Hexadecimals from 0 to 9 and A to F.

"#RR GG BB"
red green blue

White is 3 equal portion

Black is the absence of all 3

Use uppercase for color codes

Some browsers support color words, use " " but no #.
Notice above, the top line was coded with color "words" the bottom line was coded with RGB formula, yet both are to be plain red, green and blue!

J To guarantee the color you want is the color your viewers get opt for the RGB codes instead. J

Background Displays an image rather then a color. Save bkgd images to HTML folder. Rt click image, select save bkgd as, save to HTML All images must be in .jpg or .gif to show on web. Not all images will work as solid bkgd. Look for seamlessly tiled images. Some images are hard to read on.
To view on web, place graphic in same folder as web page file. Upload to server. Uppercase can confuse browser, rename image files to all lowercase including the extension.
To the Top

Fonts tag set. Change text many ways.

1. color= attribute

Will color text between tags. Use as often as like.


2. size= attribute

Range from 1 to 7 where 3 is default


3. face= attribute

style of font. Consider carefully. Make sure it is readable.


*May need to change size of some fonts to look right. Specify up to 3 styles in tag, browser will use the first one it supports. Not all people have same fonts in their computer. Font junkies will have many fonts that most people do not use.
 If you want to use a "fun" font, create a graphic with it and save as .gif image. Insert graphic into webpage instead of text. I will have to wait until I learn how, being a self diagnosed font junkie!
Don't forget closing tag or the rest of the page will be in that same!font style.

Windows & Mac use different fonts. Good idea to pick one from each system to ensure all viewers will see page as you intend. Common windows fonts have a corresponding mac font.
It is interesting to me the things I have learned today alone! Apparently if you forget to add your end quotation mark in a RGB code the entire background will show as red! I could alter the shade of the red, but I could not get any other color. Why that mistake caused that reaction is peculiar to me. I'm not sure what the proper form is, but this whole page is in "Architect", however instead of making each of my subtopics as a heading (which is what I did on my first 2 pages, not knowing any other way) I created a new font tag for each subheading, closed it and then opened another font tag to continue the page. I did this to change the size of the font. I did notice that I could just add an opening font tag with a size attribute before each subheading and get the same result, but as we are encouraged to add those closing tags for every open one, I changed it hoping I was doing a good thing.
To the Top

Using Images
There are many places to find graphics on the web. Before taking an image and planting it on your own web page there are several things you should consider:

If there is any doubt about it, don't use it

Ask permission of artist

Do not steal bandwidth by linking directly to a graphic

Read terms of site, some require a link back or acknowledgment of some sort

Give credit where credit is due!

There are only 2 formats viewable on their own - .jpg and .gif. Other types of images require special help. Which format you use depends on what your image is. JPG is better for photos because it can handle a large color span, it is also good for compression of the image as far as "bleeding" of color. GIF is limited to 256 colors and works great for clipart and buttons. It doesn't compression as much as a JPG, but is typically used for smaller images anyway.
To save an image found on the internet, right click it and "save as" to your HTML folder. Any image used on your webpage will need to be uploaded to your server folder, keeping it all together will make it easier to find. A right click on an image will also give you the properties of the image, allowing you to see the dimensions of the image, which is important for inserting the image into your webpage.
The image tag holds several items:

<img src>

Image Source - the filename of the image
<img src="sample.jpg">

width="?" and height"?" attributes

Measured in pixels
<img src="sample.jpg" width="70" height="70">

alt="description" attribute

Mouse over description of image.
Very helpful if image is a button or link
<img src="sample.jpg" width="70" height="70" alt="Picture of me">

border="?" attribute

Always include even if it's 0.
<img src="sample.jpg" width="70" height="70" alt="Picture of me" border="0">

Important things to remember!
No space in file name

<img src=" "> not a container tag. No closing tag!

All Attributes should be in tag - width, height, alt, border

Space between attributes but not in them

Image should be uploaded to separate directory on server, source should include name of folder
i.e. <img src="images/sample.jpg">

To the Top

Examples of Aligning Image with Graphics This is an example of an image not designated to a place with text aligned to the middle. When text is aligned to a height but not a "side" the image goes to the left and the text places one line beside the image and drops the rest off to the bottom. I also added a border value of "0" for this one.

Here's an example of an image that is aligned to the right of the text. Here a border value of "10" was included. These are half my "men" at a British Car Show this summer. Okay I also tried to start the text in the middle of the image's height, but can't seem to get the tag to read two separate alignments.

This example should place the image in the center of the page, however this is done with an outside set of center tags, and the image is aligned with the left of the text. In this instance all the text stays beside the image instead of just one line. If I did not have a at the end of this paragraph the text that follows would be up here too. Border value of "25" was included.
Now this image I've centered with the text above it. The center tags are not in the img src tag though. Without a break tag between the text and the image it would not be centered at all. This is the clip that I saved from Michele's Sample Page for homework.

I think that covers all the alignment attributes that we learned. I know there must be more to it then this because I find these options relatively unattractive on a webpage.
To the Top

Table of Contents Page 1 Page 2 Page 4
Tag reference page Helpful Sites