(Site Identification)

'Eye' Focus: Web Support Tutorials

A Simple HTML Tutorial


The examples and instructions provided in this tutorial are specific to producing proper HTML 4.01 code. This version of HTML has the most features available while not being too strict in its implementation.

If you wish to look at the source code of the documents you will see XHTML examples of the coding. XHTML is a great deal more strict than HTML, and errors in XHTML can cause things to fail quickly.

(to Top) The Basic Page

When first creating a HyperText Markup Language (HTML) web page, a few important commands (called tags) must be placed into the document. This tutorial covers some of the most important components of any web page. Most of the tags usable in a web page are optional but some are absolutely required for the page to be properly displayed on every browser.

Minimal Page Example Code: (skip code)

<html lang="en">
 <head>
  <title> ... The Page Title ... </title>
 </head>
 <body>
  <h1> ... A Section Header ... </h1>
  <p>... A Paragraph ...</p>
 </body>
</html>

(to Top) Main Functions & Commands

When first creating a web page, one must insert a few important commands in the beginning of the document.

HTML:

The code: (skip code)
<html lang="en"> ... </html>

This is the first tag you should get familiar with and remember to use. Found at beginning and end of an HTML document, this command defines the web page as an HTML encoded document. Generally the only attribute of the HTML tag is the language in which the content is written. The language is specified by the country's two letter English abbreviation. This page is written in English so we use 'en'.

HEAD:

The code: (skip code)
<head> ... </head>

The HEAD is placed within the HTML tag. This is where specifics about the page is provided such as: the page title, the author, the owner, details for search engines, scripting language information, and the character set to use for displaying page. For more information about some of the other items (generally referred to as META's) please see the Web Page Header Template Instructions.

TITLE:

The code: (skip code)
<title>Oregon State</title>

The page TITLE, placed within the HEAD tag, provides the name of the page. In this example, "Oregon State" is used for the title and it gets displayed in the browsers title bar at the top of the window. It is also used as the name of the page in search engines when they link to your page. Below is the result of the title command.

The Result:
Page Title Illustration

BODY:

The code: (skip code)
<body text="#00ffff" bgcolor="#ff0000"> ... </body>
OR
<body text="#00ffff" bgcolor="#ff0000"
background="abc.gif"> ... </body>

The BODY tag is placed within the HTML tag after the HEAD tag. This tag contains information that is presented in the browser. It is also responsible for setting page attributes such as the text and link colors, the page's background color, or a page background image.

In our second code example, we have set "abc.gif" as our background which is the name of the image. To set the background as a single color one would use a hexadecimal color code, or HEX code. For this example, we have chosen the HEX code for a red background.

Any time a background color is defined (which should be every time) &/or a background image is defined you must define the default text color for the page. If you do not define the default text color then text may not be readable because the visitor has defined an incompatible default color on their browser.

A good HTML color reference card, RGB Hex Triplet Color Chart, is available as an image thanks to the creator, Douglas R. Jackson (jacobson@phoenix.com) from Phoenix.

(to Top) General Page Tags


Header:

The code: (skip code)
<h2>Header Text</h2>

The Result:
Page Header Illustration

A Header is used to apply titles to sections of the page in the same manner that you would use headers in a word processor. There are six sizes represented by the numerals 1 through 6, with 1 being the largest size and 6 the smallest. In our example we are setting the header text to be size 2.

Line BReak:

The code: (skip code)
<br>

The line break acts as a carriage return, starting anything that follows it on the next line.

Paragraph:

The code: (skip code)

Default (left aligned):
<p>...</p>

Center Aligned:
<p align="center">...</p>

Right Aligned:
<p align="right">...</p>

Justified (aligned left and right):
<p align="justify">...</p>


Originally the paragraph tag acted as a separator, providing a blank line following it, before the start of a new paragraph. This is no longer the case though the result is the same. The paragraph should be treated as a container the same as many other text elements. The reason for this is in the application of Style Sheets, used to control the presentation of your pages.

Bold:

The code: (skip code)
<b>Sample Text</b>

The result: (skip code)
Sample Text

The Bold tag provides a wider, or bolder, version of the text for getting more attention.

Note: For better clarity when something should be read with a strong tone of voice, use STRONG. With strong this text is literally read with a strong tone of voice by screen readers. The bold tag only changes the appearance of the text, not how it is read.

The code: (skip code)
<strong> ... </strong>

Italic:

The code: (skip code)
<i>Sample Text</i>

The result: (skip code)
Sample Text

The Italic tag slants, or angles, the text to provide more emphasis.

However, for better clarity when something should be read with an inflection in the tone of the voice, use EMphasis. This text is literally read with a change in the tone of voice by screen readers. The italic tag only changes the appearance of the text, not how it is read.

The code: (skip code)
<em> ... </em>

Underline:

The code: (skip code)
<u>Sample Text</u>

The result: (skip code)
Sample Text

The Underline tag highlights text to set it apart from the rest of the sentence. Most web authors suggest that you completely avoid the use of the underline tag since it can present some confusion as to whether or not the text is a hyperlink. You should also know that underlined text is not spoken by screen readers any different from regular text.

It is further suggested that the underlines not be eliminated from the hyper-links for the same reason. If you are providing a link to another source don't hide or confuse the fact that the link is provided. Hiding the underline then also relies on the link being found by color alone which is an accessibility issue.

Combining Tags for More Functionality:

The code: (skip code)
<b><i>Sample Text</i></b>

The result: (skip code)
Sample Text

Multiple tags can be applied to the same text. For instance if one desired to both italicize and bold a piece of text as we did in this example. What you must be careful of is the nesting of the tags. When you combine tags together to combine functionality, you must open and close the tags in the proper order. Always close the tags in the reverse order that you opened them. This produces less problems with interpretation of your code, and browsers will more likely display your page the way you intended.

(to Top) Links & Images


Links:

The code: (skip code)
<a href="http://www.melvinwallerjr.com/tutorial/">'Eye' Focus Tutorials</a>

The result: (skip code)
'Eye' Focus Tutorials

A link, simply put, is a reference from one web page to another web page, image, file, or server. The page being linked to can reside on the same server or a different one.

In our example, "http://www.melvinwallerjr.com/tutorial/" is the address to where the link will take the visitor when clicked (this tutorial site's home page), and " 'Eye' Focus Tutorials " is the clickable text that will be displayed on the screen.

Images:

The code: (skip code)
<img src="images/logoicon.gif" width="116" height="48" align="right" alt="'Eye' Focus Icon">

The result: (skip code)
'Eye' Focus Icon

Here, "logoicon.gif" is the name of the image file that will be displayed on the screen.

To accommodate most web browsers, the type of images used are ".jpg" and ".gif" file formats. Most current browsers support a third, ".png" file format. The ".jpg" images tend to be much smaller in size than their ".gif" counterparts where a large number of colors are used, and are best used with photographs.

However, ".jpg" compression image can cause large solid areas of color to be distorted. For general web graphics where the image has few colors, the ".gif" file format is best suited. Newer graphic editors can even apply image compression on a ".gif" file and they can apply transparencies to parts of the image to make it invisible. Transparencies are not possible with ".jpg" images, but they are possible with the newer ".png" files.

The newer ".png" file types combine the advantages of ".jpg" and ".gif" file types. What is gained is better file compression without image quality loss, the ability to use a large number of colors and large areas of continuous color in the same image without distortion, and the use of transparencies for images that may not have used them before. What is lost is backwards compatibility with older browsers since the older browsers do not support this image type.

To have your page display as quickly as possible, "always" use the image pixel dimensions in the HTML code. Providing the image size allows the browser to set aside that area of the screen and display the page as soon as possible. The dimensions of "logoicon.gif" are 116 x 48 (width x height), measured in pixels. An images dimensions can be easily determined using most graphics programs. Most browsers will also provide the dimensions of displayed images.

Another attribute that can be used with images is the ALIGN. Here we have aligned the image to the right in a table. It can also be aligned left, middle (the default if not specified), bottom, or top. The last three options apply to how the text is displayed adjacent to the image. align="middle" means align the text to the middle of the image, align="bottom" to the bottom of the image, and TOP to the top of the image.

A description of the image was also provided with the ALTernate attribute of the IMG tag. The ALT provides information on the screen so that the content of the image can be known without having to wait for it to download, or if the visitor has image downloading turned off for faster web surfing. For accessibility purposes, if an image has nothing of value to describe you should use alt="" for the screen readers, always defining the ALT whether there is a description or not.

DIVision:

The code: (skip code)
<div align="right">Sample Text</div>

The result: (skip code)
Sample Text

Notice that the DIV tag is appended around the text like most of the other tags. This will align the text with either left, center, right, or justify just as the paragraph tag will. Here we have aligned our text to the right. The key difference between the DIV tag and the P tag is this tag is not separated from the other content of the page by white space.


[Updated: Sunday, November 18, 2007]