HTML Help



Linking URLS Calling Cards Midi codes Internal Links
Helpful Sites Triple Borders Top Borders The Image Tag
Angel's Stationary Basic HTML Tables Jessica's Frames
Add Zip Files Drop Down List HTML Templates Meta Tags

Page 2 of html tips



Note:The following codes are in gif form to be able to show the code as written. You may download the images to your hardrive.


Code for Linking URLS on the Message Board


This is the code used for making your urls "clickable" on the message board as well as linking within and to other sites on your web pages.

Top of Page


Lady Diana's Code for inserting Calling Cards in guestbooks

Keep this code by your side to be certain you always leave a calling card in guestbooks.

Top of Page


Cynthia's Midi Tip
Do you have the tip about the html coding to use to get midis to be heard by everyone whether they are on Netscape or IE? I have gone to so many sites where I can't here the music, so apparently a lot of folks do not know about this.. All it takes is one extra line of code.

Here is an example that will take care of both browsers:


I'm not sure which code is the one that Netscape favors or which is the one that IE favors but I do know if you use both everyone will hear the beautiful music.


Top of Page


Code For Internal Links
This code is useful if you have a lot of information on a page (such as this one). If you notice there are links at the top of this page that will take you to the information you need without scrolling through the entire page. The first code is your link.

This is the same code used for regular links but the # is what makes it internal. You may use any word for the codeword. Example: the codeword used to link to this information is Internal. The next code is placed at the beginning of the information to which you will "jump" using the same codeword


Top of Page


Connie's Infamous Triple Borders
Triple Bordered Backgrounds: This seem to be all the rage on the internet now so we thought to include them on our help pages. Here is a diagram and the code that we think will help you to understand them better. This is where your bottom tile will be we will call it Layer 1 This is your middle tile we will call it Layer 2 This is your top tile the place where you text will be Layer 3 This is what the html code for your page should look like: *The blue text within the code is the only thing that needs to be altered. You may however add your text, link, vlink code the same as you would normally do after the head portion, but for the sake of simplicity I chose to leave them off in this example.

Top of Page


Connie's Top Border Code
The coding to do a top border "frameless" frame would be as follows. Notice in the 4th line of coding.... the FRAMESET ROWS="164,etc..... THIS is the height of your top border. Mine being 164, you need to change this number according to the size of your border. Then you have a page with just the top border named top_top.html.... and your main page... that WILL scroll is going to be named top_main.html.... this is the page where all your actual page is built.


Top of Page


Analyzing The Image Tag

This is the code for inserting images into your web site:



Next we have added the filename of the image to be used:



We see this:
I am an image!

Notice the Width and Height tags. These tags reserve space for the image to help the page load faster. The text is able to load before all of the images have loaded. the ALT tag allows us to place text to either describe the image or whatever you wish. Rest the mouse on the image and you will see the contents of the ALT tag.

To center an image we add these tags:


We now see this:

I am an Image!


To place an image to the right:



We see this:
I am an Image!





Suppose we were using three images on our page. the images are centered but crowded. This can be useful if you are making a pseudo image map or navigation bar, but we want our images nicely spaced. There are two ways to accomplish this.




The first is the HSPACE and VSPACE tags:



Now the images are nicely spaced:




Add this code to each image. You may change the space value to any number you choose.
The alternate method will be discussed in the Tables tutorial and also using images as a clickable link to another page or website.


Top of Page




Angel's Stationary Tutorial
For those of us who would like our correspondence to be a pleasurable visual experience as well as mentally stimulating, Angel has provided us with a
Postcard Stationary Tutorial. The mental part is up to you.

Top of Page




Basic Structure Of A Website

The following is an example of HTML for a basic website:


Everything on your website goes between the BODY tags, after the ALINK and before the /BODY. The following codes can help ehance your website:


Basic Image Tag. Click
here for more information on the image tag.


Basic Link Tag. This code is used to link to other pages within your site, other websites, or Internal Links. The name of your page to link to EX: mypage2.html is placed between the " ". When linking to someone else's website you must use the URL (website address. Click here to learn more about linking URLS and here to learn how to leave a calling card in a guestbook. All use this html code.


Basic Font Tag. With this code you may specify the fonts you wish to use, the color, and the size of the font. Try to specify the windows fonts that everyone has on their systems, if you specify a font not on someone else's system the font will not show. You may specify more than one font separated by commas. If the user does not have the first font they may have the second or third. First, check your page using each of these fonts individually to make sure you like the result. EX: NAME="Verdana,Ariel,Albertus Medium"
You can specify the size EX: SIZE="1", try different sizes to see which looks the best.
Although you specify the color of the text at the beginning of the document sometimes you want to use another color to highlight a word a title, or just have a little fun! You can change the colors without adding the entire line of code each time if you keep it between the original FONT tag. Just add (FONT COLOR=#408080) your new colored text (/FONT). Remember to change the ( ) to the lesser & greater signs.


The BOLD tag


The Italics tag


The Center Tag. This tag will center anything, images, text, tables, etc. on your website.



The line break tag. This tag is useful if you need to place something on the next line or use several to add space. For space around an image click here.


Top Of Page




Von's Zip Tip
I have always wondered how to add zip files to my site and thanks to Von now I know. Upload the zip files to your server and create a
link to the zipped file, no mystery here.

Top of Page






Diana's Code For a Drop Down List
Thanks to Diana we have a choice of navigational styles for our web sites. Have fun and be creative!



Prefer to see everything at once Perchance?
Click arrow for options







Top of Page




Von's HTML Templates
Need a quick page with style? Von has generously offered a few html templates for our use. Download the zip file below and unzip to your editor (make a file called templates and you may even organize them further with subfiles ie: Von's templates). Just add your own text and graphics. Good learning tool. Copy and paste the template as a new html document and play. Make a change, view the change, and this will help you understand more about html. Von has also added a text file for each template.
Download
Von's Templates here.

Top of Page



Meta Tags
To get your site listed in the search engines, you must use Meta Tags. I have listed the main tags to use and a few "secret" others to help with your placement.
Note: Replace the ( ) with < >

(META NAME="generator" CONTENT="the program, HTML editor, used to create this page, usually added for you already")

(META NAME="author" CONTENT="Name")
the name of the author of the program.

(META NAME="keywords" CONTENT="keyword,keyword,keyword")
This tag provides keywords for the search engines such as Infoseek and alta Vista. The keywords must be found in your site. The use of a keyword more than seven times will cause the entire tag to be ignored.
Keywords are important, but try to add a few key phrases. for instance you have a site about Paper Doilies. A key phrase would be: making paper doilies. Try to guess what a person would type in the search engine. If your keywords are an exact or close match your site could be listed in the top ten.

(META NAME="description" CONTENT="This is a site on the making, using, and collecting of paper doilies")
A brief sentence about your site containing a few keywords.

(META NAME="revisit" CONTENT="30days")
This tag tells the search engine to revist your page after the amount of time you specify, depending upon how often you update your site.

(META NAME="robots" CONTENT="index,follow")
this tag tells the search engine to index your other pages as well. I usually submit my index page and when searching for them I find the rest of my site has been indexed. Very handy.

Keep in mind that Meta Tags are very important and no site worth it's salt should be without.


Top of Page






Links to Other Sites


Webmonkey
has great tutorials for beginners and veterans.

HTML For The Conceptually Challenged
A very good html tutorial for the beginner sent in by Eileen

Cedge's HTML Cheat Sheet
A list of common HTML codes and examples. Print this out for a handy reference.


Back to Menu