HTML Tutorial

Html is one of the most useful, easy-to-learn languages you can use. It's good for making just about anything on your web pages: nicely styled reports, resumes, questionaires, tutorials,... you can even "embed" multiple, surfable webpages on one webpage! I have one friend who writes all his reports in Html, and prints them directly from his website! Html really does do that good a job at making things look nice.

The whole structure of Html is based on "tags". A tag is anything placed inside the "<" bracket and ">" bracket. Any command is put inside these brackets. Contrary to some misconception, the command in tags can be either upper or lower case, not just upper. I find it easier to type in lower case, so that's what I use. Almost every tag must be "turned on" (just using the tag) and "turned off" (using the same tag, but with a slash, "/", before the letters). For example, the widely used "anchor tag" (for making links) would be used: <a href="destination.html"> destination</a>. It would come out something like this: destination. The only tags that I know of which do not need to be "turned off" are <img>, <br>, <hr>,and <li>. <a name="NAME"> and <p> also do not require turning off, but it's recommended. Surely, there are others besides.

• http://www.willcam.com/cmat/html/tags.html --- a quick reference list of all html tags.

• http://www.echoecho.com/documentation.htm --- a list of html tags with full descriptions.

To create an Html file, type the template given in the "Basic Structure" window below into an editor (I always use Notepad), and save it as "*.html". You usually have to save the "home page" (the main page) as "index.html" or "index.htm" in order to use it as your main page. My main page has to be saved as "default.htm". Edit, add and build to the file until you have something to see and then save it. To veiw it, open any browser (Internet Explorer, Netscape, Aol, ...) and type the file path (e.g. "c:/windows/desktop/index.html") into the "location" bar on the browser.

All colors can be specified two ways, by name or number. Using a color by name is not recommended since there are a limited number of colors that can be used. "blue", "khaki", and "purple" are examples of named colors. I prefer the hexadecimal format for numbers, which means that the relative amount of red, green or blue is specified from 0 (no red, green or blue) to F (all red, green or blue). The Html format is "#RRGGBB" where R, G and B are red, green abd blue, respectively. Thus, "#0000ff" is solid blue and "#ff0000" is solid red. If you want to get a particular color, use my Color Generator, which generates 4,096 different colors and gives the hexadecimal number for each.

There are a great number of "modifiers" which will work in most tags you would want them to work in. To use them, you simply put them inside the tag you expect it might work in, et voilą, they work!

• align='right' | 'center' | 'left' | 'absmiddle' | (maybe more) --- usually aligning text, images or tables.
• valign='top' | 'bottom' | 'center' | (maybe more) --- vertical align for text in tables, images...
• width='pixels' | '%' --- allows limits to be set for table widths, horizontal rules, images, etc.
• height='pixels' | '%' --- allows height restrictions to be made in many of the same places as the "width" modifier.
• text='#ff8833' --- changes color of text to #ff8833 in some places (tables, body...).
• bgcolor="#rrggbb" --- changes background color in table cells, whole page, layers ...
• background="image.gif" --- changes background to an image on page (maybe even table cells). Usually, if you can use the "bgcolor=" modifier, you can use the "background=" modifier.
• src="image2.gif" --- "src" means "source" and can be images or whole files, such as "src=menu.html". It's other uses are a bit obscure.
• name="a_name" --- many more advanced features, such as forms, layers and buttons can be named and called by name to accept data (this will be explored more in "forms and buttons").

• Links and Anchors

  • <a href="filename.html">Steve's pages</a> --- creates a "link" with the line under it. The "filename" can be an entire URL, or just that "filename.html" if the page and link are under the same directory. Remember to always turn off your links, </a>! There are 3 kinds of links: unvisited links, active links, and visited links. You can change the color of each link separately in the "body" tag of the document. For example, "link='#ffff00'" would make every unvisited link yellow. Likewise, "alink='#ff00ff'" would make every active link purple, and "vlink='#00ffff'" would make every visited link teal. Some browsers don't support the active link color. Try playing with the link colors in the "Basic Structure" window above. A visited link is one that has been clicked on or used already, and an active link (not supported by some browsers) is what color the link changes as you click on it.
  • <a name="anchor"> --- creates a reference which can be linked to from the same page. For example, the "Basic Structure" window above has such an <a name> tag with the name="window". This code <a href="#window">window</a> creates a link which goes to the <a name="window"> tag in the code. Try it: window.
  • < > --- <>

• Forms and Buttons

  -- Forms can be complicated, so it's best to see the example below and study it carefully. Pay special attention to how the "name=" stuff works. Accessing the various boxes and areas can be done on the page in e.g. javascript for local operations, such as my color generator, but for submitting questionaires, signing guestbooks or any private or information to be written to a file requires a Common Gateway Interface (cgi), which you won't learn about here!

  • <form> --- defines beginning of a form
  • <input> --- this is where the type of or output is specified. Usage: "<input type="__">
    • button --- makes a "button"
    • radio --- makes a radio button. Only one can be checked at once, if they have the same name , i.e. "name='n' ".
      radio onoff
    • text --- makes a "text box" which can input or output numbers or words.
    • checkbox --- makes a "checkbox" to select multiple items.
      option 1option 2
    • password --- makes a password-style text box which shows letters as "****".
  • <select> --- Makes a select box. Syntax is as follows:

    <select name="choose" size="1">
    <option value="1" selected>Fall 1999
    <option value="2">Spring 1999
    </select>

    Choose: Fall 1999 Spring 1999 Fall 1998 Summer 1998 Spring 1998
  • <textarea> --- Creates a text area where text can be written or read by using the "document.name_of_form.name_of_textarea.value=" statment inside javascript code. This allows you to even write code to the box and then run it, like on this page. You can also modify the ".value" of the text area and then run it. Any words put between the <textarea> and </textarea> tags are put directly inside the textarea as is. The only thing that will do anything inside these tags is "\n", which is a new-line equivalent to the Html <br>. To run the stuff inside the text area, I used a button with the following code inside it: <input type="button" value="Preveiw code" onClick="document.write('document.form_name.textarea_name.value');">
    <p>Forms Example<form name="f"><center> <input type="radio" name="a" onClick="document.f.b.value='input mode';" unchecked>Intput<br> <input type="radio" name="a" onClick="document.f.b.value='output mode';" checked>Output<br> <input type="text" name="b" value="initial words"><br> Try typing text into the box and put<br> it on the "put text here" button.<br> <input type="button" name="c" value="put text here" onClick="document.f.c.value=document.f.b.value;"> <input type="button" value="reload" onClick="document.f.b.value='initial words'; document.f.c.value='put text here'; "><br> <input type="button" value="Back to Tutorial" onClick="document.href=history.back();"> </center></form></p>
    

*coming sometime*

• Layers

• Frames

• Style sheets

• Maps