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:
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
We hope this has been of help.
Please visit InternetU.org for more Internet help.