HTML Samles

Website 101: Adding Background Color to your Web
Site Through CSS

By Michael Rohde
There are several ways to add background color to your web site. You can add some HTML in the <body>
tag such as:
<body bgcolor="#000000">
This provides a solid black background to the web page. If you use black font on your site, suddenly your
web page looks like someone turned out the lights. You'll still see any other images and graphic elements
you've used, but all of your text will not appear. At this point, you could change your font to white, or you
could change the back ground color to a light gray, such as E0E0E0. That eliminates the sometimes harsh
glare of a bright white web page, but then again, some web sites look very good using a plain white
background.
Most likely, you'll want the same background color on all of your pages. Open your CSS file and type:
body
{
background: #E0E0E0;
}
Provided that your CSS file is linked to your htm docs, you now have a light gray background on all of your
pages.
Using Images as a Background

You can also use an image for the background. Use the following code and update the path to your image as
appropriate.
body
{
background: url(../Images/rightbg.gif) repeat-x;
}
If you want the background image to repeat, then remove repeat-x.
Gradient Colors as a Background

Many web sites use a gradient color in the background. It provides a subtle effect and looks more
professional than solid colors or pictures. To create a gradient color for your background, you need a
graphics program that allows you to create gradient colors, such as Adobe Photoshop or Illustrator. Using
that software, create an image that starts light and ends dark, or vice versa. Consult the software's help on
how to create that effect.
After you have your gradient image, just plug that into the path as shown above.
Creating Gradient Colors without Software

Graphics software can be very expensive. I found a site that appears to allow you to create your own
gradient colors. I haven't tested it, so I can't vouch for it, but the examples look good.
Gradient Colors without Images

There is code that allows you to create a gradient colors through code. Fair warning, this code has a
tendency to change your fonts and it does not work across all browsers. The code is provided here simply as
a means to show that it is possible, but it's not recommended.
<body
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2
', startColorstr='#FFFFFF', gradientType='0');">
The above code provides a gradient effect for the background pages. You can use something similar within
tables.
You can use the following code within a table tag:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2
', startColorstr='#FFFFFF', gradientType='0');"
Again, it must be stressed that in tests, this only works in Internet Explorer and does not work in other
browsers such as Chrome or Firefox. If you simply want to play around with it in IE, then feel free, but it's
highly not recommended to use this code in a professional site
How To Build a Web Site: Using Style Sheets

By Michael Rohde
In the first part of this series on how to build a web site, you learned how to: Develop a purpose for your
site; Organize a project outline; Draw a wireframe; Organize your folder structure; and Define HTML and
JavaScript.
In the second part of the series, you learned how to: Get an HTML editor; Defined the different parts of an
HTML file; Wrote your first HTML code; and Started your CSS file. The third article described how to: Add
additional styles to the CSS and How links work and how to style them.
In our last tutorial we learned how to create a page layout using CSS. Now we'll learn how to update the
.html file to make use of the CSS we created. You may remember, last week we created the CSS to style
our page...it looked like this:
H1 {text-align:left; color:black; font: normal 20pt "Arial Black"}

H2 {text-align:left; color:black; font: italic 12pt "Verdana"}
P {text-align:left; color:black; font: normal 10pt "Verdana"}
A:link {color: blue; text-decoration:none}
A:visited {color: gray; text-decoration:none}
A:hover {text-decoration:underline}
If we were going live with our example, we would have added styles for each section of our page, including
containers, headers, footers, etc. and it would have looked like this:
container {text-align:left; color:black; font: normal 10pt "Arial Black"}
header {text-align:left; color:black; font: italic 8pt "Verdana"}
footer {text-align:left; color:black; font: normal 8pt "Verdana"}
navbar {text-align:center; color:black; font: normal 8pt "Verdana"}
Now, you'll need to open your .html file, and directly under the tag, type:
<div id="container">
<div id="header">
<h1>My Web Site</h1>
<h2>Before you know it, I'll be a pro</h2>
</div>
You might notice that you have two opening <div> tags and only one closing <div> tag. The first <div> tag
is for the container for all of the content on the page, which means you need the closing <div> tag at the
very end of the page. Right above the closing </body> tag, type:
</div>
It's good practice to always remember to write your closing tag whenever you write your opening tag. That
way, you won't forget to add it in later. Now, add in a placeholder for your navigation:
<div id="navbar">
<p>About Us | Contact Us | Page 1 | Page 2</p>
</div>
Don't worry about having links to these pages yet. That can be added in later after you have tested your
layout. Now for the columns:
<div id="col1">
<P>
<img alt="earth (213K)" src="Images/earth.jpg" height="280" width="280" />
<p>Here's the left text.</p>
</div>
<div id="col2outer">
<div id="col2mid">
<P>Here's the center text.</p>
</div>
<div id="col2side">
<P>Here is my right-hand column text.</P>
</div>
</div>
Last, it's time to add a footer:
<div id="footer">
<p>Copyright 2010</p></div>
</div>
</div>
That's what it takes to create a three-column layout for your site. You know have styles, links and images…
hmm, but something is missing… ah yes: background color. There are plenty of sites that use a plain white
background, which is very acceptable and does look very nice. However, there are also plenty of other sites
that have some subtle color in the background. What you won't find on current sites are solid blocks of color
with square edges. In the next article, you'll learn how to use gradient colors that provide a nice blending
effect.
How To Build a Web Site: Create a CSS File

By Michael Rohde
In the first part of this series on how to build a web site, you learned how to: Develop a purpose for your
JavaScript.
In the second part of the series, you learned how to: Get an HTML editor; Defined the different parts of an
HTML file; Wrote your first HTML code; and Started your CSS file. The third article described how to: Add
additional styles to the CSS and How links work and how to style them. Now, you'll learn how to create a
page layout in the CSS.
Defining the Page Layout Using CSS

If you're tempted to create your page layout with tables, stop right there, pack up your bags and go home.
Tables went out of style nearly 10 years ago. Currently, most web developers use containers and <div> tags
to determine the page layout. That might not be true with HTML 5, but that time is not here yet. For the
purposes of this article, you will learn how to create a three-column page design with a header and footer.
Start by opening the .htm file you started and within the <head> tags, type:
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
</style>
What you've just done is essentially zero out any pre-existing default margins. Now you're free to create
your own margins.
Side note: after your site is up and running, and you've started using an analytics tool to gather information
about your visitors, you can learn the size and resolution of your visitor's screen. At that time, you might
want to adjust your margins to reflect the most popular screen sizes, or change it so it resolves to any
resolution. For the purpose of this article, you will learn how to create a page layout to suite a screen
resolution of 1280 x 800, which should also work just fine for screen resolutions of 1280 x 1084. In your
CSS file, create the container:
#container {
width: 1000px;
margin: 0 auto;
padding: 0;
}
This creates a container that is essentially 1000 pixels wide with no margins and no padding. This will fit
very nicely on a screen resolution of 1280 x 800.
Side note: Adding this code to your CSS file now advances you beyond basic HTML, which means you now
need to update your doctype declaration in the .htm file to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
You'll notice this declaration is essentially the same as the previous one, but it now allows for XHTML, which
is Extensible Hyper Text Markup Language.
The third line of the above code (margin: 0 auto;) contains the XHTML. This code creates a margin of zero.
The auto, allows the browser to help determine the best margins for a visitor's browser, and centers the
container on the screen. Otherwise, all of your content would be left-aligned, leaving a large amount of
space on the right-hand side of the screen. This provides an aesthetically pleasing appearance for your site.
Now, let's create your header row. In your CSS file, type:
#container #header {
margin: 0;
padding: 0;
width: 100%;
height: 100px;
float: left;
border-bottom: #adde63 solid 1px;
}
You've now created a header with a height of 100 pixels. Adding a border to the code now will help you see
where this container ends. You can always remove it later.
Most likely, you'll want your navigation bar underneath the header. Type the following into your CSS file to
create a holder for your menu:
#container #navbar {
margin: 0;
padding: 0;
width: 100%;
height: 40px;
float: left;vertical-align;
border-bottom: #adde63 solid 1px;
}
Using a border in the CSS is a better alternative to using a hard rule in the HTML. It provides greater
flexibility and is easier to update pages later. You can define the color of the border by using hex numbers.
The thickness of the border is defined by pixel. Many designers would advise against using too many borders
on a site as they create clutter. Instead, utilize good white space technique to help keep your content
organized and easy to find.
Next, it's time to add in your columns. You need to create columns that are divisible by two, which means
you can't simply create three columns. First, you need to create two columns and then split the second
column in two. It might sound like a lot of work, but it's really not.
In your CSS file, type:
#container #col1 {
width: 280px;
float: left;
}
#container #col2outer {
width: 700px;
float: right;
margin: 0;
padding: 0;
}
#col2outer #col2mid {
width: 400px;
float: left;
}
#col2outer #col2side {
width: 280px;
float: right;
}
The width is no longer defined by 100%, which means the width equals the same width as defined in the
main container, which in this case is 1000 pixels. Instead, the column widths now have a static value. You
can change these values as you see fit. As it's set up now, the value for the first column is 280 pixels. The
total value for the middle and right column is 700 pixels, which is then split to 400 pixels for the middle
column and 280 pixels for the right column.
Generally, the middle column in most web sites is slightly larger than the two side columns.
If you do some simple addition, you might notice that the total widths of all the columns do not add up to
1000 (280 + 400 + 280 = 960). You might be wondering where the other 40 pixels have gone. Those 40
pixels make up the spacing, or padding, between the columns. This provides the sought after white space
that prevents the text from each column from running into each other.
Look at the number of pixels for the middle and right column, which is 700. The middle column is assigned a
width of 400 pixels and the right column is 280 pixels, which is a total of 660 pixels. This provides 20 pixels
of space between the two columns.
Last, add in the footer:
#container #footer {
float: left;
width: 100%;
border-top: #adde63 solid 1px;
}
You'll notice the footer has the border at the top as opposed to the bottom. You can place the border
wherever you feel best.
In the next article, you'll learn how to update the .htm to make use of your CSS.
How to Build a Website: More on Cascading Style

Sheets and Links
By Michael Rohde
In the first part of this series on how to build a website, you learned how to: Develop a purpose for your
JavaScript.
In the second part of the series, you learned how to: Get an HTML editor; Define the different parts of an
HTML file; Write your first HTML code; and Start your CSS file. In this third article, you will learn how to:
Add additional styles to the CSS and Learn how links work and how to style them.
Start by opening your CSS file. If you've been following along in the series, you've already defined your
<h1> tag. It's now time to define your <h2> tags, the paragraph tags and the links.
Side note: It's important to use <h1> tags in your web pages for a couple of reasons. The first reason is
that it allows you to globally assign style to your headers. The second reason relates to SEO (search engine
optimization). The details for SEO best practices will be discussed in future articles, but for now, it's good to
understand that search engines look for keywords within <h1> tags to help determine search results. For
example, if your <h1> tag contains the text, "How to make ice cream" and someone used a search engine
such as Google to look for "How to make ice cream" it's a good probability that your page will appear near
the top of the search results. Of course, several other variables come in to play, but using <h1> tags is an
excellent place to start when executing your SEO strategy.
Defining Your Styles: Using CSS

Type the following into your CSS to define your first-level header, second-level header and your paragraphs:
• H1 {text-align:left; color:black; font: normal 20pt "Arial Black"}

• H2 {text-align:left; color:black; font: italic 12pt "Verdana"}
• P {text-align:left; color:black; font: normal 10pt "Verdana"}
A good rule of thumb when it comes to fonts is to never use more than three different fonts on a given
page. Try to use one font style for your header <h1>, a slightly smaller and different font for the subheader
<h2>, and then the same font but a different size for the paragraphs <p>. Also, keep your styles consistent
from page to page.
Now, type the following to define your links. Here, you might want to use your own preferences. The
following provides some ideas and suggestions as to what is possible (and commonly used):
• A:link {color: blue; text-decoration:none}

• A:visited {color: gray; text-decoration:none}
• A:hover {text-decoration:underline}
It was true in the beginning and it's still true today: the vast majority of websites designate a link with the
color blue. Most sites also provide some kind of visual clue or transitional effect to show when you are
hovering over a link with the cursor. Also, it's a good idea to change the color of a link after a visitor has
clicked on it. This provides the visitor a reminder that they already visited that page. That may or may not
prove useful to your site.
Creating a Link: Using the Anchor Tag

Before moving too much further, it's time to learn how to create a link (aka anchor tag); after all, you just
learned how style one. In your .htm file, between the <body> tags, type:
<h2><a href="http://www.google.com/" target="_blank">My first link</a></h2>
You should recognize the <h2> as being your second-level heading. The new code is the "a href=". That's
how all links start. You then type any valid URL inside the quotes. For added functionality, the
target="_blank" simply means that a new browser window will open when the visitor clicks the link. If the
link takes the visitor off your site to another site, you might want to use this, so the visitor can easily come
back to your site. If you're simply linking to another page within your own site, then it's good practice to
eliminate this code. The text, "My first link" can be any text you want to describe where the link will take the
visitor. In this case, the link will open Google.com. To end the link, you need the closing tag </a> and then
to finish, you need the closing tag </h2>.
If you're playing along at home, go ahead and test this now. You can test your page a couple of different
ways. The first way, is to simply click the Preview button in your HTML editor. Or, you can navigate to
your .htm file in your folder structure and click on it. Doing so will open your web browser. Click the link.
You should see a new window open to Google.com. Close that new window. Your web page should still be
open. Take note that your blue link has turned gray (if you used the same code in the above examples).
Adding Images: Using the IMG Tag

At this point, you might be thinking that your page is looking pretty barren with no images. It's time to add
a picture to your site. First things first, add a .jpg to your Images folder. If you have no .jpg files, simply go
to Google.com, click Images, and search for the image of your choice. Make sure there's no copyrights
attached to the file and then save it in your Images folder. Now, type the following between the <body>
tags:
<img alt="earth (213K)" src="Images/earth.jpg" height="350" width="350" />
The text within the first set of quotes appears in the web browser in the event that the visitor's browser
does not support images. The src is exactly what it sounds like, it's the location of your image. You can use
height and width to spoecify the size of the image.
Looking at your preview, you're seeing a lot of left-aligned content. It's time to create a page layout. You
will learn how to do just that in the
How To Build a Website: HTML, CSS and HTML Editors

By Michael Rohde
In the first part of this series on how to build a web site, you learned how to:
• Develop a purpose for your site

• Organize a project outline
• Draw a wireframe
• Organize your folder structure
• Define HTML and JavaScript
Now that you know how to define the purpose of your site, create a project outline and create a file folder
structure, it's time to move on. In this tutorial, you will learn about HTML editors, HTML tags, CSS, and how
to create your first web page using the infamous "Hello World" programming example.
HTML 4 is still considered the basic building blocks of a web site. HTML 5 is the proposed next standard, but
according to the HTML 5 Wikipedia page, the W3C is not expected to recommend it until 2022. However,
some aspects are considered stable and some implementations can be used today. For the purpose of this
article, HTML 4 will be considered the gold standard.
Get an HTML Editor

Now you're ready to dive into HTML and CSS. For the CSS file, all you need is a plain text editor, such as
Notepad. For the HTML, you will most likely want an HTML editor, such as the Chami HTML-Kit, which is
used in the examples in this article.
Here's an entire list of HTML editors that you can choose from. The better HTML editors provide a built-in
browser window, which allows you to preview your work. Also, you might want an HTML editor that has a
validator. That way, the editor can help find mistakes. It's kind of like using spell checker in a word
processor. However, just like spell check does not catch all mistakes, neither will a validator. Your best
chance of success is to develop the eye-of-a-hawk and catch your own typos and mistakes. Writers and
editors pay close attention to detail and this skill is equally important to web developers. If you miss even
one closing tag, your entire page could be affected. Don't let this scare you. As long as you pay attention to
what you're doing, you'll be fine. The best rule of thumb is to type slowly, check your work as you go, and
constantly test.
As you search the Internet looking for an HTML editor, you might run across some sites or services that
promise you the ability to build a web site in minutes using their professionally designed templates. You
might be tempted to use these pre-built templates. If you do so though, are you truly a web site developer,
or are you simply skipping steps to reach an end-goal? You might want to ask yourself what your true end-
goal is…do you want to be a web developer or do you want to simply fill in the blanks? If you're filling in the
blanks of a pre-built template, then you run the risk of creating a site that looks and behaves exactly like
someone else's. If you do this, you're not building marketable skills that you can sell to a hiring manager to
become a web developer. It's best to take the long road and write the code yourself.
Defining an HTML Page

When you start a new HTML page in Chami's HTML-Kit, you'll see some code has been populated for you.
This isn't cheating and this isn't filling in the blanks. The software is simply saving you some typing and
providing you a head start. This is what you'll see:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
The first thing you should notice are the tags. An HTML tag defines what you want to accomplish: whether
that's to create a link, insert an image, or simply place some text on the page. Each tag has an opening tag
and a closing tag; the keywords within each tag are enclosed by angle brackets (< and >). If your tag is
missing an angled bracket, then the whole tag is rendered ineffective. It's very important to remember each
< and > and that each opening tag, for example, <head> needs a closing tag </head>. Notice that the
difference in the closing tag is /.
The first line on the page is the document type declaration and tells a validator which version of HTML to use
in checking the document's syntax. You'll notice that this declaration is telling the validator your site uses
HTML 4. You'll also see the word, "public" in there. That means your site is available to the public. The W3C
is the group that owns and maintains the DOCTYPE. DTD is the type of DOCTYPE that is being used.
Transitional means that humans will be reading your site as compared to a computer-read site. And finally,
EN represents English, which means the DTD is written in English. It does not represent the language of the
content on the page. You do not need to alter the declaration type, but you should be aware that other
versions do exist.
<html> -- This is the first HTML tag on the page. At the very end of the page is the closing </html> tag. All
of your content will appear between the <html> tags.
<head> -- This is the second HTML tag on the page. Within the <head> is where you place the <title> of
your page. The <title> of your page appears when someone prints your web page on paper and it also
appears in the border of a web browser (which all depends on your browser and the settings).
For Internet Explorer 8, the title of the web page appears in the very top border above the address bar. To
change the title of your page, simply replace "untitled" with your title. There's no need to alter the <title>
tag. Also within the <head> tag is where you place your styles. Since you'll be using CSS while following
this series of articles, this is where you'll place a reference to your CSS file(s). You'll also place references to
your script files if you use some advanced JavaScript in your web site.
<body> -- Within the <body> is where you'll do the majority of your coding. This is where you place your
content, including text, images and links and other functionality you might want, like image galleries, video,
etc.
Hello World
Right now, you might be craving some instant gratification. It's time to get to it! Before digging into the
CSS, let's build up some confidence and create some actual content that you can view in a browser.
Immediately after the <body> tag, type:
<h1>Hello World, this is my first HTML</h1>

Click the Preview button. In HTML-Kit, that's located in the bottom menu, just to the right of Editor. You'll
see your text in large, Times New Roman font. You can also save your file, go to your folder structure, find
the .htm file and click it to open it in your browser. You'll see essentially the same thing. You might be
thinking to yourself, "Gee, that large, Times New Roman font doesn't look very good." You can fix that by
adding some style and creating a CSS.
Starting the CSS

CSS stands for Cascading Style Sheets and you create this file in a text editor such as Notepad. CSS allows
you to define styles and page layout in one location so that you can globally apply them to your .htm files. If
you ever change your mind on style, you can change it once in your CSS file and it automatically updates all
of your .htm files. This can save a lot of time and energy down the line.
Let's start by adding some style to the <h1> tag you created in the Hello World example. Simply type,
H1 {text-align:left; color:black; font: normal 40pt "Arial Black"}
You have now defined the style for your <h1> tag. <H1> describes the tag that you want to define. You
start with a { and end the definition with }. This is the equivalent to the angled brackets in HTML.
Text-align - this defines the alignment of the text. You can have left-aligned, right-aligned or centered.
Color - is exactly what it sounds like, you can change the color of your font. You can use words, such as
Black, Gray, Green, etc. You can also use hex numbers.
Font - this is where you assign the size and type of font (http://en.wikipedia.org/wiki/HTML_fonts)
Notice that after each attribute, you need to use a ; to separate the different parts.
Now that you have at least one style defined, it's time to connect this CSS to the .htm file. Save the file with
a .css extension in your CSS folder. For example, HelloWorld.css
Open your .htm file and in within the <head> tag, preferably under the <title> tag, type:
<link rel=stylesheet type="text/css" href="css/Helloworld.css">

This connects your CSS file to your .htm file. You need to add this tag to each and every .htm file that you
create.
Your HTML should now look similar to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Hello World</title>
<link rel=stylesheet type="text/css" href="css/Helloworld.css">
</head>
<body>
<h1>Hello World, this is my first HTML</h1>
</body>
</html>
Coming up next:
• Add additional styles to the CSS including the page design

• Learn how links work and how to style them
• Add gradient colors to the background
• Time to review the functionality requirements of your site
next article in this series!
How To Build a Website: Develop a Project Outline

By Michael Rohde
You've been online, looked around at a few web sites, and reached the conclusion that you want a site of
your own. In this tutorial, you will learn how to create a project outline, use a wireframe and begin to design
your website!
We all know what a website is, but the only problem is that for many of us, our entire knowledge of websites
comes from using Google to search for information, not how to actually design a site that provides that
information. What you need is a simple, easy-to-read instructional guide on how to create web sites starting
at the ground floor; without using cookie-cutter templates. You want to build your skills and develop the
foundation for either a career in web site development, or you simply want your own unique web site that
you built yourself; without having to pay a very expensive web site developer.
What's the Point of Having a Web Site?

Web sites are good for many purposes. They can be as simple as an online brochure for your business or an
online resume, which allows prospective employers to view your portfolio. Web sites can also be extremely
complex shopping tools where customers can purchase goods. Web sites may serve as news outlets, or in
the case of blogs, a place where you can publish your rant of the day. The first step you have to take when
building a web site is to determine the purpose of your site. In time, this purpose will help you develop a
mission statement for the site, which will help keep your project on task and focused. Without focus, a web
site can start out with the purpose of being your online resume, and before you know it, the focus of the site
is a Youtube video of a cat playing with yarn. Yes, that might be cute, but is it relevant? The point is, there
are plenty of features and functionality that you can add to your site, but only implement the features that
are pertinent.
After you have decided on the purpose of your site, visit existing sites that appear to have the same
purpose, as doing so can provide you with some ideas for the presentation, functionality and content of your
site. From here, you can start to form an image in your mind of how you want your site to look and behave.
Formulate a Project Outline

You're at the point now of formulating a project outline. You know the purpose of the site, you've written a
mission statement and you have an idea of the functionality you want on your site. It's a good idea to start
a list of all the features you want, which might include:
• Do you need a shopping cart to allow customers to purchase items?

• Do you want visitors to leave comments?
• Do you want a forum?
• Do you want social networking features?
• Do you need to worry about security?
• Do you want people to sign in to view particular content?
• Will you have a newsletter?
Also include in your project outline if you have a budget for designers and writers. Web sites include many
parameters, and most shops have teams of graphic artists, writers, editors, developers and Q&A. No one
person can specialize in all things; although some of us try...you need to determine your strengths and be
willing to reach out to others. If a budget is a fantasy, then you can still develop a fully functioning site, but
keep in your mind that at some point you might want to find a friend or a colleague to help copyedit, or
create some unique art for your site. You could always return the favor by offering to build or enhance a
web site for them.
One last item to include in your outline is a timeline. Do you have any existing constraints as to when you
want your site to go online? Giving yourself a deadline will provide a goal for you to reach. Otherwise, you
might hold off on launching the site until you get just one more piece. When it comes to developing web
sites, there will always be one more piece to add, or one more item to tweak. You have to know when to say
enough is enough and put your creation out there for the world to see.
Draw the Wireframe

Now that you have a purpose and a project outline, it's time to create a wireframe. What is a wireframe?
Think of it as taking that image in your mind and putting it on paper. If you have the skills and the
resources, you can always use graphics software to start sketching your web site. However, even as archaic
as it sounds, taking pencil to paper is a great place to start. Simply draw in a rectangle for the header, some
vertical boxes for your columns and another rectangle for the footer. You might be scratching your head
over, what's the point in that, but it comes in handy when you start writing the code for the layout. The
wireframe provides a reference point for what you are creating. Plus, if you like what you see on the paper,
chances are you're going to like what you eventually see on the screen. As part of the wireframe, you can
write in your Title header and any basic content that you know you're going to want. Plus, you can try
different layouts. Do you want a single-column, two-column or three-column layout? Drawing it by hand
takes a lot less time than writing and rewriting the code.
While you're drawing your wireframe, keep in mind that studies have shown that a visitor's eye traces a Z
pattern across the screen as they scan a page. Don't become disheartened if your visitors don't read every
word you write and don't click every link that you provide. You basically have 10 seconds for a visitor to
determine if they like your site or not. In that amount of time, you have to present your purpose, clearly
and succinctly, to keep that visitor from leaving.
The first thing your visitor will see is the header, which is presumably the title, a logo and perhaps a short
blurb that describes the site. Next, they'll see the middle content and perhaps skip right over anything that
is directly below the header on the left. Last, they'll scan the bottom of the screen. This could be your footer
if the entire page fits on the screen. These are principles that you have to take into consideration when
designing the page.
Note: In regards to the Z pattern, if your menu and navigation is crucial to keeping visitors on your site,
you'll probably want a horizontal menu as opposed to a vertical menu running along the right or left border.
What you have on your menu will also determine the additional pages to your site. You'd be hard-pressed to
find a web site these days that consists of a single page. You need to think about the content for these
secondary pages. The vast majority of sites do have an About Us page and a Contact Us page. Organize
additional pages by topic, which provides a sense of logic for the visitor to find what they are looking for.
Keep in mind that visitors do not want to click more than two or three times to reach their objective.
However, if they feel they are on the right path, they will continue to click until they get to where they want
to go. The basic rule is to keep your navigation simple and each section of your site should not be more than
two or three levels deep.
Get Organized
At this point, you're ready to turn on your computer. First, you need to create a folder structure. Keeping
your files and images organized is crucial. Each file and image will be linked in your code. If you move a file
after you've linked it in your code, then you need to go back and update the code. Save yourself that hassle
and create a folder system now.
Create one folder for each type of file that you'll have more than one of, such as:
• Images
• Pages (your .html files)
• CSS (cascading style sheets, it's how you format your pages)
• Scripts (more than likely, you'll add some JavaScript to your site)
Don't worry about these folders being empty for now. You'll fill these folders soon enough.
The Coding is Next

Now you're probably starting to wonder, "when do I start coding". That will come in good time. Let's start
first with defining HTML. HTML stands for Hyper Text Markup Language and is the cornerstone for all web
sites. It's a relatively simple and easy language to learn and to use. HTML became publicly available in
1991, and almost 20 years later, it's still relevant and highly important. If you learn HTML, you have
undertaken a large first step in web site development. The next article in this series will guide you through
how HTML works, what tags are and you'll write your first lines of code that allows you to say, "Wow. I did
that. I *can* do this!"
Equally is important to HTML is JavaScript, which allows the development of enhanced user interfaces and
dynamic websites. It was developed with ease-of-use in mind so that non-programmers can work with it.
For the most part, if there's some kind of basic functionality that you want with your site, chances are you
can find sample JavaScript online that you can tweak to your preferences. The next article in this series
contains the following information:
• Writing your first HTML code

• Starting your CSS (cascading style sheet)
• Applying the styles in the CSS to the HTML
So You Want To Set Up Your First Site, Huh?
By Joe Burns
...use these to jump around or read it all
[Putting A Site Together]

[The HREF Links]
[In Site vs. Off Site Links]
[Directory Structure]
[Internal Links]
[To Use Full URL, Or Not]
[What If I Do Use the Full URL?]
[Are There Exceptions To This?]
[The Home Page Links]
Answering a ton of email every day allows me to keep an eye on when the new batch of HTML writers
come into the fold. The questions I receive always become more and more difficult, and then all of a
sudden...they become much simpler. The new group of people has arrived.
What's more, in my constant want to write tutorials on new and more difficult topics, I forget to create
more beginning-level tutorials. In that vein, I offer this tutorial.
Putting A Site Together

Lately, I've been getting a lot of email asking about setting up a site with numerous internal pages. For
example, let's say you create a homepage. We'll call it homepage.html.
You then create three more pages:
• links.html (A page of your favorite links)

• photos.html (A page of your favorite photos)
• story.html (A page with one of your best stories)
At the moment they are just sitting on your hard drive (or floppy disc) and now you want them to
become a site. Homepage.html will offer links to the three other pages. That'll be your first site. Good. Now,
how do you do it?
The HREF Links

First off, I'm assuming you already have a place to post these pages.
So, now you have a place for your files. This "place" you have been given is actually a small section of a
hard drive on a server somewhere. In computer terms, you have a directory where you can place your files.
Think of this directory like an equal to a floppy disc. It's a contained area where the pages, and all the
images that go on those pages will be housed.
This is important to remember when you're writing the links that will connect these four pages together.
In Site vs. Off Site Links
You've probably already read through Primer Four - Creating Links. If not - give it a once over pretty
soon. It'll give you the basic format of a link. Now let's talk about the pages you'll link to.
First off, let's attach to a page outside of your site. Here's the basic format:
<A HREF="http://www.htmlgoodies.com">Click Here</A>
Note the address above is a full URL. ("URL" stands for Universal Resource Locator. It's a fancy way of
saying "web address") It starts with that http thing and ends with that .com deal. It's a full address.
Now let's look at what I call an internal link. This is a link that stays within your own site. One of your
pages is calling for another one of your pages. We'll say this is a link from your homepage.html to
links.html. Remember that from above? Here's the format:
<A HREF="links.html">Click Here</A>
Notice I'm only calling for the page, without the full address attached. Why? Well, because I don't need
it. To make the point a little stronger, let's look at the directory structure of web addresses.
Directory Structure
For the sake of continuing this discussion, and because I love to hear myself talk, let's take this little
fantasy of mine a bit further. You purchase an account on a server called www.joeserver.com. When you
sign up for your account, you choose the login "schmoe". This means that, most likely, your email address
will be schmoe@joeserver.com and your web site address will be http://www.joeserver.com/~schmoe. The
little squiggly line thing (~) is called a tilde. It tells the server, "There is one directory on this server called
'schmoe'- find it."
When you use your File Transfer Protocol (FTP) program to upload files to your new server, you will
upload into the directory that was set aside for you - in this case, schmoe.
So you upload your homepage.html page into your directory. The address of that page is now
http://www.joeserver.com/~schmoe/homepage.html.
See the slash I added and then the name? I do that because the homepage.html page is now inside your
directory called schmoe.
Think of a directory structure as one item being inside of a larger item. For example, a word is inside of
sentence, is inside of a paragraph, is inside of a page, is inside of a chapter, is inside of a book. If this were
written in directory structure format, it would look like this:
Book/chapter/page/paragraph/sentence/word
It gets smaller as you move to the right, each is inside the previous. Take this URL for example:
http://www.server.com/users/pages/ohio/joe.html
In that URL, the page "joe.html" is inside a directory called Ohio, is inside a directory called pages, is
inside a directory called users, is on a server called server.com.
That's why the page homepage.html is at the end of the address above. Make sense?
Internal Links
Now we put together a site in your own directory. Once again, you have a homepage called
"homepage.html" and three sub-pages that you want to link to from homepage.html. They are "links.html,"
"photos.html," and "story.html". First off, you need to to FTP, or "upload" all four pages to your directory.
Now, here's the first link on homepage.html that will call up your links.html page.
<A HREF="links.html">Click Here</A>
Notice I am only calling for the page by its name. I am not using the full address.
Now, I could use the full address. There's no reason why I couldn't. If you followed along with the
discussion above, you'll remember that since the file was uploaded into the schmoe directory, its full address
would be http://www.joeserver.com/~schmoe/links.html. So why not use it?
To Use Full URL, Or Not To Use Full URL

If you are linking to a page off of your site, then you must use the full URL. The reason is that you are
leaving your own directory. In fact, the chances are really good that you are leaving your server all
together. Because of that, you need to offer your HREF command the full address to the new site.
But when you're staying within your own site, as we are above, you need only call for the page name.
You see, your directory is a closed home for all of your pages. If you only call for a page or an image
through its name minus the full address, what happens is that the server looks for the page or the image
inside the same home that houses the page that called for it. In other words, servers will search a page's
home directory by default. That's good to know when you create your links. It means you only have to use
the page's name minus the full URL.
What If I Do Use The Full URL?

Always playing the rebel, huh? The answer is that your internal links might run slower. You see, if you
use the full address, what happens is that when your user clicks on a link, a full search process begins. First
the server is located, next the directory is located, then the page is located. Whereas, if you use only the
name, the search is already at its destination. The server simply searches itself. Slick, huh?
The Home Page Links

So what is written onto homepage.html to link the pages together? This:
<A HREF="links.html">Click Here for My Favorite Links</A>

<A HREF="photos.html">Click Here for My Photos</A>
<A HREF="story.html">Click Here for My Best Story</A>
Now you're all linked up. Hey! You made more than a couple of pages. You linked them all together. You
made a site.
Enjoy!
What is "HTML" Anyway?

By Vince Barnes
Do you know what it stands for? And Why?
Somebody recently told me they were so dumb they didn't even know what "html" meant. There
are a couple of things I think are wrong with that sentiment. Firstly, dumb means unable to
speak, though I think he meant lacking intelligence. To my way of thinking, lacking speech
doesn't imply lacking brainpower any more than blindness does! Secondly, lacking the
knowledge of any particular thing doesn't imply a lack of brainpower. In China, there are little
children who know what chicken and rice is called in Chinese. If you don't, you shouldn't feel
bad — I bet they don't know what it's called in English! All this having been said, there are still
those who feel the need to know what certain Web related things mean. If you already know,
please read on anyway — I bet there's some piece of fascinating trivia in here you didn't know!
Let's start with the original question. The easy answer is that html is the language of web pages.
The trouble is that's incomplete! Many moons ago, the use of typewriters to lay out text pages
meant that changing a line required retyping a page. Then some clever characters sat down and
figured out how to use computers to manipulate the words on a page so that words, lines, blocks
of text or entire paragraphs could be moved around at will, and the computer would again lay out
the page for you. They called it "Word Processing" and it was a big new deal! It also included
the ability to mark certain pieces of text to be printed bold or underlined or various other special
treatments. This was accomplished by using special sequences of characters, or codes, to
indicate the beginning and ending of the bold (or whatever) text. These codes were known as
"mark-ups", and the collection of them was a Mark-up Language. Since it was used in Word
Processing, it was a Word Processing Markup Language. With the addition of codes that would
link a word or phrase to another document file, providing the ability to jump from one to the
other (a system called "Hypertext"), came the creation of HyperText Markup Language or
HTML. It has been suggested (many times!) that the term "Hypertext" was influenced by the
term "Hyperspace" used so much in Gene Roddenberry's popular Star Trek TV series. I beg to
differ. "Hypertext", coined in 1965 by Ted Nelson (see
http://www.geocities.com/tonychilvers/hypold/development.html and
http://jefferson.village.virginia.edu/elab/hfl0155.html ) predates Star Trek, which first aired in
September 1966 (see http://www.startrek.com/information/timeline.asp?ID=70802 ) It is possible that
Gene was influenced by Ted!
The birth of the World Wide Web is related to the release of Marc Andreesen's Mosaic browser
(see http://www.geocities.com/tonychilvers/hypold/mosaic.html ) Note that the term "browser" is
closely related to the concept of a "Web" of documents (pages) spread "World Wide" and
through which one can "browse" by traversing "HyperText" links. This is a system conceived by
Tim Berners-Lee (see http://jefferson.village.virginia.edu/elab/hfl0007.html ). Thus, the World Wide
Web is a collection of document files ("Web Pages") linked to each other through the transport
mechanism of the Internet.
CGI is another term that often brings confusion. CGI is a specification for an interface (say
what???) CGI stands for Common Gateway Interface. It's actual a means of connecting from a
Web Server program to a scripting language that can perform functions outside the Server's own
capabilities. Programs written to be accessed via a CGI interface are frequently referred to as
CGI programs or even CGIs. This leads to the notion that CGI is a language, which it is not.
Programs written for the CGI are often written in Perl, which is a script programming language.
"PERL" originally stood for Practical Extraction and Report Language and was design and
written by Larry Wall (Larry has been known to say that it actually stands for "Pathologically
Eclectic Rubbish Lister"!) Perl is a great scripting language and if you haven't yet, you should
learn about it here: http://www.htmlgoodies.com/primers/perl/
By the way, ASP, which stands for Active Server Pages uses another scripting language. Based
on Visual Basic, VB Script is the language of ASP. They say that on the Internet things change
so quickly that you have to measure time like you do for a dog's age, and count seven years for
each calendar year. No exception here, as ASP is now to be replaced by ASP.Net (Asp dot Net)
(see Dot Net Introduction ) There's a tutorial coming to HTML Goodies soon (see I Want My ASP )
The world of computers is rife with acronyms. There are so many, and they have been used so
much, that some have become words in their own right. Did you know that "Bit" derived from
Binary digIT? How about flops (FLoating point Operations Per Second)? And mime (Multi-
purpose Internet Mail Extensions)?
Boot and Reboot , while not acronyms, derive from the expression "to pull up by its bootstraps"
and refer to the process of loading an Operating System (OS) by first loading a small loader
program from a predetermined place. If you come across a computer expression you've not
heard before, nod knowingly, say "Ahh yes!" then excuse yourself, run to a PC (Personal
Computer <grin>) pull up a browser (thanks Marc) and go to webopedia.com This way you'll
avoid the embarrassment of not protecting yourself from a pulsing zombie. I hate it when that
happens!
Please
note I have
Now, notice
used the
the
HEIGHT and
ALIGN="---"
WIDTH
subcommand in
commands
the image
for my
command
image. You
above. That
should do
ALIGN
this with all
command, when
your images.
using "right" or
Plus use the
"left" refers to
ALT
the placement
command. It
of the image on
really helps
the page rather
with page
than the text
loading. Go
itself. That will
here for
be an important
enough about
item in a
it to make
minute. Keep it
your brain
in mind.
pop.
In order to get the text to wrap around the image, you use one of these ALIGN right or left commands.
But the image is already to the left, you say. Do it anyway. The ALIGN alerts the browser to allow the text
to wrap. That's what I did above.
The image that went to the right just used the ALIGN="right" subcommand attribute to wrap.
Image In The Center

Isn't that a neat trick above, getting the image in the middle of flowing text? It actually isn't much of a
trick. It's a three-celled table with half the text in one side and half in the other.
To do it, I wrote the text I wanted and split into the two parts. I made sure to write enough text so that
the image height was equaled. Then I put it all into this table format:
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3">

<TR>
<TD> First Half of Text</TD>
<TD> Image</TD>
<TD> Second Half of Text</TD>
</TR>
</TABLE>
Speaking of Tables...
Sure will. Just make a point of adding
Will the ALIGN="---" commands work
ALIGN="left" or ALIGN="right" inside the first
TABLE command. Like so:
when you are using Tables?
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3" ALIGN="left">
Align One Line of Text

This is actually the easiest of the bunch. If you only want to align one line of text, like a title, with a
picture, then use one of three commands; "top," "middle," or "bottom." Like so:
<ALIGN="top">
<ALIGN="middle"> <ALIGN="bottom">
No <H#> Commands Allowed
They won't align. "H" heading commands want to be alone. To get bigger text next to the image, use
<FONT SIZE> commands.
Aligning Two Lines of Text

If you've tried the top, middle, and bottom commands above, then you know after you get more than
one line of text, the rest jumps to under the picture. Bummer.
How to get around it is a little more tricky. First off, you only use a left or right ALIGN to get the text
started. (Yes, it starts at the top. I'll explain further.) After you have the amount of text you want, you use
this command:
<BR CLEAR="all">
That little doo-dad clears the remainder of the picture wrap and starts you on the next line under the
picture. Like so:
This text is next to the Monk's picture.

This text is also...
(<BR CLEAR="all"> placed here)
This text isn't.
Now, some may say they want the text to start down the
picture a bit. They want the same effect as the ALIGN="middle" or
ALIGN="bottom" commands above. Easy to do. You add blank
lines.
Adding Blank Lines

But... you say I have tried adding fifty <P> commands and I never get more than one line. That's true.
The reason is because you never put anything on the line after the <P> command. Try this:
<P> <P>
That's a great little deal that adds a couple blank lines. Why? Because the is a space. You've put
something on the line so the next <P> can act. But the space is invisible, so no one sees it and you get two
blank lines. Slick, huh? Use a few to "bump" your text down the image face. You can get the same effect by
simply adding a slew of <BR> commands too, but this gets the job done quicker with less text.
Aligning Text Alone
You probably already know about the commands that center the text for you:
<CENTER> and </CENTER>
You surround the text, tables, images, or whatever, with those two commands and it centers it all. No
sweat.
There's not much I can tell you about left align either since that happens without you doing anything. It's
that pesky right align that messes people up.
I mean it's really a rough deal getting the text to do that!

Why, if I could do it... I would!
Okay, bad joke. But it gets the point across. The text above is right-aligned. And it's easy. Just surround
whatever you want right aligned with this:
<P ALIGN="right"> and </P>
What About Custom Text Shaping?

No two ways about it. If you want certain breaks here and there and you want a space here and a line to
end there, you have to do all that by hand.
Use...
• <BR> for a single space text jump.

• <P> for a double space text jump.
• to add a space.
And that wraps it up. Get it?! Wraps?! Man! I can be so funny at times... and then there's now. *Sigh*
So, You Want Newspaper Columns, Huh?

By Joe Burns
Please note: These are Netscape-specific commands. This will not work on Explorer.
News Flash!
HTML Artist Uses Newspaper Columns -- Thousands Flee!
Joe Burns -- HTML Goodies
Sorry for the theatrics, but this is a tutorial about newspaper columns, and hey, any time I get the
chance to use the BLINK command --
I TAKE IT! Sorry Internet Explorer users. Blink doesn't work on your browser either. Man...this just isn't
your kind of tutorial is it?
Dig This - Click to see the Newspaper columns

You have to have Netscape to see it!
Now onto the matter at hand: How did I get those three nice columns? Table commands, right? No, I
used a command that looks more like an afterthought than something the HTML know-it-alls created for
everyday use.
I used this command:
<MULTICOL>
Some might say that all this can be done with table commands, and while that is true, it isn't as easy. To
do this you simply surround a block of text with these commands:
<MULTICOL>
and
</MULTICOL>
...and you're off and running.

There are three other subcommands that go along with this MULTICOL. They all go inside the first
MULTICOL and effect everything in between.
Use:
COLS="#"
to denote how many columns your page will have. I happen to have chosen three. I was just feeling like a
trio at the time.
Use:
GUTTER="#"
to denote the width, in pixels, between the columns of text. I happen to have chosen the number 25 for this
lovely tutorial.
Use:
WIDTH="#"
to denote the overall width of all columns together.
All the commands that manipulate text shape, like CENTER and ALIGN, will work inside the column. So if
you center something, it will center inside the column, but you knew that.
The reason I think this command is a bit of an afterthought is that there isn't a command that jumps you
to the beginning of the next column to start a new story or heading. The commands simply take text and
break it into columns. It's a nice look, plus it spaces it evenly. Table cells will do that, but it's a lot more
coding. You could get the same effect using tables, but if this is all you want, and the page will be viewed on
Netscape browsers, the MULTICOL command does a nice job.
Oh, and in case you were wondering if there is a MULTIROW command -- yes. It's called "The
Paragraph."
Enjoy!
So, You Want An HTML Declaration, Huh?
By Joe Burns
If you've made your way through the HTML Goodies site, then you probably have looked at the source of
some of my documents. I know some of you are looking because every now and again, I get a letter asking
what that strange, cryptic command right at the top stands for. If you don't know what I mean, this is the
command:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
That's a strange looking thing, huh? It's called an "HTML Declaration." Basically it's declaring what
version of HTML the browser is to use when reading this document. It also tells the viewer, if they care to
look. It's long, but rather easy to understand. Here's what it means:
• !DOCTYPE HTML PUBLIC proclaims this is an HTML document type that can be read by public
browsers.
• -//W3C represents the HTML organization that denotes what HTML commands are to be used and
what are not. You can visit their WWW page at http://www.w3.org and read about HTML until your
brain is full.
• //DTD HTML 3.2 stands for Document Type Description HyperText MarkUp Language (version)
3.2.
• //EN means the document will be written in the English language.
If you were attempting to write HTML using the commands set aside in HTML 4.0, then you would
change the header above from 3.2 to 4.0. Now, I'm not talking browsers here. I am talking version of HTML.
Again, if you'd like to read about new and older versions of HTML and what makes them different, go to
http://www.w3.org. 4.0 is out and there are reams of paper on what it will do.
My assumption is that once you read this, you will right away ask if you need to hurry and put the
command on your pages. I don't have a good answer for you there. I knew that would come up so I
contacted my brain trust of HTML people. One said yes, one said no, the other said to do it if you remember.
Not exactly the consensus of answers I was looking for.
So, do you use it? Yes. I do on every page now. I started putting it on when I first learned about it.
Some of my very early pages do not have the command and I'm in no real hurry to get it on them. Mainly
because the pages use very early, and very basic, commands that do not belong to a higher version of
HTML. Besides, if you do not have a declaration, I've been told the default is the highest HTML version. I
would not be doing myself any good by altering the page.
I'll give you a couple rules of thumb that one of the HTML big-heads told me. If you're using META
commands or plan to use HTML validators... use the declaration.
...and of course, any comments regarding the use of these commands will be cheerfully accepted. If you
know something I don't, tell me. I'll post it if I feel others should know.
So, You Don't Want .html, Huh?

By Joe Burns
Use these to jump around or read it all...
[The Index Page]

[How To Do It]
[Creating A Directory]
[The Big Hint]
I've gotten lots of letters asking how I am able to post pages that do not require the .html extension. To
some it may seem simple enough, but to those new to the HTML game, it isn't. So, here's the trick.
My assumption is that you have a WWW site right now, correct? That means you have a general idea
that you need to place files from your computer to a server so the whole world can see them. It's called
FTP-ing a file. Some call it "uploading."
When you upload, you are uploading to a directory. That directory is a little section of the server's hard
drive set aside and given a name. Let's say your home page address is:
http://www.fred.com/~wwwuser
The name of the directory that you upload or FTP all your files to is "wwwuser." See that above? Now,
what you may not know is that that directory has a certain set of rules that it follows. The main rule is that
it allows any- and everyone to look at its contents. It's a WWW directory and people can access it, right?
Another rule is that you are given personal access, with the use of a log-in and password, to place and
remove files.
The rule you may not be aware of, and the one that will be of utmost importance for this little tutorial, is
that that directory has been told to look for a specific file name when someone logs in. Look at the address
above again: Notice it doesn't call for any specific page. It could, of course, just by adding a slash and then
the page name, like so:
http://www.fred.com/~wwwuser/joe.html
But that's not what happened. All that was listed was the name of the directory. Again, look at the
original address toward the top. Better yet, look at HTML Goodies or the address at the the top of your
browser window. See, the address is:
http://www.htmlgoodies.com/tutors/directory/
None of these addresses call for a certain page, but one comes up. That's because of the third rule I
spoke of earlier. I hope you were paying attention... and spit out that gum!
The Index Page

When you got your WWW site, you were told to give the home page a certain name. The vast majority of
the time that name is index.html. Why? Because the directory that holds your WWW files has been told
that when someone tries to get access to the directory, by default, display the index.html page. Get it?
Now, don't get flustered if your default page isn't index.html. I have been on many different servers.
One wanted www.html, the other wanted HomePage.html (note the capitalization), and a third wanted
default.html. My Webmaster wizards here at HTML Goodies tell me that you can configure a server to search
for booger.html if you really want to. But that would lead to a sticky situation. *Rim-shot* (Thank you,
folks, good night! Try the veal.)
How To Do It
Geez, it took me a while to get to this, didn't it? I tend to ramble. So, how do you do it? Well, the rule of
thumb here is to remember that any subdirectory (a directory inside a directory) retains all the properties of
the parent directory.
Huh?
Any directory inside a bigger directory will do what the big directory does, just because. (That's my best
"Gen-X" speak.)
So, if you make a directory inside of wwwuser, then that directory will also display its own index.html. If
you make a smaller directory inside that directory, then it will display its own index.html. Get it?
Creating A Directory
I have received so many letters telling me that I go the long way in making a directory. True, there are
software programs out there that will do all of this with the click of a button, but in case you don't have such
an animal, try this. If you do have a program that will do all of this on the fly, go nuts.
1. Telnet into your site.

2. Get to your directory. Usually when you telnet into your site, you are either in, or one directory
above, your www directory where you keep all your files.
3. Try typing at the prompt: cd [name of your www directory]
4. If that doesn't work, type cd .. (two periods) and then try step 3 again. If you don't get any errors,
you're there.
5. If you would like, you can type ls at the prompt and that will give you a listing of all your files.
6. To create the directory, type mkdir [directory name]
7. You can now do another ls command and you should see that directory sitting there.
8. Some servers need for that directory to be "turned on" before anyone can use it. So, just to be safe,
type chmod [directory name] a+rx now. If the server won't take that command, try substituting
a+rx with 777.
9. Log out. You're done.
Now you have a second directory sitting inside of your wwwuser directory. That directory will respond to
its own index.html. Let's say you named the directory "skippy." Now you can tell people to go to:
http://www.fred.com/~wwwuser/skippy
...and they'll get the main page with no html. Now, how easy it that? Once you do it, it's a joke the
second time.
The Big Hint

I'm going to tell you right up front what will mess you up: You will replace the wrong index.html with the
wrong index.html at least once. I will bet you a zillion clams. I've done it at least 10 times. Always make a
point of checking your work after you transfer stuff. That allows your mistakes to be fixed straightaway.
Bye-bye!
So, You Want Dynamic Fonts, Huh?

By Joe Burns

[Dynamic Fonts</]
[PFR Fonts]
[Get the Fonts]
[Using the Fonts]
I get questions on the discussion groups and my email asking how to change the font. Until recently, the
only way was to use the "FONT FACE=" format and set it that way. The problem was that for the user to
"see" the font, that font had to be installed on their computer.
Many people went to a font download site and grabbed some strange looking letters and installed them
on their computer. They then created pages using that font. The pages looked great until someone else tried
to look at it. Since the second person didn't have the font installed on their computer - the text was plain.
I have seen pages that offer fonts as downloads so the pages can be viewed correctly. That's much the
same as suggesting a screen resolution different than current settings. Very few people actually stop,
change the screen settings and they reenter the page. Same thing with the font. My guess is that very few
downloaded and then installed the font.
But what if you could offer the font behind the scene? What if the font was simply a file that would
download right along with everything else? Then the text would display correctly on all computers. Well,
with some exceptions, you can do that right now.
Dynamic Fonts
Dynamic fonts are font style files that download right along with the page that will use them. Think of
them as an image. That's the basic concept.
When you use these fonts, the font file will download into your cache just like an image. Once there, as
long as you don't clear your cache completely, the font will be there for all future visits. It is fun to watch
the page the first time you use these fonts. The page will come in fully with the text in the default format.
Then, once the font, or fonts, download, the entire page reloads and comes to life. It's a great effect.
The use of these fonts is basically a Netscape Navigator 4.0 or better deal. However, you can also view
the fonts using MSIE 4.0 and above if you also include, along with the font, an Active X helper application.
I'll tell you more about that a little later one after I explain how the fonts actually work.
PFR Fonts
Now, before you run out to your local font download site, remember that nothing on the Web is quite as
easy as it sounds at first. Yes, you can use a dynamic font, but only a certain type of dynamic font. The font
has to be in a format known as Portable Font Resource, or PFR. You'll know a font is in that format because
the extension will be "pfr".
The next question is most likely, "Where do I get these things?". I found a few places, but not a lot.
Maybe I just didn't search with the correct key words, but I didn't find a vast number of places offering the
fonts. Here are those that did seem helpful:
http://www.truedoc.com: This is the King Daddy of everything for these fonts. They have downloads, help
files and more info than you probably care to read
Bitstream World of Fonts: Good site, but the fonts are pay-fors.
Media Fear: Some downloadable fonts.

VietPage Fonts: Ditto.
The majority of the fonts I found were made available as long as you always had the font grabbed from
the server offering them. Yes, it's pretty easy to download the font and run it from your own server, but
these people are nice enough to offer these fonts, you should do what they ask. The effect is the same as if
you were running it from your own server.
The next, next question is then - how do I make my own fonts? Well, from everything I've read, you
have to grab a program specifically set to create fonts. A couple of the shareware programs did not have the
ability to save in pfr format. If you have a pay-for program that will create fonts, check to see if it has the
ability to save in pfr. If not, the people at http://www.truedoc.com suggest HexMac Typograph and Extensis
BeyondPress.
I ran across an article that suggested that CorelDraw has the ability to save fonts as pfrs. If you have
CorelDraw, check out: http://www.mediafear.com/
dreamweaver/help/dynamic_fonts2.html
If you do make your own fonts, here are the letters you must create:
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 &$?!%
Get the Font

Let's say you've traveled to http://www.truedoc.com and have found a few fonts you like. I actually like
three that they've offered:
Amelia
AmeriGarmnd
BakerSignet
The font names above should be in the font suggested by the name. If not, then your browser version
may not be high enough, or the fonts may still be downloading (I'm grabbing three). By now though, they
should be up and running.
In order to use a font, you need to grab it and download it into your browser's cache. You do that
through LINK tags set in the document's HEAD tags. I grabbed three fonts, so the tags looked like this:
<LINK REL="FONTDEF" SRC="http://www.truedoc.com/pfrs/Amelia.pfr">

<LINK REL="FONTDEF" SRC="http://www.truedoc.com/pfrs/AmeriGarmnd.pfr">
<LINK REL="FONTDEF" SRC="http://www.truedoc.com/pfrs/BakerSignet.pfr">
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.truedoc.com/activex/tdserver.js">
</SCRIPT>
Notice that each font is being grabbed from the TrueDoc server, as they asked I do. If you use a font
that is coming right from your own server, there is no need for the full URL.
Let's take a look:
• LINK sets up a link to something

• REL is the relation of the link to the document
• FONTDEF tells the document this is a font definition
• SRC tells the browser where to get the font
• The URL is the path
Very Important! The names of fonts are case sensitive. Big letters have to stay big.
Yes, but what about this:
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.truedoc.com/activex/tdserver.js">

</SCRIPT>
Remember I said earlier that in order for this to work on MSIE, you would need an Active X program.
This is it. It's 68K and it has to be offered if MSIE users are to get in the game. By doing it this way, you are
basically completing a step for the user. Microsoft offers a plug in of their own at their MSIE page. You can
go grab it and install it if you'd like. However, doing it this way finishes the process for the user. They will be
asked if they wish to download the Active X helper. That means a gray dialogue box pops up that often
scares people, but there's no getting around it.
If you're interested, Microsoft also offers a "Font Smoother" at http://www.microsoft.com/typography/

grayscal/smoother.htm. It helps to make your fonts look...well...smoother.
Using the Fonts

OK, you've got the fonts downloaded into the cache. Now you need to incorporate them into the page.
This is the easy part. At this point in time the fonts act like they were already on the system to begin with,
because in reality, now they are on the system.
Follow these basic FONT and Style Sheet formats you've seen a million times before:
<FONT FACE="Amelia BT">Text Text</FONT>
<STYLE TYPE="text/css">
P {font-family: "AmeriGarmnd BT";}
</STYLE>
However you incorporated fonts before, you can now use these to get up and running. Just do yourself a
favor when you choose a font from a download site. Make a point of looking at their sample code. It often
differs slightly. Notice above that "BT" that is in the command? That isn't in the download name. Pay
attention to that.
That's That
That's the basic concept. Finding the font you like may very well be the hardest part of all of this
dynamic font stuff. Good luck with it.
Enjoy!
So, You Want HEAD Commands, Huh?

By Joe Burns
[Basic HTML Format]

[What the HEAD Commands Actually Do]
[Information Regarding the Document]
[TITLE Commands]
[META Commands]
[Base HREF Command]
[Parts 2 & 3]
Try this for fun. Without telling the people what you are doing, ask a few of your friends what the
<HEAD> commands on an HTML document are for. I'll bet you get widely differing answers. I received a
letter from a person who really chewed me out for not involving the HEAD commands in the HTML Goodies
Primers. I asked why this struck such a chord with her and she answered that the commands have to be in
the document for it work correctly. "No, they don't," I replied. "Yes, they do," she replied back. "No they
don't," I wrote back. "Do too," she replied. "Do not!" "Do too!" "Do not!" "Do too!" "Do not!" "Do too!"
The conversation went downhill from there.
Actually we're both right. Here's a very basic HTML document format. You've seen this example 100
times, I'm sure.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
Displays in browser window
</BODY>
</HTML>
When I was first learning to use HTML, I saw that same example over and over again. I thought the
HEAD commands made things pop up in the blue bar at the top. You see, that was all I ever saw inside of
them. So, because I was left to my wits to learn this language, I figured I didn't need those commands. I
wrote without them for a good long time. None of the pages ever seemed incorrect or flawed so I just never
felt I needed them.
It wasn't until the advent of JavaScript and META commands that I even cared what they did. This is all
true. When I teach HTML in a classroom, I do not incorporate the HEAD commands until after the students
learn to manipulate text with bold, italic, and other types of commands.
I'm sure that statement is right now driving someone out of his or her skull. Again, I say... what would
you tell students who are just being introduced to the language what those commands do? Header
commands are a great part of HTML. I know that now. But I still think they are to be taught separately, as
something to incorporate rather than something that's required.
I don't know why I told you that... I guess I just love sharing with you people. So, let's get started.
What The <HEAD> Commands Actually Do
The HEAD commands do three things:
• They contain information regarding the document.

This data does not appear in the browser window when the page is loaded. The data is mainly
used for helping search engines with page descriptions, browsers with base domains, and other
data not generally regarded as display content.
• They separate the page into two distinct sections.
Ever go into a page that won't load, but somehow the title is up there? It's inside the HEAD
commands.
• They are loaded first and what is included between them is run first by the browser.
Here's the first section in a little more depth:
Information Regarding The Document
TITLE Commands
This is the most popular command to appear between the HEAD commands. It places text within the
color bar at the very top of the browser.
I must say I liked it before the newer version browsers placed their name after the TITLE text. That did
not used to be the case. It was just text you wrote. Plus if you wrote a lot of TITLE commands, they would
all be compiled one after the other. You could have animation in the blue bar at the top. It was great. The
newer browsers don't go for more than one TITLE command these days.
Geez, I'm starting to sound like Dana Carvey's Grumpy Old Man. We had lots of TITLE commands. And
that's the way I likes it! ...Sorry.
At this point in time, we'll begin constructing the fully functioning HEAD command extraordinaire.
<HEAD>
<TITLE>Big Fat Head Commands</TITLE>
</HEAD>
META Commands
I have a full tutorial just on META Commands and what they do. Here, I'll quickly outline some of the
more popular ones.
• <META NAME="keywords" CONTENT="key,word,key,word">

This offers key words to the search engines that use them in their searches.
• <META NAME="description" CONTENT="Great page! Come see!">
This offers a description of the page for search engines that use them.
• <META NAME="generator" CONTENT="Notepad">
This tells search engines what program was used to create the document.
• <META NAME="author" CONTENT="Some Body">
This tells search engines who wrote the document.
• <META NAME="copyright" CONTENT="Copyright © 1997 Me">
This tells search engines... blah, blah, blah.
• <META NAME="expires" CONTENT="15 September 2000">
This automatically expires the document in the search engine's database.
Adding these commands, our Super Duper Head command section grows to this:
<HEAD>
<META NAME="keywords" CONTENT="key,word,key,word">

<META NAME="description" CONTENT="Great page! Come see!">
<META NAME="generator" CONTENT="Notepad">
<META NAME="author" CONTENT="Some Body">
<META NAME="copyright" CONTENT="Copyright © 1997 Me">
<META NAME="expires" CONTENT="15 September 2000">
</HEAD>
The Base HREF Command

The Base HREF instructs the browser to use a path as a basis for all links and images on its page. Here's
the basic format:
<BASE HREF="HTTP://www.htmlgoodies.com/">
The command acts as a reference for the remainder of the page. When you use the Base HREF, whatever
you place between its quotes will be added in front of any links you write. For example:
I write the link:
<A HREF="page.html">
Since my document employs the Base HREF command, the link now becomes
http://www.htmlgoodies.com/page.html.
I have yet to adopt the Base HREF command because of the setup of my pages. I include page jumps a
lot. If I use a Base HREF, then the page jump only works on the server. If the document is on my hard
drive, then it won't jump because the Base HREF command won't stop adding the domain to the links and
images. However, when the page is posted to the Net, it tends to reload the page with the entire domain
attached rather than just jumping to the page section I want. I don't use it, but I can see why one would
use it. If your page happens to be reposted off of your server, then all of the images would point back at the
original source of the images.
Let's continue making our Super Duper HEAD command section:
<HEAD>

<BASE HREF="HTTP://www.htmlgoodies.com/>
</HEAD>
Parts Two and Three

Above I said that the Head commands break the page into two distinct sections and also are loaded and
run first. Where that comes into play is where you have a script of some sort. Let's take JavaScript, for
example.
If you place your JavaScripts in the HEAD commands then they will be run first before the remainder of
the page loads. Usually this is the case when the JavaScript has two parts, a script, and then something that
calls for that script to place an object on the page. The Image Flip tutorial is a good example of this.
The purpose of separating the script from the element that calls for it is to speed the use. The script is
already running by the time the call is made for its services.
As for separating the document into two parts, it is often possible that two entities won't run together.
Again, two JavaScripts, for example. Placing one inside the HEAD commands and the other inside the BODY
commands tends to separate them enough to calm the fight. Often, they then both run.
Adding a JavaScript to our Super Duper HEAD command section, we get this:
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</HEAD>
Ah, but it goes on. It is now possible to use these things called Cascading Style Sheets to help pretty up
your pages for all. They go in the Head commands, too.
Add them in the recipe and you get the finished product:
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<STYLE>
</STYLE>
</HEAD>
Well, there it is. The ultimate HEAD section of an HTML document. Of course, all of that is not needed,
but it can't hurt to add it. You'll be helping search engines and some users of your site. I've altered the
program I sometimes use to include the six meta commands above already. I'm not so sure about the Base
HREF command yet though....
Enjoy!
So You Want Indents and Lists, Huh?

By Joe Burns
...Use these to jump around or read it all!

[Indenting Paragraphs]
[Bullet Lists]
[Square Bullets]
[Number Lists]
[Roman Numerals]
[Letters]
[Start Count After One]
[Put Them Together]
[Definition Lists]
I have received a good many letters asking how I do indented paragraphs and those bullet lists. The little
bullets aren't images. They are placed there through HTML Commands. In fact, the entire list format can be
created through commands. I'll show you how.
Indenting Paragraph
I'm surprised that people ask me how I indent paragraphs because I seldom use it.
If you'd like to write with indented lines of text, I'd be more than pleased to show you how I do it. I'm
sure there's another method for this, but I like the way I do it. I'm comfortable with it.
My guess is I don't do it a normal, or HTML, way. I simply indent by adding blank spaces. "BUT MY
BROWSER IGNORES MY SPACES!!!" you say.
Yeah, mine does too. I understand totally. I use this small code to create each of my spaces:
That thing is an ampersand command that creates a space as if you pushed the space bar. I have a
whole tutorial on those commands right here if you like to see more.
This is what each of these indented lines look like:
It looks like this. See the five spaces? No, really. That's what I do.
Look at the VIEW SOURCE if you don't believe me.
And that's all I have to say about that. (Joe Gump) There may be another method, but I like this one. So
there, (add raspberry sound effect).
Bullet Lists
These lists are nice. Here's why I like them...
• They present information in an easy fashion.

• The bullets look cool.
• They make me happy.
Sorry about that last one. I just needed another item to make a three-item list. OK, here's how I did it.
<UL>
<LI>They present information in an easy fashion.
<LI>The bullets look cool.
<LI>They make me happy.
</UL>
Don't be put off by the commands. It's actually only two being used again and again. Here's what's
happening.
• UL stands for Unordered List. It means bullets will be used rather than numbers. Numbers will be
explained later.
• LI stands for List Item. It denotes the next thing that will receive a bullet. Please note that no
</LI> is required. Neither is a Break or Paragraph command. The LI does all that good stuff for
you.
• /UL ends the entire list.
HINT: If you use a center command before this, it doesn't center the entire list, it centers each
item messing up the look of the list. If you would like to move the list closer to the center of the
page, simply add more <UL> commands. I have found that three moves the list almost to the
center. Just remember, if you use three UL commands you need to offer three /UL commands. Like
this:
<UL><UL><UL>
<LI> list item
</UL></UL></UL>
I don't like round bullets, I want squares!!!

Easy now there fellah, you can have your list and squares too. Simply add the command
TYPE="square" into your UL command. Like so:
<UL TYPE="square">
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</UL>
This is what you get...
 List Item 1
 List Item 2
 List Item 3
Number Lists
If you would like to create a list that numbers the items rather than just putting a bullet in front, HTML
could do that for you too. Yeah, you could just number the things yourself, but that's no fun. It's time
consuming too. Dig this:
1. List Item 1
2. List Item 2
3. List Item 3
...and here's how I did it:
<OL>
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>
Notice it's just the same format except I have <OL> where <UL> used to be. Nothing to it. The browser
will continue to count up as long as you keep putting <LI> items after the OL. By the way, "OL" stands for
Ordered List.
But I Want Roman Numerals!!!

Arabic isn't good enough for you, huh? Well simply place a TYPE="I" inside the OL command. Notice
that is a capital "I" and not the number one. Here's what you get:
I. List Item 1
II. List Item 2
III. List Item 3
<OL TYPE="I">
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>
Roman Numerals?!?! I Want Letters!
You're just no fun, you know that? OK, regular letters. I can do that. Try this:
A. List Item 1
B. List Item 2
C. List Item 3
<OL TYPE="A">
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>
But I Don't Want Capital Letters!
*sigh*
You can turn the letters or the Roman numerals to lower case letters by putting the lower case version of
the letter in the OL tag. like so:
<OL TYPE="i">
and
<OL TYPE="a">
Give it a shot.
Start the Count After One

Maybe you don't want your count to start at one every time. That's easy to fix. Here's an ordered list
that starts at four.
4. List Item 1
5. List Item 2
6. List Item 3
<OL START="4">
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>
Try it yourself.
Can I put these together?

Yes. Just remember to close each one. You could do something like an OL list and under each LI
command for the OL, you could put in a small UL. Like so:
1. Main Heading
o List item 1
o List item 2
2. Secondary Heading
o List item 1
o List item 2
here's what it looks like:
<OL>
<LI>Main Heading
<UL>
<LI>List item 1
<LI>List item 2
</UL>
<LI>Secondary Heading
<UL>
<LI>List item 1
<LI>List item 2
</UL>
</OL>
There is a pattern to putting unordered lists under one another.
• The first list gives you the solid bullet

• The second gives you the empty bullet. You can see that above.
• Each list after that gives you a square bullet.
The Definition List

You can play with the text all you want inside of all these list commands. Bold, italic, and any other one
you want will work. There's one more set of list commands that manipulate the text for you. The lists
above are all single item lists. Each LI command makes one list item. Now check this out:
Here's What's For Dinner
Salad
Green stuff and dressing
The Meal
Mystery meat and mashed yams
Dessert
A mint
...and here's what it looks like.
<H4>Here's What's For Dinner</H4>

<DL>
<DT>Salad
<DD>Green stuff and dressing
<DT>The Meal
<DD>Mystery meat and mashed yams
<DT>Dessert
<DD>A mint
</DL>
Here's What's Happening
• I used an H4 command to create a heading

• <DL> stands for Definition List. It tells the browser that a double tier list is coming up.
• <DT> stands for Definition Term. It's the first tier.
• <DD> stands for Definition Description. It's indented and appears to modify the definition term.
It's a nice look. I haven't run into any place to use it quite yet, but you have it if you need it.
Well...that's all I have. Use the list commands and present information to your readers in a smoother
fashion than writing long drawn out paragraphs with a lot of detail. I use these lists all the time. I think
there might be a tutorial here that doesn't use one, but I don't remember it. Enjoy, and happy listing.
By the way, if you liked this tutorial try CSS and Lists.
So, You Want A Meta Command, Huh?

By Joe Burns
Before we get started... This page uses things called "meta" commands. What you will learn here is only a
small part of what they can do. See HERE for a few more helpful uses.
[Search Engine... What's That?]

[What Can You Do With Meta Commands?]
[Offering Keywords]
[Offering Your Page Generator]
[Offering a Description of Your Page]
[Author, Copyright, Expire, Etc...]
[Where Does It Go?]
[What If I've Already Submitted My Page?]
[How Do I Submit A Page]
Meta what? Unless you are loopy into this HTML stuff like I am, you probably haven't heard about meta
commands. I would guess the reason is that the commands don't put anything on your page. There's no
visual associated with them, but they can be quite helpful to the search engines that look over your page
and tell others about it.
Search Engine... What's That?

A search engine is a program that takes key words from you, searches a database of Web pages, and
gives you back a list of pages that might be helpful. Yahoo is a search engine, as is Webcrawler. If you'd like
to see a list and a half of search engines and learn how to use them straight from your own page -- see my
tutorial So, You Want A Searchable Database, Huh?.
When you submit your page to a search engine, or "register" the page as Net-heads like to say, you are
asking the people who keep the page to place your page's text into a huge database. Yahoo's database was
well over 3 million pages, last I heard.
When you use the search engine, you enter "keywords." Let's say you were interested in deep-sea
fishing. You'd enter those words. The database would be searched and would return any pages containing
those words.
When you register a page, some search engines ask you to enter a few keywords. What you are allowed
to offer is limited. Wouldn't it be nice if you could send the search engine a page that has all the keywords
written out in the HTML text? This way you could make the search engine's job a lot easier and get your
page brought up onto the screen a lot more often.
What You Can Do With Meta Commands

There are three things (in terms of search engines) that I know of:
• Offer Keywords to the search engine.

• Offer the name of the computer software, herein known as the "Generator", you used to make the
page (it helps).
• Offer a description to use when your page is displayed.
--Some search engines do not show descriptions, so this won't work on all engines.
• Offer the author's name.
• Offer a copyright statement.
• Offer an expiration date so the search engine's database stops bringing your page up after a certain
time as passed.
Let's remember that you are playing against a search engine here. You will play by its rules, not the
other way around. These items will not work on all search engines, but will be successful on most.
Offering Key Words

Follow this format:
<META NAME="keywords" CONTENT="big,ugly,stupid,Baltimore,Ravens,fan">

Sorry, Ravens fans. I like whom I like and I can't change for anyone. I grew up in Cleveland. No jokes!
See what I did? I offered keywords, all separated by a comma. No space. Some servers don't like an added
space and may not bring up the page because the space is seen as part of the word. Offer words in the
format above.
ALSO some servers will bring up one page over others because the keyword appears more than once in
the page. So, why not offer 10 or 12 of each of the keywords you are using? Huh? Why not? That would
work, right?
No! That's spamming! And search engines hate it. Do not type multiple keywords like,
"Browns,Browns,Browns,Browns,etc.". If you do, you'll probably be stricken from the search engine's
database. They're real picky about that kind of stuff. Play fair. You can put in a ton of keywords. Just make
them all different.
One more thing...don't put in false keywords. That can also get you kicked off the search engines. We all
know that Yahoo! is one of the most visited sites on the Web. If you put "yahoo" in your keywords yet that
has nothing to do with your page, that's not good. Play fair.
Offering Your Page Generator

I don't get this one, but I always put it in anyway. It's another thing the search engine can use to isolate
your page. It's simply the program you used to make your page. This is what mine always looks like:
<META NAME="Generator" CONTENT="HTMLpad">
Use it in good health.
Offering a Description of Your Page

If you use search engines to any great extent, you no doubt have seen the ones that return the title of
the page and then something like the first 25 words. Most of the time, the text makes no sense. Wouldn't it
be great if you could tell the search engine what description to place on the search-results page? Yes, it
would!
(It's a sign the mind is starting to go when you keep answering your own questions.)
Here's the format:
<META NAME="description"
CONTENT= "Come to my page please!">
...pretty self-explanatory.
Author, Copyright, Expire, Etc...

These follow the basic format as above. Here they are.
• <META NAME="author" CONTENT= "Some Body">

This tells search engines who wrote the document.
• <META NAME="copyright" CONTENT="Copyright © 2001">
This tells search engines the copyright.
• <META NAME="expires" CONTENT="15 September 2000">
This automatically expires the document in the search engine's database.
• <META NAME="DISTRIBUTION" CONTENT="global">
The page will go global
• <META NAME="REVISIT-AFTER" CONTENT="15 days">
Have the Search Engine revisit the site to possible relist.
• <META NAME="ROBOTS" CONTENT="all">
Use all the bots to list the site!
Where Do I Place These On My Page?

Somewhere close after the TITLE commands, but still between the HEAD tags. Make sure your page's
title comes first as that is the first item many search engines use -- Webcrawler does this. Also, when you
submit a page to a search engine, don't put something in the title that is different from the rest of the page.
It may be clever, but it's messing up the search for your information. Change it on your server, but be sure
to submit a copy that is done correctly.
What If I've Already Submitted the Pages?

What to do now depends on the search engine people. Many will only take a submission once. Some
might take updates, but those are last on their list of priorities.
I've Never Submitted a Page to a Search Engine. How Do I

Do It?
There are a couple of ways. You could drop by the search engines (there's a pretty full list of them here)
and follow their link that reads, "submit URL" or words to that effect.
There are also sites on the Net that will allow you to submit to many at the same time. Submit It! is by
far the best. It's not a hard process. In fact, it's kind of fun to get all those e-mail messages from these big
companies telling you your work was cool enough to be used in their database.
What's even cooler is going to a search engine and looking up your own page.
Thanks for coming by...
So, You Want A New Browser Window, Huh?

By Joe Burns
[Why Would I Do This?]

[Here's What Does It]
[How Do I Stop It From Happening?]
Did you see that? A new browser window opened up! You now have two windows open at the same time.
Really! Look up at the "BACK" button at the top of the page. It isn't available to you. (Except on some
higher-level browsers.) That's because you've started a whole new browser session.
Why Would I Do This?

I receive at least one letter a day asking for info on how this is done, so I put a quick tutorial together.
The benefits are best used when you are demonstrating something and need two windows. You can also
open other sites while keeping the user in your site. These are other uses of course, but those are the two I
am most font of. Now, here's what you get:
• The new browser window is fully operational, but is not attached to the window that it came from.
There are no "back" capabilities. (Except on some higher-level Explorer browsers.)
• The way to get back to the page below is to close the top-level window. In windows 3.x, choose
"CLOSE" under the FILE menu in the top left hand of the browser. In MAC and W95, hit the button
in the upper right-hand corner.
• If you choose "Exit," you'll close the browser altogether. You don't want to do that.
Here's What Does It

<A HREF="http://www.site.com/page.html"
TARGET="resource window">
Text Text Text</A>
See that TARGET="resource window" above? That's what does it.
How Do I Stop It From Happening?

I also get letters stating that a client-side image map or a frames page is causing a new window. Some
people want to get rid of it. Try this:
<A HREF="http://www.site.com/page.html" TARGET="_top">
Text Text Text</A>
Notice I targeted the link to the top of the page. This is the default in HTML. Not putting it in has always
resulted in an A HREF link jumping to the top of the same browser window. In order to stop the new window
from popping up, you now need to force the browser's hand. Please notice the underline mark before the
word "top."
Now, go and use the commands for good, not evil. They are yours to exploit at your own will. To get
back to the HTML Goodies Page, you can either Click Here, enter "/index.html" above, or close this window.
If you get a dialogue box that asks Close all windows and exit? click No, go back and choose "close," not
exit.
My suggestion would be to close this window altogether. You're taking up precious memory running two
windows.
So, You Don't Want Links Underlined, Huh?

By Joe Burns
Take a look at the links below:
HTML Goodies ESPN

Van Halen News Desk ABC News Pepsi
Notice anything about them? They are not underlined, yet they are still active. (If they are underlined on
your browser, then you do not have a browser level high enough to use this command; you still can use it,
though, because others will have the correct browser!)
For a good while, people would write to me and ask how to rid the links on their page of the awful
underline. I would always write back that you could always get rid of it: Just go into your browser's
Preferences and set it so the links are not underlined. Done.
But I knew what they wanted -- they wanted the links non-underlined on all browsers, not just theirs.
Well, here's how you do it:
<STYLE>

</STYLE>
You place that Style Command statement inside the HEAD commands on your HTML document. In that
position, it affects all the links and makes them plain. They retain their coloring, but lose their underline.
Affecting Just One Link

I have been given two ways of making only one link non-underlined. Here they are in their own words.
This suggestion by Luke Erichsen:
There IS a way to make just one link not underlined. Simply do this:
<A HREF="page.html" STYLE="text-decoration: none">Huh</a>
This suggestion by >Nikhil Gupta:
Place this style command in place of the one you have above:
<style>
a.1{text-decoration:none}
a.2{text-decoration:underline}
</style>
(From Joe: The numbers 1 and 2 are classes. Referring a link to class 1 does the "none" text decoration,
class 2 does the other.)
And then later in the program place this:
<a class="1" href="http://some.server.com/some page/">

This link is not underlined...</a>
This is for the link which should not be underlined:
<a class="2" href="http://some.server.com/some page/"> This link IS underlined...</a>
To underline it replace class="1" with class="2" like above.

Enjoy!
So You Want A Page Jump, Huh?

By Joe Burns
I get letters about how to do these internal page jumps all the time. These are a great way to allow people
to move quickly inside a long page. I have them all over my HTML Goodies tutorials.
Here's what I'm talking about:
Click Here to visit

the bottom of this page.
Here's how ya do it...

You need to place two items on each page:
1. A basic link command pointing to another section of the page.

2. The point where the page will jump.
Here's the basic link command:
<A HREF="#codeword">Blue Words, Blue Words</A>
Here's how you denote where the jump will scroll the page:
<A NAME="codeword">
Here's what's happening
o The A HREF command is the same as a basic link except the link is to a codeword rather
than a URL.
o PLEASE NOTICE there is a # sign in front of the codeword. You need that to denote it is
an internal link. Without the # sign, the browser looks for something outside the page
named after your codeword. ...and it ain't gonna be there.
o Your "codeword" can be just about anything you want. I try my best to keep it short and
make it denote what it is jumping to. There might be a limit to the number of letters you
can use--but I haven't found it yet.
o The point where the page will jump follows the same general format except you will replace
the word HREF with the word NAME.
o PLEASE NOTICE there is no # sign in the NAME command.
o Note! Where you place the NAME target will appear at the top of the screen browser.
Jumping from another page

Let's say you have a tutorial--much the same as this one--and you will be jumping from page to page. It
would make things a lot easier if, when you jump between pages, you could have the jumped-to page load
at a specific point rather than loading at the top each time. Well, you can...
See the words "Welcome Back!" a few lines down? Well, I'm going to have you jump to a new page where it
will explain the process and then you will jump back so "Welcome Back" appears at the top of the browser
screen.
So here we go...
Click Here to Go
Welcome Back!
I knew I'd see you again.
So...do ya got it? Good. Thanks for coming.
Hi There...
...and welcome to the bottom of the page
Reloading The Page

By Joe Burns
[Reload All By Itself]

[Reload From A User's Click]
[Use the Full URL?]
I started to get email asking for this effect right around the time Internet stocks took off. People wrote
asking how the stock sites got their pages to reload all by themselves.
The answer is pretty easy so I usually just wrote and answered in the email. While going through my
notebook of possible topics, this one came up as one that is asked about a fair amount so I thought I'd write
up a quick tutorial.
The trick to reloading the page is to force the browser to not look into the cache, but rather to again make a
connection to the Web and bring up the document from the server. Most people know it can be done by
hand by holding the shift key and clicking the "Refresh" (on IE) or "Reload" (on Navigator) buttons. If you
didn't know...now you do.
That's a proven method but it's not exactly very pretty to have text asking the user to hold and click. You
want your site to do the trick either by itself, or by offering a method whereas the user simply clicks and the
browser does it for them.
Below I have two methods. One will reload every so many second all on its own and the other will reload
when the user asks for it.
Reload All By Itself

This one's nice and easy. I'll give you the code. Copy and paste it into the document you wish to reload.
Once in there, change the number of seconds you wish the page to wait before starting the reloading
process. This code goes in between the HEAD tags.
<META HTTP-EQUIV="refresh" CONTENT="15">
Right now, the command is set to reload every 15 seconds. I checked a couple of online sites and they were
all set about the same. I found the sites displaying stock information were set to around five minutes or 300
seconds.
I don't have a refresh on this page because the darn thing would just keep refreshing and there's nothing on
this page that will update.
Reload From A User's Click

I've seen this done a number of ways, but this is my favorite because it, again, forces the browser to load
from the server. It is true that pages can become cached if they are reloaded a great many times, but I
have had pretty good success with this. Try it:
Click to refresh the page
Here's the code:
<A HREF="javascript:history.go(0)">Click to refresh the page</A>
Rather than using a refresh command, I like to go to the history of the page and set it to zero. The zero is
the current page since in JavaScript, lists (arrays) are numbered starting with zero. Here's the same effect
in a button:
And the code:
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
Use the Full URL?

Again, it's possible that a page using the methods shown above can get cached and can stop reloading from
the server. A Webmaster friend told me that if you simply set up a link to the current page but use the
entire URL, the page would always reload from the server because the request starts at the domain. For
example, the full URL of this page is:
http://www.htmlgoodies.com/tutors/refresh.html
If you use that full URL in each of the elements above, you'll lessen the chance the page will cache. Thus,
the Meta Refresh would become:
<META HTTP-EQUIV="refresh" CONTENT="5;

URL=http://www.htmlgoodies.com/tutors/refresh.html">
You would then change out the JavaScript formats above to simply go to the URL rather than looking at the
history file. In fact, you could lose the JavaScript altogether and just make a simple A HREF link right to the
current page. The trick is to use the full URL address so that the process starts at the very beginning.
Again, the effect is the same as you'll get with the code above. It just lowers the chance of the page getting
stuck in cache.
That's That
Short, sweet and simple. The effect is useful if done correctly. Two methods of using the effect incorrectly
are refreshing so that a counter increases and refreshing so that a new banner ad displays. You don't want
to refresh your page unless there's a very good reason. There are programs out there that update banners
without refreshing the entire page. The use of the refresh to display new counter numbers is just silly.
And yes, I have seen both usages or I wouldn't have thought to bring them up.
Enjoy!
So, You Want Text Commands, Huh?

By Joe Burns
[ABBR]
[ACRONYM]
[ADDRESS]
[B]
[BASEFONT]
[BDO]
[BIG]
[BLINK]
[BLOCKQUOTE]
[CITE]
[CODE]
[COMMENT]
[DEL]
[DFN]
[DIV]
[EM]
[FONT COLOR]
[FONT FACE]
[FONTSIZE]>
[H#]
[I]
[INS]
[KBD]
[LISTING]
[MULTICOL] [NOBR]
[PLAINTEXT]
[PRE]
[Q]
[S]
[SAMP]
[SPAN]
[STRONG]
[SUB]
[SUP]
[TT]
[U]
[VAR]
[WBR]
[XMP]
I get letters from new users all the time asking if there are any other commands for manipulating text
other than <B> and <I>. I usually tell them "no" and go on.
I'm kidding, of course. These 40 commands have been listed in the Goodies HTML Reference since it was
posted, but they're way at the end, and tough to find. So, in my continuing effort to continue writing
introductory material, I thought I'd throw this little deal together. I've made links to as many other pages as
cover these commands in greater detail.
Command
Usage Example
Name
ABBR</A< TD> <ABBR>The Altered Text</ABBR> The Altered Text
This is a new command in HTML 4.0. Your browser may not support it yet.
ACRONYM <ACRONYM>The Altered Text</ACRONYM> The Altered Text
This is a new command in HTML 4.0. Your browser may not support it yet.
ADDRESS <ADDRESS>The Altered Text</ADDRESS>

The Altered Text
B <B>The Altered Text</B> The Altered Text
<BASEFONT COLOR="red">The Altered

BASEFONT The Altered Text
Text</BASEFONT>
This works like the more popular font commands, except the basefont command also
accepts Style Sheet commands.
BDO <BDO DIR="rtl">The Altered Text</BDO> The Altered Text
This is a new command in HTML 4.0. Your browser may not support it yet. The BDO
command is used to denote direction. See the DIR command above? RTL means right to
left. LTR means the opposite.
BIG <BIG>The Altered Text</BIG> The Altered Text
BLINK <BLINK>The Altered Text</BLINK> The Altered Text
This command is only supported by Netscape. Hopefully they'll drop it soon too.
BLOCKQUOTE <BLOCKQUOTE>The Altered Text</BLOCKQUOTE> The Altered Text
Actually, this command surrounds text and indents it as a whole.
CITE <CITE>The Altered Text</CITE> The Altered Text
CODE <CODE>The Altered Text</CODE> The Altered Text
COMMENT <COMMENT>The Altered Text</COMMENT>
Actually - nothing appears on the page. You see, this is a comment. You'll find surrounding
text with the
 commands will get the same effect, text in the code that doesn't show up on
the page.
DEL <DEL>The Altered Text</DEL> The Altered Text
This is a new command in HTML 4.0. Your browser may not support it yet. It stands for
"DELeted" text. You should get a strike-through effect.
DFN <DFN>The Altered Text</DFN> The Altered Text
"DFN" stands for "definition".
DIV <DIV>The Altered Text</DIV> The Altered Text
DIV stands for division. This sets apart a section of the page so that it can be altered,
usually with Style Sheet commands. You should also take a look at the Class and ID tutorial as
well as the Layering tutorials for more exciting exploits of the DIV command.
EM <EM>The Altered Text</EM> The Altered Text
"EM" stands for "Emphasis".
FONT COLOR <FONT COLOR="red">The Altered Text</FONT> The Altered Text
For more, see the Text Tutorial.
The Altered
FONT SIZE <FONT SIZE="+1">The Altered Text</FONT>
Text
For more, see Primer Number 3. Hey! That rhymes!
FONT FACE <FONT FACE="arial">The Altered Text</FONT> The Altered Text

For more, see the Text Font Tutorial. That doesn't rhyme.
H# <H#>The Altered Text</H#>

The Altered Text
There are six levels of this command. H4 is above. For more - see Primer Number 3
I <I>The Altered Text</I> The Altered Text
INS <INS>The Altered Text</INS> The Altered Text
This is a new command in HTML 4.0. Your browser may not support it yet. It means Inserted
text. You should get an underline effect with it.
KBD <KBD>The Altered Text</KBD> The Altered Text
"KBD" stands for "Keyboard".
LISTING <LISTING>The Altered Text</LISTING>

The Altered Text
I wouldn't slap this on a brain cell just yet. When HTML 4.0 becomes standard, this will be a
dead command. Use <PRE> instead.
MULTICOL <MULTICOL>The Altered Text</MULTICOL> No example
This sets text apart in multiple columns in Netscape only.
NOBR <NOBR>The Altered Text</NOBR> The Altered Text
"NOBR" stands for "No Break". When you surround text with this command, it does not
wrap at the end of the line but rather just just keeps rolling right off the right side of the
screen.
PLAINTEXT <PLAINTEXT>The Altered Text</PLAINTEXT> The Altered Text
No need to know this one cold either. When HTML 4.0 becomes standard, this will be a dead
command. Use <PRE> instead.
PRE <PRE>The Altered Text</PRE>

The Altered Text
Use PRE more for format than to alter text. Surrounding text with the command keeps it in
the same format and shape as it appears on the document page.
Q <Q>The Altered Text</Q> The Altered Text
This is a new command in HTML 4.0. Your browser may not support it yet. It will be a
replacement for the blockquote command. Plus it will have the same properties available as
the new Span command.
S <S>The Altered Text</S> The Altered Text
"S" stands for "Strike-through".
SAMP <SAMP>The Altered Text</SAMP> The Altered Text
"SAMP" stands for "Sample".
SMALL <SMALL>The Altered Text</SMALL> The Altered Text
This renders text one size smaller.
SPAN <SPAN>The Altered Text</SPAN> The Altered Text
the SPAN command works a lot like the DIV command. You can set all sorts of parameters
when you use it. For instance - if you are using a version 4.0 browser, lay your mouse
pointer on the altered text example above for a second. For more - see the HTML 4.0 tutorial.
STRONG <STRONG>The Altered Text</STRONG> The Altered Text
SUB The <SUB>Altered</SUB> Text The Altered Text
SUP The <SUP>Altered</SUP> Text The Altered

Text
TT <TT>The Altered Text</TT> The Altered Text
"TT" stands for "Typewriter Text"
U <U>The Altered Text</U> The Altered Text
VAR <VAR>The Altered Text</VAR> The Altered Text
"VAR" stands for "Variable". Text is a small fixed-width font.
WBR <NOBR>The Altered<WBR>Text</NOBR> The Altered Text
Placing the WBR command allows No-Break text to wrap at that point if it needs to.
XMP <XMP>The Altered Text</XMP>
The Altered Text
This is also a dead command when HTML 4.0 comes to pass.
Enjoy!
So You Want To Change Your Font, Huh?

By Joe Burns
I have been asked time and time again how to get the font face to change. I'm assuming you already
know you can change font size through the use of "H" and "FONT" number commands. If what I just said is
Greek to you - see here for a few more details on the process.
Below is what I'm talking about. I have listed a few font face commands that you can use. All I did was
simply write this tutorial while reading the fonts available in my WORD text editor and entered all of the font
faces available with the little "TT" next to them. Here are just a few of the ones that worked. Follow the
format below for your page.
Every Font Will Not Work Everywhere...

This is very important! A text font command will only work if the font you call for is loaded on the
computer displaying the page.
For example, you head to one of those million-font sites and download a really neat but obscure font
face. You load it onto your system and set it in the code. One your computer the text font will display just
fine. Not so on just about every other computer in the universe. The font face isn't loaded onto those
computers.
What to do, what to do?
Well, don't use non-traditional font first off. However, if there is a font you simply MUST have on your
page, then why not use an image editor and create an image that has the font and text on it? That way the
computers load an image with the text and the text displays. Cool, huh?
Dig these examples...and keep reading. I have one more tip afterwards.
This is regular font
<FONT FACE="arial">arial font</FONT>
<FONT FACE="algerian">algerian font</FONT>
<FONT FACE="bookman">bookman font</FONT>
<FONT FACE="braggadocio">braggadocio font</FONT>

<FONT FACE="courier">courier font</FONT>
<FONT FACE="desdemona">desdemona font</FONT>
<FONT FACE="garamond">garamond font</FONT>
<FONT FACE="modern">modern font</FONT>
<FONT FACE="symbol">σ ψ µ β ο λ φ ο ν τ </FONT>

(These are pretty silly.)
<FONT FACE="wingdings"></FONT>
(As are these.)
Good luck with others...
One More Tip

You can now set numerous text font faces for the computer to play with. Here's what I mean:
<FONT FACE="modern, arial, veranda">">Text Text</FONT>
Notice that I have three font faces listed each with a comma in between. Following that format, you
suggest numerous font faces in descending order of importance. When the page loads, the browser check to
see if the computer has the first font face listed. If the font face is on the computer, it displays. If not, the
browser attempts to find the second font face listed. If it's not there either, then the third comes into play.
I've seen pages that list up to ten font faces.
That way...you're sure to get at least one unless you list ten really goofy font faces
...tick, tick, tick

By Joe Burns
Greetings and Welcome to...
So, You Want A Dynamic Page, Huh?
So, You Want A Dynamic Page, Huh?

By Joe Burns
[Getting A Page To Change</]

[How To Get That "Ta Da" Sound]
[A Few Assumptions]
Okay, okay, okay -- enough with the page changing thing. You may want to bookmark this page right now
because if you log in to the main dynamic page you'll just go through all that page flipping, and we don't
want that again.
Before we get started: This page uses things called "meta" commands. What you will learn here is only a
small part of what they can do. Look here for a few more helpful uses.
Getting A Page To Change

This is a great effect. A few dynamic commands attached to your Web pages will offer some surprises to
your readers. I've seen this used to take people on guided tours through buildings, tell jokes, and do just
what I did -- almost talk to the viewer. You should be able to find a use for a dynamic page, so read on.
Here's the command I placed on my page to get the page-changing effect:
<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://www.page.com/page.html">

This is placed right after the <HTML> command and just before the <TITLE> and </TITLE> commands.
Here's what you are telling the computer to do:
o META HTTP-EQUIV tells the computer that after the page is loaded it is to do something.
o refresh tells the computer that the thing it's supposed to do is "refresh" the page.
o CONTENT is a strange name in this case. It denotes the number of seconds before the
meta refresh is supposed to occur. I have this one set at 5. You can set it at whatever you
want.
o URL is the address it's supposed to go to after the 5 seconds, or however many seconds
you denote.
Please note: The CONTENT command includes the URL command so there is no quotation mark after the 5
or before the URL address. Make a point of copying exactly what is noted above. It won't work otherwise.
How To Get That "Ta Da" Sound
Now, most of you should have gotten a little Ta Da! when you logged in. That's another thing you can
do with this meta command. I had it set up so that after the page loaded, your browser should have
played a little .au file called "tada.au". (Clever name, eh?)
Here's the command I wrote that did the job:
<META HTTP-EQUIV="refresh" CONTENT="1; URL=http://www.page.com/tada.au">

Note I simply replaced the URL above with a sound file address. This is similar to what you do with a
sound embed command. It's not quite equal, but close.
A Few Assumptions
There are a few assumptions you make using these dynamic commands. Be careful filling your pages
with a bunch of these sound commands. Why?
o You are assuming the viewer has a browser level 1.1 or higher. If your viewer is using 1.0
or a browser with equal capabilities (yes, they do still exist contrary to the growth of the
WWW), then the dynamic page that is supposed to change just sits there. Then the viewer
waits... and waits... nothing happens. He or she swears at you and moves on.
o By using a sound file, you are assuming the viewer can play what you have offered. Tough
call, as there are many different file names. I suggest .au first (my opinion).
o Finally -- and most annoyingly -- you are assuming people care to see the little page
change or hear that "ta da!" every time they log in. A grand assumption indeed.
My suggestion is to use these pups sparingly and offer those less browserly endowed a way around the
page. Put something on the page that is supposed to change that allows those using an early browser to
click and join in the merriment since their page won't change for them.
So, You Want A Sound/Embed, Huh?

By Joe Burns
[Helper Applications]
[Offering A Sound]
[Embedding A Sound]
[What's A Plug-In?]
[How Do I Do It?]
[MIDI?]
[More About Embedding]
Push Play for Charlie Brown
Sounds on the Net are a great thing. If you have a computer equipped with a sound card and a few
shareware programs, you can hear as much as you care to download. Van Halen is my favorite musical
group. Before their greatest hits album came out, I was able to download the sound files of the two new
songs and enjoy them through my RealAudio players. I still bought the CD, of course.
The following will cover two ways of offering sounds over the Internet: helper applications and
embedding the sounds.
Right up front, I should point out that the EMBED command is not "standard" HTML.
That means it is not one of the commands the W3 has proclaimed is good for all
browsers. EMBED is a command that is understood by the Netscape Navigator browser
alone.
If you use EMBED, you should always follow it with the BGSOUND="----"
command, placing the sound file name where I have the "----". That's Internet
Explorer's method of playing a background sound.
Use both. Then all browsers will be able to play the sound.
Helper Applications
When the World Wide Web first got started, back when Mosaic was the browser and this new thing called
Netscape 1.0 came out, sounds were available, but they were played with the use of a helper application.
Helper applications were programs that attached to the Netscape browser. (You can still do it all this way
-- don't get me wrong -- but plug-ins, covered later, are making helper applications a bit of an endangered
species.) You're using helper applications right now! Look at the top of your browser. See that thing called
Options? Click on it. Choose Preferences, then choose Helper Applications. There they all are. Roll down the
list. You'll see a lot of extra applications and a lot of "Ask User" statements. In order to play a sound file, like
.wav, .au, or .aiff, you will need to attach an application that the browser can use to play the sound.
I used (and still use) a program called WHAM. It's great and it plays a great many types of sound files.
What happens is this:
• The browser gets the sound file and downloads the entire thing.
• Once the download is complete, the helper application is launched.
• The browser loads the sound file into the application.
• The application plays the sound.
I always thought it was a pretty good system. Yeah, it took a bit of time, especially using a 14.4 or 28.8
modem, but it always worked. At least it always worked for me.
Offering A Sound Via Helper Application

If you have a sound you'd like to offer, follow this format:
<A HREF="http://www.yoursite.com/filename.wav"> Click Here</A>
Notice it's nothing more than a simple link pointing to the sound file. Place the sound file in the same
directory as the page that calls for it and the browser will take it from there. You just sit back and watch it
happen. Just be sure to FTP transfer the sound file to your site as "binary" or "raw data," as any other way
can corrupt it.
I should also say here that by making this hypertext link to a sound file you are taking the chance that
the person viewing the page on your site has an appropriate helper application. Anymore, that's not a bad
bet. A browser is now pretty well equipped for sound as soon as the user installs it.
Embedding A Sound
Embedding a sound on a page means that you include the sound commands in your HTML document and
use a plug-in to run it.
What's A Plug-In?
Plug-ins are programs that help your browser perform at a higher level. A sound plug-in does basically
the same thing the helper application does, except it works inside the Netscape Navigator window rather
than starting up as a whole other program. Instead of WHAM popping up and Netscape being pushed to the
back while the sound runs, a sound plug-in works inside of Netscape Navigator allowing you to continue
playing with the page while the sound is running.
If you head to the Netscape Home Page or Yahoo and enter "plug ins", you'll be able to scan a ton of
little programs that cover everything from sound to video to 3-D VRML. They all have specific requirements
for browser types and platforms. Be sure to read the instructions before downloading. The four that I've
installed have all worked right away.
If you're using a later version of Netscape Navigator, you might have run into a page that requires a
plug-in and had a little window pop up that asks if you'd like to get the appropriate plug-in. If you answer
"yes" it takes you to the Netscape plug-in page and you download what you need.
If you've taken the time to download version 4.0 or higher of either Navigator or Internet Explorer, you
may have noticed that the download offered you the ability to install a large run of plug-ins right off the bat.
How Do I Do It?
I'm going to show this to you using a MIDI file. In fact, if you have the ability to play midi files, you
probably clicked above and have listened to a midi of the Peanuts theme. I believe the actual name of the
melody is "Linus and Lucy." I like it.
MIDI?
Yeah, midi. It's an acronym that stands for Musical Instrument Digital Interface. That's a program that
acts as a go-between for an instrument and something that creates the sound. Sort of like running a guitar
through a computer and then out a speaker.
A midi file over the Web works as a program that runs the sound card. The midi file is not simply read
and reproduced like a .wav or an .au file. The midi file sort of "plays" the sound card. It tells the sound card
what note to produce and for what duration. Put enough of these notes together and it sounds like music.
Most of the midi music you hear sounds like a bad little Casio keyboard. Probably because that's the level at
which your sound card can reproduce the sounds. Higher level sound cards can reproduce the MIDI just as
clear as any instrument could. It's really amazing when you hear it.
The Format For An Embed:

<EMBED SRC="peanuts.mid" AUTOSTART=FALSE LOOP=FALSE WIDTH=145 HEIGHT=55
ALIGN="CENTER">
</EMBED>
Here's What's Happening:
• EMBED tells the browser an embed sound is here -- go get the plug-in. Remember, embed
commands are associated with plug-ins.
Note: If no plug-in is available, the browser will do one of three things:
1. Do nothing. This is true of very early level browsers or browsers other than Netscape.
2. Put up a dialogue box asking you how you want to handle the file.
3. Tell you a plug-in is needed and ask you if you'd like to go get it.
• HEIGHT/WIDTH deals with the plug-ins control panel size on the page. The control panel at the
top of the page was giving a size of 145 pixels wide by 55 pixels high.
You can't very well embed a sound, so to have the browser understand what the thing is, it is
offered as if it is almost an image. (Note the image of the control panel popped up.) If you do not
want a panel, add the command HIDDEN="yes" or set the height and width to zero.
• SRC stands for "source." It tells the browser where to go to get the audio file.
• AUTOSTART deals with whether you want the sound to play by itself or by the viewer starting the
file after the plug-in box pops up. "True" starts the file straight away, "false" prompts the viewer.
Note I used "false" above. "True" would have started the file straightaway upon load.
• LOOP works the same way. "True" loops the sound so it plays forever. Make the loop "false" if you
only want it played once.
More About Embedding
1. You can embed just about any type of sound file as long as the person using your page has the
ability to read it. My plug-in will play just about any file except RealAudio (spelled correctly).
2. RealAudio still works as a helper application. What's great about RealAudio is that it plays the sound
as it is being downloaded. The play is almost instantaneous. Great invention.
3. Download time with an embed is not sped up or slowed. The entire file must download before the
plug-in plays it. What is different (and better) about this is that an embed starts the download
process without anyone clicking on blue words. Also, you can play with the page while the download
is occurring, rather than just sitting and waiting like you have to do with helper applications.
That's about it. Try embedding a few midi files and see what kind of response you get. I have one
here and there. No one has complained yet.
So You Want An Active Channel, Huh?

By Joe Burns
[Active Channel? Hah?] [OK - I Clicked]

[The Active Channel Format] [What's that CDF Thing?]
[XML? Hah?] [Do It Yourself CDF] [Other Commands]
So, have you seen these things floating around lately:
They're pretty popular little pups with the Internet "in" crowd. In fact, requests to put together a tutorial
on the subject of Active Channels have been filling the Goodies mailbox. So here we go. This is a basic
instructional look at what an Active Channel is and how you can get one on your site.
Active Channel? Hah?

You're to read that line above with a bit of an Archie Bunker voice. If you don't know who Archie Bunker
is then boy do I feel old.
An Active Channel is another idea from the laboratories of Microsoft. As such, you require the use of the
Microsoft Explorer browser, version 4.0 or better, in order to get in on all the actively channeled fun.
Think of it this way, the people that come to your site have the ability to set up a pathway in which you
can "push" them information other than what is on the page. In activating this pathway, or channel, the
user allows you a bit more leeway in bombarding them with information. You can push, or "pull" depending
on what side of the argument you wish to be on, the user just about anything, a monthly newsletter, new
site info, or a listing of new tutorials.
What's more, the user who clicked to create an active channel with you now has an additional
"bookmark" to your site. In fact, that's how people started referring to these little gems in the first emails.
Users wanted to know how to create the fancy bookmark. So, if you haven't already clicked on a page in
order to set up a channel, go ahead and click on the Active Channel logo above. You'll get a box that looks a
lot like this:
For now, just choose to add the site to your channel bar as I have it earmarked in the above image. Go
ahead. You can always delete it later.
OK - I Clicked
Woohoo!! You clicked and fell right into my evil plan. I now own you and all that is yours! Ha ha ha ha ha
ha! *sniff* We now return you back to your regularly scheduled reality already in progress...
Now you have an active channel set up with my site. To see the fruits of your labor, look at the very top
of your browser window. There should be a button there marked "Channels". There's a little satellite receiver
image right near it. Go ahead and click on that. The screen should split and you should see a little HTML
Goodies logo next to the same little satellite dish image. If there's no image, you may need to run your
mouse over the text. Then you'll get the image.
The Active Channel Format

Now that you have a channel that links you right to my page, let me show you how to get one on your
page so others can begin channeling through you. Hopefully someone will begin channeling Elvis soon. (Uh,
thank you very much)
Here's the format:
<A HREF="goodies.cdf"><IMG SRC="add_chan.gif"></A>
Notice it's little more than a basic HREF link command. The only real difference is that this link is headed
toward a file with a CDF extension. See that above? The image I am using as the link is called add_chan.gif.
But you don't need an image for it to work. You can put in straight text if you want. That little image is just
how I usually see these things denoted on other web pages, so I'm using it here.
What's that CDF Thing?

If you people would stop asking questions I could wrap these tutorials up much faster.
CDF stands for Channel Definition Format. It's a text file that denotes what you have available on your
site. And it's what sets up your Active Channel. Here's what my CDF file, named goodies.cdf, looks like:
<?XML VERSION="1.0" ENCODING="UTF-8"?>
<CHANNEL HREF="index.html" BASE="index.html">
<TITLE>HTML Goodies</TITLE>
<ABSTRACT>HTML/DHTML Tutorials and Java Script</ABSTRACT>
<LOGO HREF="goodieschannel.gif" STYLE="IMAGE"/>
</CHANNEL>
The CDF above, and all CDF files for that matter are simple text. Just the same as any HTML document
you've ever made. It's just text. That text is then saved to a file and the file is given the extension .cdf.
Again, think of it as creating an HTML file, except you use the extension .cdf instead of .html.
Now, it may look like I've got a basic HTML file here with a few mistakes. Not so. You see, the CDF file is
not written in HTML per se, but rather a cousin of HTML called XML, Extensible Mark-up Language. OK,
now's when this thing starts to get a little goofy and people start to drop out saying "Ah, the heck with it."
XML? Hah?
Archie Bunker again. XML is a format of mark-up language that is not "fixed" into a format like HTML. It
is actually not a language at all, it is a meta-language that allows you to create your own set of commands
and instructions, you programmer you. It is designed to allow you to be able to write SGML (Standard
Generalized Mark-up Language), the "mother-tongue" of all mark-up languages. But it looks better in the
brochure.
Be not afraid, the commands you will use for your CDF files will resemble HTML closely enough that you'll
be able to create just what you need.
If you'd like to delve deeper into XML and see how it's put together, try my XML tutorials.
But if reading high-end computer language specs isn't your bag, let's just move forward to how to make
your own CDF file.
Do It Yourself CDF
Let's make a file the old fashion way - steal it from Joe.
Go ahead and copy the little CDF file from above and paste it into a text editor like Notepad or
SimpleText, or WordPad, or whatever you use to edit your HTML documents.
Please Note:
This CDF is about as basic as you can get. It does one thing - it sets up a channel. There are many more
things you can do, and I'll get to them, but to get off the ground, we'll start with this.
You can pretty much see where to change out the text to suit your needs, but just so you know what
your doing, here's the CDF again, and what each part means:
• <?XML VERSION="1.0" ENCODING="UTF-8"?>
This is the XML declaration statement. It tells the browser that the following document is in XML
format version 1.0. The question marks at the beginning and end are a nice touch don't you think?
The encoding statement tells the browser what format is being used to build this format.
• <CHANNEL HREF= "index.html" BASE="index.html">
This is the encompassing CHANNEL statement. Everything that sits within the start and end
CHANNEL commands will denote the channel's traits. The HREF and BASE commands denote the
page and base (Like a BASE HREF command)of each of the file names that follow. The reason these
are the same is because my channel is on the main page, which is also the base address. Make your
BASE the main URL of your site.
• <TITLE>HTML Goodies</TITLE>
This is the title that appears in the channel. (Remember when you clicked on the channels icon
at the top? That's where this pops up.)
• <ABSTRACT>HTML/DHTML Tutorials and Java Script</ABSTRACT>
Ditto.
• <LOGO HREF= "goodieschannel.gif" STYLE="IMAGE"/>
This is the icon that appears in the channel list. The format is XML. Follow it - remember that
this is not HTML. The image cannot be animated and cannot be any larger than 30X80. If it is, it'll
just get scrunched down to size. Here's the one I used in this CDF:
• </CHANNEL>
This wraps up the channel section and this particular CDF.
Other Commands
There are a slew of other commands that you can incorporate when you create your Active Channel.
Here are a few to get you off the ground in the order of most useful, in my mind anyway.
• <ITEM>
This denotes an item that you can "push" to the user, like an html file. It goes inside the
CHANNEL commands. For example:
<CHANNEL>
<ITEM HREF="http://www.page.com/newsletter.html" PRECACHE="yes">
<CHANNEL>
What would happen here is that an HTML page titled newsletter.html will be pushed to the user.
Notice the PRECACHE="yes" command also. That little addition to the ITEM command makes the
browser go and get the item and stick it in the cache so that when you click on the channel to read
newsletter.html, it pops up straight away because it was pre-cached.
• <USAGE VALUE="--" />

This too goes inside the CHANNEL command. It denotes how the browser is to use the thing
denoted in the <ITEM> command. The available values include Desktop component, channel, and
screen saver. You can guess by the names where they will show up on your computer. Example:
<CHANNEL>
<ITEM HREF="http://www.page.com/newsletter.html" PRECACHE="yes">
<USAGE VALUE="channel" />
<CHANNEL>
This HTML document will appear in the channel.
• <LOGIN>
This allows you to set a login and password for people who want to get your information through
a channel. In this case the password is "goodies" and the login is "joe".
<CHANNEL>
<ITEM HREF="newsletter.html" PRECACHE="yes">
<LOGIN METHOD="BASIC" PASS="goodies" USER="joe" />
<CHANNEL>
• <SCHEDULE>
This denotes the schedule for the active channel content. So if you are pushing information that
has an end date, you can use the command to have the channel end on its own rather than having
to go in and change out the information yourself. Example:
<CHANNEL>
<SCHEDULE STARTDATE="1998.02.28" ENDDATE="1999.09.31">

<INTERVALTIME DAY="5"/>
<EARLIESTTIME HOUR="5" />
<LATESTTIME HOUR="12" />
</SCHEDULE>

<CHANNEL>
o INTERVALTIME denotes update frequency. You can use DAY, HOUR, or MIN.
o EARLIESTTIME denotes the earliest time during the schedule when an update can occur.
You can use DAY, HOUR, or MIN to set parameters.
o LATESTTIME denotes the latest time during the interval that an update can occur. You can
use DAY, HOUR, or MIN.
• <LOG>
This commands denotes that something is to be recorded in a client log. The only currently
supported item is document:view.
The subcommand is <LOGTARGET>. It denotes what makes up the log and where the log will be
sent. The best use for this is a log of user activity.
<CHANNEL>
<LOG>
<LOGTARGET HREF="http:/www.page.com/activitylog" METHOD="POST"
SCOPE="ONLINE">
<HTTP-EQIV NAME="encoding-type" VALUE="zip" />
<PURGETIME DAY="2" HOUR="12" />
</LOGTARGET>>
</LOG>

<SCHEDULE STARTDATE="1998.02.28" ENDDATE="1999.09.31">
<INTERVALTIME DAY="5" />
<EARLIESTTIME HOUR="5" />
<LATESTTIME HOUR="12" />
</SCHEDULE>
<CHANNEL>
The commands:
<HTTP-EQIV NAME="encoding-type" VALUE="zip" />

<PURGETIME DAY="2" HOUR="12" />
Denote that the item that is placed within the directory http:/www.page.com/activitylog will be
made into a zip file and will be replaced by a new log, or purged, every two days at noon.
That's That
That's about all you'll need to put together your own active channel. All those fancy commands aside,
the bulk of your work will be done by the short CDF format I showed way up at the top. Add an ITEM to
distribute, and you'll be pretty much good to go. The rest of the commands do a good deal of fine tuning,
but are not overly needed to create a solid channel for your viewers.
Enjoy!
So You Want Your Own Searchable Database, Huh?

By Joe Burns
My guess is that most of you came by this page through using the Goodies Search Engine or through the
Database tutorial. Either way (or neither way) this tutorial will finally answer one of the most asked
questions in the Goodies mailbox -- How do I set up a searchable database for my own Web site?
Read on...
If you haven't yet seen my search engine work, here's a link to it. Give it a try and see if you like it. I do.
The searchable database was created in JavaScript and submitted to HTML Goodies by Satadip Dutta,
who has given me permission to use and distribute this script. It's a wonderful gift. If used correctly, it will
allow you to set up a searchable database of your own site for anyone with a JavaScript-enabled browser to
use.
I like this one so much because it acts like the common search engine such as Yahoo or Webcrawler.
Plus it accepts multiple words. Other JavaScript databases did not.
Okay, enough yackin'! (Can you "yak" in writing?) Let's make a database.
First you need the script. I have a link to it below. But first, please understand that the author has a few
requirements for you to use this script:
• Keep the copyright comments in place.

• Do not alter the script except to add your pages to search.
• If you are a non-profit site, you may use it as long as you keep the copyright comments in
tact.
• If you are a for-profit site, you must first ask the author's permission.
You'll notice in my database version that a line was added by the author stating that I have
permission to use it, as HTML Goodies is a for-profit site.
Grab the Script
Read what's below... please?!
I cannot stress this enough: You must get the entire script and this is a big pup. I have tested the script
you get above three times. It works. If you download it and it doesn't run, it is either your browser, the
download, or the use of margins when you edited it.
Remember that JavaScript must be in the same shape when it is posted to your site as when you
grabbed it. If it isn't, then it won't work. Always edit the scripts in an editor without margins, like NotePad or
SimpleText. Just widening your margins to their widest point will not do it.
In all honesty, 99% of all troubles people have with scripts from my site are solved by losing the
margins. Here's a tip: When you get an error, go to that line (from the top of the page, not the top of the
script), and see if moving the line below it up doesn't solve the problem. Also, fix one error at a time. Do the
one earliest in the script first. You see, that may be the only true error. The others may be caused by that
one goof-up.
Read what's above... please?!
Now that you have the script, you'll need to change one thing, and begin adding your pages to the
script. Let's start with adding items to search. See these little groupings about halfway down the script?
title[#]="yahoo search engine"

desc[#]="the yahoo search engine"
links[#]="http://www.yahoo.com"
matched[#]=0
You need to add and alter one of those for every page you want this thing to search. Here's what's
happening:
• title[#]="yahoo search engine"

The words inside the quote marks are the words the script searches. Separate the words you put in
by a space. These are the items searched, so make them descriptive. There is no limit to how many
you can use, but remember, the more you use, the larger the script, thus the longer it takes to load
and search.
• desc[#]="the yahoo search engine"
This is the description that appears on the results page.
• links[#]="http://www.yahoo.com"
The is the link that is offered.
• matched[#]=0
Don't touch this except to change the # to a number. This stays the same no matter what number
of pages you enter.
• Be sure to make the number increase as you add pages.
You will use the same number for each grouping. The first grouping of four all get the number 1.
The second group of four all get the number 2, and so on. If you fail to do this, you will get a lot of
errors -- one for every page out of order.
Just add pages until you get in all you want to be searched. Once you're done, look for this line in the
script:
title[0]=6
Change that number 6 to whatever number of pages you have entered. My Goodies Search page has 96,
I think. If you don't change the number, only the first six will be searched.
That's how you do it. It's time-consuming, let me tell you, but worth it. Just remember, the more pages
and code words that you use, the larger the page will be and the longer it will take to search and download.
Hopefully this will help a great deal. It will certainly lighten my e-mail.
So, You Want A Searchable Database, Huh?

By Joe Burns
[Search Someone Else's Database]

[But I Want To Search MY Site!]
[Goodies Search -- Java-Driven Search Engine]
[Use AltaVista or HotBot]
I am asked this question time and time again, "How do I set up a searchable database?" There are
actually a few different ways -- some are harder than others. Here's a quick look at the three main ways.
Search Someone Else's Database

Ever been into a page and the author invites you to search Yahoo or Webcrawler right from his or her
own page? You think this person must be pretty high up the ladder to be able to pull off this kind of deal.
Not really -- anyone can do it. Here's an example:
Search Excite Here:
Me Search Good!
Search Webcrawler Here:

Searchy-Siddy-Search
Search Yahoo Here:
Sah-Urch
Go ahead, enter a word -- nothing dirty, mind you! The results of your search will be returned
straightaway.
...waiting ...waiting ...waiting
Ah, good. You're back. Neat, huh? Actually, I lied above (and I may lie down below). My site didn't
perform any of the searches. They were done by Yahoo, Webcrawler, or Excite, depending on which one you
chose. I just initiated the search. When you got your results, did you notice that you were no longer in
Kansas Goodies any more? You were at the site of the search engine you chose.
How I Did It
Let's look at the code I used to create the Yahoo search above:
<form action="http://search.yahoo.com/bin/search">
<input size=30 name=p>
<input type=submit value="Search">
</form>
Notice it's a simple set of form commands, set up much like you would to create a link button or a simple
mailto: guestbook. However, in this case you are using the form to send the information contained within
the text box to a search engine. That's what you call the actual program that searches the Yahoo database,
a "search engine." In the example up above, you are sending the info to Yahoo's CGI bin to be worked on by
something called "search."
Here are the Webcrawler and Excite lines from above:
<FORM NAME="wcsearchform" ACTION="http://webcrawler.com/cgi-

bin/WebQuery" METHOD="GET">
<FORM NAME="search" ACTION="http://www.excite.com/search.gw"

METHOD="get">
Notice they also sent the output of the text box to a search engine. One goes to something called
"WebQuery" and the other goes to "search.gw." Once the data is sent to the search engine, then the site's
database is searched and you get your results.
But note again that you do not use my site to search -- you only send the information from my site.
Once that's done, I'm totally out of the picture and you're at the search engine's site.
Once more thing... Notice the "METHOD" in the two above, and the name="p" in the Yahoo search
above? Those are little items that each search engine uses to denote how to manipulate the data it receives
and what to name the output sent through the text box. Each search engine will work differently and you
must make sure you use the search engine's format, exactly, on your page.
Where Do I Get The Format

Right from the search engine itself. It's not that tough. Go to the search engine site and look at the
source code. It's written right there. Just grab the part that starts the form through the /form. Now, you
may need to knock out some stuff in the middle, like extra text or table commands, but it's all right there.
Then put it on your page.
One thing though, you may notice when you get the code that the ACTION section does not include the
entire address to the search engine. That's because it didn't need it when it was on their site. Now it's on
your site and it needs it. Add the full address before the search stuff. Without it, the data looks for
something on your site that will do the search. No dice... errors all over the place.
How Many Search Engines Are There

Tons. Now wait... yes. Tons. Here are few of the biggies:
[Alta Vista] [Apollo] [Bizwiz] [ComFind] [Excite] [The Web Magazine] [Pronett] [HotBot] [Infoseek] [Lycos]
[Nerd World Media] [LinkStar] [Mallpark] [WebCrawler] [ImageSurfer] [AAA Matilda] [What's New Too!]
[DejaNews] [WebDirect!]
Here are some pages with multiple search engines....
[More] [Dr. Webster's Big Page of Search Engines] [Beaucoup Search Engines] [Search.com]
But I Want To Search MY Site!

Nice emphasis on the word "my" there, pal. This is a tough call. I have gone through the process and I
can tell you that it is rough. The process happens in two steps:
• You need to create a database and place it on your site (or run it from another site).
This database has to be in a format the server understands. Excel works a lot, as does Lotus.
• You need to write a CGI Perl script to do the searching.
Maybe you know someone who can write one of these for a small amount of money. I didn't -- $250
did it for me.
Try Number 1
My Goodies Search was up for about a month. Problems galore. I took it down.
Try Number 2
Next I tried the Excite search engine. This is a search engine put together by the people at Excite. It is a
self-contained package that your Webmaster may already have. Mine did. $275.
The search engine was wonderfully easy. It installed quickly and made an entire directory searchable. All
I did was point it in the right direction. It compiled the data and was up and running in a matter of minutes.
After a month, I had to take it down. So many people were using it that the search engine was taking up 3
out of every 5 cycles of the computer's brain. In layman's terms, it was about to crash the whole system by
overworking it. I still have it and I still use it to search, but I don't make it available to others. It slowed the
site tremendously.
Try Number 3 This is the current try, and I think this may work. I am running a Java-driven searchable
database. Want to see it? I knew you would:
So, You Want An HR Line, Huh?
By Joe Burns
[The Basic Line]

[Changing The Width]
[Changing The Height]
[Sending It To The Left Or Right]
[No Shading, Please!]
[How About Some Color?]
I want to shake the hand of whoever came up with this <HR> line. It is a great, and simple, way to
break up your page. I use them to death. Here I'll try to get into the more subtle sections of the <HR> line.
The Basic Line

You probably already know that you can place a line simply by typing <HR> on the page. "HR" stands for
horizontal reference, by the way. It makes a nice line with a little bit of shading all the way across the
screen. Plus it needs no end command. And it's centered. Coolness.
But all those lines looking the same tends to get dull. Let's change it a bit.
Changing The Width

You change the width of the line by adding a subcommand to the <HR>. I do this with all my lines. I
think the line going all the way across the page is a bit much. I only have mine go 60 or 80% of the page.
See the lines at the very top that get thinner to wider then wider to thinner? I just added different
percentages to a series of HR commands. Here's the format:
<HR WIDTH="60%">
Notice it's just an HR command with WIDTH="--%" added. You can set the width to any percentage you
want. There's no need to stay with round numbers. If you really want a line that only goes 17% -- fine. Just
remember to include the percentage sign (it's over the number 5 on your keyboard).
Changing The Height

How's about a thicker line? Like these:
Here's the format:
<HR SIZE="6">
Think of the size command as equal to the "H" commands in that there are six, numbered 1 through 6,
with six being the widest.
You might also notice that the lines are only 60% width. I just used both commands inside the same
<HR> command, nothing to it.
Sending It To The Left Or Right
How about this...
You can probably guess how I did that. I added ALIGN="--" inside of the command. Here's what made
the four lines above:
<HR WIDTH="60%" ALIGN="LEFT">

<HR WIDTH="60%" ALIGN="RIGHT">
<HR WIDTH="60%" ALIGN="LEFT">
<HR WIDTH="60%" ALIGN="RIGHT">
You can also state ALIGN="center", but that's a bit of overkill as the line centers for you anyway. Notice,
also, that I used the width command in there.
No Shading, Please!
Here's what it looks like:
And here's what does it:
<HR WIDTH="60%" NOSHADE>
I'm not a super fan of the command, but to each his or her own.
How About Some Color?

No problem. Dig this:
There are three HR lines set to the three colors of Mardi Gras (I live in New Orleans). It's the "COLOR="
attribute that does the trick. Here's the code. Notice that I have also set the HR lines to only span 60%.
<HR COLOR="yellow" WIDTH="60%">

<HR COLOR="purple" WIDTH="60%">
<HR COLOR="green" WIDTH="60%">
Nothing to it.
Enjoy!
So, You Want An FTP Directory, Huh?

By Joe Burns
[FTP] [Those Shift Key and Mouse Click Tricks]

[Using Zip Files] [Why the FTP Directory Displays]
[Making the FTP Directory]
A while ago, I started getting these letters asking me how to make an FTP directory. Apparently people
have a series of items they want to offer as downloads. (If you'd like to know more about FTP-ing and
downloading, go here.) Well, I didn't know how so I called my Web wizards and they told me all the ugly
details. The conversation went something like this (I'm the one in italics).
• "FTP (File Transfer Protocol) is a totally different protocol (set of instructions) than
HTTP (Hypertext Transfer Protocol)."
Meaning what exactly...?
• "Meaning that an FTP directory has to be set up as a totally different section of the hard drive."
Can I do that myself?
• "No."
...Uh... why not?
• "Because the FTP protocols and the HTTP protocols are totally different and cannot be mixed. There
cannot be an ftp://www.htmlgoodies.com and an http://www.htmlgoodies.com existing side by
side. The ftp would need to be a totally separate directory with its own totally separate Internet
Protocol number."
Oh. But there has to be some sort of equal in HTML.
• "You would think."
Well, then -- I will find it.
• "Then lead on oh great and glorious HTML man of steel and computer knowledge. Lead the people
to their FTP as I know only you can! And be sure to misspell some words and throw in some typos
while you're at it."
Okay, then. You have a nice day.
• "Bye."
Bye.
So I gussied up it up a bit. So sue me. You get the point of the conversation. In order for you to have a
true FTP directory, you will need to contact your server tech person and ask for a separate section of the
hard drive to be set up as an FTP directory just for you. But as I said before, there has to be a way to do
this in html alone. I played until I got close to what I wanted. Here's what I came up with. It's an FTP
directory listing all of my available images:
Go To My Images FTP Directory
You wanted something like that I presume? I thought so.
Now, if you clicked on any of the images, you noticed they just appeared like any other hypertext link.
Try this... you Netscape users go back to the FTP directory and hold down the SHIFT key while you click on
an image name. MSIE people, click the right mouse button on the image. MAC people can click and hold,
then choose to download. Go ahead. Try it.
Okay, I'm going, I'm going.
Those Shift Key and Mouse Click Tricks

In case you're wondering, the tricks of holding the shift key or specific mouse clicking will work with any
link to an image or file. If you do what your browser requires while clicking on any hypertext link, you'll
initiate a download of whatever is at the other end of the HREF link.
What's better still, the SAVE AS that is initiated will automatically save as ALL FILES, or the correct file
format, making sure you don't corrupt whatever you are grabbing. Neat, huh?
Using Zip Files

Have you ever clicked on something and the browser then asked you what you wanted to do with the
file? One of the options was to save the file to disc. That's a download. The reason you received that
message was because the browser wasn't configured to display or run that type of program, so it asked you
what to do with it. You downloaded it.
Zip files are compressed versions of your regular files. Browsers don't display them, and even if the
browser is configured to understand what the Zip file is, the SAVE AS window pops up. It can then be
downloaded. So, instead of offering the normal version of the file, offer a zipped up version. It eliminates all
that fancy clicking stuff above.
Here, try it for yourself:
Click Here For JOE.zip
So now all you need is a program that will zip and unzip files for you. My favorite is WinZip. This
program will both create and open zipped up files. See the help section for how-to. It's very simple. The
program does 99% of the job. Click on the name to go to their site. The program is shareware so you'll get
it free to test out for about a month and then, if you pay a few bucks, it's yours for good.
I've paid for a good many of my shareware programs. It gets rid of the nagging "pay me" window and
usually sets the program up to do more than it did before.
Why the FTP Directory Displays

When you first posted your HTML pages to your WWW server, you were told to make the "home page" a
specific name. Usually it was index.html. Why? Because that is the default file the computer looks for when
someone tries to come into the directory. Remember what it said at the top of my images ftp directory? It
said "Index of /images".
So why did it display the index as a list of files rather than as the page "index.html"? Because there
wasn't an index.html for it to display. I left it out on purpose to get that effect.
Now, don't be concerned if your WWW server wants a different name than index.html for the main page.
I've had servers ask for default.html, www.html, and HomePage.html. You can set it to any name you want.
But whatever the name of the default index page is on your server -- leave it out on purpose -- and you'll
get the listing like I got up above.
Making the FTP Directory

In order to have an FTP directory, you need to create a directory. If you have a program that will create
directories for you, great. Use it. Those of us who do not will need to make the directory by hand. Follow
these steps:
• Telnet into your server (enter your log in and password).

• Get to the directory where you place all your WWW files. You should be able to get to it (if you
aren't already there) by typing cd [directory name] and hitting return.
• Once there, enter mkdir [name]. Place what you want to call the directory where I have [name].
Do not use the [] brackets.
• If you get no errors, you did it. Now type chmod 777 [name]. If you get no errors, you're done
and now have a directory ready to accept files and ready to allow people in.
• Log out. Put your ftp files in your new directory and forget the index.html on purpose.
There you go. There's nothing to it. Just remember to tell people to do the shift key and/or mouse click
stuff. Or make it easier on your users by zipping up the files for them.
Enjoy!
No Borders
By Joe Burns
[Navigator Vs. IE]

[No Margins - Navigator]
[No Margins - IE]
[Do It With Frames]
Navigator vs. IE
As with most fun things on the Web today, it takes two sets of commands to get the same effect on both
browsers. But fear not, as also with things on the Web today, both sets of commands will fit nicely on the
same page and not bump into one another. The commands not understood by the browser will simply be
ignored and those the browser does understand will be put into action.
Here's the Deal:
• Netscape Navigator is a little late to the no margins party. Version 4.0 and above grasps the
concept of three margin commands when entered into the BODY tag: marginheight, marginwidth,
and the overriding spacing.
• MSIE 3.0 is the starting point for margin manipulation for the Microsoft browser. There are a myriad
of methods for killing margins there. In addition to grasping the four commands above, the browser
also offers five style sheet command, one for each of the four sides and one for the total margin
picture: margin-left, margin-right, margin-top, margin-bottom, and just simply margin for all four
sides.
• In addition to the format above, MSIE also allows the use of frames to create a margin-less page.
• Is it just me or is the command "margin-bottom" just silly?
No Margins - Navigator
You know, I keep saying "no margins" since that's what prompted this tutorial, but in reality you can use
these commands to create big huge margins by setting the commands to big huge numbers. You have
control! Ah! The power! The power!
The concept here is as simple as it gets. Use one of three attributes, or just the spacing attribute, inside
the document's BODY tag to set the margins. Like so:
<body bgcolor="#ffffff" marginheight="0" marginwidth="0">
~OR~ <BODY BGCOLOR="#ffffff" spacing="0">

Would you like to see it in action? If so, open this page in a Netscape browser.
Obviously, using all four will give you greater control over each element in the browser window. Play
with them, they're free. See what they do. Make them do tricks. Make them the new Pokemon!
No Margins - IE
No Margins - IE? You know if you say that heading out loud and real fast is sounds like you're in Texas
and really happy about learning this.
OK! Enough comedy jokes! Let's get to it.
At this point, you're actually done because what I've shown you will work in both browsers. But, as I've
been told many times before, it wouldn't be an HTML Goodies tutorial if I didn't beat a point literally into the
ground.
In order to assure no borders across browsers, I use both the Netscape commands I showed above and
Style Sheet commands to affect IE. Again, if you want control of each of the sides, you can use these four:
• margin-left
• margin-right
• margin-top
• margin-bottom
You can specify margin widths in points (pt), inches (in), centimeters (cm), or pixels (px). Here's a quick
example of each:
BODY {margin-left: 2pt}

BODY {margin-right: 12in}
BODY {margin-top: 45cm}
BODY {margin-bottom: 12px}
If you want to set any of the items to nothing, no indication of points, inches, pixels, or centimeters is
needed. Just a zero will do.
Last but not least, if you wish to kill all margins, use the command "margin". here's a style block set to
kill all margins around all sides of the IE browser window:
<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
And here it is in action. Make sure you're using an IE browser, please.
Do It With Frames
I offer this method first because it works, but in all honesty it's a bit of overkill. What you have above
does a superb job. There's no need to use anything else, but just remember that "beat an idea into the
ground" statement earlier in this brilliant piece of tutorial. (You think this is bad, you should hear me in
class.)
In this instance we'll set up a frameset with two frame windows. One will be set to zero and the other
will be set to 100%. The concept is to allow the commands within the framesets to set the margin gutter to
zero. Here's the code:
<FRAMESET COLS="0,100%" BORDER="0" FRAMESPACING="0" MARGINHEIGHT="0"

MARGINWIDTH="0">
<FRAME SRC="invis.html" BORDER="0" FRAMESPACING="0" MARGINHEIGHT="0"

MARGINWIDTH="0">
<FRAME SRC="noborderright.html" BORDER="0" FRAMESPACING="0" MARGINHEIGHT="0"

MARGINWIDTH="0">
</FRAMESET>
The frameset is in columns with all elements set to zero. Ditto each element in each of the two frame
SRCs. Here's the result.
Now, if you're using an MSIE browser, you got the correct effect. Those of you with Navigator probably
didn't get the items butting right up against the left side. That's another downfall of this method, it's an IE-
only deal in this format.
Yes, you can get Navigator to work with this format, but you will need to put the commands discussed
above on the page that will appear in the 100% frame window. If you do that, then there's no need for the
frames anyway. Just go with the border commands on a single page sans frames.
That's That
I actually like a little gutter around each side of my browser window. I think the background butting right
up to the side is enough to pull it all together - but to each their own. If this is the effect you're looking for,
now you have the tools to get the look across browsers.
Enjoy!
Tabs - HTML Goodies

By Joe Burns

[A Tab Example & Code]
[Explanation]
If you have as many reference books as I do then you need to stop buying reference books. I think I'm
single-handedly keeping the computer book market up and running.
Furthermore, if you have as many reference books as I do, then you have no doubt looked for a way to
work with tabs in HTML. No luck, right? There isn't even line under "tabs" in the back of the books.
I guess the main reason is that HTML is text-based so that a "tab" isn't carried along with the text much
like extra spaces and carriage returns. Neither shows up in the display but shows up nicely in the code itself.
In my research, I received some letters that people were creating table formats to act as tabs. It's a
good idea and it works, but it's also pretty labor intensive. Others told me they created a tabbed layout,
copied and pasted it into their HTML document and then surrounding it with the <PRE> or <XMP> tags.
In order to work with tabs, you do need a command that will "force" text to a certain point. Without that,
tabs are pretty much worthless and look pretty bad when displayed. Well, after reading more than I should
have, I can up with a method of writing with tabs. It involves JavaScript and the tab Escape Sequence.
Don't let the name catch you off guard. It's a greater title than what I'll actually show you.
A Tab Example & Code
Here's a series of words set to tabs.
100 Meter 400 Meter 1500 Meter

110 Hurdles High Jump long Jump
Javelin Pole Vault Shot Put
Discus
And here's the code that did it. See if you can pick out the tabs.
<SCRIPT LANGUAGE='Javascript'>
document.write("<XMP>")
document.write("100 Meter\t400 Meter\t1500 Meter\r")
document.write("110 Hurdles\tHigh Jump\tlong Jump\r")
document.write("Javelin\t\tPole Vault\tShot Put\r")
document.write("Discus")
document.write("</XMP>")
</SCRIPT>
By the way...do you know what the list above represents?
Explanation
Looking at the code as opposed to the list, you can see the text that appeared on the page, but did you
see the tab and the carriage return? Look again. The tab is represented by "\t" and the return is represented
by "\r".
See it now?
Those two items, \t and \r are Escape Characters. The other text is methods that would otherwise be
difficult inside of a JavaScript environment. Notice there are no spaces. None are needed. Just plop in the
backslash and you get the tab or the return.
You might notice that in the fourth document.write statement there are two tab commands. The reason
was, just like normal tabs, the first word was shorter than those above so I needed an extra tab to force the
second bit of text over to the tab setting created by the longer words in the lines above.
document.write
Let's start with the basics. The document.write command is a very basic JavaScript statement that writes
whatever is in the parentheses, and then double quotes, to the page. It writes it exactly - no changes.
IMPORTANT! When using the document.write statement, the code inside may not contain any quote or
apostrophe. In JavaScript, those items mean something and it will mess up your page by throwing errors.
So if you run your own script and get an error, check first to see if you have a quote or an apostrophe.
Exception to the rule: If you simply cannot live without a quote, the Escape Character \" will give you
one.
IMPORTANT! The document.write statement must stay all on one line. It can be a line that goes on for
miles but still must be only one line. Period.
XMP
Or PRE. Either one will do the trick.
I know I said earlier in the tutorial that using the PRE or XMP tag didn't work because the tabs often
didn't transfer correctly - especially if you're using a non-block font. However, this is different. In this case
we do have the ability to force tabs. In just surrounding text with PRE, we do not.
If you ran this script without the XMP tag, the tabs would not appear. All of the text would run together.
You would get angry and call my mother a bad name. You would then look at your source code and see that
the code is perfectly tabbed out. Remember that extra spaces and carriage returns in the code do not
transfer to the display. That's why all of the text runs together. By sticking in the PRE or XMP tags, you
transfer the spaces to the display. In this case it works because the text in the code is forced to tab. Just
copying and pasting tabbed text is not transferring the forced tabs. Get it?
Just like all other JavaScript I've given you, using this one is a simple matter or copying at least one of
the docuemnt.write statements and pasting it again and again and changing out the text you want.
After you get all the text in there, you'll probably see the need for a second tab to force text to line up.
Just go back in and add another \t. Remember also that the text will not jump to the next line unless you
make a point of adding the \r to force it to do so.
That's That
Go nuts you tab fans. This is a solid way to create tabbed tables without going to all the extra coding of
actually setting up a table.
Oh, and in case you're wondering, that tabbed text above represents the ten events in the Olympic
Decathlon. I plan to compete in 2002.
Enjoy!
So, You Want A Web Ring, Huh?

By Joe Burns
[Web Rings?]
[Method One: Linear Rings]
[Method Two: Generated Rings]
[Method Three: Let Someone Else Handle It]
Like most really good ideas, Web rings are simple yet effective. Anyone can set one up on any topic and
it doesn't take rocket science brain power to get it up and running. "Me do Web ring good," as I like to say.
Web Rings?
Yup. Easy concept. Let's say you have a Web page discussing your overt love for collecting foam rubber
from couches and sofas produced in the mid- 1970s. Let's also say, and this is a long shot, that there are 10
other people out there that have a similar page. One guy chooses foam rubber from Lazy-Boys. Another guy
collects foam rubber from chairs sat on by famous Americans. Whatever.
Now you, the main foam rubber guy, decide it would be nice if others who are foam rubber-inclined could
just jump from one foam rubber page to another. So, you set about creating a Web ring.
Method One: Linear Rings

A Web ring is just what it's called. It's a series of pages, all with a common theme, that are linked to one
another.
Using the example above again, let's say there are 10 pages in all. One person sets him- or herself up as
the "Ring Master" and takes charge. With a little bit of planning, all you really need is a section of the page
denoting that the current page is part of a ring. Then provide a link to the page before in the ring, and the
page that follows that page in the ring. Then a user can move in a linear fashion through the ring. Just make
sure the last page in the series then links back to the first page. Done. Web ring.
The only hard part about all of this is when a new page joins the ring. It's up to the Ring Master whether
or not they should be added at the end or somewhere in the middle, nearer a page it matches. Either way,
the links will have to be kept up-to-date and those in the ring will have to be willing to make updates when
you ask.
Method Two: Generated Rings

This is a better way of setting up, and mastering, a ring. What you do is have one central location for the
ring and those who want to attach simply put a line of code into their page. A JavaScript, or some other type
of interface, is contacted every time someone clicks to go to the next page in the ring.
I'm seeing rings now that have options for Previous Page, Next page, and Random. I guess that's good,
but isn't going for a random page sort of killing the whole concept of moving through a ring? Eh, it's just my
opinion. Take it for what it's worth.
With a little thinking, you can use myriad random and linear JavaScripts to set this all up. I found a
couple that would do the trick. This one by Qirien Dhaela is set up to do just that -- be a Web ring. It places
three buttons on your page, allowing you to choose next, previous, and random. It's slick and can be run on
all Web ring pages, or as an external JavaScript so members only have to place a simple SCRIPT code on
their page.
Method Three: Let Someone Else Handle It

If you haven't been already, you should head to http://www.webring.com if you have any interest in
joining or creating a ring.
The site provides over 22,000 different rings for you to join. And, if you can actually think of a topic that
isn't already covered, they'll let you become your own Ring Master. Gosh!
Now, here's the good part: It's free! At least it was at the time I wrote this tutorial (2/13/98).
In order to go through the process, I signed this page up with a Web ring. I still write the bulk of my
stuff in NotePad, so I attached this page to the "Made with NotePad" ring. Here's what happened:
• I went to Webring.com and looked at the full list of available rings, did a search, and ended up
wanting to join the "Made With Notepad" ring.
• The Notepad ring is kept at http://www.pvideos.demon.co.uk/notepad/. I got to the page by
clicking on links that appeared when I saw the full list of all the sites that are part of the ring.
• I went, clicked on the link saying I wanted to join the ring, and got my general issue stuff.
• I was asked to take a banner to place on the page (you'll see it below) and a few lines of code to
put on my Web page. I had to alter the code slightly so that the image was being called for
correctly, but that was very minor. I also had to put in my e-mail address.
• Next, I filled out a short form telling the address of my page, its title, and a few other items, like a
description and keywords.
• You are also asked for a password. Write it down -- don't forget it.
• Then click to submit all this to Webring.com.
• If you do not get any errors, you're registered.
• On this particular Notepad Web ring, I then had to e-mail the owner and tell him that I had posted
the items. He then took a look at the page and had the final yes or no as to whether it would
become part of the ring. I guess he chose "yes."
I can't say that each and every one of the ring-joining experiences will be just like this, but I'll bet
they're all pretty close. By the way, here's the banner I received. Feel free to waltz around the Notepad ring
yourself!
This Notepad Ring site is owned by Joe Burns.

Click for the [ Next Page | Skip It | Next 5 ]
Want to join the ring? Click here for info.
And that's that. As you can see, it goes from super simple to pretty involved, depending on whether you
want to be a member or actually run your own Web ring. But, like I said above, the best ideas are those
that are the simplest.
Enjoy!
So You Want Real Audio, Huh?

By Joe Burns
[How RealAudio Works]

[RealAudio From Your Site]
[Offering the RealAudio File]
[Creating the RealAudio Sound File]
[Creating the Meta File]
[The HTML Document]
[What's the Down Side?]
Hear Me Speak - Click Below
I have up a couple of other tutorials dealing with sounds on the net. I have one on embedding MIDI and
other formats of sound, and I have one on using the Meta Refresh dynamic commands for playing different
formats. I have stayed away from RealAudio mainly because, in the past, RealAudio couldn't be done
straight off of a WWW server. You needed a RealAudio server to run the format.
How Real Audio Works

The process of RealAudio was explained to me by two different Internet server tech people. (These guys
know words that don't exist in any language). After they explained for a good 15 minutes, they stopped,
noticed I had completely glazed over, and decided to give it to me in simple terms. Note that the process is
much more involved than this, but here's the general idea...
If you put a sound on your WWW page, say a .wav or a midi. You are using what is known as a "helper
application" or a "plug in." Either way - you are calling on another piece of software other than the browser
itself to play the sound. The problem with that was that it took some time because the entire file has to
download - then be loaded into the helper application - then it could play. Depending on download speeds,
net congestion, file size, and your modem speed, this could take a long long time.
Where RealAudio beat them all was that it played the sounds almost instantaneously. It amazed me the
first time I heard it and saw it work. If you did what I did, you went to the RealAudio site, didn't bother to
read any of the documentation, grabbed the RealAudio converter, and placed a few files on your server.
Mine didn't work either.
The reason it didn't work was because of downloading time and pace. For example, if you download an
image file and sit there watching the numbers tick by in the status bar of your browser, you'll notice that the
numbers are by no means consistent. You get a burst of data here and there, but there are also down times.
You have to remember that you are not the only person being serviced by the system and that other people
need the file too. That's the down time - while others are being helped.
RealAudio works by creating a buffer, or specific connection, between your computer and a RealAudio
server. Once the connection is established, the transfer of data is consistent and at a set pace, usually the
pace of your modem. That way the file can be played as it is being downloaded. But the pace is the key
here. HTTP servers don't offer the pace the RealAudio server does.
But there has to be a way to play these things off of my site - you say.
There is now! - I reply.
RealAudio From Your Site

In order to run RealAudio sound files from your HTTP server, you're going to need a few things - luckily
they're all free for the downloading. You'll need:
[The Real Audio Player version 3.0 or better]
[The Real Audio Sound Encoder]
[A RealAudio Meta File]

I'll show you how to make one of those.
Offering the RealAudio File

First things first. If you're going to do this, your server must have two MIME type settings:
audio/x-pn-realaudio (files with a .ra or .ram file extension)

audio/x-pn-realaudio-plugin (files with a .rpm file extension)
These settings are nothing that you can do yourself. You will need to contact your system's administrator
and ask for the settings to be made. Most servers already have these settings, but it's best to check.
What those settings are doing is telling the HTTP server than when you see a file with the extension .ra
or .ram, load up the Real Audio server to play the sound.
Create the RealAudio Sound File

You will use the RealAudio encoder to do this. If you haven't installed it on your computer yet, do it. It's
rather simple to use. The hardest part is getting the .wav file to convert to RealAudio. That's the catch of
this tutorial. You have to be able to make a sound file. Most newer computers have a microphone or a sound
recorder program on them. Use it to make a file. Then open that file in the RealAudio encoder and encode it.
You should now have a file with the same name as the original but with an ".ra" extension. That stands for
RealAudio.
Creating the Meta File

Now it gets a little tricky. If this was a simple .wav or MIDI file, you could just transfer it to your server
and make an HREF link to it and it would play. Not so here. You need a buffer between the page and the
RealAudio sound file. That buffer is the META file. Here's what you do:
• Using a text editor, create a simple text file that only has the path to the RealAudio file on your
server.
For example, your file is called "joe.ra". You place it on your server named
"http://www.server.com/~fred". Your Meta file will contain only this line of text:
http://www.server.com/~fred/joe.ra
Don't use any html commands. Don't use any quote marks. Don't put anything else in the file other than
the path to your RealAudio file. Just that.
Now save the small text document with the extension ".ram". If you want to name to Meta file "joe",
then save it as "joe.ram". Get it? Now you have your meta file ready to go.
Transfer them both to your server. Make sure the sound file goes as binary.
The HTML Document

Now it's time to call for the RealAudio file in a document. It would make sense that you would just make
a link straight to the sounds file. Not so. In this case you make a link to the Meta file. Note! The Meta file
only has the path to the RealAudio file inside of it.
Remember above where you set the server setting so it related RealAudio with the .ram extension? Now
that is coming into play. The process goes:
• The HTML Document calls on the Meta file.

• The call on the Meta file denotes to the server that a RealAudio file will be used here.
• The RealAudio file begins a download.
• The file starts playing after enough has downloaded to be read and understood.
...and off it goes.
So What's the Down Side?

There are a few:
• The viewer must have the RealAudio player 3.0 or better

• If the MIME Settings are not correct, the text of the Meta file will display
• The net may be congested so that the download is so sporadic that it won't work.
...but it's better than nothing as I always say.
So, You Want to Pow Wow, Huh?

By Joe Burns
[Pow Wow, Joe?]

[How Can I Start?]
[What You Need]
[It's In. Now What?]
[How To Pow Wow]
[What If Someone Wants To Chat With Me?]
[Pow Wow From Your Home Page]
[How Many Can Chat At Once?]
[What If I Need Help?]
If you have read any of my other tutorials, you have no doubt picked up on the fact that I am not easily
impressed, nor do new things really set me off my rocker. But I have tell you -- this is one of the coolest
things I have run across in a while, and it worked the first time straightaway on all three of my computers.
(Yes, three computers. Sad, isn't it?) Stay with me here and I guarantee you'll waste some great time with
this thing called Pow Wow.
Pow Wow, Joe?

Yeah. Here's the basic concept... what if you could log onto the Internet and look around to see whom
else was on. I don't mean just anyone on your own server, but anyone on the Internet. And what if you
could then ask each of these people to talk. Well, that's what this Pow Wow thing is all about. You and
others -- talking (writing, actually) in real-time, over the Internet. This morning I spent a good half-hour
talking to a guy in Birmingham, Alabama, about the differences between northern and southern BBQ. He
won. The southern stuff is better.
The system is set up by a group of people that call themselves The Tribal Voice. They have taken the
time to set up a server that does just what I described above. You log into their server and look around to
see who else has done the same. If you see someone you would like to pow wow, or "chat" with, you click
on his or her name.
Please note: If you're looking to create your own chat room, take a look here.
If the person you are attempting to contact accepts your request, your computer screen splits. What you
type is on the top half and what your chat partner types is on the bottom half. Then you're off and wasting
time.
I have been in contact with the people from Pow Wow in writing this tutorial. My contact is Joe Burnsby
of Tribal Voice. Yes, I know that it's just my name with "by" on the end. Take my word for it, it's legit. He
calls himself hUey (that's the correct spelling). He sent me some tips that I will pass along at the end of this
tutorial.
How Can I Start Pow Wowing?

First off, you should go to the Tribal Voice Pow Wow Home Page and read all about it. I'll walk you
through the process here, but the fine people at Tribal Voice have lain out much better. There's a great deal
of information about the server and who these people are and the fact that they really hate it when you go
on their service and cuss. So, you potty mouths should curb the lingo for the duration of your stay. (Oh
yeah? Same to you!)
What You Need

You will need the Pow Wow software to do this. The software will do all, and I mean all, of the work for
you. As far as I can see, there are versions available only for Windows 3.x and Windows95 at the moment,
but times change and I could be proved wrong very quickly. Here's where you can grab your own copy. The
latest version at the time of this writing (9/27/98) is 3.03 beta. Just make sure to get the 16-bit version of
you're using Windows 3.x and the 32-bit version if you are using Windows95.
The Pow Wow Software Download Page
The file is about 2 to 2.5 megabytes in size. This could take a while. Download it into a temporary
directory then click on the file. It will unzip itself, install, and ask you a few questions. They are basic
questions like name, e-mail address, plus a login and password for the Pow Wow server. Make sure you
write these down for future reference.
It's In. Now What?

Now the fun begins. You need to follow this basic pattern each time you want to use Pow Wow:
• Attach to your server.

• Open the Pow Wow program you downloaded.
Wait for it to connect to the Pow Wow server. You will see the attempt happening on the screen.
• Once connected to Pow Wow, open your browser.
You must have both the Pow Wow and your browser open to use this!
How To Pow Wow

Go to the Pow Wow White Pages on your browser while you are still attached to Pow Wow. Here's the
address:
The Pow Wow White Pages
On this page, you will be able to choose to look at the last 10, 20, 50, or 100 people that logged into the
Pow Wow server. Choose one. When the new page comes up, look over the names and choose one you like
and click on it.
A request is sent to the person you chose. If they accept your chat request, the screen splits, and you
begin your Pow Wow. Pretty slick.
When first connecting, you will notice that well over 100,000 people are attached at one time. You can
also continue to refresh the last group of people that logged on to see who's new. I have only been turned
down for a chat twice out of probably 20 requests.
What If Someone Wants To Chat With Me?

A window will pop up on the screen stating that you've been requested to chat. You can either accept or
decline the chat. Accept, and the screen splits. You are Pow Wowing.
Pow Wow From Your Home Page

If you make a point of attaching to Pow Wow each time you connect to your server (or at least each time
you connect that you might want to have a Pow Wow), you can make it so someone can request a chat right
from your home page. You'll do this with a simple HREF command set up to send a Pow Wow command. Like
so:
<A HREF="powwow:username@domain.com">
Notice it's very close to a mailto: command except with a "powwow" where the mailto: sits. Please notice
the colon after powwow. Just make sure the username you offer is the same one you have as your e-mail
login. Make your domain the one you're on, not the Pow Wow service. Basically, this will be your e-mail
address.
This will give you a nice button on the page to offer a Pow Wow:
<FORM METHOD="POST" ACTION="powwow:user@domain.org">

<INPUT TYPE="SUBMIT" VALUE="Click here to PowWow">
</FORM>
If you place a Pow Wow request like the above to yourself, people can request to talk to you from your
own page. If you put in someone else's address, you can request a Pow Wow with them from your page. Do
what you'd like.
Just remember, no one can receive a Pow Wow request without having the Pow Wow program on and
connected to the Pow Wow server.
How Many Can Chat At Once?

Up to seven. The page just keeps splitting. You always remain on top, though. I will tell you that after
two or three, it gets very confusing.
What If I Need Help?

These people at Tribal Voice are slick. If you click here, you jump to the Pow Wow help page. Not only
can you look at suggestions, but many names of people who offer to assist are listed. Nice site.
Some Notes from Pow Wow

These come straight from hUey and will change if he keeps me updated. Things I added are in italics.
Something many people are not aware of is the PULS (PowWow User Location Service) which we also
give away for free. This will allow you to our clone PowWow server anywhere you want in the world.
Eventually we hope to have many more PowWow servers, just as there are many e-mail servers.
Also many people don't know about RIGHT-CLICKING on the QuikSound list. (Pow Wow supports
sounds.) Also I get a lot of people asking to paste into WhiteBord (That's the area where you write), but that
is not available yet; it may be one day.
Also I get a lot of people asking when will there be different voices for text-to-speech; the answer is
"soon".
With next week's release of PowWow, QuikSound will accept drag-dropped .WAV or .SIF files for directly
installing sounds. Also next-week's release will have a storybook reader, in the utilities menu.
These are all the main things I can think of that many powUsers are not aware of.
Thanks for your services,
-hUey.
Those are the basics. Now go and grab the program so you can get Pow Wowing. Who knows, maybe
you and I will split screens and talk today. I attach to Pow Wow now and again.
So You Want A Password Protected Page, Huh?

By Joe Burns
First things first...
1. If you have Active Server Pages Ability, then see here for a great ASP Password system.
2. After you read what is below, if you'd like to take a shot at it yourself, Christoph Huetten has been
nice enough to sent the entire set of instructions to setting up the password directory yourself. Click
here to jump right to it.
3. Those of you with Lotus Notes, Click here for another way to do password protected pages.
4. There are also Java Script versions that protect one page at a time. See the Script Tips for the
scripts.
Ever since I put up that I was working on this tutorial, I have been bombarded with requests to Hurry
the #%@$ up!. Well, here it is and you may not be happy with the answers I give you.
The answer is -- you can't do this with HTML commands alone. Password protection is done at the server
level. You see, I was not waiting all this time in order to write a large tutorial, but rather for my webmaster
to arrange a protected directory in my account.
Here's What Happens

First, tell your webmaster, server person, or the guy who takes your checks each month that you want
to do password protected pages. He will immediately ask what you have that is so darn important that you
require these pages. You say, "none of your business" and ask again.
After a short time, a protected directory will be created for you. Not a page by page protection, but a
directory. Basically the tech will set aside a whole section of the server hard drive as protected. Every page
that you put into that directory will require a log-in and a password.
Some new files will be added to that directory. These are the three most common files:
1. .htpassword This is a password file (duh).

It will contain one password for each login you denote to the server. It should be created initially
with a password for you. Usually its "owner." If you start playing around with this file, never delete
the initial password or you can't get in again to make changes.
2. .htgroup This contains the logins you denote.
How you change or add logins or passwords will depend on how the tech sets up your server. I have
to telnet into the server directly, enter some cryptic UNIX commands and answer a couple of
questions to prove I am whom I am. Then I can enter logins and passwords to my heart's content.
3. .auth This is a possible third file. Some servers allow you to enter passwords and logins right to an
html document. This would be that document. It's very easy this way. A nice form page comes up
and you just enter it all straight away. I didn't get this. You may not either.
When you enter a login and password, it works for everything you placed in that protected directory.
What that means is that the server won't continue to ask again and again for passwords when a new page is
entered.
Do All Servers Work This Way?

My server tech informs me that any system can be configured a hundred ways, but no matter what the
files are named, what I have described above will be what happens. At least two files, one passwords and
one logins, will be added to your accounts and you will configure them to allow only certain people in.
Well, that's about it. You need to call your webmaster and ask for the protected directory to get things
started. And I'll ask before he or she does...What exactly do you have that is so important that must be
protected? I know. None of my business...
Thanks to Christoph Huetten for this info.

Use it at your own risk. I take no responsibility for any of this. Here's Chris' letter and instructions:
Dear Joe,
Today I wanted to create password protected pages for the very first time. So I did what I always do
when I want to do something new with my web pages (being an absolute amateur) - I checked your pages
for a nice tutorial on it. First I was happy to find one but then I was a bit disappointed because I had to read
that I cannot do it on my own. I just could not believe it. So I checked a few more pages, worked a bit on it
and finally got through and made it. Here is how I made it (do please excuse my English - it is just not my
mother tongue) I only did it for pages with only one username and password but to extend it to more should
not be the problem. So here is the way to password protect your pages without the assistance of the
administrator. You even have not to work in this strange UNIX-Environment.
The only thing you need is:
- a text editor
- an ftp-program to move the created files to your WWW-Server and to do some other stuff (I used CuteFTP
- a very nice shareware program that is even understandable for an amateur like me. Therefore the
following description will assume the use of this program. Get it here.)
- a browser because we have to link to a certain page for some help
- a pen and a piece of paper.
Furthermore you have to have the permission to create directories and change the properties of self-created
files and directories on your Web-Server. If you have all that it is quite easy:
Step 1:
Think of a nice username and password that later on have to be typed in from everyone who wants to
see your protected pages. Take the pen and the piece of paper and write these down. And don't forget:
Wherever you use capital letters those who want to access your pages will have to use capital letters as
well!!!
Step 2:
Use your ftp-Program to access your Web-Server. There you create a directory where you want to place
the password protected files using the 'make new dir' command from the Commands menu (you can name it
whatever you want). Then you create a second directory where you will later place the file with the
password information (again use the 'make new dir' command). Now take the pen and the paper and write
down the complete and exact path of the directory you created for the password information file(the ftp-
program should display this if you open the directory).
Step 3:
Open your text editor and write the following lines:
AuthUserFile xxx/.htpasswd
AuthGroupFile /dev/null
AuthName yyy
AuthType Basic
<Limit GET>
require user zzz
</Limit>
After you have done this you replace the xxx with the path you have written down on your piece of
paper. Furthermore you replace the yyy with one ore more nice words. These words are only there to make
the procedure of accessing your protected pages a little bit nicer. Because if someone wants to access these
pages he will first see a nice box that asks him for the username and password. The first sentence in the
box will be: Enter username for yyy. Then you replace the zzz with the username you have written down on
your piece of paper. Finally you save this file somewhere on you computer under the name htaccess.txt
Step 4:
Open your browser and go to the page http://www.euronet.nl/~arnow/htpasswd/ There you fill in the
form with the data from your piece of paper and push the calculate button. A new page will appear on which
you will find a line in large letters that starts off with the username you have written on your piece of paper
and some strange letters afterwards. Take again your pen and write the whole (!!!) line down.
Step 5:
Open your editor again and type the line you have just written down on your piece of paper. Push Return
to create an empty line below. Now save this file under the name htpasswd.txt.
Step 6:
Now open your ftp-program again and access your WWW-Server. First go to the directory where you
want to place your protected pages and copy the file htaccess.txt from your computer to this directory. The
name of the file should appear on the Remote side of the ftp-program. Mark this file and execute the
'Rename'command from the Commands menu to rename the file to .htaccess (don't forget the dot!!!) Now
execute the 'change file attributes'-command from the Commands menu. A box appears where you type in
644 where it says 'manual'. Now you change to the directory where you want to place the password
information. To there you copy the file htpasswd.txt. You then rename it to .htpasswd (again don't forget
the dot!!!). Then you do what you already did to the htaccess file, i.e. you mark the file, execute the 'change
file attributes'-command from the Commands menu and type in 644 where it says 'manual'. Now we are
nearly done. The last thing you have to do is to close the directory where you are in, mark it and once again
execute the 'change file attributes'-command from the Commands menu. But now you type in 711 where it
says manual.
That should be it. Whatever pages you place in the directory you created for protected pages can only be
watched in the browser if the username and password are typed in.
I hope it works as well for you as it did for me.
Regards
Christoph
A Different Way
(Posted 12/12/96)
This is new to the page, if you have the correct software, please give this method a try and let me know
what happens - Joe
Much thanks to David Sierra, Webmaster--Papa Johns International, Inc. Here is a copy of his email to me
along with instructions...
Joe,
I enjoyed reading your tutorials - they were very informative! I was reading your article [password
pages] and wanted you give you some additional info.
There is a way of having Password Protected pages without going through your webmaster. But, this
would only apply to Internet users that use Lotus Notes. Lotus provides a product called "Domino Web
Server" that allows you to take any Lotus Notes database and publish it over the Internet. The originator of
the database, not the webmaster, using assigned access levels gives the pages/database, password
protection. What that means is, that you the originator of documents (HTML-coded, etc.), stored in a
database, can give an anonymous web user "No Access" to that page(s)/database.
You give the users of your pages/database access by assigning the access level through the database,
not the server. You assign the "Login (UserID)" and "Password" to an individual user or group and assign
them access above "No Access" level.
In summary, the database originator can assign his own "Password Protection" without having to go to
his webmaster, service tech, etc.
I hope this helps. Thanks again for the "goodies"!
--David

HTML Samles

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Samles

Transféré par

Droits d'auteur :

Formats disponibles

Website 101: Adding Background Color to your Web

Site Through CSS

Using Images as a Background

Gradient Colors as a Background

Creating Gradient Colors without Software

Gradient Colors without Images

You can use the following code within a table tag:

How To Build a Web Site: Using Style Sheets

H1 {text-align:left; color:black; font: normal 20pt "Arial Black"}

How To Build a Web Site: Create a CSS File

Defining the Page Layout Using CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

In your CSS file, type:

Last, add in the footer:

How to Build a Website: More on Cascading Style

Defining Your Styles: Using CSS

• H1 {text-align:left; color:black; font: normal 20pt "Arial Black"}

• A:link {color: blue; text-decoration:none}

Creating a Link: Using the Anchor Tag

Adding Images: Using the IMG Tag

How To Build a Website: HTML, CSS and HTML Editors

• Develop a purpose for your site

Get an HTML Editor

Defining an HTML Page

Immediately after the <body> tag, type:

<h1>Hello World, this is my first HTML</h1>

Starting the CSS

H1 {text-align:left; color:black; font: normal 40pt "Arial Black"}

<link rel=stylesheet type="text/css" href="css/Helloworld.css">

Your HTML should now look similar to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

• Add additional styles to the CSS including the page design

next article in this series!

How To Build a Website: Develop a Project Outline

What's the Point of Having a Web Site?

Formulate a Project Outline

• Do you need a shopping cart to allow customers to purchase items?

Draw the Wireframe

The Coding is Next

• Writing your first HTML code

...use these to jump around or read it all

[Putting A Site Together]

Putting A Site Together

• links.html (A page of your favorite links)

The HREF Links

<A HREF="http://www.htmlgoodies.com">Click Here</A>

<A HREF="links.html">Click Here</A>

To Use Full URL, Or Not To Use Full URL

What If I Do Use The Full URL?

The Home Page Links

<A HREF="links.html">Click Here for My Favorite Links</A>

What is "HTML" Anyway?

Image In The Center

<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3">

<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3" ALIGN="left">

Align One Line of Text

Aligning Two Lines of Text

This text is next to the Monk's picture.

Adding Blank Lines

<CENTER> and </CENTER>

I mean it's really a rough deal getting the text to do that!

<P ALIGN="right"> and </P>