Tutorial #2:
The Basics - Part II

Other tutorials
The Basics
The Basics - Part II
Working With Text
Text - Part II
Making Links
Images
Lists
Tables
CSS
CSS Text Control
CSS-P
Frames
Forms
JSS
Layers
Colors
Marquees

Valid HTML 4.01!

Okay, you've taken the first tutorial, and you want to learn some more of the basic stuff before you get into the complicated stuff. Read on...

The first thing that I want to get into is the parts that I buzzed through in the first basics tutorial. So, without further ado, let's jump right into it, shall we?

<hr> (Horizontal Rule)
I said that his adds a line. Take, for example, the line a couple rows above. Simple enough, isn't it? Now, you can do some cool stuff with lines. Take a look:

Yes, folks, that is a line. Here's how I did it:

<hr align="right" size="40" width="40" noshade>

It's pretty self explanatory. Just remember that size controls how tall the line is and width controls how long it is. Also, if you put in noshade, There isn't a nice little border cut out for you. With this knowledge, you can create dynamic lines. Sounds a little cheesy, but take a look:

See? Doesn't that look cool? However, it is a little annoying to make. Take a look at the code:

<table border=0>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
<td><hr size="10" width="10"></td>
</table>

What I used is a table. You don't have to understand tables right now, but if you want to, click here for my tables tutorial. What I want you to see is how I adjusted the <hr> tag to do what I wanted it to do. Another thing that I hope you have been noticing is that there is no </hr> tag. It is left open-ended.

Enough said with the horizontal rule; let's move on. The next tag that I buzzed by was the <br> tag. It stands for Line BReak. It's like pressing enter or return on your keyboard. Want to see it in action? Here:

H
e
l
l
o

Now is that just impressive or what? Here's how I did it, although you could figure it out yourself:

H<br>e<br>l<br>l<br>o

See? That's all there is to it. Since you don't see a line break, like you do with a horizontal rule, you don't have to worry about alignment and size and stuff like that.

There is an opposite of the line break tag. Yeah, I didn't buzz this in the first tutorial, but that's because it isn't used too often. Want to see how it is done? Ok, here it is...

(Sorry that I can't show you an example. It isn't compatible with tables. You'll still get the idea, I hope.)
<nobr>text here</nobr>

Simple enough, except that you have to remember to put </nobr> when you're done.

Have you noticed that throughout the tutorial there has been a line skipped from one paragraph to the next? How did I do it? Did I type in <br><br>? Nope. I used the <p> tag.
The p stands, not surprisingly, for Paragraph. You can use it in two different ways. Take a look...

<p>'Hello, how are you today?'
<p>'Fine, and you?'
<p>'Not too bad.'

Or...

<p>'Hello, how are you today?'</p>
<p>'Fine, and you?'</p>
<p>'Not too bad.'</p>

It really doesn't make much of a difference which one you do, although if you want to do formatting for individual paragraphs, use the second example, because you can do stuff like this:

<p nowrap>
That does the same thing as <nobr>.

<p align="center">
You can do left, center, right, or justify.

Whoops, sorry, you can't see that last sentence I wrote. You can if you look at the page source, though. Did you see it? It said: "I just added an invisible comment."

HTML comments are handy, if you use them right. You can use them to make notes about what kind of document you have, credits, or about your HTML code. They're easy to make, too. Check it out:

<!-- I just added an invisible comment. -->

There is a part of a web page that should be used, but most of the time, it isn't. I know I haven't started using it until recently. This goes on Line 1, before you even put <html>:

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">

Just so you know, that came directly from the top of this tutorial. Basically, what this does is tell the browser that this document is HTML 4.01 Transitional. HTML 4.01 is the latest HTML version. It fixes some possible bugs in HTML 4.0. If you don't put anything up top, the browser assumes 4.0 Transitional. What is transitional? Well, there are three types: Strict, Transitional, and Frameset. Strict is, well, strict. You can't have depreciated tags like <basefont> and whatnot (I don't know what that even is, it has to be obsolete). Transitional allows those tags, so it's the one you want to go with. You use Frameset when you use frames. For more on frames, click here.

If you want to have HTML documents for browsers that don't suppport HTML 4.0, you can put these in:

<!doctype html public "-//w30//dtd w3 html 3.0//en">
<!doctype html public "-//ietf//dtd html 2.0//en">

Well, that's pretty much all of the basics there are, so click here to learn how to work with text.