[Digital logo]
[HR]

Welcome to Digital's HTML Starter Page!

This page shows basic HTML coding. It also contains a list of pointers to some useful Web sites.

Click any of the topics below to jump to detailed information:

HTML Information

Here's a good reference about coding HTML:

Here's a well-thought-out style guide for WWW pages:

If you're new to the Web, here's the classic introduction document:

Sample HTML Coding

The following sections provide examples and templates of some basic HTML 2.0 coding. This page does not include all the HTML tags and their variations, but these tags are enough to get you started.

Click on any item in the following list to display a topic:

Basic page structure

The basic page coding includes the <html>, <head>, <title>, and <body> tags.

Use of tags:

Example: 


<html>

<head>
<title>Sample Page and HTML Examples </title>
</head>

<body>
..... text of the document
</body>

</html>

Click here to return to the list of sample topics.

Heads (or Heading Levels)

HTML supports up to six levels of headings. The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags indicate the level of heading; each heading has its own appearance on a browser.

Example: 


<h1>This is a Level 1 Head </h1>

<h2>This is a Level 2 Head </h2>

<h3>This is a Level 3 Head </h3>

<h4>This is a Level 4 Head </h4>

Result:

This is a Level 1 Head

This is a Level 2 Head

This is a Level 3 Head

This is a Level 4 Head

Click here to return to the list of sample topics.

Paragraphs

The <p> and </p> tags enclose each paragraph of information in the HTML file. The paragraph tags should not enclose heads, lists, or preformatted examples.

Example: 


<p>
This is a paragraph of text. 
This is a paragraph of text. 
This is a paragraph of text. 
This is a paragraph of text. 
</p>

Result:

This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.

Click here to return to the list of sample topics.

Ordered (numbered) and Unordered (bulleted) Lists

The list coding includes the <ol> and </op> ("ordered" or numbered list) or <ul> and </ul> ("unordered" or bulleted list) tags, and the <li> and </li> tags.

Use of tags:

Example: 


<ul>
<li>This is unordered list item one. </li>
<li>This is unordered list item two. </li>
<li>This is unordered list item three. 
   <ol>
   <li>This is ordered sublist item one. </li>
   <li>This is ordered sublist item two. </li>
   <li>This is ordered sublist item three. </li>
   </ol>
</li>
<li>This is unordered list item four. </li>
</ul>

Result:

Click here to return to the list of sample topics.

Emphasized text

The emphasis coding includes the bold, italic, code example, and horizontal rule tags.

Use of tags:

Example: 


This line has a <b>bold </b> word.

This line has an <i>italicized </i> word.

This line introduces preformatted text:
<pre>
  Line 1
  Line 2
  Line 3
</pre>

This line has is followed by a horizontal rule:
<hr>

Results:

This line has a bold word.

This line has an italicized word.

This line introduces preformatted text: 

  Line 1
  Line 2
  Line 3

This line has is followed by a horizontal rule:

Click here to return to the list of sample topics.

Inline Graphics

The inline graphics coding has several parts, including img src and alt.

Syntax:

<img src="FILENAME.GIF" alt="Description of art">

Parts:

Example: 

<img src="DIGITAL.GIF" alt="[Digital logo]">

Results:

[Digital logo]

Click here to return to the list of sample topics.

Popup Graphics

The popup graphics coding has several parts, including a, href, img src, and alt.

Syntax:

<a href="POPGRAPH.GIF"><img src="HOTGRAPH.GIF" alt="Description of art"></a>

Parts:

Example: 

<a href="DIGITAL.GIF"><img src="T_NAME.GIF" alt="Description of art"></a>

Results:

Description of art

Click here to return to the list of sample topics.

Anchors

The anchor tag has two uses:

  1. When used with a NAME="" value, it defines (or sets an anchor to) a specific location in a file.
  2. When used with an HREF="" value, it jumps back to an anchored location in a file. For more information about anchors and HREF values, click here (for jumping within a file) or click here (for jumping to another file).

Syntax:

<a name="ANCHOR_NAME">Anchor text</a>

Parts:

Example: 


<h2><a name="ANCHORS">Anchors</a></h2>

Click here to return to the list of sample topics.

Hypertext Jump Within a File

When you use anchor tags with an HREF="#ANCHOR_NAME" value, HTML jumps back to an anchored location in the current file. The a tags enclose the start and end of the text string you want to make hot. Clicking on the hot text causes the system to jump to the matching symbol string.

Syntax:

<a href="#ANCHOR_NAME">Hot text</a>

Parts:

Example: 


For more information about anchors and HREF values, 
<a href="#JUMP_IN_FILE">click here</a> (for jumping within a file) or 
<a href="#JUMP_TO_FILE">click here</a> (for jumping to another file).

Result:

For more information about anchors and HREF values, click here (for jumping within a file) or click here (for jumping to another file).

Click here to return to the list of sample topics.

Hypertext Jump to Another File

When you use anchor tags with an HREF="FILENAME.HTML#ANCHOR_NAME" value, HTML jumps back to an anchored location in a different file. The a tags enclose the start and end of the text string you want to make hot. Clicking on the hot text causes the system to jump to the matching symbol string.

Syntax:

<a href="FILENAME.HTML#ANCHOR_NAME">Hot text</a>

Parts:

Example: 


For more information about anchors and HREF values, 
<a href="HTML_EXM.HTML#JUMP_IN_FILE">click here</a> (for jumping within a file) or 
<a href="HTML_EXM.HTML#JUMP_TO_FILE">click here</a> (for jumping to another file).

Result:

For more information about anchors and HREF values, click here (for jumping within a file) or click here (for jumping to another file).

Click here to return to the list of sample topics.

Interesting Links

[HR] 
 how2html.htm
 7 November 1995 
 Digital Equipment Corporation Freeware CD