LIS 390W1A - Introductory (X)HTML Tutorial

This tutorial is currently unfinished.

One would think that there are many people who have written much better HTML tutorials than I will ever be able to. While there are some really good ones out there, most of them have been written over 5 years ago, and few mention or deal seriously with XHTML. Many still advocate the use of tags which are being depricated in newer versions of HTML (such as the <font>, <b>, and <i> tags). Therefore, I have written this page as a quick introduction to get you started with basic HTML.

Resources

Especially for more advanced HTML, you'll want to use other resources than this tutorial. There are some good resources on the web which will both help you get started, and provide material which supplements this tutorial:

• W3 Schools - An excellent resource for learning about HTML and CSS, W3 Schools has a page for every HTML tag and every CSS property, as well as tutorials, examples, and quizzes. It does have some tutorials, but I find it most useful as a reference source, for a tag I have heard about but do not know how to use.
  • I use W3 Schools most often by googling an HTML tag or CSS property, usually in the following manner: "HTML ul", "CSS font", etc. Usually the W3 Schools site is in the top 5 hits, and I go there first, because they are pretty exhaustive, and I know what to expect.
  • You can also use this technique to guess tag or property names. By typing in your best guess as to the name, and seeing whether the W3 Schools site is in the top 10 hits, gives a good indication of whether the tag or property name exists or not. This method of using W3 Schools is a bit less reliable, but can prove useful at times.
• Dave Raggett's Getting Started with HTML - This is one of the few resources that has been updated to present XHTML-compatible materials, and to start you off with good coding practices. I highly recommend this tutorial. It is best used to show you basic HTML techniques, and to introduce you to the most commonly used tags. In my opinion, the only thing lacking is a narrative flow which can show you how to put all of what he presents together. This narrative flow is what I am trying to provide by creating my own tutorial.

This section is the same as Lab 1. If you have already completed Lab 1, you might want to skip to the next section.

Lists are exactly what they sound like. They are sets tags which allow you to create list structures in your text. There are actually three types of lists: ordered lists, unordered lists, and definition lists. (Lists are also covered to some extent in Lab 3.)

Ordered Lists

Lists where the list items are numbered.

Ordered lists start and end with the <ol> tag, and their list items are defined with the <li> tag. For example:

	<ol>
	    <li>If you add my number</li>
	    <li>to my number</li>
	    <li>you get my number!</li>	    
	</ol>
	

Will appear as:

1. If you add my number
2. to my number
3. you get my number!

Unordered Lists

Lists where the list items are bulleted.

Unordered lists start and end with the <ul> tag, but their list items are also defined with the <li> tag. For example:

	<ul>
	    <li>If you add my dot</li>
	    <li>to my dot</li>
	    <li>you get two dots.</li>
	</ul>
	

Will appear as:

• If you add my dot
• to my dot
• you get two dots.

Definition Lists

Lists of terms and definitions (like in a glossary).

Definition lists are a bit more complicated than ordered and unordered lists. They start and end with the <dl> tag, and each item in the definition list has two parts, a term defined by the <dt> tag and a definition defined by the <dd> tag. For example:

	<dl>
		<dt>Ingbert</dt>
		<dd>a person who needs to work on developing better examples.</dd>
		<dt>Student</dt>
		<dd>a person who is subjected to those examples.</dd>
	</dl>
	

Will appear as:

Ingbert

a person who needs to work on developing better examples.

Student

a person who is subjected to those examples.

Is this form familiar? It should be, as the description for each type of list in this section is started by a definition list of one item that defines the type of list in question.

Nesting Lists

It is perfectly valid to nest lists inside one another. For example:

	<ul>
	    <li>When you nest lists
	        <ol>
	            <li>You put one list inside of another</li>
	            <li>And you can do this as many levels as you want
	                <ul>
	                    <li>See?</li>
	                </ul></li>
	        </ol></li>
	    <li>But if you are
	        <dl>
	            <dt>kind</dt>
	            <dd>you will use proper indentation so that people (both yourself and
	            others) can read your source-code without getting confused</dd>
	        </dl>
	    And notice, text can appear here too if need be.
	    </li>
	</ul>
	

Will appear as:

• When you nest lists
  1. You put one list inside of another
  2. And you can do this as many levels as you want
     • See?
• But if you are

  kind

  you will use proper indentation so that people (both yourself and others) can read your source-code without getting confused

And notice, text can appear here too if need be.