Internet University's Guide to Basic HTML

Sponsored in part by:

This is a basic guide for writing documents in HTML (hypertext mark-up language) that we hope will allow you to publish webpages.

What is an HTML Document?

HTML documents are plain-text (also known as ASCII text) files. They can be created using any text editor (such as Notepad on a Windows machine), but if you save an html file using a word processing program you must specify ASCII.

Automagic HTML Editors

There are many software programs available for assistance in writing html, such as HotMetal and Microsoft FrontPage, however; if you do not first understand the basics of writing html, you will likely create a giant mess.

Mounting Your Pages on the Internet

In order for your webpages to be seen by the world, they must be placed (mounted) on a computer with a web server. The method for doing this varies depending on your Internet provider. If you would like information on having your pages hosted on this server, please click here.

HTML Tags

An "element" is a piece of information that is hidden when viewed through a browser. Elements appear between a "less than" and a "greater than" sign. These commands are known as tags. By clicking your browser's "view" choice on the menu bar, you should be able to view the "document source". Some examples of elements are <head>, <body>, <p>(paragraph), <br> (break), and <ol> (ordered lists).

Tags are usually paired -- <H1> and </H1> (starts and ends a heading.) The end tag looks just like the start tag except a slash (/) precedes the text.

Some elements may include an attribute. For example, you can specify the alignment of headings by adding an align command -- <H1 align="center">

It is important to remember that not all browsers can understand all elements.

Every html document should contain a head and a body. The head contains the title and meta tags (meta tags are more advanced html code that allows you to say and do some neat things) and the body contains the actual text. Following is an example:

 
    <html> 
    <head> 
    <TITLE>Test html Page</TITLE> 
    </head> 
    <body> 
    <H1>This is the body.</H1> 
    
    All sorts of words can be typed into the body.
    <P>
    And, then a second paragraph can be added.
    </body> 
    </html>

Mark-up Tags

HTML

<html> and </html> lets your browser know that the file contains html.

HEAD

The head contains the <title> and most <meta> elements.

TITLE

Between the title tags you place the text that you wish to appear along the top of the browser in the "title window".

BODY

The body of your html page contains the content. The body tag can include attributes that add color to your page, such as bgcolor="blue" or link="red". Between <body> and </body>, you write your content.

Headings

There are six levels of headings, 1 through 6. 1 is the the most prominent, and 6 is the smallest. The first heading in a webpage should be <H1>.

Paragraphs

Carriage returns do not appear in html documents when viewed through a browser. Use a <P> to separate paragraphs.

Using the <P> and </P> as a paragraph container means that you can center a paragraph by including the align="center" attribute.

Line Breaks

A <BR> is equivalent to hitting your carriage return.

Links / Hyperlinks

A browser "highlights" text or images by underlining or using a different color to indicate that it is a link. There are 2 types of links, relative and absolute. A relative link can only be used if the file you are linking to is on the same server. If you had a page linked to your index page called test.html, the link would look like this: <a href="test.html"> link description goes here </a>

An absolute link must be used if the file you are linking to is on a different server. The link would look like this:
<a href="http://www.membrane.com/"> link description goes here </a>

Lists

HTML supports unordered and ordered lists.

Unordered Lists
To make an unordered list, use <ul> and </ul> at the top and bottom of the list. Use a <li> before any list item, and it should look like this:

item a
item b
item c

Here is how the coding appears:

    <ul> 
    <LI> item a 
    <LI> item b 
    <LI> item c 
    </ul>

Ordered Lists
Ordered lists are very similar and look like this:

    <ol type="1"> 
    <LI> item a 
    <LI> item b 
    <LI> item c 
    </ol>

Preformatted Text

Using <PRE> will allow you to view a text page through a browser as it appears in its ascii format. That is, you can use <PRE> and </PRE> around an ascii page to have it appear formatted without using any html tags.

Block Quotes

You can use <BLOCKQUOTE> and </BLOCKQUOTE> around text to create a separate block on the page.

Address

The <ADDRESS> and </ADDRESS> tag is usually used to identify the author of the webpage.

Horizontal Rules / Hard Returns

The <HR> tag produces a line across the webpage. A horizontal rule is useful in separating sections of your document.

Mailto Links

By using a mailto link, you can create a "clickable" area on your webpage that calls for an email letter to pop-up. It looks like this: <A HREF="mailto:psehelp@membrane.com">email psehelp@membrane.com</a>

In-line Images

Most Web browsers can display images automatically within the body of the webpage. Here is an example:
<IMG SRC="apple.gif" alt="Picture of an Apple">

Note that the alt attribute is important. If someone is unable to see graphics, the alt text will let them know what is supposed to be there.

Background Graphics

Many browsers can see backgrounds on a webpage. The body tag needs to include a background attribute --
<BODY BACKGROUND="texture.gif">

Other Tags

Here are some other commonly used tags:

<strong> and </strong> = bold
<em> and </em> = italics
<font size="+1"> and </font> = larger font size

Internet University's Guide to Basic HTML Sponsored in part by: