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
Creating a web page
Open Your Web Browser
Adding HTML 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>
Comments are written as <!-- A comment -->
<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>
<b>...</b> Bold type
<br> Forced linebreak
<i>...</i> Italic type
<tt>...</tt> Typewriter type
Check the Changes:
Images and Colors
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)
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> - 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.
> (> greater-than symbol)
& (& 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.