HTML Tutorial - Chapter 1: The Basics



» Terminology

Let's get started quickly with some basic terminology. HTML, short for Hyper Text Markup Language, is an extremely friendly programming language (I like to call it a fake programming language ^_^). Unlike traditional languages, such as C++ and Java, you don't need to declare variables or create loops. Instead, you simply setup what are called "tags."

Tags almost always come in pairs. They look like this:

<tag name>Type whatever you want here</tag name>

While there is no tag named "tag name", they all follow this format. That is, they're surrounded by arrows "<" and ">"

The first tag you see above is an opening tag, while the second is the closing tag. The only difference between the two is the "/" before the closing tag's name. Here it is, in bold, just to emphasize: </tag name>

Basically, your Internet browser, when it sees an opening tag, will process the tag to everything afterward until the closing tag is reached. Please note that HTML doesn't notice whitespace. For example, the two exhibits below would display the same output, regardless of what tags were used!

Exhibit A -

<tag name>

 

Type whatever you want here

 

</tag name>

Exhibit B -

<tag name>Type whatever you want here</tag name>

As you can see, white space doesn't matter - so use this fact to make your code look nice and organized, with easy-to-follow spacing.

Now, a lot of HTML is just memorizing the different tag names and their effects on the text that goes between their openers and closers.

So...while you can memorize these tags using flash cards or pneumonic devices, I highly recommend following this interactive HTML tutorial instead, which will let you practice as you're learning - the best way to secure these tags into your memory!


» Prepare Your Site

The absolute first step you should take when laying out a page in HTML is to tell the browser to begin looking for HTML code. Consider it akin to setting up your canvas right before splashing paint across it.

So start your work off with these two tags:

<html>

</html>

Absolutely everything you type should come between these two tags. You're basically saying with the first tag "Start Processing HTML" and then "Stop Processing HTML" with the ending tag.

Now, within the two HTML tags, there's a region known as "Head" and a region known as "Body." The "Head" region contains all the stuff that's not in the direct content of your site, while the "Body" region is for everything else. The "Head" region is mainly just for your site's title (that appears in the very top of your browser) and for hidden code. The "Body" is where 99% of your work will be in.

So first, after declaring that we're processing HTML, we need to declare our "Head" area! Guess how to do this...

<html>
<head>

</head>
</html>

One important note here, notice that the "Head" tags are embedded within the "HTML" tags. If you start a tag within another tag, you must close it off before the first tag ends. Think of a bulls-eye, every ring starts and ends within another. Here's an example of the formatting we did above done wrong because of not embedding.

<html>
<head>

</html>
</head>

See, "Head" is declared after "HTML" but not closed before "HTML" is closed! This is important!


» Your Site's Title

Anyway, let's begin our journey and create a page that actually has some content. Like I mentioned before, the most important thing we wish to use the "Head" area for is to announce to the world our site's title! We can do this very easily with the "Title" tag:

<title>My Site's Title</title>

Just remember though, the "Title" tag should be placed between the "Head" tags. It's going to be the only tag to use in that area.

Now, time to practice. Lay out your site in the text field below and hit the "Submit" button when you're done.

Remember to set up your canvas first!



» Adding Text

Once you've typed your site's title, you can safely ignore the "Head" for quite some time. Let's now move onto the most important part of your site: The "Body" area. Setting up the "Body" is just as easy as everything else. Here are the tags:

<html>
<head>
<title>
My Title</title>
</head>
<body>

</body>
</html>

Now, everything you type between the two body tags gets displayed in the main window of your visitor's browser. Consider this the canvas of your website. Now to start painting! Let's go!

Between the "Body" tags, simply put the following text: Hello World!

Try it!



» Spacing Text

Now, the above works fine when you want to put a sentence or a couple of words into your homepage, but what if you want to display a couple paragraphs of text? It will all appear as one giant blob without the proper formatting tags. Remember, HTML doesn't recognize white space! So even if you separate paragraphs by slamming the "ENTER" key over and over again, you'll still just get one giant blob of text with no spaces.

That is, this:

<html>
<head>
<title>
My Title</title>
</head>
<body>
Dear Reader,

I hope you enjoy this tutorial! ^_^

-Adam Founder
</body>
</html>

...will be outputted all in one line, as follows:

Dear Reader, I hope you enjoy this tutorial! ^_^ -Adam Founder

Gross!

So what do we do? Well, to create paragraph spaces, we use the "Paragraph" tag, which - how appropriate - is simply the letter "p."

<p>

Just place the "Paragraph" tag wherever you want to start a new paragraph. Using the "Paragraph" tag, let's change our letter to generate the right output...

<html>
<head>
<title>
My Title</title>
</head>
<body>
Dear Reader,
<p>
I hope you enjoy this tutorial! ^_^
<p>
-Adam Founder
</body>
</html>

And voila! Our output will format correctly. Similar to the "Paragraph" tag is the "Break" tag, which simply goes to the next line. "Paragraph" tags will go two lines down while "Break" will go one line down. Notice:

Hello<br>Goodbye

...will output:

Hello
Goodbye

While:

Hello<p>Goodbye

...will output

Hello

Goodbye

This is a very important distinction! Also note that both the "Paragraph" and "Break" tags don't have closer tags. (Well, technically the "Paragraph" tag does, but you'll find out more about that in the next chapterl.) There are only a few tags like this.

Now, roll up your sleeves and write a document that uses both "Paragraph" and "Break" tags!



» Next Chapter

Congratulations! You've passed our first chapter (hopefully you were able to work out all the examples). Our next section is going to show you how to enhance your knowledge about tags to add some great new effects to your site.

HTML Tutorial | Next Chapter