HTML
Tutorial - Chapter 2: Text Formatting
In the previous chapter we learned
about setting your canvas first, before doing anything else
with your site. (Declaring that you'll be using HTML, laying
out your head area, and then your body area.) You should
always do this for every page of your site. However, for
the purpose of this tutorial, if you're feeling tired of
typing it all out, you may exclude the canvas and just type
the HTML out directly...
...it should still work fine
in the browser. Most browsers aren't very picky about things
like that anymore.
| » Tag
Properties Introduction |
Almost every tag has a set of
properties that it can call upon to create a variation on
its effect. Consider each to be a certain type of swiss army
knife loaded with different tools to help your site. The
best example of this is the "Paragraph" tag.
Here, take a look...
<p
align="left">Looks
good, doesn't it?</p>
Before, we just used <p>,
now we're adding a little extra bit of code align="left" within
it and even closing the tag off with </p>.
It's easy to guess what all this does. But let me explain
if you're a little confused.
First, the bit of code, align="left",
represents one of the "Paragraph" tag's properties
(properties are optional, remember that). You're telling
the browser here to create a new paragraph that's aligned
to the left. The reason we close the tag off at the end is
because we might want to align the next paragraph a different
way and if we don't close everything off, our code gets a
little messy and we might forget what's what.
By default, all <p> tags
are aligned to the left (as you saw in the previous chapter
through experience). We can also align new paragraphs to
the "center" and to the "right," if we
so please.
Give it a try now. Type in some
text below separated by paragraphs that are aligned in different
ways. Please note, that our old friend, the "Break" tag <br> doesn't
have any properties. You can't align text with it or anything.
Give it a try if you want to prove me wrong. ^_^
The tag I'm about to teach you
is one of the most important you'll ever learn. It's also
one of the most abused tags you'll ever find. Go easy on
it!
I'm talking about the <font> tag.
It lets you format the size, font, and color of your text.
On the plus side, this means your text doesn't have to be
boring black all the time. On the minus side, this means
you're destined to visit tons of websites by amateurs who
make every other paragraph a different, hard-to-see color.
The key to the <font> tag
is that, on its own, it doesn't do anything. That is...
<font>I'm
a huge fan of Japanese cartoons!</font>
...looks the exact same as
if you didn't have the tags there at all. Poo! So to remedy
this, let's add some properties to the mix.
First, let's experiment with
changing the size of our text...
Now, first forget everything
you know about text sizes from using word processor programs.
It's irrelevant for HTML. In HTML, this is the range of sizes
for all text:
Size 1 - My
name is Adam!
Size 2 - My name is Adam!
Size 3 - My name is Adam!
Size 4 - My name is Adam! ...and so on
The default size is usually
either 2 or 3. Anything below that becomes hard to read and
anything above becomes obnoxiously big.
Knowing this now, let's add
a size property to our lovely <font> tag!
<font
size="3">What
does "Otaku" mean anyway?</font>
Notice, we never name the property
used in the closing tag! Only in the opening tag. All properties
will use an equal sign with quotation marks surrounding their
value. Anyway, the code above would return this:
What does "Otaku" mean
anyway?
Each tag can use more than one
property too at the same time. Let's add some color to the
mix now.
<font
size="3" color="red">What
does "Otaku" mean anyway?</font>
Color is a tricky subject in
HTML. While most basic color names (like "red" or "blue" or "green")
will work, it's usually recommended to use Hex Names to achieve
gradients and more sophisticated colors. Hex Names are a
bore to memorize. Red in Hex would be: #FF0000, for example.
So instead of "red" in your code, you'd type:
<font
size="3" color="#FF000">james
is from australia! he must like crocs!</font>
We have a handy section on
Hex Names that we recommend bookmarking for future reference
- for those days you need a quick table to consult for the
Hex Name of dark lime.
Anyway, the code above will
output (this font combination of size 3 in red is known as
the "kuja" combination - no need to remember that
though ^_^).
james is from
australia! he must like crocs!
Finally now, let's add the third
property possible with our friendly <font> tag.
That is, changing the font itself.
There are only a handful of
web-friendly fonts and of those, we only recommend two to
use: Arial and
Verdana. (This site uses Verdana.) While Times
New Roman might look great on printed paper, it's
too cluttered for the Internet and definitely a no-no. (Unfortunately, Times
New Roman is the default font if you don't specify
anything.)
Because this site has been using
Verdana font for its entirety, let's change things up a little
and give Arial some
on-air time.
<font
size="3" color="#FF000" face="arial">Where
am I?</font>
Isn't it so cute? To change
the font's font, we have to change its "face." This
makes sense, as typing...
<font
font="arial">
...would be a little (well,
a lot) confusing.
Well that's all there is to
know about Mr. <font>.
Now's your turn to play and format text to all sorts of strange
sizes, colors, and faces. I know this is your favorite part,
theory is only so interesting before you want to get your
fingers dirty. ^_^
Now that we know how to change
the size, shape, and color of our text, let's quickly learn
three more useful tags for formatting. One is to make your
text bold, the other lets you make your
text italicized, while the last makes your text underlined.
Before you read anything more,
mentally guess what the tags are for each of these. My only
hint to you is that they follow the same pattern as the "Paragraph" tag
for naming.
Got it? Well, the tag for bold
is <b>, the
tag for italics is <i> and
the tag for underline is <u>.
It's just the first letter of their names! These tags are
insanely easy-to-use. Just go easy on them. Especially italics
and underline. Italics don't show up too well online and
you should almost never underline text - you'll confuse your
visitors who'll think they're links!
<b>I
need some confidence!</b>
<i>I
see the world from a slanted perspective<i>
<u>I
confuse the heck out of my visitors!<u>
There are three examples of
using these tags. The first bolds, the second italicizes,
while the third underlines. We can combine these tags too,
if we wanted. Just remember the rule about embedding!
<b><i><u>I'm
now bold, slanted and tricky!<u></i></b>
One fast way to check if your
tags are ended in the right order is that they should be
closed in the opposite order of how they were started. The
code up there would output...
I am now bold,
slanted and tricky!
Lovely. We can also combine
these fun tags with what we know about the <font> tag!
<font
color="green"><b>See
you later, <i>space</i> cowboy!</b></font>
Tags all over the place here!
Look over this code and predict what the output will look
like. (Also notice that everything is ended in the right
order. The closing tags are all in the reverse order of the
opening tags. As it should be.
Now,
the output is...
See
you later, space cowboy!
Give these tags
a try and be sure to combine them with everything you know
about paragraphs and our favorite <font> tag!
You're doing very well if you've
made it here and have mastered all the material! Remember,
don't be afraid to keep flipping back through previous chapters
to recall old material. All of it is useful!
Next, we're going to take a
look at the most important tag ever created. The tag that
the entire Internet was built on. The tag that lets us create
links.
Previous
Chapter | Next Chapter |