Make your own free website on



HTML: It's Not Rocket Science

Once you've decided to publish your own homepage on the Web, you may want to obtain an authoring program. But if you're the kind of person who likes to do things by hand, you'll find that HTML isn't that hard to master. HTML (hypertext markup language) is used to "markup" a document so that it can be read in the "hyperlinked" Web environment. HTML commands — called "tags" — tell browsers if a line of text is plain or boldfaced, designate the way paragraphs are formatted, and allow images and hyperlinks to be placed on a page.

HTML tags follow a specific and consistent format. First, all commands are placed between "caret" symbols: "<" and ">". For example, the HTML tag to begin bold text is <b>. Next, almost all commands are grouped in pairs; one to begin the action, one to end it. The tag used to end the action is identical to the beginning tag, except that the ending tag begins with a slash "/". To continue our earlier example, the tag to end text-bolding is </b>, so the full sequence of tags needed to bold the word "Hello" is <b>Hello</b>.

Figure A

Figure A1

The Basic Web Page
There are some tags that must be used for every Web page. Take a look at the HTML tags that produced the simple page shown in Figure A. First, each page must begin with the command <HTML> and end with the complementary tag </HTML>. These tags tell a browser that your page is intended for the Web.

Next, the HTML for every Web page is divided into two sections. The first section, the "head" — everything between the <HEAD> and </HEAD> tags — contains information about the document, including a "title" which will run at the top of the browser window. The second section is referred to as the "body." The body contains all the information that will appear on the page itself. It includes everything between the <BODY> and </BODY> tags.

Now take a closer look at the body section of the HTML; notice that the text that will appear in the browser window is framed by the tags <H1> and <H1>. These "header" tags allow you to change the size of important text on your page. There are six sizes possible, from <H1> to <H6>, with <H1> being the largest.

Formatting and Font Size
Examine the HTML for the Web page in Figure B. Building upon the first very basic page, this expanded version contains four new tags. Notice how everything in the Figure B Web page is centered in the browser window. This is done with the <CENTER> and </CENTER> tags that enclose the information in the body of the Web page.

Figure B

Figure B1

Next, find a <P> tag. This tag adds a line space, creating a new paragraph. The <BR> command, on the other hand, breaks a line WITHOUT creating a new paragraph. Note: The <P> and <BR> tags, unlike most other tags, do NOT require ending tags.

The <FONT SIZE=x> tag (and the </FONT> closing tag) is the next tag you should examine. This tag allows us to alter the size of text on our page. (Just replace x with a number between 1 and 7. 1 produces the smallest text and 7 the largest. The default setting — the size your text will be if no font-size tags are used — is equal to 3.)

Adding Images and Web/Email Links
Want to place an image on your Web page — perhaps a GIF or JPEG file downloaded from the Internet? How about creating hyperlinks to some of your favorite sites?

Take a look at our last HTML example and its corresponding Web page in Figure C. An image has been added to the Figure C Web page by using the <IMG SRC="your.image"> command.

The image file in our example is named picture.GIF, so we've written <IMG SRC="picture.GIF"> in our HTML. There is no complementary "close" command required for the <IMG> tag. To change the location of an image on a Web page, add ALIGN=LEFT (or RIGHT, MIDDLE, TOP, or BOTTOM) to this command. Note: In order to use an image on a Web page, it should be uploaded to the same directory of your Web site in which your index.html file is stored. Also, although HTML commands are not case-sensitive, file names are, so make sure you transcribe the exact name of your image file into your HTML script.

Next, scan the HTML example, and find the following tag: <A HREF="">bLink</A>.

Figure C

Figure C1

This tag creates an underlined hyperlink that, when clicked, takes the viewer right to the Web page listed within the tag — in our example, we've created a hyperlink to bLink. A hyperlink can also be created for a email address. As shown in our example, <A HREF="">Click here and let us know!</A> makes a link that, when clicked, will allow the visitor to write an email message to the designated address.

Making, Saving, and Viewing Your Page
Now that you know some of the tags, any text editor (for example, SimpleText for Macs, or Notepad for PCs) or word-processing software can be used to create your own HTML document. When saving your work, just remember that the file name for every HTML page must end with the suffix .html or .htm. (.htm has to be employed by PC users who can't create file names with suffixes more than three digits long.) The file name for your homepage should be index.html or index.htm. Other Web pages stored in the same directory can be named anything you want, as long as they employ the .html or .htm suffix. Once your HTML file is complete, all you have to do is upload it and any necessary image files to your 6MB of free EarthLink webspace. However, it is not necessary to upload your HTML file first in order to see what it will look like. Just drag and drop your saved HTML file icon into the browser's window, and the Web page will display automatically.



Graphics and Design



Read this EarthLink article to find out how to choose and use background colors and images.

The Background FAQ
Answers questions about creating colored backgrounds, making them "fade," and placing side-bars down the left side of the page. If you need more instruction, the FAQ includes outside links.

Backgrounds: Borders & Tops
Links to background images designed for use as page borders.

Backgrounds: Full Tiles
When used as backgrounds, these images tile (repeat over and over) and form attractive patterns.

Backgrounds: Mixed
Assorted background images.

Yahoo!'s Backgrounds Page
With more than 70 links to sites listed, from Christian motifs to Dr. Seuss wallpaper, you're sure to find what you're looking for.

Julianne's Background Textures
Over 500 bumpy, bright, and (sometimes) blinding textures in eight different hues.

Netscape's Background Sampler
With this page, you can simultaneously learn a simple pattern/tiling lesson and sample sophisticated backgrounds.

Rose's Backgrounds
Check out an alphabetical list of more than 500 fabulous backgrounds.

Webmaster Territory
This is a high-style site with sophisticated, unusual backgrounds.



Color Chart
Use this hexadecimal color chart to determine the colors of your Web page backgrounds, text, and links.
Lynda Weinman is a Photoshop guru who has written five books on design. Her Web site is a collection of design-related links, digital design tips, color charts, and palettes optimized for cross-platform use. Web Design
Solid design advice, graphics tips, and links to useful design tutorials from a Web-design expert.

Web Design Collection
The master designers behind HotWired share their tips and tricks. Be sure to take the five-part "Foundations of Web Design" tutorial.

Dead End Designs
Knowing what you should NOT do in design can be as important as knowing what you should do. Learn from the mistakes of others with this TOP 10 list of Web page design errors.

Webmonkey: Web Design 101: Tightening Up Your Design
Design whiz Jim Frew offers his advice and expertise on building for business and pleasure.

Typofile: Techniques and Technology
Using type to create a pleasing, cohesive page design is one of your many design options. Read the "Typefaces Together" section to find out which go together and to learn what "Zapf Humanist" really is.

Ask Dr. Web
You've got design questions? The doc's got the answers. Described as "a rough guide to making Web sites, from pixels to prose, concepts to coding," it's all that and so much more.


Images and Imagemaps

Image Editing 101
Often, you need to "tweak" your images before you put them online. This HotWired tutorial is the picture-perfect place to learn how.

Using Graphics and Images on Your Homepage
This tutorial covers simple images as well as imagemaps.

Imagemap Help Page — Instruction
An imagemap is basically made of two parts: the image and the map. This is a site dedicated to teaching you how to make an image in the GIF format, then, a map-file based on that image.

This is a client-side image mapping program for Windows 95/98 and Windows NT 4.0. One of the coolest things about it is a tool that gives the option to draw the map freehand — offering more flexibility than the standard circle, rectangle, and polygon shapes of most programs.

A great Macintosh imagemap editor, ImageMapper features a multi-window interface with separate toolbar, zoom view, color, and URL windows.

This is a simple little program for Windows 95/NT and is great for very quick jobs.

Client-Side Image Maps
Wired has an excellent tutorial on the simplest of imagemaps to create: the client-side map.

Imagemapping Tools
Use this list of shareware to help you build imagemaps for the Mac or Windows OS.


Clip Art

Media Builder - Image Library
A spectacular site! Backgrounds, borders, icons, clip art, and animated GIFs are neatly categorized alongside tools for making animated GIFs and banners.

Putting Images Up on the Web
Learn how to add pictures to your words.

Webmonkey: GIF vs. JPEG
A simple lesson on the proper use for each of these graphic file formats.

Web Clip Art
Hundreds of pointers to online clip art collections and advice on adding clip art to your Web pages.

Attention-Getting Images
Tiny animated GIFs that say "New!", "Updated," "Under Construction," "Cool," "Warning," and more.

Perhaps the best site for webmasters who know exactly what they want. Enter "leaf" or "cow" or "apricot" and watch as the search engine delivers hundreds of results in GIF and JPEG format.

Clip Art Connection
Clipart in lots of different categories: holidays, body parts, animals, science, food, the alphabet, people in politics, and more. The site's free email list sends new clip art each day.

Barry's Clip Art Server
Lots of original, hand-drawn comics and illustrations commingle with computer-generated and 3D images to create a unique place to download art.


Animated GIFs

Animated GIFs
A fantastic place to get tutorials, tools, links, and advice. Your best bet for learning how to do it in your own.

GIF Animation on the WWW
With over 80 pages of info, this site's a good second place to the one above. More links than tutorials.

Webmonkey: GIF Animation Refresher
Want to add more movement to your homepage? Use the methods outlined here.

Making Your Own Animated GIF
This site covers basic and advanced tutorials for Mac and PC users.

Get Animated brings you a series of articles and tutorials about the animated GIF. There is a super tutorial that will teach you to animate in seven easy steps, a cautionary piece called "Animation Rules to Live By," and a list of animated GIF-building software to download.

Ulead GIF Animator
Powerful and simple, featuring drag-and-drop functionality, Ulead's GIF animator is often the top-choice of Windows-based Web authors. Download a trial version from the site, or order the commercial version.

Gif Construction Set
Alchemy Mindworks' excellent animated GIF builder is one of the top Windows-based programs. Download the shareware program from their site; there's even a banner-building tutorial you should check out.

Most Mac users who make animated GIFs use this software. Download GifBuilder here!

Get Animated with GIFs
From Adobe columnist, John Wornock, comes an elegant, witty nine-step tutorial.



Advanced Web Building




Tapping into Tables: Part I
Tables are a powerful and versatile HTML page layout technique. This introductory tutorial gives you all you need to start.

Tapping into Tables: Part II
After you've mastered part one of our tutorial, move on to part two and learn how to use tables to achieve more advanced page layouts.

Basic, Basic Tables
Experience the thrill of learning to control your page elements with rows, columns, and cells.

The Not So Basic Table
Keep learning about tables and their components — cell padding and spacing — and some of the other, more complicated things they can do.

The Well-Dressed Table
Is it time to spruce up your tables? Use this tutorial to add color without using a background.

Layout Tips
This nine-part series from takes you from the creation of a basic table to formatting text and images into table cells.




Your Web Site in Frames
Learn how to make your site easier to navigate with HTML frames, which let you display two or more Web pages in a single browser window.

Frames Are a Picnic
This terrific column by HotWired staffer Jill Atkinson explains the concept of frames with a tasty summertime metaphor.

Frames: An Introduction
Netscape, the developers of frames, offers a three-part tutorial.

Sharkey's Netscape Frames Tutorial
This five-part guide includes a handy quick reference to the basic frames tags.

The Art of Frames
A good frames introduction and tutorial (as well as an excellent play on words!).

Fun With Frames — Script Frame Navigation
Feeling comfortable with frames? Once you've mastered them in HTML, learn how to change two or more frames with a single link with JavaScript.

Breaking Out of Frames
If you aren't a fan of frames and want to "safeguard" your site from being "trapped inside" of one, use this HTML trick to bust out.

Frame Breaker
If you're familiar with JavaScript, you can use this script to add a frame-breaking button to your site.




Getting Visitor Feedback, Part 1: How to Have Data from Forms Emailed to You
This lesson explains how you can have the information gathered from the forms on your Web site emailed to you.

Getting Visitor Feedback, Part 2: Appending Form Data to a File
This lesson explains how you can have the information gathered from the forms on your Web site to a file in your directory.

How to Process a Form brings you a step-by-step tutorial on getting data from a form and having the information sent to you via email.

Web Forms - HTML Forms Generator
PC World called this shareware "impressive." Download and learn more about the program that allows you to create forms without any knowledge of CGI. (To learn more about CGI, see our CGI and Perl section.)

Form Tutor
Joe, this site's owner, has set-up a five-part tutorial that teaches you how to create a guest book, make order forms, surveys, and more.



DHTML and Cascading Style Sheets

DHTML Rules of Thumb
Read this amusing and highly informative article before you begin your foray into the world of Dynamic HTML. You are advised to "adhere to the pain meter, think simple and use the right tools."

Microsoft's DHTML Tutorial
This set of lessons will teach you how to make your text fly across the page and change colors. Familiarity with a scripting language, like JScript™ or VBScript™, and its programming concepts is recommended.

Thirteen questions you should ask yourself BEFORE you begin developing with dynamic technology.

Mulder's Stylesheets Tutorial
Explore style sheets and the world of consistent text, color, and positioning.

W3C: What are Style Sheets?
Find out about the last word in Web standards from the World Wide Web Consortium regarding cascading style sheets and the future of design.

Creating Your First Style Sheet
This tutorial leads you through the process of creating your own cascading style sheets that will work across browsers and across platforms.

A Coast-to-Coast Cascade of Style Sheets
From Microsoft's Site Builder Network Magazine comes a sweeping review of HTML design templates.




Webmonkey: 5-Day JavaScript Tutorial
Clear and thorough, this tutorial will get you writing your own JavaScripts in no time (or at most in five days)! specializes in JavaScript and DHTML . Its "How To" section takes you through complex topics slowly; the Scriptorium houses a great collection of cut-and-paste scripts.

JavaScript Made Easy
The frames-based site categorizes JavaScripts into Mouse Tricks, Pull Down Surfing, Alerts, Buttons/Forms, Scrollers, Random Stuff, and more.

JavaScript Tip of the Week Archive
WebReference's site has 30 coding tips complete with JavaScript source code, examples, and commentary. The site is no longer being updated, but what's available currently is very helpful.

Cut-N-Paste JavaScript
Come for the featured JavaScripts every month, but don't look for tutorials or explanation for newbies.

JavaScript World
A well-rounded site filled with hundreds of JavaScripts, tutorials, discussion groups, and even a JavaSlave who will answer your emailed questions. JavaScript
The site's strength are its feature articles and its search engine for additional JavaScript resources.

The JavaScript Source
Don't want to learn the code inside and out? Here's an excellent collection of cut-and-paste scripts.

bLink Magazine Workshop
bLink Magazine shows you how JavaScript can be used to create rollovers — images that change as you move your mouse over them.



Java is a programming language that excites people who work with development for one reason: it is a universal programming language that allows developers to write software once and run it anywhere ... Mac, PC, UNIX you name it. The language is two-fold, one part appliance — or applet (that little cup of steaming coffee you've seen on the Web for years) and one part environment. These sites will explain more.

Builder.Com: All About Java
Use this six-part series to begin your journey to Java. Among the goodies lined up for you: product reviews, tools, and a quiz called "Decision Maker" to help you decide if Java is the right choice for your site.

Gamelan: The Official Directory for Java
The are THOUSANDS of Java-related links here. If you are looking for sites that will teach you Java, sites to download Java applets, sites to find applications for Java, you will find them here ... or they may not exist!

Dick Baldwin's Java Programming Tutorials
This site contains three Java programming tutorials: Introductory, Intermediate, and Advanced Java Programming. All are available for free online reading, but downloading lessons is limited: You may only print one per visit.

IBM Java Developer Website
The IBM Java Developer Website is dedicated to supporting the Java developer. It consists of FREE on-line Java courses, articles, central search engine and frequently asked questions as well as other information to support and promote Java. Come Visit!

Sun: Java Computing
Learn about the Java programming language and its application from the company that created it: Sun.

ZDNet Software Library
Looking for cool Java applets or tools? Browse the ZDNet library for the latest.


CGI and Perl

The Common Gateway Interface
Soup to nuts, this is everything you need to know about CGI. Beginners, read the introduction. More advanced students should head to the examples and archives pages.

CGI Resource Index
This is the Web's CGI warehouse! All you'd want — but maybe not for beginners.

CGI Made Really Easy
It is easy ... Really! A complete introduction to CGI, the language used to write interactive forms, can be found here, along with many sample scripts.

WWW Org. CGI Overview
An introduction to CGI and other resources, from the organization that standardizes the Web.

CGI Scripting at EarthLink
This short, six-step lesson assumes that you know how to use CGI. It is a guide that describes the proper way to implement CGI scripts (reply forms, etc.) with the EarthLink server.

CGI Programming FAQ
Having trouble with your CGI script? Check here for troubleshooting.

CGI Forms Made Overly Easy
Well, not really OVERLY easy. But this quick look at CGI forms may help familiarize you with the basic concepts inherent in form scripting.
The "central Web site for the Perl community," this site is also a guide to Perl resources, reference, discussions, and more.

Perl Help
An introduction to Perl for the novice, with a useful FAQ.

The Perl Institute
A nonprofit institute dedicated to making Perl useful for everyone. There are Perl FAQs, support, even humor.




This Microsoft technology is a tool to link desktop applications to the World Wide Web. The goal is to create interactive Web-to-desktop content. For instance, ActiveX allows users to view Word and Excel documents directly in a browser. Be warned: To develop with ActiveX, you must have previous experience with other programming languages.

ZDNet: ActiveXUser
Learn your way up the ActiveX ladder by studying with ZDNet. The pages include articles on issues from basic programming to security issues, tools you'll need, ActiveX news, tips and tricks, and a site guide.

MSDN Registration
To learn the most about ActiveX, you'll have to register with the company (Microsoft) who created it. Once registered, Microsoft Developer Network will provide you with FAQs, patches, and tutorials.

ActiveX Library -
The most comprehensive spot to download ActiveX software and information, including program extras like database connectivity, online applications, tools, and utilities.

The Learning Site
Because this site was developed for Microsoft's browser, you must have Internet Explorer 4.0 or higher to visit it. But the excellent tutorials, script examples, codebases, control spec sheets, and overall arrangement is worthy of four stars.

Brett's ActiveX
This site features a no-frills example of an ActiveX script for creating scrolling text.



Online Sound Resources

Webmonkey: multimedia collection
Wired's hands-on features teach you how to make online audio files sound their best, create MIDI background songs, use JavaScript to add sound effects to Web pages, and more.

The World Wide Web Virtual Library: Audio
This site features organized lists of links to online audio libraries, newsgroups about computerized recordings, online radio stations, audio and video software, and other multimedia resources.

How do I put sound and video into my Web pages?
An easy-to-follow guide to recording sounds with your computer, saving them in the correct file format, and embedding them in Web pages.

Adding Audio to Your Web Site
This extensive tutorial includes detailed information about sound recording and editing, popular audio file formats, and browser compatibility issues.

Zap's MUSIC-ON-THE-NET Tutorial
An online musician offers plain-English explanations of different audio formats and tutorials on adding MIDI and RealAudio sounds to Web pages.

RealAudio lets you create streaming audio — sound files that play as they download. To play RealAudio files, you need the RealPlayer helper application.

Get the latest version of RealPlayer, find links to cool streaming audio sites, and learn how to create your own streaming audio files.

RealAudio: Sound on the Web
This six-part series includes extensive information and step-by-step instructions on recording, encoding, and streaming sound files.

MP3 (MPEG level 3) is a new multimedia format that lets you save CD-quality audio samples as small, fast downloading sound files.

Wired News' Ongoing MP3 Coverage
Wired keeps you up-to-date with the latest news about MP3 players, related technologies, and copyright issues affecting MP3 users.
This massive site includes a huge library of downloadable MP3s, tutorials, music news, and links to popular players and MP3-creation software.

FAST MP3 Search
Search for more than 500,000 MP3s by artist name or song title. This search engine often finds links to files that no longer exist or that have been moved, so it may be difficult to find some MP3s.

The MP3 Place
This information clearinghouse includes stories about new MP3 software, books, and sites; reviews of MP3 players; links to MP3 archives; and tutorials for beginning MP3 users.

Musicians upload MP3s of their recordings to this free, searchable band index.

MPEG.ORG - MPEG Pointers and Resources
Learn how to record and play MPEG and MP3 audio and video files; search for the latest software; and find useful online multimedia resources.