HTML Tutorial #1

I'm assuming several things in writing this tutorial.  I'm assuming you know how to use the Internet, you're familiar with what a web page is, and now you're ready to make your own.  If all this is true then, by all means, read on!

The most important thing is knowing how HTML works.  First, you must create the HTML file (which will have a file extension of either ".htm" or ".html").  Then you must upload it to a web server using FTP.  Many web servers have ftp that is accessible from a web page, meaning you can upload directly from your web browser without the use of a seperate FTP program.  However, most web servers will require that you use an FTP program to put your files on the server.  The web server should give you a web address.  Other users can now point their web browser to your web address (i.e., http://staticlounge.tripod.com).  The web browser will then download the file using HTTP.  A list of sites that offer free webspace or quality FTP programs can be found at the links page.

When the web browser opens the file, it looks for special "tags" placed in and around the text.  These tags tell the web browser to edit the text in certain ways, such as changing font, size, color, etc.  In HTML, a tag is marked by the '<' and '>' brackets.  Special commands are placed within these brackets.  The commands themselves do not show up on the page, but the web browser knows they are there.  All tags have the same general format:
<COMMAND PROPERTY=VALUE PROPERTY=VALUE>

Commands can have any number of property/value pairs (even none!) but each property must have a corresponding value.  Each tag (held within the '<' and '>' brackets) can have only one command.   Try this first example.  Scroll down to the text box below.  Paste the text into a text editor, such as notepad.  Save the file as "prac1.htm" (without the quotes).  This will force the text editor to save the file with the correct extension.  Here's the text:

<HTML>
<HEAD>
<TITLE>My First Web Page!</TITLE>
</HEAD>
<BODY>
<P>This is a simple web page, it just has text.</P>
</BODY>
</HTML>

Now, let's analyze what we've just done.   First off, all HTML documents must have 3 certain sets of tags.   All web pages MUST start with <HTML> and end with </HTML>.   With in these two tags you can put all the data for your webpage.   The <HEAD> and </HEAD> tags hold data that does not appear on the page itself.   The most common Header Tag is <TITLE> which denotes the pages title (The title usually appears at the top of the screen).   We will discuss more header tags in another tutorial.   Everything that will appear in the main part of a user's web browser is held between the <BODY> and </BODY> tags.   Note that the "/" in certain tags marks an End Tag.   An End Tag tells the web browser to stop applying the effect created by the Start Tag.   For example, the <P> tag tells the web browser to format the text as a paragraph.   When the web browser sees the </P> tag it knows that this is the end of the paragraph.   If we were to put another <P> tag and some more text, the new text would appear as a seperate paragraph.   End Tags can not contain properties or values.   They will assume the properties of the corresponding start tag.   The Header Section ALWAYS precedes the Body Section, and each may only appear once.

Almost all tags require an End Tag.   The two exceptions are <BR> and <HR>.   <BR> forces a single line break, just like hitting the Enter key.   It has no properties and does not need an End Tag.   <HR> is a Horizontal Rule, or a seperation line drawn parallel to the text.   I will discuss the specific properties of this command in another tutorial, all though it does work without any specified properties. Newer web browsers, such as Netscape and Internet Explorer will let you get away with not using certain end tags, such as </P>, but it's a good habit to use them.

Now you're ready to start making a page on your own.   Here is a list of some common tags that you can use for editing text.   Remember that each of them needs a corresponding end tag when you want to end the effect.

  • <B> - This tag makes text Bold.
  • <I> - This tag makes text Italic.
  • <U> - This tag Underlines text.
  • <A> - This tag makes a link to another page.   You must include the property HREF and a value that is the address you want to link to.
    Example: <A HREF="https://staticlounge.tripod.com/">Using This Line of Code Will Make a Link to Static Lounge</A>
  • <P> - Designates a Paragraph.   This will not indent the text, but it will create an extra blank line between paragraphs.
  • <BR> - This forces the text to drop to the next line (Like hitting Enter).  This does not require an end tag.
  • <HR> - This draws a horizontal line, called a Horizontal Rule.  This does not require an end tag.

The next HTML tutorial is available.
Get a printable version here.

Page Updated: 8/27/00