A Brief HTML Tutorial

By: Mark Noble
V 1.0

Part One: Overview

HTML stands for “HyperText Markup Language”

HTML is not a programming language; it’s a markup language.

When you write HTML code, you are simply importing raw text data and marking it up with tags that indicate where certain formatting options begin and end.

What makes a tag? Well, a tag is a word or abbreviation that represents a formatting option and is enclosed in the “less than” symbol “<” and the “greater than” symbol “>”. Examples of common tag names would be:

 
<P>
<I>
<B>
<BR>
<FONT>
<TABLE>

If you have a string of text such as “The rabid orangutan darted swiftly through the canopy”, and you insert a <B> tag before “orangutan”, you will tell the browser that from that point on, it should make everything BOLD. So the following line of code:

The rabid <B>orangutan darted swiftly through the canopy

Will yield the following text in the browser:

The rabid orangutan darted swiftly through the canopy

You’ll notice that everywhere after the <B> tag, the text is now bold. How do you fix that? Use an end tag! End tags are the second half of a tag and tell the browser where to stop applying the formatting that is caused by the first half of the tag. They look the same as the first part of the tag except for one minor difference. They contain a forward slash “/”. Here are examples of common start tags and their companion end tags.

<P>		</P>
<I>		</I>
<B>		</B>
<BR>		</BR>
<TABLE>		</TABLE>

If you add the appropriate end tag after the word orangutan, you will see the following.

The rabid <B>orangutan</B> darted swiftly through the canopy

Which will yield the following text in the browser:

The rabid orangutan darted swiftly through the canopy

NOTE: Generally, I do not like to leave space between the HTML tags and the code they affect. The reason for this is that it may be possible to apply several text formatting attributes to an invisible character such as a space ” ” which could wreak havoc on your troubleshooting efforts.

NEXT PAGE >>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s