Day Five - More Body Attributes
Today will be a short day, even though we're going to cheat just a little. Technically, you're getting more than three tags today, but since the body link tags are all really similar, I'm counting them as one. ^_^
Open up the lovely Notepad; you know the drill. *wink* Look at your body tag. It should look like this:
There are no rules on where attributes are placed in the body tag. The browser reads them split-second fast, so other than personal preference, there's no set way to write this. I like putting the background tag(s) first, then text, then links, then anything else (I'll later cover even more body tags).
Click your cursor inbetween the body and the text (remember to leave a space after body) and type
Remember also to leave a space between this and text. Now save and reload. Pretty pink! (This is the background color for the Pink Fuzzy Dice page, whose owner, Siren, learned HTML from this very site! ^_^)
'bgcolor' stands for 'background color', and will accept any hexidecimal code, just like text.
Please allow me to post this WARNING:
My sister's 'absolutely favorite colors' are pink and lime green. Now, she can deck her bed out in these colors all she wants, but if she tries to make a webpage with this combination...
She's either going to end up with this eyesore...
Or this even worse one. |
Just because you now know how to make your background all kinds of pretty colors doesn't mean you SHOULD. Please, for the love of (my) eyesight, be tame. (That's not even the brightest green my monitor shows! I had to tone it down so I didn't give myself a headache.) DO troubleshoot EVERY color you want to use, and get a second opinion if need be. Do not be offended if someone tells you, 'I can't read your page!!'
The best color combinations are either Very light backgrounds and dark text (think, black on white, just like books) or, secondarily, very dark backgrounds with light (ie, white) texts. But even white on black can be a bit of a strain. If the thought of a blatant white background just makes your head hurt, try '#EeEeEe' instead of six f's. It's a very light gray, looks quite professional enough, and reduces eyestrain like you wouldn't believe.
(By the way, feel free to experiment with HTML and hex. For example: I just found that if you specify a bgcolor attribute with no description ['bgcolor="#"'], the browser fills in the closest thing: black.)
What if you have one of those background images, and want that on your page? There's a tag for that, too.
Just plunk it into the body tag, same as the other. Do not, for the love of sanity, USE my 'image.gif'. Well, ok, do it once, and see why not.
See? Told ya.
Background images of ANY sort are simply one graphic that has been tiled in by the browser to fill all available space. The so-called 'wallpaper' backgrounds, popular from about 1998 to early 2000, are simply squares repeated forever (or at least for the width and height of your screen). They are beginning to fade out of popularity, because... the majority of people realized that the majority of text was nigh unreadable on the majority of wallpaper backgrounds!!! 99% of background graphics are simply too busy to be able to put standard fonts over and still have them be readable. So, I urge you, use caution when using background graphics.
If you specify a bgcolor, but simply omit the background="" completely, it's perfectly ok. Just because I (or anyone!) teach you anything doesn't mean you are obligated to use it. But there it is, nicely tucked away in your head now, for whenever you want it.
You know how to make them now. But unless you've fiddled with the settings on your computer, your links are the standard blue and red. You, the webmaster/mistress, have a great deal of control over this. How? Say it with me now: Hex-i-de-ci-mal!
That's right, all three standard link states can be controlled with the ubiquitous hex code. Simply plug these attributes into your body tag, fiddle with the hex, and save!
the color of the UNclicked link |
the color of the CLICKED, or visited, link. Hence, 'Vlink'. |
the color of the ACTIVATED link. This state is a bit strange to explain. Click a link with the left mouse button, but Don't Let Go and move your mouse away, then let go. (A convenient link to the IA homepage.) This is an activated link. Yes, you can control this color. If you don't specify, it's not the end of the world, the user's computer will just make something up. But if you WANT to control it, there it is. I usually use the same alink and vlink colors, just to save time and retain control. |
3. link, vlink, alink
That's all for Day Five. Tomorrow is...
Day Six: More Link Attributes.
This HTML Tutorial was created by Sanna for the edification of new HTML programmers. Please do not steal the text from this page and call it yours. Reproduction rights granted for educational purposes only! Be nice, y'all; you know right from wrong. August 10, 2002. Sanna@SannaSK.com
Hosted by CaravanMultimedia.com