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.

» Horizontal Rules

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?

» Headings

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>
I'm a type 4 heading!</h4>
I'm a type 5 heading
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.

» Bullets

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...


This nice, little nugget of code would produce a very short list of DragonBall Z characters.

  • Goku
  • Bulma
  • Trunks
  • Vegeta

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...

  • Goku
  • Bulma
  • Trunks
  • Vegeta

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...


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...

    1. Goku
    2. Bulma
    3. Trunks
    4. 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).

» Anchors

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="">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.

» Farewell, Friend!

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 |