Internet University's Guide to Basic HTML
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
Here are some font examples:
http://membrane.com/fonts.html.
The thing to keep in mind is your computer
must have the font for words to appear in
that font. If you don't have the font, these
words will appear in your default font (usually
Times New Roman.)
So, it is a good idea to pick a popular font (or
no one will see it but you.)
Also, you can pick more than one font. In
the event the viewer doesn't have the first font,
it defaults to the second choice.
Therefore, you might want to pick out 2 or 3
fonts.
However, it is important to remember that some people need to be able to choose their font size and colors. The ADA website suggests: " Webpage designers often have aesthetic preferences and may want everyone to see their webpages in exactly the same color, size and layout. But because of their disability, many people with low vision do not see webpages the same as other people. Some see only small portions of a computer display at one time. Others cannot see text or images that are too small. Still others can only see website content if it appears in specific colors. For these reasons, many people with low vision use specific color and font settings when they access the Internet – settings that are often very different from those most people use. For example, many people with low vision need to use high contrast settings, such as bold white or yellow letters on a black background. Others need just the opposite – bold black text on a white or yellow background. And, many must use softer, more subtle color combinations.
Users need to be able to manipulate color and font settings in their web browsers and operating systems in order to make pages readable. Some webpages, however, are designed so that changing the color and font settings is impossible.
Solution: Avoid Dictating Colors and Font Settings"
We hope this has been of help.
Please visit InternetU.org for more Internet help.