Lesson: 5 big/small, font color, more about nesting tags


29

Now I guess is a good time to yap a bit about syntax. You’ll notice here and there I use quotation marks. They are important. Whenever you have an attribute=”value”, the value should really be in quotes. It’s a good habit to get into.

You have no idea how many times I made a page and it was all screwed up… I mean all screwed up because of a single missing or misplaced quotation mark or a missing space or a missing greater than (>) sign . Someday we may be separated from this kind of coding, but for now we just have to be careful.

Also, regarding case, HTML is largely case INsensitive. You could just as well use <FONT> instead of <font>. However, for a couple reasons, one being it’s easier, it’s a fine idea to keep everything lower case.

All right, back to the fun stuff…

A handy way to make big or small text is the big tag and the small tag.

<body>
<big>Something</big> really <small>cool</small>
</body>
Something really cool

big bumps the text up one size, small bumps it down one size.


You can change the font color if you like.

<body>
Something really <font color="#ff0000">cool</font>
</body>
Something really cool

We can, of course use more than one attribute in a <font> tag…

<body>
Something really <font color="#ff0000" face="arial" size="7">cool</font>
</body>
Something really cool

Oh boy we’re on a roll now!

<body bgcolor="#ccffcc">
Something really <u><i><b><font color="#ff0000" face="arial" size="7">cool</font></b></i></u>
</body>
Something really cool

I feel the need to point out once again that multiple tags should be nested

Nesting example 1 - <tag3><tag2><tag1>Hooha!</tag1></tag2></tag3>

In most instances, it doesn’t matter which tag is first. It’s not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as…

Nesting example 2 - <tag2><tag1><tag3>Hooha!</tag3></tag1></tag2>

The fastest way to confuse the browser, not to mention yourself is to overlap the tags…

Nesting example 3 - <tag3><tag2><tag1>Hooha!</tag3></tag1></tag2>

(I couldn’t think of a way to explain it so I hope the use of examples makes it clear.)

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