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:firstname.lastname@example.org">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
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.
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.
Borders & Tops
Links to background images designed for use as page borders.
When used as backgrounds, these images tile (repeat over and over) and form attractive patterns.
Assorted background images.
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.
Over 500 bumpy, bright, and (sometimes) blinding textures in eight different hues.
With this page, you can simultaneously learn a simple pattern/tiling lesson and sample sophisticated backgrounds.
Check out an alphabetical list of more than 500 fabulous backgrounds.
This is a high-style site with sophisticated, unusual backgrounds.
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.
Solid design advice, graphics tips, and links to useful design tutorials from a Web-design expert.
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.
Web Design 101: Tightening Up Your Design
Design whiz Jim Frew offers his advice and expertise on building for business and pleasure.
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.
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
Often, you need to "tweak" your images before you put them online. This HotWired tutorial is the picture-perfect place to learn how.
and Images on Your Homepage
This tutorial covers simple images as well as imagemaps.
Imagemap Help Page
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.
Wired has an excellent tutorial on the simplest of imagemaps to create: the client-side map.
Use this list of shareware to help you build imagemaps for the Mac or Windows OS.
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.
Up on the Web
Learn how to add pictures to your words.
GIF vs. JPEG
A simple lesson on the proper use for each of these graphic file formats.
Hundreds of pointers to online clip art collections and advice on adding clip art to your Web pages.
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.
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.
Lots of original, hand-drawn comics and illustrations commingle with computer-generated and 3D images to create a unique place to download art.
A fantastic place to get tutorials, tools, links, and advice. Your best bet for learning how to do it in your own.
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.
GIF Animation Refresher
Want to add more movement to your homepage? Use the methods outlined here.
Your Own Animated GIF
This site covers basic and advanced tutorials for Mac and PC users.
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.
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.
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!
Animated with GIFs
From Adobe columnist, John Wornock, comes an elegant, witty nine-step tutorial.
Advanced Web Building
Tables: Part I
Tables are a powerful and versatile HTML page layout technique. This introductory tutorial gives you all you need to start.
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.
Experience the thrill of learning to control your page elements with rows, columns, and cells.
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.
Is it time to spruce up your tables? Use this tutorial to add color without using a background.
This nine-part series from Builder.com takes you from the creation of a basic table to formatting text and images into table cells.
Your Web Site in
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.
Are a Picnic
This terrific column by HotWired staffer Jill Atkinson explains the concept of frames with a tasty summertime metaphor.
Netscape, the developers of frames, offers a three-part tutorial.
Netscape Frames Tutorial
This five-part guide includes a handy quick reference to the basic frames tags.
Art of Frames
A good frames introduction and tutorial (as well as an excellent play on words!).
With Frames Script Frame Navigation
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.
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.
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.
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
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.)
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
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."
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.
Explore style sheets and the world of consistent text, color, and positioning.
W3C: What are
Find out about the last word in Web standards from the World Wide Web Consortium regarding cascading style sheets and the future of design.
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.
Coast-to-Coast Cascade of Style Sheets
From Microsoft's Site Builder Network Magazine comes a sweeping review of HTML design templates.
Tip of the Week Archive
Don't want to learn the code inside and out? Here's an excellent collection of cut-and-paste scripts.
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.
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.
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!
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.
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!
Learn about the Java programming language and its application from the company that created it: Sun.
Looking for cool Java applets or tools? Browse the ZDNet library for the latest.
CGI and Perl
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.
This is the Web's CGI warehouse! All you'd want but maybe not for beginners.
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.
Org. CGI Overview
An introduction to CGI and other resources, from the organization that standardizes the Web.
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.
Having trouble with your CGI script? Check here for troubleshooting.
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.
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.
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.
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.
Library - Download.com
The most comprehensive spot to download ActiveX software and information, including program extras like database connectivity, online applications, tools, and utilities.
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.
This site features a no-frills example of an ActiveX script for creating scrolling text.
Online Sound Resources
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.
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.
Audio to Your Web Site
This extensive tutorial includes detailed information about sound recording and editing, popular audio file formats, and browser compatibility issues.
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.
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.
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.