Welcome to Austin Free-Net
Beginning Web Pages


Basics

Web pages are created using hypertext mark-up language which is called HTML.

What you need to get started is:

HTML tags are enclosed in < >. Most tags are opened < > and closed </ >.

The basic document template:

<HTML>

<HEAD>
<TITLE>HTML Basic Document Format
</HEAD>

<BODY>
This is where the content of the webpage is placed.
</BODY>

</HTML>

Notice how the document opens with a tag and ends with an tag.

Also there are two parts of the document.

All tags in the basic format are open and closed tags following this format. < >...</ >

The <TITLE>...</TITLE> tag always appears in the <HEAD>...</HEAD> tag. Whatever is placed between the <TITLE> tag will appear in the bar on top of the browser window. This is where to put the title of your page and any other pertinent information.

The <BODY> tag, an open tag, has attributes that help add color to your background and text.

Changing the background can set the mood to a web page. This is done inside the tag. There are two ways to change the background. The color is changed by using the BGCOLOR tag. This is an example of how to set the background color.

<BODY BGCOLOR="blue">

This changes the background to blue. There are 16 different color names that are recognized by this tag. See Generating Colors in HTML (http://www.utexas.edu/learn/pub/colors/). All other colors are assigned by a hexidecimal code. See Color Specifier for Netscape v.3 (http://www.users.interport.net/~giant/COLOR/ColorSpecifier.html).

The other tag that changes the background is the BACKGROUND tag. This tag is used with an image that is tiled onto the screen. This is an example of the background tag.

<BODY BACKGROUND="image.gif">

The image can be a gif or jpg. The idea on creating a background is to enhance the pages. One rule of thumb is to be sure if using a dark background the text is light enough to read and visa versa. It is very irritating to enter into a website and not be able to read the information that it contains.

When changing the background only use one of the above tags. Only one will show at a time when using both tags.

Inside the <BODY> tag the color of text and links can be assigned. The attributes for assigning color is similar to the BGCOLOR (See above for color codes). Use the TEXT tag for text color and the LINK tag for link colors. This is an example of these tags.

There are actually three link tags that can be set. They are:

An example using all of the above text and link attributes follows.

<BODY TEXT="black" LINK="navy" ALINK="blue" VLINK="#00CCFF">


Heading Tags

All heading tags follow the format of <H1>...</H1>. They carry an automatic double space after using these tags so they stand alone.

The following are examples of these tags:

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<H4>Heading 4</H4>

There are also tags used for text formatting.

One is the Paragraph tag which is the equivalent of two hard returns.

<P>

Another is a line break tag.

<BR>

There is also a way to divide up text with a horizontal rule.

<HR>

There are physical style tags used to change the pace of the document.

Boldface text
<B>....</B>
This is an example of bold text.

Italic text
<I>....</I>
This is an example of italics text.

Centering text
<CENTER>....</CENTER>

This is an example of the center tag.


Lists Tags

Another way to organize your information is to use a list. There are three kinds of lists. The organized and unorganized lists are useful for creating lists and outlines. Unorganized lists have items preceded by a bullet while ordered lists will be displayed with numbers. The tags used in these lists are <UL> and <OL> respectively. Each item in both lists will begin with the list item tag <LI>.

This is an example of an unordered list.

<UL>

<LI>Unordered list item 1
<LI>Unordered list item 2
<LI>Unordered list item 3
<LI>Unordered list item 4
</UL>

And this is the result:

This is an example of a ordered list.

<OL>

<LI>Blue
<LI>Yellow
<LI>Red
<LI>Purple
</OL>

And the result:

  1. Blue
  2. Yellow
  3. Red
  4. Purple

There is also the definition list which is tagged as follows.

<DL>

<DT>Blue
<DD>Yellow
<DT>Red
<DD>Purple
</DL>

The results of the definition list appear below.

List Item 1
About Item 1
List Item 2
About Item 2


Links-

Hyperlinks are used to make the jump from document to document. The basic tag is written below.

<A HREF="protocol://hostname/path/filename">Text to click</A>

The actual link address, which appears between the two double quotes, can be a relative address or an absolute address depending on where the object is either on your server (relative) are somewhere in cyberspace (absolute). The browser assumes that the URL is relative unless a complete address is included.

A hyperlink tag is used to open the browser email composition window. The tag is a mailto: link which appears as follows.

<A HREF="mailto:name@mailserver.edu">....</A>

Images that appear in webpages can also be uses as a hyperlink. The image tag is as follows.

<IMG SRC="imagefilename.jpg" ALT="image description">

Notice the ALT="image description" in the tag. This will display text in a small box when the mouse rolls over the image in the web page. To use an image as a hyperlink use this tag format.

<A HREF="protocol://hostname/path/filename"><IMG SRC="imagefilename.jpg" ALT="image description"></A>

Hyperlinks can be nested.

Naming Your Files-

All HTML files have the .html or .htm extentions. The 'Homepage' or top page is usually always named index.html. This is a default filename that browsers bring up when a filename is not included in the URL address.

HTML and image files need to have simple names that tell you what they are. They should have all lowercase characters and never use spaces within file names.

Good HTML Practice-

Pages need to be:

Placing your first Web Page on the Internet-

After your document is complete you can upload your files using an FTP program such as WS FTP or Fetch. Be sure to check your work and make sure everything is in working order.


Glossary of Terms-

FTP
(File Transfer Protocol) A procedure used to upload files onto a server.
HTML
(Hyper Text Markup Language) A type of SGML. It is a collection of platform-independent
styles that define the various components of the WWW document. The Internet protocol used
to manage communication between Web clients (browsers) and servers.
URL
(Uniform Resource Locator) An "address" of an object on the Internet. The format is
protocol://hostname/path/filename. URLs cannot contain any spaces and are case-sensitive.
The protocol is often "http".
WWW
(World Wide Web) A complete collection of all Web servers available on the
Internet.

Links to great resources to learn more:

World Wide Web Consortium - http://www.w3.org
Webmonkey - http://www.hotwired.com/webmonkey/
Training Services-Web Publishing - http://www.utexas.edu/cc/training/trsdocs.html
HTML Goodies http://www.htmlgoodies.com/
Web Design Group http://www.htmlhelp.com/
NCSA-A Beginner's Guide to HTML-Part 1 - http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html
Webreview.com - http://webreview.com/
HTML Tutor - http://www.karpus.com/htmltutor/
C/net - http://www.cnet.com 1