Introduction

Creating pages for the World Wide Web is not difficult. All you need is a tool already on your computer and a little knowledge of HTML. HTML (HyperText Markup Language) is a method for transmitting formatted text, images, sounds, movies, animation as well as links within documents and to other documents. In short, it is a full multimedia presentation system. Even more important, it is device independent; that is, it does not matter what kind of computer is used either to transmit or receive the information.

Formatting and linking information in an HTML document is contained in "Tags" which are surrounded by angle brackets (< >). Creating HTML documents requires learning only a few of these tags. This tutorial will show you some of the most commonly used tags and give examples of their use. It can be used as a guide for creating your own pages. As a further guide, use the View Frame Source entry of the right-click menu of FireFox® or the View Source entry of the right-click menu of Internet Explorer® to look at the HTML coding for this page. A quick guide is also available.

HTML files are text files and can be created using any text editor, such as the Windows® Notepad® or Programmer's File Editor available at Lancaster University (old but still very useful), Notepad++ available at their site, or NotePro Lite available free at NoteTab, or with a word processor set for text output. There are programs available which are designed to speed the process of creating HTML tags, but a basic understanding of the underlying structure of web pages will give you greater flexibility in your overall Web page designs.

Reasons to Code HTML Directly

This document has been updated to reflect changes in HTML 5. Some tags from earlier versions of HTML are not supported in the strict version of this standard. A substitution guide is available for those updating older documents. Where the latest standards call for substitution of tags or attributes with Styles, a CSS tag will guide you to the proper section of that tutorial. While the Style Sheet method is preferred, the older tags will work properly in all current browsers.


Legend/Overview

Bold tag and attribute names
Italics parameters
{ ... } optional attributes
[ ... ] optional parameters
value1|value2 choice of parameters or attributes

In past iterations of this tutorial, a lot of space was devoted to which browsers supported various functions. This is no longer necessary. Most up-to-date browsers are standards compliant. If you still use Internet Explorer, consider switching to another browser. Otherwise, keep your browser current and it work well. This is not to say that every browser will render every page identically. There are still some differences and web pages should be tested against multiple browsers.


Overview of HTML Document Tags

HTML uses "tags" to show the formats and relationships. "Tags" have the form <tag_text   attribute_text="parameter">. The tags define the formatting or use of the text following them or between pairs of them; for example, <b>text</b> makes text appear bold. tag_text should be in lower case and all parameter should be enclosed in quotation marks. Tags generally appear in complimentary pairs of the form:

<tag>text</tag>

This is true of most but not all HTML tags (e.g. the line break tag <br>). Tags that appear singly are called "unary" tags. For XHTML compliance, unary tags must be closed. This is generally done by adding a space and a right slash before the ending greater than sign. Thus the <br> tag of HTML becomes <br /> for XHTML. The other major effected tags are the horizontal rule tag and the image tag. HTML 5, however, does away with closing of unary tags, so this practice may now be discontinued.

One special type of tag is the comment tag. It has the form:

<!-- comment text -->

Comment text is not shown by the browser. It can be used for adding comments to your code and temporarily removing sections of a document while preserving the structure. HTML tags within comments are ignored. Comments are also used with Cascading Style Sheets to mask their code from browsers that do not recognize style sheets. NOTE: if an individual uses the View Source feature of the browser, they will see the comments.

Web addresses or URLs can be written as either the complete URL for the (e.g. "http://www.geocities.com/olli_web_class/test.gif") or the "relative address" to the file (e.g. if the file referencing the address were in the /olli_web_class/ directory, the relative address to the image file would be "test.gif"). Addresses must always be surrounded by quotation marks. A third way is to set a base address for all URLs. This is done with the <base>. The tag has the form:

<base href="url" {target="_blank|_self|_parent|_top|frame_name}" />

The base tag has one required attribute and one optional attribute.

 

All tags support the following attributes:

{style="Cascading_Style_Sheet_Attributes" class="Cascading_Style_Sheet_Class" id="unique_ID" title="text_for_tooltip"}


Next Lesson Next Page

HTML Home