Search

 
Search by Category

Advertisement

Articles

Home Lessons

Lesson 2

« Previous

Next »

Content:


Hypertext Markup Language

As we discussed in the first lesson, HTML is a way for you to suggest to other people's computers exactly how to display your webpage.

By using HTML, you're able to leave little invisible sets of instructions all over your webpage that explain what your page should look like.

How It All Works

A webpage, in it's raw form, is simply a text file ending with the suffix .html or .htm

If you display this file on your computer in it's raw form, you'll see nothing but text interspersed with HTML tags. We're talking no background, no pictures of your cat, no really cool animations, nuthin but text and code. B O R I N G !!!

This text file, in all it's rawness, is often referred to as the "source code" of a webpage.

So how does this boring and dry text file become a webpage with color and life and vitality?

You have a program on your computer that takes these text files, reads them in the raw, and displays them on your computer's monitor in whatever way the file's HTML suggests. This program is called a browser.

It's All In The Angles

If you look at the source code for any webpage, you'll notice different HTML commands interspersed all through the document. These commands are called TAGS and tell the browser how to display the text, layout, and images of the document.

HTML tags are easy to recognize because they are always between a lesser than sign and greater than sign, or as I like to call them, Angle Brackets.

 

<Like This>

 

The first you should learn is the BOLD tag.
IT's simply the letter "B", sandwiched between two angle brackets and looks like

 

<B>

Tags almost always work in pairs. There are a few exceptions we'll discuss later, but most of the time there is an opening tag and a closing tag. The closing tag for Bold looks like

 

</B>

Notice it's the same as the opening Bold tag except for the /mark. All closing tags are like that. They look the same as the opening tag except for the added slash right after the lesser than sign. Any text placed between the opening and closing Bold tags will look thicker than the rest of the text on the page.

 

This is NORMAL text.
<B>This is BOLD text</B>

Two more real simple tags are EMPHASIS and BIG.

 

<EM>EMPHASIS</EM>
<BIG>BIG</BIG>,

Are you catching all of this?

One thing I should probably mention at this point is that html tags don't give a hoot if you type them in lowercase or CAPITAL letters or even a mix of big and small letters. Everything inside the angle brackets get's read the same way.

Parts Is Parts

Every Webpage written in HTML has essentially two parts:

 

The Head     The Body

Now, having told you that, let me tell you about one more tag before going on.

 

<HTML> </HTML>

The HTML tag tells your computer that everything between these two tags is an HTML document. You'll always begin your page with the opening HTML tag and end it with the closing HTML tag.

 

<HEAD>    </HEAD>

The very first part of your document is the Head.This is where you'll put the title that comes up on somebody's navigation bar when they call up your page.

 

<BODY>    </BODY>

After the Head is the Body. This is the real meat of the page. It's where all your visible text will be, and all your images and links too. Don't forget to put a body in your Homepage!

 

The Skeleton

Here is the HTML for a VERY simple webpage. See if you can figure it out using what You've learned so far. <HTML>
<HEAD>
<TITLE> THE COOLEST PAGE ON THE WEB</TITLE>
</HEAD>
<BODY>
Whoa!!!This is like so <EM>TOTALLY</EM> Cool. Like I'm writing a WEBPAGE!!!!!
</BODY>
</HTML>

 

See how these tags fit into each other? And How all the text is between the BODY tags?

Notice also how I began my document and ended it with a pair of HTML tags. Without those, Your computer won't know how to read what it's been handed.

If You want to see what this page would look like, cut and paste the above code into the Test Lab. You'll find a link to the lab at the end of each lesson. It's a pretty cool way to practice writing HTML!

At the end of each lesson, you'll find a link to the Test Lab. This is a really cool way to pactice what you learn during the lesson.

 

That's enough for Lesson 2. Create a simple page for yourself like the one above, Then, come back for Lesson 3.

See you soon!

« Previous

Next »

Practice this lesson's HTML in the TEST LAB

Advertisement