Eazy HTML - So eazy it's Child's Play

Quick Menu

About HTML
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13

Advanced

1. Creating your First HTML Page

WHAT ARE HTML TAGS?
When a web browser displays a web page such as this page you are reading now, it simply reads from a plain text file, and looks for special codes or "tags" that are marked by the < and > signs. The general format for a HTML tag is:

    <tags_name>Some text in here</tags_name>

As an example, the title for this section uses a header tag:

     <h3>Creating your First HTML Page</h3>

This tag tells a web browser to display the text Creating your First HTML Page in the style of header level 3 (We'll learn more about these tags later). HTML tags may tell a web browser to bold the text, italicize it, make it into a header, or make it be a hypertext link to another web page. It is important to note that the ending tag,

Site Stats

There are 2 users online

click to see where

70,168 total unique visitors

231,541 total pageviews

85 visitors in the last 24 hours

79 total visitors today

214 pageviews today

This page has been visited 5,936 times

get this script

Most users online at once:
41 on 04/10/2005

    </tags_name>

contains the "/" slash character. This "/" slash tells a web browser to stop tagging the text. Many HTML tags are paired this way. If you forget the slash, a web browser will continue the tag for the rest of the text in your document, producing undesirable results (as an experiment you may want to try this later).

NOTE: A web browser does not care if you use upper or lower case. For example, <h3>...</h3> is no different from <H3>...</H3>. BUT as a rule of thumb practice coding you HTML tags all in lowercase.

If you make a typographical error in HTML your computer will not "bomb" or "crash" the system, your web page will simply look wrong. And it is quick and easy to go inside the HTML and make the changes to correct it.

Also, an interesting aspect of HTML is that if the browser doesn't know what to do with a tag, it will simply ignore it! For example, in this document you are viewing, the header tag for this section really looks like this:

    <shaking><h3>Creating your First HTML Page</h3></shaking>

but since your browser probably does not support a <shaking> tag and there is no such tag in HTML your browser simply ignores it.

OPENING YOUR WORK SPACE.
To complete the lessons in this tutorial, you should create a second web window (this allows you to keep this window with the lesson instructions open and one window as your "workspace"), plus open your text editor application in a third window.

Here are the steps for setting up your "workspace":

First, open a new folder in your My Documents Folder or on your C Drive and name it Workspace or My lessons or what ever you like.
Next, open your text editor.
If you are using a word processor program to create your HTML, be sure to save in plain text (or ASCII) format.

If you are just starting out, I STRONGLY recommend that you use the simplest text editor available -- Simple Text for the Macintosh or the Windows NotePad. Why can't I use one of those fancy HTML editors? Well it is a sound instructional design that you should first learn the concepts of HTML and THEN look for shortcuts or helpers like an editor that will make the work less tedious.

CREATING YOUR HTML DOCUMENT.
A HTML document contains two separate distinct parts, the head and the body. The head contains all the information about the document that is not displayed on the screen. The body then contains everything else that is displayed on the screen as part of the web page.

The Basic structure of any HTML document looks like this:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
       <!-- header info used to contain extra information about
           this document, not displayed on the page -->
      </head>

      <body>
  
        <!-- all the HTML for display -->
                :      :
                :      :
                :      :
       </body>
     </html>

The Very First Line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

is not technically required, but is a code that tells the web browser what version of HTML the current page is written in and makes validating your html much easier if the DOCTYPE is inserted into your document.

Enclose all HTML content within <html>...</html> tags. Inside is first your <head>...</head> and then the <body>...</body> sections.

Also note the comment tags enclosed by . The text and any information between the tags is NOT displayed on the web page but is for information and references to what the code does, or how the code works, that will be good use to you or anyone else who might look at the HTML code behind the web page.

Here are the steps for creating your first HTML file. Are you ready?

If it is not open already, launch your text editor program.
Go to the text editor window.

Enter the following text (you do not have to press RETURN at the end of each line; the web browser will word wrap all text) but for read ability it is recommended:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Eazy Space Tours</title>
  <!-- written for the Eazy HTML tutorial by
          Chris Bland November 30th, 2004 -->
 </head>

 <body>
  <!-- all the HTML for display -->
    In this lesson you will use the Internet to research 
    information on the inner and outer planets Venus &
    Uranus and then use our results in our web page.

 </body>
</html>

NOTE: Look where the <title>...</title> tag is located. It is in the <head>...</head> portion and thus will not be visible on the screen. What does it do? The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window.

Save the document as a file called "space.htm" by typing in "space.htm" in the file name box and keep it in the "work area" folder/directory you set up for this tutorial. Also, if you are using a word processor program to create your HTML, be sure to save in plain text (or ASCII) format.

DISPLAY YOUR WORK IN A BROWSER.

Open Your web browser
Select Open File... from the File menu.
Press Browse and, use the dialog box to find and open the file you created, "space.htm"
You should now see in the title bar of the workspace window the text "Eazy Space Tours" and in the web page below, the one sentence of <body> text you wrote, "In this lesson..."

CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look. After viewing the sample, you can close the window that opened.

If your document was different from the sample, review the text you entered in your text editor.

If you closed your text editor then simply re-open it by clicking View and then Source and the text editor will re-open for you to check your HTML code.

The most common mistake made by beginners when writing HTML is that they try using a word processing program to type HTML and then they are unable to open it in their web browser, or if it does open, the page is full of odd garbage and characters. When you are starting out, I urge you to use the most basic text editor such as the Windows NotePad or Simple Text for Macintosh. Look for shortcuts later!

If you are looking for some free/cheap alternative text editors, our recommendations are Edit Pad (for Windows & Linux) and BB Edit Lite (for Macintosh)

Top of page | Previous Lesson| Lessons Index | Next Lesson