Shadowfire Graphics Design
  • Tips and Tricks IV

BACK


Drop Down Box

This is a Drop Down Box using form and submit buttons. Be sure to include both the HEAD and BODY sections of this code!!



This goes in between your HEAD tags:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- Hide from tired old browsers
function jumpBox(list) {location.href =
list.options[list.selectedIndex].value}
// end hiding --->
</SCRIPT>

</HEAD>

This goes in the BODY section of your page:

<BODY BGCOLOR="#FFFFFF">

<FORM>
<SELECT>
<OPTION VALUE="here.html">Here
<OPTION VALUE="there.html">There
<OPTION VALUE="anywhere.html">Anywhere
</SELECT>
<INPUT TYPE="button" VALUE="Go"
onClick="jumpBox(this.form.elements[0])">
</FORM>

</BODY>

Above, where it says "here, there, anywhere", you place the URL's that you want your box to take your visitors to.

And this is how it looks:

   

Another Dropdown Box

There are several ways to make Dropdown Boxes and here is another. With this one, you simply write in the URLs where it says option value=. You can copy and paste this code and add as many options as you want. Here is the code:

<form name="c1">
<p><select name="c2" size="1">
<option selected value="http://www.angelfire.com">Angelfire</option>
<option value="http://www.shadowfiregraphics.com">Shadowfire</option>
<option value="basic.html">Basic HTML</option>
</select>
<input type="button" value="Go"
onClick="location=document.c1.c2.options
[document.c1.c2.selectedIndex].value"></p>
</form>

You will note that the first one, where it says "option selected value" is the default. This is the one that will show up in the box on your page. As you can see, Angelfire is the one "selected" in the code above and Angelfire is the one that the box below shows on this page before any of them have been selected.

And this is what it looks like:

All about Meta Tags

META Tags are entered in between the HEAD Tags. The order you put them in is not important. They require no Closing Tags. You should place at least two meta tags on each and every one of your pages. They are known as "KEYWORDS" and "DESCRIPTION". Here is an example:

<HEAD>
<TITLE>Tips and Tricks: About Metatags </TITLE>
<META NAME="KEYWORDS" CONTENT="html,tutorials,help,metatags,tips,free,online,source code,">
<META NAME="DESCRIPTION" CONTENT="A great HTML tutorial teaching basics, tables, tips and more online for free.">
</HEAD>

The Meta Tag Attributes
The Attribute and Value entries in Meta Tags are not the same as with other HTML Tags:

NAME=
This Attribute simply gives the Meta Tag an identifying name.

CONTENT
All this Attribute does is tell what content is to be associated with the Name you defined in the NAME portion of the Meta Tag.

If you studied the example above you saw that I defined my first Meta Tag as "Keywords" and included a set of 9-10 keywords, with a comma after each, as the Content for that individual Meta Tag. This is an important tag for search engines.

The second Meta Tag above, defined as the "Description" Meta Tag, has a short, detailed description of my web site as the Content of that tag.

Other Commonly Used Meta Tags are:

<META NAME="AUTHOR" CONTENT="Your Name Here">
This tag lets you include the author of your web page. You can use whatever name you want as the author, even an online moniker if you desire.

<META NAME="COPYRIGHT" CONTENT="Enter the Year And your Company Name Here">
This tag tells when your page was created. As the writer of your page you hold the copyright to it.

<META NAME="CONTACT_ADDR" CONTENT="Your Email Address Here">
This tag allows you to put in your email address if you desire so visitors can get in touch with you.

<META NAME="RATING" CONTENT="Add Your Rating Here">
What audience does your site target? Possible values: "GENERAL", "14 YEARS", "MATURE", or "RESTRICTED".

<META NAME="ROBOT" CONTENT="Enter Value Here"> Do you want search engines to index other pages on your site? When a search engine spiders your page it will most likely attempt to follow your links and index every page it comes upon. The list below defines the possible values you may use here to tell the search engine what you wish for it to index:

Possible values:

"ALL"
This will tell a search engine spider to follow ALL the links on your web page and index everything it finds.

"NOINDEX"
This will tell a search engine not to index THIS page at all, but to go ahead and follow any links on the page.

"NOFOLLOW"
This will tell the search engine spider to index this page, but NOT to follow any other links on it.

"NONE"
This will tell the search engine NOT to index this page or follow any of the links.

<META NAME="REVISIT-AFTER" CONTENT="Enter Value Here">
This tag tells a visiting search engine spider when to come back and index your web site again. Possible values can be any amount of time you desire: ex.- "10 days", "3 weeks" or whatever.

<META HTTP-EQUIV="REFRESH"CONTENT="5;URL=https://www.angelfire.com/basic.html">
You can use this tag to set up redirection to another web page. You can send your visitors to a different page by including this tag. Here's how you do it:

After the CONTENT= attribute put in the number of seconds to pause (above it gives 5), followed by a semi-colon, then type URL= the address of the page you want the visitor to go to. It should look like this and go inside the Meta Tag as shown above:

"5; URL=https://www.angelfire.com/basic.html".

So, after about 5 seconds this page would redirect me to https://www.angelfire.com/basic.html.

When your site is submitted to a Search Engine, it sends a program called a spider to visit your web site and gather information. The spider will glean certain bits of information from your page to determine what it is about, and where and how it should be displayed to a person using that particular Search Engine. Most Search Engines will use your Meta Tag defined keywords and descriptions to perform this task. That is why it is important to use them. Although with each site you visit that teaches something on Metatags, this information may be different, in general when you add your Meta Tags ,you should limit the title to 59 characters or less to be compatible with all the search engines. Your description should be 120 characters or less, and your keywords should be 762 characters or less. This will keep your metatags within limits for the search engine to use efficiently.

It is important to make sure that the keywords you use are relevant to your page and that they are also, if possible, included somewhere in the BODY of your page. It is not a good idea to repeat any keyword more than 3 or 4 times. Search Engines will interpret this as an attempt at SPAMMING and most likely throw your page out altogether.

Open a New Window

Ever wondered how to open a new Window with a hyperlink? To do that, all you need to do is add the Target attribute to your link tag:

<A HREF="http://www.shadowfiregraphics.com/" target="_blank">Shadowfire</A>

And that's all there is to it!

Back to Tips & Tricks Index  
   

  


Click on Texas to E-mail me!