HTML: the language of the World Wide Web

Required Reading

References:

  1. interactive HTML tools
  2. HTML Tag lists
  3. HTML Specifications


Overview

In this lecture, we provide an introduction to HTML and give you opportunities to create your own HTML documents.

Web pages are written using a computer language known as HTML, which stands for HyperText Markup Language. This language allows the author to explain how the text in the page should be displayed on the page. It also allows images and other types of information to be placed on the page. HTML is a special case of a general system for marking up documents known as as SGML, which is the acronym for the Standard Generalized Markup Language. HTML is an evolving language. The current version (as of September 2000) is XHTML 1.0. The HTML marks are called tagsand they are used to define textual elements, such as headers, lists, emphasized text, images, hypertext links. Elements generally consist of text preceded by an "open tag" and followed by a "closed tag." The open and closed tags have the following forms

  <ELEMENTNAME ...>  
    text and subelements go here
  </ELEMENTNAME>
where ELEMENTNAME is the name of the element. Some elements (such as the line break element <br> and the horizontal rule element <hr>) have an open tag, but no close tag.


An example

For example, every HTML 4.01 document should have the following general form, which consists of five elements, properly nested: !DOCTYPE, HTML, HEAD, TITLE, BODY.

Press the submit button to see the webpage specified by this HTML
The page will contain the following text
on a yellow background with red letters.

Hello World!

Change the HTML and see how the resulting webpage changes.

The simple html example above shows several elements

The BODY element also has an attribute which specifies that the background color of the page should be yellow and the text should be red. Attributes appear inside the start tag of an element and are used to specify properties of that element. Also, note the syntax for specifying a comment is slightly different. The start element name is !-- and the comment follows the element name and ends with -->.

In practice, web browsers are designed to display web pages for any version of HTML and indeed, the most useful web browsers will even attempt to display pages which contain ungrammatical HTML. For this reason, most browsers will allow you to eliminate the !DOCTYPE, HEAD, TITLE, and BODY tags. So we could get almost the same effect for most browsers by simply writing "Hello World! in the HTML file without any tags. Try this on your browser by deleting the html in the demo page about and replacing it with "Hello World," then press submit. What happens on your browser?

Many browsers now contain page creation software which will allow you to create your own pages without having to learn HTML. Nevertheless, if you want to understand how web browsers work, you will need to understand the syntax and semantics of HTML.

One of the best way to learn how to create HTML documents is to find pages you like and then see how those pages were created. Most browsers provide a menu item for viewing the SOURCE of a page. This will allow you to directly view the HTML specification of which ever page you are currently viewing.


The HTML demo page

You can interactively experiment with html tags using the html demo windows that are sprinkled throughout this webpage. There is also a standalone HTML demo page if you want to link to it from your page.

These demo windows allow you to type in html code and then press the "submit" button to see how it looks. Try it now

To change your html, you hit the "back" button, modify the code, and hit the "submit" button again.

You can also experiment with HTML by creating a document on your local hard drive using the editor of your choice. Save the document in a file named "test.html" and save it as "text". Then, in the File menu of your browser, select the "Open Page" option, and specify that the file "test.html" should be opened. This will cause the browser to load in your page. You can then bounce back and forth between your editor and the browser to see how the page is developing. This is the usual way to go about build a web page. However, for learning html, we provide a simpler method on this page in which you just type HTML into the textarea and hit the submit button. The drawback is that you can't save your html in a file unless you select it with the mouse, move to an editor, and paste it into a file.


The Basic HTML elements

Headings

There are six levels of headings with tag names h1, ... ,h6, where h1 is the largest and h6 the smallest. These are used to divide a web page into chapters, sections, subsections, etc.

Paragraphs

Paragraphs are created using the <p> tag. The end tag for a paragraph is not required, but it can be useful if you want to add some attributes to the paragraph (e.g. centering it).

Lists

HTML offers several different kinds of lists. Unnumbered lists have the following form

The end tag of the "li" element can be omitted.
The HTML above generates the following unnumbered list:

  • First element
  • Second element
  • Third element

For numbered lists the same syntax applies,
but the element name is "ol" instead of "ul".
This results in a numbered list as shown below

  1. First element
  2. Second element
  3. Third element

As an exercise try embedding a list in a list,
i.e. put an ol list inside the second li element of the ul list in the demo window above,
and the press submit to see how it looks.
Also, try to put in some headings, paragraphs, and text.

Definition lists have a different syntax. Each list element consists of two parts: a term to be defined, and the definition. These are indicated by the "dt" and "dd" tags respectively. The list is begun and ended using the "dl" and "/dl" tags.

Press submit to generate the following list:

First term
Definition of first term
Second term
Definition of second term
Third term
Definition of third term

Try modifying the list to add a fourth term.
Then try to create a three part definition
for the second term (using a nested ol list).


Linking

Hyperlinks are formed using the "A" element where the "href" attribute specifies which page is linked to the hypertext inside the element. For example,

Try modifying the links to have them jump to other pages.

For a more interesting example, consider the of following.

Try modifying the links to have them jump to other pages.

In general, hyperlinks have the form

  <a href="PROTOCOL://DOMAINNAME:PORT/FOLDER/FOLDER/.../FILE.EXTENSION#POSITION>
  TEXT THAT APPEARS IN THE HYPERTEXT LINK
  </a>

where


Images

Images are included using the "img" element and the URL of the image is specified using the "SRC" attribute. For example, to include the following picture of my son
such a precious baby!


I used the following HTML (without the mandatory html,head,title, and body of course.

As usual, you can modify this html and see what happens. Change the "alt" text, push "submit", and then move your mouse over the picture and your new text should appear. Try to enclose the image in an anchor tag <a href=...>, so that when you click on the picture you go the cs2a home page!