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 Sourceforge, 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
When referring to which browsers Support a particular tag, a two letter code plus a version number will be used (e.g. IE9=Internet Explorer® version 9). The version number indicates the version tested to. All subsequent version should also support the tag. The browser codes are:

Internet Explorer® IE
Firefox® FF
Opera® OP
Safari® SF
Chrome® CH

All browsers should be kept up-to-date to minimize vulnerabilities to viruses and spyware. In that vein, Netscape® and Flock® are dead; if you still have one of these browsers on your computer, you should remove it. It may have vulnerabilities that will never be corrected.

Internet Explorer® is currently the standard browser with the vast majority of the market. All pages must work with it. Version 10 is now standards compliant, and is generally less vulnerable to attack than earlier versions; however, it does not have as flexible of addon capability that other browers have. Users of Windows XP are still stuck with IE8 which does not support the features of HTML5 or CSS3. There are also other browsers such as Avant®, that are built on the Internet Explorer® platform. For these browsers, compatibility with web pages will be identical to your version of IE. These browsers may offer some features that IE does not such as suppression of Flash® animation.

Firefox® is standards compliant and all new pages should be tested against it. It is available for Windows, Mac, Linux and Android. FireFox can be extended with add-ons. My two favorite add-ons are an ad blocker and one that selectively blocks those annoying Flash® animations. There is also a portable version of FireFox® (and Thunderbird®) which can be run from a flash drive allowing you to take all of your settings and extensions with you wherever you go while maintaining your privacy. The latest versions have been disappointing in terms of stability and causing addons to fail when the browser is updated. Several variations of this browser are available which will have the same standards compatability as Firefox®:
SeaMonkey® is an updated version of the Netscape® and Mozilla® suites. It integrates the FireFox® browser and the Thunderbird® email program (a superior and less vulnerable replacement for Outlook Express/Windows Mail®). It does not have as many addons as Firefox but is updated regularly and is safe.

Opera® is fast, fairly light on system resources and highly standards compliant. It is a good browser. It is available for Windows, Mac, Linux and Android. Among its many features is an excellent built-in RSS reader and capabilities for ad blocking. The latest versions have flexible addon capabilities. Versions before 13 use Opera's own rendering engine. Later versions now use the same rendering engine as Chrome. As of version 18, Opera had not worked out all of the bugs with its new design.

Safari® is Apple's entry in the browser market. It has been around for years on the Mac®. There was a version developed for the Windows® platform, but development of that version has been discontinued and PC users should abandon it as with all browsers which are not updated. It is based on the Webkit engine used in the Chrome browser and has the capability for addons.

Chrome is Google's entry in the browser wars. It is light, fast and has a minimalistic interface. It has excellent standards compliance. It has a wide variety of addons including ad blocking and flash blocking. It is available for Windows, Mac, Linux and Android. The browser is updated regularly and is among the best available although there is some concern about its close ties to Google which may store user information. Chromium is an open source browser built using the same technology as Chrome but without the ties to Google. Chrome is actually built on the rendering engine of Chromium, so Chromium will also be somewhat more advanced than Chrome. Other browsers based on the Chromium rendering engine include SRWare Iron and Comodo Dragon which are touted as having fewer security concerns than Chrome


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