The first line inserts an image, called logo.gif. usemap=#GoogleImageMap calls the clickable areas GoogleImageMap. You can change the name GoogleImageMap to any other name you want, like GoogleLetters. Then, you have the 'Image Map':

Make sure you change GoogleImageMap to the name of your image map. The italicized numbers stand for the right, top, left and bottom edges of each clickable rectangle area. The E letter, for example, has 227 as the right edge, 0 as the top edge, 275 as the left edge and 109 as the bottom edge. To find the coordinates of a clickable rectangle in any picture, you can copy and paste the picture into Paint. (See Note below to find out how to find out the numbers.) The href="http://..." tells which web page the viewer will go to when he/she clicks on the rectangle.

Try clicking everywhere around the E. You will see that in the rectangle defined by the coordinates 227,0,275,109 goes to http://en.wikipedia.org/wiki/E.

Remember, you can add and delete areas in order to add or remove clickable rectangles:

Above I have removed the rectangles for O,G,L,E but added a rectangle for Le. Here is the result:

These tips and tricks can add a few touches of proffesionalism to the pictures on your web page! Remember to check out a few other tips in this web site!

NOTE: To find out the numbers next to coords that define a rectangle, copy and paste the image into Paint. Move your mouse across the image and look at the bottom left corner of Paint. You will see two numbers (for example, 47,56). 47 shows how far left your mouse is, and 56 shows how for down your mouse is. To find out the first two numbers you need to put next to coords=, move your mouse to the upper left of the rectangle you want, then look at the two numbers at the corner. To find out the last two numbers, move your mouse to the lower right of the rectangle, then look at the two numbers at the corner.

Tuesday, May 17, 2005

Build a Web Page

First, remember that most tags must be eventually closed. The syntax would be: <tag> CONTENT </tag>.

Open a text editor such as notepad, or the HTML editor for your hosting service.

The first tag in your website should be <html>, which starts the HTML site.Immediately after this should come the <head> tag.

So far, you should have the following:

<html><head>

The next step is to enter the title of your website. This is what shows up in the title bar of the internet browser. Put the title between the <title> and </title>. Then, end the head with </head>. You will end up with:

<html><head><title>TITLE</title></head>

Other data to put into the head includes metadata and stylesheet data.

The next step is to add the body of your website. This is where all the important stuff goes. Start out the body with the <body> tag. In a basic website, all the real content goes in the body.

The most basic way to write the body is to simply write a heading, then type.

Within the body, start off by writing the first heading. This should be big, so the <h1> tag should do the trick. After that, simply write the text of the site. Remember the syntax for making links:

<a href="http://www.linktarget.com">LINK</a>

And for making images:

<img src="http://imagesite.com/image.jpg"> .

Remember, most HTML Tips can be simply inserted into the body and used immediately.

Your basic website is complete! For more advice on tables, frames, text formatting, Javascript, etc., look at the rest of the tips on this site. Almost all of them can simply be inserted in the body. Now you know how to make your website from HTML!

Also, if you are using Blogger, you can go to the "template" section of the dashboard, and edit the template, which is raw HTML. Be careful not to change too much stuff. The beginning data is stylesheet data, so don't mess around unless you know what you're doing. However, you can find the sidebar, and mess around with that quite freely.

You can always use a program like Frontpage or Dreamweaver, but raw coding is always the best way to make your website exactly like you want it!

Sunday, May 15, 2005

Links and Images Basics

These tips and tricks will teach you how to put a link or an image into an html page.

To put a link, use the following code:<a href="http://google.com">Google</a>The result is as follows:GoogleMake sure you change "http://google.com" to the address of the site that you want to link to and that you change "Google" to the text that you want users to see.

To put an image into your web page, use the following code:<img src="http://www.google.com/intl/en/images/logo.gif">The result of that code is as follows:Make sure that you change "http://www.google.com/intl/en/images/logo.gif" to the address of the image you want to display.

New Line Tips

Sometimes you want there to be a large number of empty lines.If you do, you will have to use <br>Simply insert <br> wherever you want there to be a new line.For example, if you want 5 lines to be skipped, use this html code:<br><br><br><br><br>It will create this:

You can put the br tag nearly anywhere in your html document. Make sure that it is in the body, however.

Tips on Headings

Look at the following html code:<h2>Heading 2</h2>It creates this heading:

Heading 2

Now looking at this html code:<h3>Heading 3</h3>It now creates this slightly smaller heading:

Heading 3

The 2 and 3 in H2 and H3 can be changed to any number between 1 and 6 to make different sorts of headings.Here is an example of some code that uses headings:<h4>Heading 4</h4>Heading 4 is the fourth most important heading.<h5>Heading 5</h5>Heading 5 is the fifth most important heading.The code results in the following:

Heading 4

Heading 5

Fun Tips and Tricks

These html tips and tricks will show you some rarely-used html tags.

All these tags will show the exact same primitive-looking text:<code><kbd><tt><samp>For example, look at the following code:<kbd>Text style that can be used to show programming code or basic, boring texts</kbd>That code will create this:Text style that can be used to show programming code or basic, boring texts

Friday, May 13, 2005

Javascript: Rollover Buttons

These javascript tips and tricks will teach you how to make image links that change as you put your mouse over them. It is simple.

First, you need two images. One will be the image when the link is not being touched, the other image is when the link has been activitated.In this case, I am using these two images:

Second, you need to put this code in between the <head> and the </head> on the page that the rollover link is going to be on:<SCRIPT LANGUAGE="Javascript"><!--image1= new Image( );image1.src="http://www.blogblog.com/tictac/tictac_orange.gif";image2= new Image ();image2.src="http://www.blogblog.com/tictac/tictac_green.gif";//--></SCRIPT>Make sure that you change the two URLs (in italics). The first one is to the image of when the link is not activitated, and the second is to the image when the link is touched.

Finally, you insert this HTML code in the main part of your web page, and you you will get a rollover button that links to another site.<A HREF="http://htmltips.blogspot.com.html" onmouseover="mybutton.src='http://www.blogblog.com/tictac/tictac_orange.gif';" onmouseout="mybutton.src='http://www.blogblog.com/tictac/tictac_green.gif;"> <IMG SRC="http://www.blogblog.com/tictac/tictac_green.gif" name="mybutton"></A>As usual, make sure that you change the code in italics to match your needs.

Javascript: Password Tips

If you want a page to be password protected, look at these html tips and tricks.

The first step is to find a web page that is password protected.Mine is: http://htmlpassprotect.blogspot.com/

The second step is to find a web page that will be gone to if the visitor types in the wrong password.I chose: http://htmltips.blogspot.com/It may be better, however, to make a page that will say, for example, "YOUR PASSWORD IS INCORRECT. CLICK HERE TO TRY AGAIN. CLICK HERE TO GO BACK."

The third step is to insert the following code in between <head> and </head> on your password protected page:<SCRIPT language="JavaScript"><!--hide

The four messages in italics show:-The password-The prompt that asks the visitor to type in the password -The message that is displayed if a user types in the password correctly-The address that the visitor goes to if they typed in the wrong password (This should probably be the site that you made in the second step)Those four messages may be changed if you desire.

To make a link to the password protected page, simply use the <a> tag:<a href="http://addressofthesitethatispasswordprotected.com>Click here to go to the password protected site</a>That is what I have done here:Click here to go to the password protected siteNote: Cool is the password for my password protected site.

Finally, to make multiple passwords possible, you will have to look at the original javascript which is on the password protected page:<SCRIPT language="JavaScript"><!--hide

First, you will need to look at first text in italics.var pass1="cool";Change this to:var pass1="cool";var pass2="cool2";var pass3="cool3";...And then new passwords will be declared.Make sure you change cool, cool2, and cool3 for your own passwords.Finally, you need to look at the second text in italics:password==pass1That will need to be changed to, in this case:password==pass1||pass2||pass3That javascript literally says:"if the password that the user entered is the same as password 1 or password 2 or password 3, then follow the instructions below"If you were to make these changes to the password page, then the password page would accept cool2 and cool3 as a password also, in addition to cool.

To add more than 3 passwords, just add more of these:var pass4="password"...and make sure to change pass4 to another name each time you add it again to the code.Adn edit the:password==pass1To include all your password names. (Seperate the password names by ||) (The password name in var pas10="cool10" is pas10)

Thursday, May 12, 2005

Mouseover Hyperlinks Tips

If you want to make your site fancy, these tips are for you!The tips and tricks in this post allow two different types of mouseover links.

The first is one that will act as if visitors have clicked the link when they have simply put their mouse on top of it.For example, look at the following link:Look at this site!It was made with this code:<a href=" "onmouseover="parent.location='http://google.com'"> Look at this site!</a>Copy and paste the code into your HTML code and the change the text in italics and you are done!

The second mouseover link tip is one that will show a pop-up window when a visitor puts his or her mouse on the link.Look at this link:I like web pagesIt was made with slightly different code than the previous tip. Look at the HTML:<a href="" onMouseover="alert('That answer is correct')">I like web pages</a>Copy and paste that code into your web page's HTML code and remember to change the text in italics.

If you do not have a website, I suggest you go to www.Blogger.com, and get a blog. Then this web page can turn into your treasure chest.

About HTML Tips and Tricks

You will be able to add tons of features to your website with these useful and stylish HTML tips and tricks, presented to you by the award winning site htmltips.blogspot.com. You can even use these as myspace tips and tricks.

Disclaimer: HTML Tips is not responsible for any damage caused by following the tips on this site.