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

    1. 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
    2. Use Netscape, Firefox or Internet Explorer to check the appearance of the html
    3. If the web page appears as you wish, Congratulations! Otherwise back to step 1

Creating a web page

Open Your Web Browser

Adding HTML codes

<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.

    <IMG SRC="uaa.gif">

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

  • 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

    <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

  • &lt; (< less-than symbol)

    &gt; (> greater-than symbol)

    &nbsp; (  space)

    &amp; (& ampersand)

    &quot; (" 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.