Guides for

• New Students
• Students
• Faculty
• Staff
• IT Staff

Search the UBIT site

Questions and comments about this should be sent to: cit-webmaster@buffalo.edu
Privacy Accessibility Statement
Last updated:
Copyright © 2006
All Rights Reserved.

Documentation

HTML 

Introduction

HTML, or HyperText Markup Language, is a collection of tags that define various components of a web document. HTML can be used in conjunction with Cascading Style Sheets (CSS), as discussed later in this document.

What Is the World Wide Web?

Simply stated, the World Wide Web (WWW) is a large collection of files stored on computers throughout the world. Documents are written in hypertext, which is basically the same as regular text, but is formatted by using embedded codes (tags) that control layout, links to other documents, graphics, sounds, and animation. Hypertext is not a What-You-See-Is-What-You-Get language. It is very similar to many word processors that have embedded codes, which are not displayed in the output document. For example, when you boldface a word in a word-processing program, the word is emphasized, but the word processor does not show the code used to bold the word.

Client-Server Model

The Web is based on a client-server model. A user runs a client program, known as a browser, on either the user's own computer or on a large server like UBUnix. Browsers send network messages to servers asking for specific documents or services to be provided by the server. Using a language called HyperText Transfer Protocol (HTTP), the server processes the request, and sends the item back to the client (UBUnix, your PC, etc.) for display. The server returns the document or service, if it is available, also using the http protocol. Other protocols available are FTP, telnet, and WAIS.

Browsers

A web browser is an access program that requests HTML documents from a web server and renders these documents on a user's monitor. A browser can view HTML files that are stored locally, or when connected to the Internet, view documents on computers around the world. The most common browsers are Firefox, Netscape, Internet Explorer, and Safari.

What Is a URL?

A browser makes the entire World Wide Web available for access. However, in order to access any information on the Internet, you need to know the specific address, or URL, of that information. A URL (Uniform Resource Locator) is simply the address on the Web where you will find a specific HTML document. A URL takes the following form:
protocol://domain_name/directory_path/filename.

protocol is one of a select group of protocol names, domain_name is the name of the web server where the information resides, and directory_path is the path to the filename on that server. For example, the following URL uses the http protocol to connect to the machine wings.buffalo.edu, changing through the computing and documentation directories to arrive at the file index.shtml:
http://wings.buffalo.edu/computing/
documentation/index.shtml.

The following is a list of URL components and their definitions:

Creating a Default Home Page

By default, everyone on UBUnix has a web home page directory with a single file in it. The directory is named public_html, and the file is named index.html. The directory is located in your personal area of the UB File System (UBFS). You may edit the files within the directory via UBUnix, Public Computing Service Area workstations, or Web Folders.

Your home page is not initially viewable via the Internet. To make it viewable, visit the UBFS web page at ubit.buffalo.edu/ubfs and follow the Turn your personal homepage on or off link. Once your page is active, you and anyone else on the Web may view it at
http://www.buffalo.edu/~your-UBITName.

You should check your home page using a variety of browsers, including Firefox, Netscape, and Internet Explorer. Your default home page will look similar to:

The index.html file is specifically named to allow your home page to be viewable via the Internet. Thus, your main page file must be named index.html for the http://www.buffalo.edu/~your-UBITName URL to work correctly. You may create additional files within your public_html directory and create web links to them.

All of the files within your public_html directory must have their permissions set properly to be readable by the world.

HTML Structure

As a markup language, HTML describes the structure, content, and layout of a web document. For example, HTML is used to code headings, regular paragraphs, lists, etc. All browsers are able to interpret this language. Like all things related to the Web, HTML is continually changing.

You should be aware that if you are creating your page using one of the newer versions of HTML, your page might not display properly when using an older browser. Also, different browsers will display tags differently, especially in newer versions of HTML. Versions of HTML include: 4.01, 4.0, 3.2, 3.0, and 2.0. Netscape and Internet Explorer tags are built into their respective browsers, and should be considered extensions of HTML. Be aware that these are browser-specific, so they may not display properly on all browsers.

An HTML file is simply a plain text file that includes two types of components:

• Content - the information for display.
• Markup - the information to control the display or point to other items.

HTML files can be produced in more than one way:

• In UNIX, using a text editor (such as vi, pico, Emacs, etc.).
• On a PC using WordPad or Notepad.
• On a Mac using Simple Text.
• In a word-processor (saved as a text file or converted to HTML using a built-in converter).
• With an HTML editor (FrontPage, Netscape Suite, Dreamweaver, etc.).

Basic Syntax

Syntax is the framework of "correct grammar" for HTML. Generally, all HTML tags (formatting commands) are enclosed in angle brackets < >. Most tags need a corresponding closing tag with a slash proceeding the tag, as in </html>. White space (blank characters, tabs, and empty lines) are ignored by the browser. A tab will not indent a line, and a blank line will not separate one paragraph from another (unless you have used the preformatted HTML tags <pre> and </pre>). HTML is not case-sensitive. However, be careful when embedding links to files on UNIX, as UNIX is case-sensitive. A rule of thumb is to type all links to files in lowercase.

It is possible to see the source codes for web pages. Check the browser help files for more details. HTML can also call Java applets, run scripts, or contain JavaScript.

Tags

All formatting within the document is done by using appropriate tags. There are tags for two basic elements of the document: the header and the body.

The most important item in the header information is the title. Always have a title, and make it descriptive, but short; it is the document's label. The title will appear at the top of the browser window. The body contains all of the file's substantive content, along with numerous formatting commands.

Basic Standard Tags:

A Minimal HTML Document

Here is an example of a minimal HTML document:
<html>
<head>
<title>An easy HTML example</title>
</head>
<body>
<h1>This is a level-one heading</h1>
<p>Welcome to the world of HTML.
<p>This is one paragraph.
<p>This is the second.
</body>
</html>

HTML uses markup tags to tell the browser how to display the text. Remember that some browsers do not support certain tags. If a browser does not support a tag, it may simply ignore it, or it may prevent portions of the page from being displayed properly. Therefore, it is best to limit the use of extensions.

Document Control

The <body> tag is where the display properties of the document are set. The colors of the background and text are defined within this tab, and all of the HTML code of a package is placed between the opening and closing <body> tags.

Backgrounds

It is possible to use solid color backgrounds or images as the background for your page. The background of your document is set in the <body> tags. See the section Basic Syntax for more detailed information about the <body> tag.

If you choose to use an image as the background for your HTML file, it should look like this:
<body background="http://file.ext">

file is the name of the file and .ext is the file's extension.

Some images that you may use as backgrounds for your web page can be found at
http://wings.buffalo.edu/images/database.

If you wish to use a solid color for the background of your page, see the section Colors to determine how to identify colors by hex code. Once you know what color you would like, you can add it by typing:
<body bgcolor="#HEX VALUE">

HEX VALUE is the appropriate hex value for that color.

In order to create a white background for a document, you would use the following:
<body bgcolor="#FFFFFF">

FFFFFF is the hex value for white.

There are other items whose colors can be set within the <body> tag. These include link (the color of the link before it is clicked), alink (the color of an active link - one that is being clicked), and vlink (the color of a link you have visited). They can be applied the same ways as the bgcolor tag:
<body bgcolor="#FFFFFF" link="#FF00000" alink="0000FF" vlink="#450555">

This code would produce a white background, red links, blue active links, and purple visited links. Be careful to choose easily readable combinations when selecting colors for links and backgrounds.

Colors

Colors in HTML are based on hex values. Hexadecimal numbers contain the numbers 0 through 9 and the letters A through F. While 0 is the absence of color (black), F is the presence of all color (white). Hexadecimal values are formed of six characters: two for red, two for green, and two for blue.

By combining shades of red, green, and blue, it is possible to create a variety of colors.

Character Control

Logical styles tag text according to its meaning, while physical styles specify the appearance of a section. By using logical and physical styles, it is possible to achieve the same effect by using two different tags. This will become clearer as you progress.

Physical Styles

Logical Styles

Using Character Tags

To apply a character format, use the following steps:

1. Start with <tag>, where tag is the desired character formatting tag, to indicate the beginning of the tagged text.
2. Enter the tagged text.
3. End the passage with </tag>, ending the desired character formatting.

For example, the tag <b>, which indicates bold text, would look like:
<b>Hello!</b>

It would produce a result that looks like:
Hello!

Escape Sequences

In HTML documents, there is no way to directly call on special characters (e.g., accented characters, Greek letters). In order to generate these characters, a specific sequence called an escape sequence is used.

Four characters of the ASCII character set have special meanings within HTML and therefore cannot be used as text. These characters are the left angle bracket (<), the right angle bracket (>), the ampersand (&), and the double quote ("). The angle brackets are used to indicate the beginning and end of HTML tags, and the ampersand is used to indicate the beginning of an escape sequence. To use one of these characters in an HTML document, you must enter its escape sequence instead.

As mentioned before, escape sequences support accented characters. For example:

Sectional Control

In HTML, it is possible to control the look and feel of your web page's layout. Proper use of sectional headers to denote section or subject changes can contribute to your page's clarity, form, and readability.

Headings

HTML has six heading styles, numbered 1 through 6, with 1 being the largest and most prominent, and 6 being the smallest and least prominent. Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <h1>. The syntax of the heading tag is:
<hx>Text of heading</hx>

x is a number between 1 and 6 specifying the level of the heading. As the number of the heading increases, its size and prominence decreases.

For example:
<h1>Heading</h1>
<h3>Subheading</h3>

This would display:

  Heading

     Subheading

It is a generally accepted style rule to never jump more than one heading size in the body of your document. Note that the example given above does break this rule.

Paragraphs

Unlike documents in most word processors, hard returns in HTML files are insignificant. Word wrapping can occur at any point in your source file and multiple spaces are collapsed into a single space. There are a few exceptions to this rule. Spaces following a <p> or <hx> tag, for example, are ignored.

Notice that in the minimum HTML example, the first paragraph is displayed as:

This is a level-one heading

Welcome to the world of HTML.

This is one paragraph.

This is the second.

In the source file, there is a line break between the sentences. A browser ignores this line break and starts a new paragraph only when it reaches a <p> or <br> tag. The <br> tag performs the same operation as <p>, except that the browser does not insert a blank line after the paragraph.

You must separate paragraphs with <p>. The browser ignores any indentations or blank lines in the source text. HTML relies almost entirely on the tags for formatting instructions, and without the <p> tags the document becomes one large paragraph. The exception to this is text tagged as preformatted (<pre>). This will be explained later. For instance the following would produce identical output as the minimum HTML example:
<html><head><title>The simplest HTML
example</title></head><body>
<h1>This is a level one heading</h1>
<p>Welcome to the world of HTML.
<p>This is one paragraph.
<p>This is the second.</body>
</html>

However, to preserve readability in HTML files, headings should be on separate lines, and paragraphs separated by blank lines (in addition to the <p> tags).

Forced Line Breaks

The <br> tag forces a line break with no extra space between lines. By contrast, most browsers format the <p> tag with an additional blank line to more clearly indicate the beginning of the new paragraph.

One use of <br> is in formatting a postal address:
State University of New York at Buffalo<br>
Buffalo, NY 14260

Which looks like:
         State University of New York at Buffalo
         Buffalo, NY 14260

Lists

Lists are simple, yet effective ways to display information on a web page in an outline format. There are three types of lists in HTML: unordered, numbered, and definition. You can combine all of these types into larger, multi-layered lists called nested lists.

Unordered Lists

To make an unnumbered list, follow these steps:

1. Start with an opening list <ul> tag.
2. Enter the <li> tag followed by the individual item. (No closing </li> tag is needed.)
3. End with a closing list </ul> tag.

Below is an example of a two-item list:
<ul>
<li>apples
<li>bananas
</ul>

The output will be similar to the following:

• apples
• bananas

The <li> items can contain multiple paragraphs. Just separate the paragraphs with the <p> paragraph tags.

Numbered Lists

A numbered or ordered list is identical to an unordered list, except it uses <ol> instead of <ul>. The items are tagged using the same <li> tag. The following HTML demonstrates the use of numbered lists:
<ol>
<li>oranges
<li>peaches
<li>grapes
</ol>

This produces the following formatted output:

1. oranges
2. peaches
3. grapes

Definition Lists

A definition list usually consists of alternating a term (abbreviated as DT) and a definition (abbreviated as DD). Web browsers generally format the definition on a new line.

The following is an example of a definition list:
<dl>
<dt>Assets
<dd>Probable future economic benefits obtained
or controlled by a particular entity as a result
of past transactions or events.
<dt>Liabilities
<dd>Probable future sacrifices of economic
benefits arising from present obligations
to a particular entity to transfer assets,
or provide services to other entities in
the future as a result of past transactions
or events.
</dl>

The output looks like:

Assets

Probable future economic benefits obtained or controlled by a particular entity as a result of past transactions or events.

Liabilities

Probable future sacrifices of economic benefits arising from present obligations to a particular entity to transfer assets, or provide services to other entities in the future as a result of past transactions or events.

The <dt> and <dd> entries can contain multiple paragraphs (separated by <p> paragraph tags), lists, or other definition information.

Nested Lists

Lists can be arbitrarily nested, although in practice you should limit the nesting to three levels. You can also have a number of paragraphs, each containing a nested list, in a single item list. An example of a nested list:
<ul>
<li>Examples of assets:
<ul>
<li>Cash
<li>Land
</ul>
<li>Examples of liabilities:
<ul>
<li>Accounts payable
<li>Notes payable
</ul>
</ul>

The nested list is displayed as:

• Examples of assets:
• Cash
• Land
• Examples of liabilities:
• Accounts payable
• Notes payable

Other Formats

In HTML, there are specific tags that can be used to expedite setting up your web page. You can use tags specifically designed for preformatted text, blockquotes, and addresses.

Preformatted Text

Use the <pre> tag (meaning preformatted) to generate text in a fixed-width and cause spaces, new lines, and tabs to be significant. Multiple spaces will be displayed as multiple spaces, and line breaks will be in the same locations as in the source HTML file. This is useful for program listings. The following lines of program code can be displayed in an HTML document:
<pre>
This text is preformatted.

These   spaces   will show up &amp;
      so will this tab.
</pre>

The following will be displayed in a fixed-width font (such as Courier):

This text is preformatted.    
These   spaces    will show up &
	so will this tab. 

Hyperlinks can be used within <pre> sections. You should avoid using other HTML tags within <pre> sections, however. Note that all text in between <pre> tags will be displayed in Courier font. There is no way to change this.

Extended Quotations

Use the <blockquote> tag to include quotations in a separate block on the screen. Most browsers generally indent the text to separate it from surrounding text.

An example:
<blockquote>
I have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation will rise up and live out the true meaning of its creed. <p>
We hold these truths to be self-evident: that all men are created equal.<p>
</blockquote>

The result is:

I have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation will rise up and live out the true meaning of its creed.

We hold these truths to be self-evident: that all men are created equal.

Addresses

The <address> tag is generally used to specify the author of a document, and is a means of contacting the author (i.e., an email address). It can also be used when including a revision date for a document. The <address> tag is usually the last item in a file. For example:

<address>
For additional help, contact the CIT Help Desk at 214 Lockwood, Lockwood 2nd Floor Cybrary, (716) 645-3542, or send email to
<a href="mailto:cit-helpdesk@buffalo.edu">
cit-helpdesk@buffalo.edu</a>.
</address>

The result is:

Linking to the Web

The chief power of HTML comes from its ability to link text and images between documents on a site, or with other sites on the Web. The browser highlights these links (usually with color and underlines) to indicate that they are hypertext links (often referred to as hyperlinks or simply links).

Linking to Other Documents

The HTML hypertext-related tag is <a>, which stands for anchor. To include an anchor in your document:

1. Start the anchor with <a (there is a space after the a).
2. Specify the document that is being pointed to by entering the parameter href="filename.ext" followed by a closing right angle bracket, >.
3. Enter the text that will serve as the hypertext link in the current document.
4. Enter the ending anchor tag, </a>.

Here is a sample hypertext reference:
<a href="Cost.html">Cost Analysis</a>

Relative Links Versus Absolute Pathnames

The entry above hyperlinks the phrase Cost Analysis to the document Cost.html, which is in the same directory as the main document. You can link to documents in other directories by specifying the relative path from the current document to the linked document. For example, a link to a file finance.html located in the subdirectory Business would be:
<a href="Business/finance.html">Financial Accounting</a>

These are called relative links. You can also use the absolute pathname of the file if you wish. For example:
<a href="http://www.buffalo.edu/~jdoe/
Business/finance.html">Financial Accounting</a>

This syntax, called absolute linking, is also used to link to pages other than your own. For example, to link to Yahoo!, a popular search engine, the code would be:
<a href="http://www.yahoo.com">Yahoo!</a>

Pathnames use the standard UNIX syntax, where directory entries start with / (as opposed to \ used on PC-compatible machines). Filenames are also case-sensitive.

In general, you should use relative links because you will have less to type, which reduces the chance of typing an incorrect filename or directory. It is also easier to move a group of documents to another location, because the relative pathnames will still be valid. However, it is advisable to use absolute pathnames when linking to documents that are not directly related. For example, consider a group of documents that comprise a user manual. Links within this group should be relative links. Links to outside documents should use full pathnames. This way, if you move the user manual to a different directory, none of the links will have to be updated.

Links to Specific Sections

In Other Documents:

Anchors can also be used to move to a particular section in a document. Suppose you wish to set a link from document A to a specific section in document B. First you need to set up an anchor in document B. To set up an anchor named Asset in document B, enter the code:
<a name="asset">Here is some text on asset management in document B.</a>

Now when you create the link in document A, include not only the filename, but also the named anchor, separated by a hash mark (#):
<a href="documentB.html#Asset">link</a>

Clicking on the word link in document A will send the reader directly to the words Here is some text on asset management in document B, which is set up as the anchor in that document.

In the Current Document:

Linking to a specific section in the current document is exactly the same as linking to a specific section in another document. Simply omit the filename.

Using the above example, to link to the Asset anchor from within documentB.html, type:
<a href="#Asset">Asset Management link</a>

Images

Appropriate use of imagery can add aesthetic interest to your web page. Most browsers can display inline images (images next to text) that are in JPEG or GIF format.

To include an inline image use:
<img src="image_url.ext">

image_URL is the name of the JPEG or GIF image and ext is the file's extension (either .jpg or .gif). The syntax for image URLs is identical to that used in an anchor href. For example, if the image file is a GIF file, then the filename extension of image_URL must end with .gif. By default the bottom of an image is aligned with the text. Add the align="top" option if you want the browser to align adjacent text with the top of the image. The full inline image tag with top alignment is:
<img align="top" src="image_URL">

align="middle" aligns the text with the center of the image.

The alt attribute is used to give a short description. These are used because in some cases people cannot see the image, and a description is needed. You can add a short description as follows:
<img src="image_url.ext" alt="description">

Cascading Style Sheets

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to web documents. There are three ways to implement CSS into your web page. CSS can either be embedded directly into the <head> of your HTML file, written inline, or it can be contained in a separate document with a .css extension.

An embedded style sheet goes between the <head> tags of your HTML document. When you use this method, you must define the style sheet with the <style> element as follows:
<style type="text/css">
<!--

/*CSS rules go here*/

-->
</style>

type="text/css" tells the browser you are using a CSS style sheet. The HTML comment tags <!-- --> comment-out the CSS rules if an old browser does not understand the <style> element. This prevents the old browser from displaying all of your CSS code onto the canvas. /*...*/ are CSS comments.

A CSS rule is composed of a selector and a declaration which contains a property and a value. A selector is any valid HTML element (e.g., <p>, <h3>, etc.). The property and the value are surrounded by curly braces {}. They are separated by a colon (:) and always end in a semi-colon (;). For example:
<style type="text/css">
<!--
p {
text-align: center;
color: red;
background-color: white;
}
-->
</STYLE>

This example would display the text aligned in the center, colored red, with a white background.

Inline styles are written directly into the tag which you wish to affect:
<p style="color:#FF0000;text-align: center;">
Red, center aligned text.

This example would create red, center aligned text, only on the text between the <p> tags.

The most widely used form of CSS is linking to an external CSS document using the <link> element. An external style sheet is a separate file to which any web page can link. The styles in that external file are then applied to which ever document calls it. The benefit of this arrangement is that you can have one style sheet for an entire web site. If you make one change to a selector (e.g., <h1>) in your external style sheet, that change is automatically applied to every selector of that type throughout the web site.

There are three steps to creating an external style sheet:

1. Open a text editor (e.g., Notepad) and type in the stylistic rules. This is done exactly the same way as for an embedded style sheet, except that you omit the <style> tags and the HTML comment tags <!-- -->.
   

    

   /* Heading Styles */
   h1 {
   color: #000099;
   background-color: #ff0000;
   font-family: arial;
   font-size: 2em;
   }
2. Save your style sheet with a .css file extension.
3. In the <head> of the HTML document to which you wish to link the style sheet, enter the path to the style sheet using the <link> element. The <link> element does not have a closing tag.
   
   <link rel="stylesheet" href="style.css" type="text/css">

Now open the HTML document. You should see the styles applied to the <h1> element.

HTML Etiquette

Embedding Tags

It is acceptable to embed anchors within another HTML element:
<h1><a href="Destination.html">Just a heading</a></h1>

Character tags modify the appearance of other tags:
<ul><li><b>A bold list item</b>
<ul>
<li><i>An italic list item</i>
</ul>
</ul>

However, avoid embedding other types of HTML element tags. For example, it is tempting to embed a heading within a list, in order to make the font size larger:
<ul><li><h1>A large heading</h1>
<ul>
<li><h2>Something slightly smaller</h2>
</ul>
</ul>

Although some browsers, such as Netscape and Internet Explorer, format this correctly, it is unpredictable in other browsers. For compatibility with all browsers, avoid these kinds of constructs.

Check Your Links

When an <img> tag points at an image that does not exist, a dummy image is substituted. When this happens, make sure that the referenced image does in fact exist, that the hyperlink has the correct filename, server, and directory in the URL, and that the file permissions are set appropriately (world-readable).

Additional Information

This guide is only an introduction to HTML, and is not a comprehensive reference. Below are additional sources of information.

The following is a list of books and web sites that can help to further your understanding of HTML:

• Castro, Elizabeth. HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide. 5th edition. Peachpit Press, 2003.
• Holzner, Steven. HTML Black Book. The Coriolis Group, 2000.
• Tittel, Ed. Burmeister, Mary. HTML 4 for Dummies. 4th edition. IDG Books, 2005.
• http://www.htmlgoodies.com
  HTML Goodies - Comprehensive Guide to HTML with a table of clickable topics and tutorial sessions.
• http://libweb.lib.buffalo.edu/infotree/
  resourcesbysubject.asp?subject=Computer+Science
  Safari Tech Books Online (through UB Libraries).
• http://www.w3.org
  The World Wide Web Consortium. Specifications and guidelines for the World Wide Web.

Web Accessibility:
http://www.cio.buffalo.edu/webaccess

Workshops:
CIT offers free workshops at the start of the Fall and Spring semesters, including introductory HTML workshops, to all members of the UB community. Register for these workshops at
http://www.itworkshops.buffalo.edu.

Document Information