HTML Basics

Original tutorial by Rich Orwig

What follows are step-by-step instructions for one way to write a web page. There are easier methods available but this is a stable direct method. You are not obligated to create your page using this manner. However, for this assignment you may not use editors such as FrontPage or Netscape composer which write the HTML for you. This tutorial refers to HTML 4; the current standard is actually XHTML 1.0, but if you learn the basics here it is not very difficult to learn XHTML.

You will be in control of how the end product looks and are limited only by your imagination.

As with any art, you need to consider your audience. As you may have found, there are some good, easy to read web pages and there are some awful ones.

The key in web writing is space. Clear open space to give the reader's eyes a chance to remain focused on the written words rather than be distracted by colors or verbiage.

The following text in this document describes the process of creating a web page and lists some of the tags. However, this document does not give examples of using the tags. For examples, I refer you to Dave's HTML Tutorial.

The Iterative, Creative Process

Use a text editor like notepad on Windows to create/edit the html using:
- HTML File Basics
- Text Options
- Images
- Colors
- Lists
- hyper-links
- Other codes
Use Netscape, Firefox or Internet Explorer to check the appearance of the html
If the web page appears as you wish, Congratulations! Otherwise back to step 1

Creating a web page

Open your text editor and save a blank file using the name of the file you want to create with the extension of ".htm" or ".html". If you are using notepad, note that it might save using the extension ".txt" instead of the ".htm" or ".html" extension that you will need for your webpages.

Open Your Web Browser

Pull down file to "Open File in Browser" or press Ctrl O to open. and browse to your file. Alternately, you may be able to drag the source code file into your web browser.

Adding HTML codes

Now let's make it an HTML document. Go back to your editor and add some codes.
Element names and attribute names are not case sensitive: attribute values are.
Basic Outline Codes

Web documents start with the text body all enclosed in <html>...</html>

The header is enclosed in <head>...</head>. The title must go in the header.

The text body is enclosed in <body>...</body>

Here is a template that illustrates using the tags to set up the general document structure:

          <html>          
    <head>          
    <title>Title of my web Page</title>
    </head>         
    <body>          
        Body here...
    </body>         
    </html>
Comments are written as
Text Options

<H1> largest text </H1>

<H2> large text </H2>

<H3> medium text </H3>

<H4> small text </H4>

<H5> smaller text </H5>

<H6> smallest text </H6>

<FONT face="fontname" size=+value color=color> Change Font </FONT>

Emphasis Options

<b>...</b> Bold type

<br> Forced linebreak

<i>...</i> Italic type

<tt>...</tt> Typewriter type

Check the Changes:

Try entering some tags and text for your web page, save your changes, and jump back to your browser and click on the Reload icon to show your changes.

Images and Colors

If you want to add an image you need to have an image. You can create your own image with a paint program, or grab something from online clip art (to save, right-click the image and select save). NOTE: Image files must be located in the same directory with your html file or a valid path to it must be given as part of the filename.

Go back to your browser and add the image code. Save, and go back to the browser to view.

Colors for type and backgrounds. Use conservatively. Ideally, text and background must be of sharply contrasting colors, thus easier on the eyes.

The HTML coding is fairly simple.

For the background color use this: <body bgcolor="#FFFFFF">

This produces a page with a white background because the color code

#FFFFFF is the code for white.

To change the text color, use the follow: <body text="#000000">

This produces a page with black text because the color code #000000 is the code for black.

The way the colors work is the first two hex digits is the intensity of Red (00-FF), the next two is the intensity of Green (00-FF) and the final two is the intensity of Blue (00-FF). Combinations of the red, green, and blue result in different colors; e.g. (Red and Green gives yellow, #FFFF00).

You can also use textual names for colors, e.g. "red", "purple", etc. Here is a link to HTML Color Codes.

Lists and Lists

<ol>...</ol> Ordered lists, items numbered consecutively

<ul>...</ul> Unordered lists, items bulleted

<li>...</li> List items within ordered and unordered lists (must contain paragraphs or other structural markup)

Hypertext links

To add a link use the code: <a href="url">...</a>

Be sure to type the name of the link (where the " ..." is) so that it is underlined and people know to click on it.

To link to another spot on your page: It needs two things -- a label at the place where you want it to go and links to get there whereever you want them in your page. A common use is to put "Top" at various places to quickly go back up to the top of your page. This would call for a label at the top and pointers at one or more places within the html document. (see the "useful" example in the sample.htm)

label: <a NAME=labelname</A>

link: <a HREF=#labelname>Back to label</A>

Table

Tables are a staple of today’s web pages, since they can be used to control with a fair degree of precision where text goes on the page. Tables are used extensively on many web sites to bring structure to a page. There are small tables and big tables- small ones are often used simply to encompass and organize a section of the page, such as a chart or spreadsheet-like data; large ones are used to bring organization to the entire document (as seen in the front page of Yahoo). Here are the tags to create tables:

<table></table>   - Defines a table

<tr></tr> - Defines a row within a table

<td></td> - Defines a column within a table

Define the rows first, then the columns. You may use the following attributes to modify your tables:

border=?    Specifies the border width of the table, in pixels.

width=?    Specifies the width of the table or cell, in pixels or %.

height=?    Specifies the height of the. table or cell, in pixels or %

cellpadding=?   Specifies the distance between the cell and the content

cellspacing=?   Specifies the spacing between each cells, in pixels.

Special Characters

< (< less-than symbol)

> (> greater-than symbol)

  ( space)

& (& ampersand)

" (" unidirectional typewriter-style "double quote")

With the basics down, explore the source code of other pages:

You can always look at what someone else's code by viewing the document's source. When in your browser pull down View to Document Source. There you will find the HTML code used for what you see in the browser. Yes, you can copy and paste into your document, too!

To explore HTML in more detail and to try a hand-on tutorial, take a look at Dave's HTML Tutorial.