|
|
Thought I'd start out my tips and tricks with something nice and easy. Font tricks to use in your HTML pages.
Most of you know how to make your text bold or italic.
Here's how it looks like in HTML:
| Most of you know how to make your text <b>bold</b> or <i>italic</i>. |
As you can see, to make something bold, you start out with an opening tag - the b in the angled brackets, then your text, then the closing tag - the forward slash and b within the angled brackets.
So what else is there?
You can also do underline, strikethrough, superscript,
subscript, and keyboard
Which looks like:
| You can also do <u>underline,</u> <strike>strikethrough,</strike> <sup>superscript,</sup> <sub>subscript,</sub> and <kbd> keyboard</kbd> |
That's not all! You can play with the sizes!
tiny,small, regular, big, bigger, even bigger, huge
Which is:
| <font size="1">tiny,</font> <font size="2">small,</font> <font size="3">regular,</font> <font size="4">big,</font> <font size="5">bigger,</font> <font size="6">even bigger,</font> <font size="7">huge</font> |
You see in this instance it isn't just a simple beginning tag. This time the beginning tag is 'font' but also includes an extra parameter after it, indicating what you want to do the font - this example being the size change. You can also change the color by using the font tag:
red, blue, green, purple, lavender, brown, gray, maroon
Which is:
| <font color="red">red,</font> <font color="blue">blue,</font> <font color="#00FF00">green,</font><font color="#FF00FF">purple,</font> <font color="#CC99FF">lavender,</font> <font color="#663300">brown,</font><font color="#999999">gray, </font><font color="#990000">maroon</font> |
As you can see by the code, you can either use the color name, or a hex code, which is a 6 character code that designates color. To get a great listing of hex codes and their corresponding colors, check out webmonkey. There's a ton of helpful stuff on that site.
OK, I'm sleepy, so I'll end it here. Before I go, let's mix it all up together!
The quick brown fox jumped over the lazy dog!
Which is:
| <font color="#6699FF">The </font><b><font color="#6699FF">quick</font> <u>brown</u><font color="#CC3300"><i>fox</i></font></b><font color="#CC3300"><i> jumped</i></font> over <font size="5"><strike>the</strike> <font color="#00CC66"><b>lazy</b></font></font><font color="#00CC66"> dog</font>! |
Pretty easy for the first lesson. Next week (or even tomorrow) we'll talk posting pictures!!!
cool tutorial, Yano! i'm interested in how you thumbnail your pics... so that'll be my first suggestion.
Posted by: kathy on March 10, 2004 06:30 AM*annoyingkidatthebackoftheroomraiseshand*
why do you have 2 closing tags for the "tiny" font?
;)
*sinksdownintoseatandwaitsformovabletypelesson*
Posted by: chris on March 10, 2004 07:51 AMWhatever are you talking about, Chris? I see no double font closing tag there!
*teacherhideseraserbehindback*
How I love the edit mode of MT.
Posted by: yano on March 10, 2004 08:50 AM
