Easy Web Page Watcher Home Page

Basic HTML Tutorial

by Patrick DiRienzo

What Is HTML

HTML or HyperText Markup Language allows you to write text into a file with format specifier tags defining how a web browser should display that text when it reads your file. The file is a plain old text file often called an HTML file.

For example, when a web browser displays a page such as this one, it reads this plain old text file, and looks for format specifier codes or "HTML tags" that are marked by the < and > signs. The general way to use an HTML tag is:

 <tag name>text you want displayed</tag name>

For example, the title for this tutorial uses a header tag <h1> as follows:

 <h1>Basic HTML Tutorial</h1>

This tag tells the web browser to display the text "Basic HTML Tutorial" as a header of level 1. If we wanted the text to be shown as a smaller header, we could choose header level 2. HTML tags can also tell the web browser to bold the text (i.e. use <b> and </b>) or to underline the text (i.e. use <u> and </u>). Note the ending tag contains a "/" as a way to tell the browser to stop displaying text according to this tag.

What An HTML File Looks Like

An HTML file is made up of two parts, the header and the body. The header contains information about the HTML file that is not displayed on the screen. The body contains everything that is displayed as part of the web page.

The basic structure then of an HTML file is:

  <html>
  <head>
       The header contains information about this
       HTML file, that will not be displayed on 
       the web page.
  </head>

  <body>
       The body contains all the text and other
       content to be displayed as the web page.  
       This content is enclosed by HTML tags.
  </body>
  </html>

Tags Used To Format Text On The Web Page

As was stated, the text displayed on the web page is placed in the body of the HTML file and can be formatted by different html tags. We will examine a few now.

Creating A New Paragraph

All of the carriage returns typed into the body section of an HTML file are ignored. So to start a paragraph on a new line the paragraph break tag <p> is used. Whenever a browser sees the paragraph tag, it inserts a blank line and starts a new paragraph. Note that a closing /p tag is optional.

Forcing Text On A New Line

The break tag <br> can be used to force text to start on a new line without inserting a line like the paragraph tag does.

Displaying Preformatted Text

It would be nice if you did not have to bother with using the paragraph and break tags every time you wanted to start text on a new line or in a new paragragh, the preformatted text tags <pre> and </pre> allow for this. The preformatted text tags allow text to be displayed just as you entered it into the HTML file by allowing line feeds and blank spaces. You can also use other tags within preformatted tags.

Other Useful Tags

Separate The Web Page Into Sections With A Horizontal Line

Use the horizontal rule tag <hr> to draw a straight line across the page to help separate different parts of the page. Simply type <hr> in your HTML file where you want a straight line to be drawn across your web page.

Putting Comments In The HTML file

Use the comment tag <!-- and --> to enclose text that you do not want displayed on the page.

i.e. <!-- Your comment goes between these tags and will not be displayed -->

Creating A Link To Other Web Pages

You can create links to other web pages by using the anchor tag <a href=> and </a>. The first element contained within the anchor's beginning and closing tag is the URL address of the web page you want to go to. The second element between the tags is a description of the destination URL that is presented to the viewer.

i.e. <a href="http://www.patdirienzo.com/index.html">Visit The Easy Web Page Watcher Home Page.</a>

Example Web Page

The following HTML text file:

<html>
<head>
       The header contains information about
       this HTML file, that will not be displayed 
       on the web page.
       THERE ONCE WAS A ...
</head>

<body>
<!-- Comment - demonstrates using various HTML tags -->
<p>Boy this is a <b>magnificant</b> HTML tutorial.</p>
<p>I could go on
<br>and on
<pre>
and on
         and on
                  and on
                           about it.
</pre>
</body>
</html>
Produces the following text on a web page:

Boy this is a magnificant HTML tutorial.

I could go on
and on

and on
         and on
                  and on
                           about it.
Home  Download  Order  Support 
Screen Shots  Sample Applications  Links