The HTML Lab
HTML (HyperText Markup Language) is the language of the World Wide Web. It is a page-description language that utilizes a limited number of predefined markup tags to describe how a web browser should display the contents of a web page. Written in pure ASCII, HTML can be easily understood. A subset of the SGML (Structured Graphics Markup Language) meta-language, HTML provides the tools we need to publish information on the World Wide Web.
The HTML language was developed by Tim Berners-Lee in 1989 while at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland. The language was given a boost when it attracted the attention of NCSA (the National Center for Supercomputing Applications) in 1992 and their release of the first graphical browser "Mosaic" in 1993. HTML has undergone a number of revisions and updates over the years moving through HTML 1.0, HTML 2.0, HTML 3.0, HTML 4.01, and the current XML specification.
At the heart of HTML is the markup tag. These tags (and their associated attributes) are placed at the beginning and (usually) at the end of a section of text. They are interpreted by the browser to form the visual richness that characterizes the Web. Learning to use HTML will give you the opportunity to add your voice to many around the globe already communicating with this new, exciting medium.
Most HTML tags are paired with an opening tag and a closing tag.
HTML markup tags are always enclosed between a left angle bracket (<), (a ``less than'' symbol to mathematicians) and a right angle bracket (>). Tags are usually paired with an opening tag (i.e. <title>) and a closing tag (i.e. </title>). The ending tag looks just like the starting tag except that a forward slash (/) precedes the text within the brackets. The text between the brackets declares both the tag and it's attributes (if any). In the example above <title> tells the Web browser that the text that follows should be displayed as the page title across the menu bar of the browser.
Basic HTML markup tags fall into one of several categories: page formatting tags, structural tags such as headers and paragraphs, image tags, hyperlink tags, and tags for extended features such as tables and forms. On this page we will display several samples of the most common HTML paragraph and character formatting tags.
Certain HTML tags describe general overall aspects of a pages content such as it's title or language. These tags are inserted before the content section of the webpage proper which begins with the <body> tag. Some of the more important of these tags include (in the order they would appear):
A simple display of each of the above elements might look like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>This is a Sample Webpage</TITLE>
</HEAD>
<BODY>
<P>Here begins the content of our webpage.</P>
</BODY>
</HTML>
The next set of tags we will examine are the structural tags. Those tags which describe the structure of our document. These include the header tags, paragraph and line break tags, lists and list items, and definitions and defined terms. It is important to note that these tags were never designed to give the user much control over the appearance of the document. That would come later with stylesheets.
Headers are used in a HTML document to indicate the relative importance of an item, usually a one line section title. There are six levels of pre-defined headers available. The actually font and point size used to display each level of header is determined by the user or by the default settings of their browser. Therefore, you cannot be sure of exactly how each header will display.
Unless we tell the browser otherwise, the text we enter on a web page will stream along in one continuous line wrapping to fit the space available. To provide space between paragraphs and new lines HTML offers us the paragraph tag <P> and the line break tag <BR>. The difference between the two is that a paragraph tag will insert a extra area of space before the next line while a line break will not. For example:
This line is separated from the line above with a paragraph tag: <P>
This line is separated from the one above by a line break: <BR>
Lists and the elements they contain are another major structural element of HTML. A list begins with the <OL> or <UL> tag (which stand for ordered list or unordered list respectively) and end with the corresponding </OL> or </UL> tag. The difference between the two types of list is how they are displayed - an ordered list prefixed each list item with a number or letter ( 1., 2., 3., or a), b), c), etc.) while an unordered list will display each list item with a bullet of some sort. In either type of list the list items themselves are denoted with a beginning <LI> tag and an ending </LI> tag. Two examples:
An ordered list:
<OL>
<LI>The first item in the list</LI>
<LI>The Second item in the list</LI>
<LI>The third item in the list</LI>
</OL>
Displays as:
An unordered list:
<UL>
<LI>The first item in the list</LI>
<LI>The Second item in the list</LI>
<LI>The third item in the list</LI>
</UL>
Displays as:
HTML provides some additional tags for describing the rudimentary properties of individual words or phrases. Like header tags these tags are intended to describe more the structure of a document (how the words and phrases relate to each other) rather than its appearance. These tags which include the bold tags (<B></B>), the italic tags (<I></I>), the underline tags (<U></U>), and the preformatted tags (<PRE></PRE>).
The <B> tag begins a section of bold text which will continue until the first instance of the ending </B> tag. The <I> tag begins a section of italic text, again continuing until the closing </I> tag. The underline tags <U> and </U> defines a section of underlined text. Lastly, the preformatted tags <PRE> and </PRE> define an area of text that will include significant spaces. That is, the spaces between characters, the white space that is usually ignored by the browser will be displayed as entered. The text is displayed in a fixed-width font such as Courier by default. Commonly the <PRE> tag is used to display lines of computer code but it is useful in any situation where you need to display lines of text in specific relationships with other lines of text.
(will you teach a
wretch to live
straighter than a needle)
ask
her
ask
when
(ask and
ask
and ask
again and) ask a
brittle little
person fiddling
in
the
rain
e.e.cummings
One of the more useful references for learning HTML is the ability to view the source code (the underlying HTML) for almost any webpage out there. In Internet Explorer simply select SOURCE from the VIEW menu to load a copy of the pages underlying HTML into Notepad. Most of the secrets of any interesting webpage can be revealed in this manner.
last update:
04/18/2005
by: michael lynch
