HTML
Tutorial - Chapter 7: Tags to Organize
| » But
I Don't Want to Organize! |
In
the previous chapter we learned all about the beautiful entity
known as a "table." Tables should be your secret
weapon to laying out and organizing your site. For example,
you could create one giant table in the body of your site
and give it two columns. One for your site's left menu and
the other for your site's content.
Anyway
though, often, tables simply aren't enough. This section
is dedicated to enhancing your toolbox so you can organize
your site a little better! You can relax your mental muscles
a little, this section isn't that challenging.
Imagine
a horizontal line that cuts through your website. It could
handily be used to separate a section. Sure, you could create
an image of a horizontal line and then insert it into your
site, but that's tedious. Luckily, HTML gives us another
option. The "Horizontal Rule" tag, denoted by <hr>.
You
don't need to start or end a horizontal rule tag. You just
put it into your site and BOOM, a horizontal line appears
that, by default, goes from the left to right of your entire
screen. It looks like this...
Default
values are usually ugly though and this one is no exception.
Let's play with this tag and give it some useful properties!
<hr
width="50%" height="3" noshade>
The "noshade" property
we specified above is an odd one. It's one of the only properties
ever that isn't followed by an equal sign and quotes. Anyway
though, the code above would output this lovely horizontal
rule - with a width that's 50% of the screen, a height that's
three pixels, and unshaded in style.
In
case you're wondering, the difference between a shaded and
unshaded horizontal rule is this: a shaded rule (by default
all rules are shaded), appears to go into the page where
an unshaded rule appears to pop out of the page. They're
like belly-buttons. ^_^
We
can also add color and align our horizontal rules (which
are gray and center-aligned by default). Be careful with
these options though, as they might not work in some browsers.
<hr
color="red" width="50%" align="right">
And
we have...
Hey,
works for me. ^_^
That's
really all there is to know about horizontal rules. They're
very cool because they can really add flavor to how your
site is organized without taking too much effort. Just for
fun, why not make a few horizontal rules of varying size,
shape, and color?
Heading
tags aren't phenomenally useful anymore. They basically turn
whatever text they wrap around into "headings" -
which means they turn bold and make it impossible for text
to go directly underneath them (using the <br> tag).
We could easily achieve the same effect with <font> tags
though.
Here's
a very (very) fast crash-course in headings. You probably
won't need to use them much, so I'm going to be a little
lazy here. The thing to remember with headings is that the
smaller the number used after the letter h in
the tag, the bigger the heading size will be (there's an
inverse relationship!). Here are some examples...
<h1>I'm
a type 1 heading!</h1>
<h2>I'm
a type 2 heading!</h2>
<h3>I'm
a type 3 heading!</h3>
<h4>I'm a type 4 heading!</h4>
<h5>I'm a type 5 heading!</h5>
<h6>I'm a type 6 heading!</h6>
This
code would output...
I'm a
type 1 heading!
I'm a
type 2 heading!
I'm a
type 3 heading!
I'm a
type 3 heading!
And
so on, progressively growing smaller and smaller in size...Give
it a try below.
The
last (and one of the best) ways to organize your website
is by using bullets. Bullets are slightly tricky, so it might
take a few goes of practice to get them down, but they're
very worth it in knowing.
There
are three types of lists. Unordered (your regular bullets),
ordered (numbered lists), and definition (like what you'd
see in a dictionary). Definition lists are largely useless,
so we're going to skip over them here to save you some brain-space.
Let's
first tackle an "unordered" list, the most useful
by far.
First,
we have to tell the browser we want to create an unordered
list. We do this using the <ul> tag.
("ul" stands for unordered list by the way ^_^.)
We then enter the contents of each bullet, using <li> (which
stands for "list"). This is what it looks like...
<ul>
<li>Goku</li>
<li>Bulma</li>
<li>Trunks</li>
<li>Vegeta</li>
</ul>
This
nice, little nugget of code would produce a very short list
of DragonBall Z characters.
We
can change the style of our unordered list too if we wanted.
We could make the bullets square instead of circle. To do
this, we simply add the property type="square" in
our <ul> tag.
Square bullets look like this...
Now,
to create an ordered list, we would simply use the same code
above, except replace <ul> with <ol> (stands
for 'ordered list'). Not bad, eh?
We
can also indent lists (both ordered and unordered) using
a very silly trick. Here's the code for an indented ordered
list...
<ol>
<ol>
<li>Goku</li>
<li>Bulma</li>
<li>Trunks</li>
<li>Vegeta</li>
</ol>
</ol>
Piece
of cake. First, we told the browser to create a list. Then
we told the browser to create another list within that list.
The browser automatically indents the second list. We could
do this an infinite number of times to keep indenting! Here's
the output from above...
- Goku
- Bulma
- Trunks
- Vegeta
Now,
what if we wanted to indent text? There's a special tag that
lets us do it: <blockquote>
Whatever
comes between <blockquote> and
between </blockquote> will
immediately become indented. If we wanted to indent multiple
times, we just pile on the tags in the same way we did with
lists.
Now,
try your hand at it. Produce a few lists - both ordered and
unordered! Also, give indenting a shot (for both lists and
normal text).
Suppose
you want to link to a piece of text within a very large document.
How do you accomplish this? You have to use something known
as an "anchor."
First,
some theory. An "anchor" is like a bookmark. You
can place it anywhere within your page. It's completely invisible
to the eye and takes up no space in your document. Once your "anchor" is
set, you simply link to it and anyone who clicks that link
will fly to where that anchor is located. For example...
Click
here to read more!
...just
having a little fun! Nice effect, right? The cool thing about
anchors is that to set them, you need the <a> tag
(making a cameo appearance) and to link to them, you also
need the <a> tag!
Here's
how to set them...
Anywhere
in your document simply type this code:
<a
name="Adam">
Done.
You can replace "Adam" with whatever name you want,
of course. This creates your anchor.
Now,
to point to your anchor, simply create a regular text link
that's targetted toward a "#" sign followed by
the name of your anchor (in our case, it would be "#Adam").
It's easy to understand what's going on. When you just create
a link to the "#" sign, it points to the document
the person has opened. The anchor name after the "#" sign
tells the person's browser to go to the anchor within the
currently opened document.
<a href="#Adam">Click
here to visit Adam!</a>
We
can also link to an anchor on another page! We're not limited
to the same page with them. Here's the code to do that.
<a href="http://www.yoursite.com#Adam">Click
here to visit Adam!</a>
You
simply type the site's URL followed by the "#" sign.
Voila! Here's some space if you want to practice using anchors.
Congratulations
for getting through this tutorial! You now have a very strong
foundation for coding HTML. I sincerely hope you enjoyed
this tutorial and encourage you to continue your studies
of the subject!
If
you want to practice your newly attained skills by creating
a professional website, I highly recommend Velegant
Web Hosting. Free with every account, you'll also get
a guide on how to apply the HTML you've learned here to actually
design your site!
Previous
Chapter | FounderWeb.com |