Lesson: 6 section headings, link colors


pic1j

Another occasionally useful tag worth mentioning are section headings. While they’re a little old fashioned in today’s very graphic web, they are still a handy little thing to have in your toolbox. They come in sizes 1-6.

Something really cool

<h2>Something really cool

Something really cool

Something really cool

Something really cool
Something really cool

Something really cool

Something really cool

Something really cool

Something really cool

Something really cool
Something really cool

A useful heading attribute is align. It’s fairly self-explanatory…

<h2 align="left">Something really cool

Something really cool

Something really cool

Something really cool

Something really cool

Something really cool


One more thing and we’ll wrap up this lesson. The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are…

Background is usually white
Text is usually black
Links are usually blue
Visited links are usually purple
Active links are often red

You can change these if you need to (notice I said need to). The whole world has gotten used to links being blue. Why confuse us?

You can change these defaults for the entire document in the <body> tag.

<body bgcolor="#000000" text="#ffff66" link="#00ff33" vlink="#00bb33" alink="#00ddff">
Something really cool
</body>
Something really cool


I know that we have not gotten into how to make links, so that information is not shown above (why muddy the water?) This is simply to show you how to make the color changes when you do learn how to make links.


You can see that the background is now black and the text is now yellow.
Links are now neon green
Visited links are darker green
And active links are sky blue

I’ve written a neat little HTML & JavaScript widget called Color Picker that makes it easy (and kind of fun) to experiment with different color settings. With it, you can not only pick colors, but you can choose different fonts and font sizes, switch to bold or italic, and even easily experiment with different background images. The <body> tag is automagically generated for you.


There! You now know just about everything that has to do with manipulating the text in your document. You can now make Big red letters or small bold letters. You can use other Fonts, or monospaced fonts.

You could even make a rollercoaster!

Or a RAINBOW

(The markup for the roller coaster and the rainbow is here if you’d like to check it out.)

Before we wrap up this lesson, there’s one little thing I want to bring to your attention. You can view the HTML code of any page you happen to be viewing by choosing View/Document Source in your browser. Your browser may word this a little differently, but nearly all browsers have this facility. So, as you surf along and you run into a really neat page and you find yourself thinking “How’d they do that?”, the answer may be only a couple clicks away.

Tell you what… have some practice viewing source. View the source of this page and find the secret message. (It’s the same secret message that Ralphie decoded in A Christmas Story.)

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s