Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On....

About HTML, XHTML and HTML5

HTML (Hyper Text Markup Language) and its more recent incarnation, XHTML (Extensible Hyper Text Markup Language) is the central core on which all Web pages are built. Although there are new types of technology and coding options, including PHP, ASP, XML and others, traditional markup language is the place where "all things Web" starts.

At this time the latest version of HTML is called "HTML5" and it is coming into use, although it is not "official" yet. Each browser update seems to incorporate more HTML5 capabilities. In the tutorial we will discuss many aspects of HTML, XHTML and HTML5. In most instances there is no need to differentiate between the three. However, when the requirement arises the variations will be noted.

Some Web editing software publishers claim that it is not necessary to know HTML if you use their programs to build Web pages. However, this is rarely the case in actual practice. In almost every instance at least some knowledge of HTML is helpful.

In this tutorial we will guide you through the basics of writing HTML code. It is important to realize that there is no better way to learn and understand the code than to actually write and use it. This tutorial will get you started on your first steps toward becoming knowledgeable about the code.

NOTE: You may download a printable copy of this tutorial here in Adobe Acrobat (PDF) format.

You may expect this tutorial to take about 45 minutes to 1 hour if you work through it quickly. To fully explore it will take 1 hour to 1 1 1/2 hour.

Technique

Many people try to write Web page code as if they were creating a term paper. They start at the beginning and continue on through the middle to the end in a linear fashion. HTML code consists of two types of tags. There are the container tags and the single part tags, often called "non-container" tags.

Container tags have a opening part and a closing part with the "stuff" that the tag controls inside. An example is the tag that creates bold text, <strong></strong>. <strong> is the opening part and </strong> is the closing part.

If we write a code snippet it might look like this, "<strong>This is bold</strong>" and you can see the bold text in between the tag parts.

An example of a single-part tag is the line break, <br /> which merely stops a line of text at a specific point. This is used where a line must end after a particular word.

Because Web pages will have lots of code, trying to remember which tag has been opened or closed can be extremely difficult. The best technique for writing code is to make both the opening and closing parts at the same time, and THEN insert the material between the tags. This prevents the problems that arise when a tag is accidentally left unclosed and is the technique that will be used in this tutorial.

Single-part tags can be inserted as required anytime.

Tools

Writing HTML and XHTML code can be done simple word processor. But it is important to note the average code write should never use a processor such as Word, WordPerfect, OpenOffice, or similar. These "high end" word processors are too smart and will try to insert their own formatting codes.

The best software to use is also the most basic. NotePad is a perfectly suitable tool for writing HTML. Some programs that are specifically designed to create Web pages, such as Dreamweaver, have special HTML writing functions that allow you to create straight code. There are also programs such as HTMLKit that function as "code insertion" programs where the user doesn't necessarily write the code, but rather instructs the program to insert blocks of HTML. Even though these programs make writing code easier, it is still necessary to know the code.

Other programs, such as BlueFish and Aptana, are very sophisticated code writing programs that are far more advanced than HTMLKit are are geared toward those who prefer working with raw code.

In short, there are many options for writing HTML. There is no right or wrong. Instead, it is matter of finding which technique and software you prefer.

In this tutorial we suggest that you use NotePad or a similar program (if you are not a Windows user).

Web vs. Print

We know that trying to do the tasks and follow the examples online at the same time may be difficult. We have a printed version of this tutorial that you may download here. You may then read printed version and perform the steps on your computer.