WEBSITE HELP
THANK YOU TO EARTHLINK AND THE OTHER SITES FOR THIS INFO
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>.
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.
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="http://www.earthlink.net/blink/">bLink</A>.
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="mailto:elnblink@earthlink.net">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 |
Backgrounds
Backgrounds
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.
Design
Color Chart
Use this hexadecimal color chart to determine the colors of your Web page backgrounds,
text, and links.
Lynda.com
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.
About.com
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.
LiveImage
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.
ImageMapper
A great Macintosh imagemap editor, ImageMapper features a multi-window interface with
separate toolbar, zoom view, color, and URL windows.
MapMaker
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.
IconBazaar
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
Builder.com 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.
GifBuilder
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 |
Tables
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 Builder.com takes you from the creation of a basic table to
formatting text and images into table cells.
Frames
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.
Forms
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
Builder.com 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.
DHTML
FAQ
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.
JavaScript
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)!
WebCoder.com
WebCoder.com 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.
Developer.com:
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
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.
www.perl.com
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.
ActiveX
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 - Download.com
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
RealAudio lets you create streaming audio — sound files that play as they download.
To play RealAudio files, you need the RealPlayer helper application.
RealNetworks
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
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.
MP3.com
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.
Audiogalaxy
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.