HTML Tutorial - Chapter 1: The
Basics
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!
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!
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!
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!
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!
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