Html Tips and Tricks

Images Clickable in Different Areas

2006-02-02T18:53:00.000-05:00

Before, looking at these HTML tips and tricks, be sure to know the tips on links and images.

Look at the following:

It's one image (the Google logo). However, try clicking on different parts of the image. It leads you to different web pages. The code below made the HTML tip:

<img src="http://www.google.com/images/logo.gif"
usemap=#GoogleImageMap>
<map name=GoogleImageMap><area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=68,0,161,109 href="http://en.wikipedia.org/wiki/O">
<area shape=rect coords=161,0,201,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,227,109 href="http://en.wikipedia.org/wiki/L">
<area shape=rect coords=227,0,275,109 href="http://en.wikipedia.org/wiki/E">
</map>

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':

<map name=GoogleImageMap>
<area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=68,0,161,109 href="http://en.wikipedia.org/wiki/O">
<area shape=rect coords=161,0,201,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,227,109 href="http://en.wikipedia.org/wiki/L">
<area shape=rect coords=227,0,275,109 href="http://en.wikipedia.org/wiki/E">
</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:

<img src="http://www.google.com/images/logo.gif"
usemap=#SecondGoogleImageMap>
<map name=SecondGoogleImageMap><area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,275,109 href="http://en.wikipedia.org/wiki/Le">
</map>

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.

Build a Web Page

2005-05-17T03:37:00.000-04:00

This tip will tell you exactly how to code your own HTML website.

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.

Finish off the body with </body>, and the body is done.

The code with the body included should look like:


<html>
<head>
<title>TITLE</title>
</head>
<body>
<h1>THE SITE</h1>
blablabla
<a href="http://www.linktarget.com">LINK</a>
IMAGE:
<img src="http://imagesite.com/image.jpg">
</body>

Remember, you still have 1 more tag to close: the <html> tag. Close it with </html>, and your website is complete. The final code:


<html>
<head>
<title>TITLE</title>
</head>
<body>
<h1>THE SITE</h1>
blablabla
<a href="http://www.linktarget.com">LINK</a>
IMAGE:
<img src="http://imagesite.com/image.jpg">
</body>
</html>

If you want to see what that code looks like in a real web browser, go to this page, which uses the exact HTML code above:

Test Site

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!

Links and Images Basics

2005-05-15T19:19:00.000-04:00

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:
Google
Make 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.

So those are two basic html tips!

New Line Tips

2005-05-15T13:39:00.000-04:00

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

2005-05-15T13:15:00.000-04:00

These html tips and tricks will show you different types of 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 4 is the fourth most important heading.

Heading 5

Heading 5 is the fifth most important heading.

Related Tip:
Tips for Formatting Text

Fun Tips and Tricks

2005-05-15T13:05:00.000-04:00

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

Pre-Formatted Text

2005-05-14T17:51:00.000-04:00

These tips and tricks will allow you to have greater control over text.

To preformat text, you will need to look at the following html:

<pre>
This text is
preformatted
</pre>

It will display the following:


      This text is
           preformatted

If you simply were to remove the <pre> tag, like this:
This text is
preformatted
Then this text would be displayed:

This text is
preformatted

Here is another example of the uses of preformatting text.

Javascript: Rollover Buttons

2005-05-13T21:05:00.000-04:00

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">
</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.

The result of these three steps is as follows:

Javascript: Password Tips

2005-05-13T15:04:00.000-04:00

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">

</SCRIPT>

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 site
Note: 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">

</SCRIPT>

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==pass1
That will need to be changed to, in this case:
password==pass1||pass2||pass3
That 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==pass1
To include all your password names. (Seperate the password names by ||) (The password name in var pas10="cool10" is pas10)

Mouseover Hyperlinks Tips

2005-05-12T20:23:00.000-04:00

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 pages
It 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.

Related Tips:
Describe Your Links
Describe Your Links Another Way
The Nice Mailto Trick

Linking to Other Parts of the Same Webpage

Blockquote Tips

2005-05-12T16:37:00.000-04:00

Blockquote makes a small text box that is indented, as in a quote.

This text is a little to the right because of the blockquote tag. To learn how to make a blockquote like this one, continue reading HTML Tips and Tricks.

To make a blockquote, simply copy and paste the following HTML code:
<blockquote>Text Text Text</blockquote>
Finally, change the "Text Text Text" message to suit your needs.
Result:

Text Text Text

Related Tips:
Align Text and Images
Tips for Formatting Text

NOTE FROM GEOFFREY: The "correct" use of the blockquote is to quote someone. For example:

Geoffrey said this:

"Although you can use this tag simply to indent text, it is better if you use it to quote. That is why it is called the "blockquote" tag."

As you can see, the tag is handy to quote people or websites.

Bullets and Lists

2005-05-11T17:07:00.000-04:00

These html tips and tricks will help you put bullets and lists on your blog.

Let's start with simple bullets.

For this html tip, look at this bullet:

This is next to a bullet

It was made with this simple HTML code:
<li>This is next to a bullet</li>
Insert the above code to your web page,
and then change the message to suit you needs.

...And now let's end with more advanced tips, concerning lists.

To make numbered bullets,

Like these

ones

use this HTML code instead:
<ol><li>Like these</li>
<li>ones</li></ol>
Note that the <ol> is only put at the extremes of the list.

There are also some tips and tricks that will allow different types of bullets:

Lower Case Roman Numerals

HTML Code:
<ol type="i"><li>Lower Case Roman Numerals</li></ol>

Upper Case Roman Numerals

HTML Code:
<ol type="I"><li>Upper Case Roman Numerals</li></ol>

Lower Case Alphabet

HTML Code:
<ol type="a"><li>Lower Case Alphabet</li></ol>

Upper Case Alphabet

HTML Code:
<ol type="A"><li>Upper Case Alphabet</li></ol>

Finally, text inside these bullets can be formatted with this tip.

HTML Requests

2004-12-28T23:47:00.000-05:00

Long time no post! This is a post where you guys can request a snippet of HTML code to do a certain thing, sort of like question and answer. All you have to do is leave a comment, and we'll get back to you in a comment as soon as possible.

Also, to remind you, the HTML newsletter is still active. Not many people are signing up. Remember, you can get a free Gmail account if you sign up! First 5 people get Gmail accounts, and out of the next 5 people, 1 gets a Gmail account. (At least.)

So, let the requests begin!

Problems with Tips and Tricks

2004-07-16T11:11:00.000-04:00

Sometimes, our html tricks do not show up the way you want it to. Before you break your computer, look at these tips and see if you can find your html problem:

Make sure you have completely read the html trick.
Make sure you have written the code on one line.
Make sure you put your quotes in the right places. Double-check your < and >s.
Make sure that the code is put in the correct place of the document. You also have to start a page like this.

If nothing worked, please go to the code help forum, and tell us your problem.

Introduction to Stylesheets

2004-07-01T08:46:00.000-04:00

Note: Please learn other html before you advance to stylesheets.

What are stylesheets???

They are a sheet of code right below your <head> which change the the rest of the page, making it more stylish. It can change how bullets, paragraphs, images, etc. all look.

Writing stylesheets

The basic way you write a stylesheet is...

<style type="text/css">
TYPE OF HTML TAG{property: value; secondproperty, value}
</style>

So, let's say you wanted to change how paragraphs look. (paragraphs are made with <p> and </p>
This is how you do it, if you wanted to change the color of paragraphs:

<style type="text/css">
P{color: "green"}
</style>

Observe that since we wanted to change only one property of paragraphs, we simply left out the second property.
....hmmm....
If that stylesheet code was inserted right after the <head>, then all text put between <p> and </p> will be green!.

Now you know some basic principle on creating a stylesheet and stylesheets are one of the best tricks you can have among all the html code on your web page.

In paragraphs, you can also change the font-size and much more.
Instead of changing paragraphs, you can change bullets, or more.

Advanced CSS

Create More Advanced Forms

2004-06-20T18:23:00.000-04:00

Here is how to create a basic form.

Maybe you want to create a better form, so here are some more advanced html tips.
Before I start, please make sure that you change the e-mail adress in the form code.

Also, if your form does not work, try cramming the form code into one line.

Okay, so here was the code for the "basic form"
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD>
<DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD>
<DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD>
<TEXTAREA name="comment" cols="30" wrap="virtual"rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

How about we first remove the name and e-mail, though if you want you can keep it.
Let's also remove the comment label, the table...
Let's just keep the box and the submit and reset buttons.
The code changes like this:
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TEXTAREA name="comment" cols="30" wrap="virtual"rows="4">
</TEXTAREA>
<br>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</FORM>

This changes the form to this:

Now we have a simplified form. Let's put text in the box:
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TEXTAREA name="comment" cols="30" wrap="virtual"rows="4">
Here is my comment...
</TEXTAREA>
<br>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</FORM>
And the form becomes changed like this:

Let's change the size of the box:
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TEXTAREA name="comment" cols="20" wrap="virtual"rows="2">
Here is my comment...
</TEXTAREA>
<br>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</FORM>
And the form becomes this:

Now, let's make little circles instead of a box, like this:

We changed the code like this:
<form action="mailto:nilsmolina@comcast.net"
method="post"enctype="text/plain">
<input type="radio" value="Yes" name="cloning">This is a good website.
<br>
<input type="radio" value="No" name="cloning">This is a bad website.
<br>
<input type="radio" value="Question" name="cloning">I don't know.
<br>
< input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Reset">
</form>
See that if someone click on, for example, this is a good website, then "YES" is returned to the adress nilsmolina@comcast.net.
Radio means those little circles.
You can also combine a box and radios.
Let's look at checkboxes.
Here is the code for checkboxes:
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
To put the code into a form, do this:
<form action="mailto:nilsmolina@comcast.net"
method="post"enctype="text/plain">
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Reset">
</form>
Now you get a nice form like this:

Note that checked made the box checked.
Finally, you can also change what the buttons say, instead of boring submit, and reset, by changing the submit/reset in value="Submit"/value="Reset".
Now you can have great forms with these html tips!!!

Page Fading: Internet Explorer

2004-06-19T13:10:00.000-04:00

Did this page fade when you came into it? If it didn't you are probably using a browser other than Internet Explorer (or HTML Tips is your home page, which is highly unlikely).
That fade was accomplished using this command in the head of the HTML code (crammed onto 1 line):

<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">

This "blends" the page in for 2.0 seconds when it is entered.
You can change the Page-Enter to Page-Exit, Site-Enter, or Site-Exit. Also, you can change the "blendTrans(Duration=2.0)" to:

"revealTrans(Duration=2.0,Transition=2)" for Circle In

"revealTrans(Duration=2.0,Transition=5)" for Wipe Down

or

"revealTrans(Duration=2.0,Transition=10)" for Checkerboard Across.

Change the Duration=2.0 to a different number for a longer or shorter transition (in seconds).

Change the Transition=2 to a different number for a different transition.

Make your site more interesting and beautiful using this tip!

NOTE FROM GEOFFREY: This tip only works in Internet Explorer. Also, it does not work when a site is your homepage (there is nothing to transition from).

Background Color

2004-06-17T14:03:00.000-04:00

Replace the <body> tag with this:
<body bgcolor="#00FFFF">
It will make your web page have a light blue background color.
Change the #00FFFF to one of these to have a different background color:
#FFFF00=Yellow
#FF66FF=Purple
#FF6699=Pink
#FF6600=Orange
#FF0000=Red
#CCFF99=Green
#CC6600=Brown
#99CCFF=Blue
#6600FF=Dark Blue
#000000=Black
#FFFFFF=White

Here is an example of a web page using this html tip.

Internet Explorer: Background Sound

2004-06-17T13:57:00.000-04:00

If you have internet explorer, then you can use this tip.

This tip should be used right after the <head>:
Insert this code onto ONE line:
<bgsound src="http://home.comcast.net/~nilsmolina/Hecho.wav" loop="-1">
And you will get background sound like this.
Change the url for a different sound location.
Change the loop number if you would like to specify the amount of loops the sound should play.
That is how to add background sound.

Prevent Browsers from Caching

2004-06-17T10:11:00.000-04:00

Many browsers know that people don't always have 3 megabit connections to the internet (why are you staring at me), so they save websites onto their viewer's computer. Then, when the viewer visits the website again, the browser puts the outdated version of the web page it has saved in front of the viewer. This process is called caching. If your page is constantly updated, it is usually a bad idea to have browsers cache your website. Therefore you will need this html tip:
Put this code right after the <head>:
<META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
Do not worry about the queer date, but worry about putting the code onto the least lines as possible. Your page will now probably never be cached again!
This web page also never gets cached.

Put in a Tiled Background

2004-06-16T16:54:00.000-04:00

Many people want backgrounds.
So here is an html tip for it.
Change your body tag (<body>) to...
<body background="https://home.comcast.net/
~nilsmolina/0rrgobve%5B1%5D.jpg">
(make sure the above code is on one line once inserted)
Your website will look something like this
To change the little background image, change the url (http://...).
That is how to put in a tiled background.

Justify Text

2004-06-15T19:13:00.000-04:00

Look at the code for justifying text:
<p align="justify">bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</p>
It creates this justified text:

bla bla bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

(Unjustified text:
bla bla bla bla bla bla bla bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
See the difference?)
That is how you justify text.
Learn how to align text here

Align Text/Images

2004-06-15T18:42:00.000-04:00

To align text to the right insert this code:
<p align=right>aligning text with this tip</p>
It will create this:

aligning text with this tip

If you would like to align the text to the left or center instead, change the right to left or center.
More tips for formatting text
Learn how to justify text here
...to align images use the following html tip:

Here is a normal image:
html code=
<img src=http://www.google.com/images/logo.gif>
output=

Here is an image aligned to the right:
html code=
<img src=http://www.google.com/images/logo.gif align=right>
output=

To make an image centered, change the right to center.
You can also change the right to left.
Make sure you check out the various other html tips on images!

Javascript: Print This Page

2004-06-14T19:38:00.000-04:00

This html tip will put the page on paper.
The code for a print this page link is:
<a href="#"
onkeypress="javascript:if (window.print !=
null)window.print();return false"
onclick="javascript:if (window.print !=
null)window.print();return false"
title="Print this Page - or select File and Then Print from your
browsers menu">Print
This Page</a>
If that code is copied and pasted onto one line, it will create a link like this:
Print This Page
Now you can have viewers print your pages!

Building a Web Page From Scratch

2004-06-13T14:26:00.000-04:00

Delete all the html code you have for your web page if you want to start your page from scratch!
To start a web page from scratch with html insert this code:
<html>
<head>
</head>
<body>
</body>
</html>
After you have done this, you can look at the html tips provided at this web page and use them between the
<body>
and
</body>
tags.
I suggest looking at this tip first.
Remember that to make a link, you use this code:
<a href="http://htmltips.blogspot.com">Link</a>
The link will look like this:
Link
Also, you may want to look at the tips about images on this site.

Also, to make new lines, look at this tip.
NOTE: Some tips may need to go between the <head> and </head> . For example, all tips which use meta go in the head.

Hit Counter

2004-06-13T14:20:00.000-04:00

If you would like a hit counter on your web page like the one at the bottom of this website, then you will have to e-mail me becuase of technical difficulties... When I respond to the e-mail, I will simply give you html code which you can cut and paste into your site. Also, I will give you instructions on how to optionally edit the code to make the counter look different. If you don't like the counter, you can remove it from your site at any time. If you e-mail me, you will get a valuable html tip!

Have Text Highlighted

2004-06-13T13:38:00.000-04:00

This is the code for normal text:
HTML TEXT
It will create this:
HTML TEXT
To have HTML highlighted, change the code to this:
<span style="background-color: #FFFF00">HTML</span> TEXT
It will create this:
HTML TEXT
This html tip will make your page even fancier.
Read more about text formatting here

Make Advanced Tables

2004-06-07T17:50:00.000-04:00

Here is how to create a basic table, so you will understand the following info.
Now that you've learned that, wouldn't it be nice to have a few handy table html tips?
Here they are:

First, we should already know that
<table style="text-align: left; width: 100%;" border="3"
cellpadding="2">
<tbody>
<tr ="">
<td style="vertical-align: top;">Html Table1<br>
</td>
<td style="vertical-align: top;">Html Table2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Html Table3<br>
</td>
<td style="vertical-align: top;">Html Table4<br>
</td>
</tr>
</tbody>
</table>
<br>
is the code for a table.
And the table will look like this:

Html Table1	Html Table2
Html Table3	Html Table4

I shall also stress that if any code does not work properly when you have cut and pasted it, try putting it into only one line.

Second, let's introduce captions:
<table style="text-align: left; width: 100%;" border="3"
cellpadding="2">
<CAPTION>The Caption</CAPTION>
<tbody>
<tr ="">
<td style="vertical-align: top;">Html Table1<br>
</td>
<td style="vertical-align: top;">Html Table2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Html Table3<br>
</td>
<td style="vertical-align: top;">Html Table4<br>
</td>
</tr>
</tbody>
</table>
<br>
See the change? It causes this:

The Caption
Html Table1	Html Table2
Html Table3	Html Table4

(Remember that you can use these tricks in between the <caption> and </caption> to spice up the caption text)

Weird Tips for Scrolling Banners (Marquees)

2004-06-03T20:01:00.000-04:00

Before reading, click here to see how to create a basic marquee.
Now, after you've read that, you are probably dying to get some tricks implanted into these marquees.
See this code? It puts an image resized to a height of 33, a width of 82, and the alternative text: "google picture in a marquee for this html tip so whatever".
<MARQUEE>
Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82
ALT="google picture in a marquee for this html tip so whatever">
</MARQUEE>
If crammed into ONE line, the code creates this:

Hi There!

You can also use all types of interesting html inside the <marquee> tags.
So, now we have easily put an image into the marquee.
It takes long, however, for the marquee to scroll across the entire page.
How about we make scroll in just a little part of the page?
An html tip comes to the rescue!:
If we use width=200 we can do this:
<MARQUEE width=200>
Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82
ALT="google picture in a marquee for this html tip so whatever">
</MARQUEE>
If pasted onto ONE line, look at what happens:

Hi There!

You can obviously change the number after the width= if you want.
You can even use length= when coding html, too, but I unfortunately won't go over that...
So, now we can make the marquee scroll shorter; with less width.
How about we give you another little tip which will get the marquee going in another direction!
Let's add direction=right to make the marquee scroll the other way:
<MARQUEE width=200 direction=right>
Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82
ALT="google picture in a marquee for this html tip so whatever">
</MARQUEE>
Let's see what happens when we put the code on only one line:

Hi There!

Ooooooh...
You can also use direction=left but I don't see a reason.
So, we've used some weird html tips so far.
How about we make the marquee slide, go back and forth...
Why not?
Let's make it go back and forth by adding behavior=alternate:
(Code:)
<MARQUEE width=200 direction=right behavior=alternate>
Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82
ALT="google picture in a marquee for this html tip so whatever">
</MARQUEE>
(Result when inserted onto one line:)

Hi There!

You can also use behavior=slide.
A normal marquee uses behavior=scroll.
Yeah, yeah...
Let's make a the marquee go slower.
Let's use scrolldelay!
Look at some code using scrolldelay:
<MARQUEE width=200 direction=right behavior=alternate scrolldelay=500>
Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82
ALT="google picture in a marquee for this html tip so whatever">
</MARQUEE>
If this tip were inserted onto one little line, look at what happens
(Look below for a LONG time and you'll see what happens):

Hi There!

Remember you can always change the number in front of scrolldelay=.
So, now we got slower marquees.
What about faster marquees?
Instead of scrolldelay we use scrollamount for this:
Look at a code with scrollamount:
<MARQUEE width=200 direction=right behavior=alternate scrollamount=30>
Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82
ALT="google picture in a marquee for this html tip so whatever">
</MARQUEE>
If compacted onto one line after the code is pasted in, look at what happens:

Hi There!

Remember to change the scrollamount= number, and note that you can try to use scrollamount at the same time as scrolldelay!
Finally, let's make the marquee thing loop just once using loop=:
Let's look at the code:
<MARQUEE width=200 direction=right behavior=alternate scrollamount=30 loop=2>
Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82
ALT="google picture in a marquee for this html tip so whatever">
</MARQUEE>
Let's look at the output of this html put in one line:

Hi There!

It loops only twice! Oooh... And also remember that this does not work on all browsers.
Oh wait, by the time you're down here it has already looped twice...
Lastly, remember to change the amount of loops to what you want.
So, those are the tips for today!

Creating Numbered Lists

2004-06-01T19:25:00.000-04:00

Here is some basic code for this html tip.
<ol>
<li>Item Number 1
<li>Item Number 2
</ol>
It will create a numbered list like this one:

Item Number 1
Item Number 2

Also, you can change the code to this:
<ol type=I>
<li>Item Number 1
<li>Item Number 2
</ol>
And you get the numbers in Roman numerals:

Item Number 1
Item Number 2

You can also change the tip like this:
<ol type=A>
<li>Item Number 1
<li>Item Number 2
</ol>
Which creates letters instead of numbers:

Item Number 1
Item Number 2

Finally, you can change the A or I after the type= and you will get some lowercase roman numerals or letters, instead.
This tip will get the information organized in neat ways.
Also, see this tip on how to make normal bullets.

Create a Little Table

2004-06-01T15:15:00.000-04:00

This html tip will allow you to create tables like this one:

Html Table1	Html Table2
Html Table3	Html Table4

The code for that table was:
<table style="text-align: left; width: 100%;" border="3"
cellpadding="2">
<tbody>
<tr ="">
<td style="vertical-align: top;">Html Table1<br>
</td>
<td style="vertical-align: top;">Html Table2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Html Table3<br>
</td>
<td style="vertical-align: top;">Html Table4<br>
</td>
</tr>
</tbody>
</table>
<br>

When inserting the above code, make sure you put the top two lines onto ONE line.
If you would like to add another cell in an existing row, simply put in another
<td style="vertical-align: top;">Html Table2<br>
</td>
in the appropriate location.
If you would like to add a new row, put in a
</tr>
<tr>
in the appropriate location.
Obviously, be sure to change the Html Table text in my example.
You can also fiddle around with the numbers in the code of this html tip, especially stuff in the first line.
This tip can lead to more advanced table formatting.
If you liked this tip, you will probably also like this tip, which is about forms.

How to Create a Basic Form

2004-05-31T17:39:00.000-04:00

Insert the following code:
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD>
<DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD>
<DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD>
<TEXTAREA name="comment" cols="30" wrap="virtual"rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

And you will have a form like this:

Make sure you change, in the code, the e-mail adress which I have in italics.
Also make sure to cram the code into a small amount of lines. (Do not put <FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain"> on two lines).
This html tip will allow you to connect and get input from users.

Click here to create more advanced, much classier forms.

NOTE: Problems may occur when trying to e-mail yourself.

Protection from Spam Robots

2004-05-31T10:05:00.000-04:00

Do you want to post your email adress on your web site, only to realize that doing so will probably bring you spam? Here is a way to avoid getting your email adress taken by spam robots that search HTML code.

In your HTML code, display your email adress as:

you@random.com

This displays as:

you@random.com

The same thing goes for a link. Writing

<a href="mailto:you@random.com">Email me!</a>

in the code gives you:

Email me!

Let people contact you and keep yourself protected from spam easily using this tip. Remember, @ = @.

Making An Image a Link

2004-05-30T10:00:00.000-04:00

This code will create the google logo which will link to the html tips homepage:
<a href="http://www.google.com"
Title="Link to Google"><img
src="http://www.google.com/images/logo.gif"
alt="Link to Google"></a>
Insert the code above onto one line and you will get this:

After you have inserted the code, change the title, the url, the image source, and the alternate text (alt), and you will be done.

Make many links in one image in these html tips and tricks.

Tips for Formatting Text

2004-05-28T21:02:00.000-04:00

Plain old text needs a few html tips.
That is why I will show some html which will improve plain old text.

Html Tip 1: To insert plain old text simply insert any text between the <body> and </body> tags.
Example:
This is html text
Code:
This is html text

Html Tip 2: To make text bold, underlined, or be in italics, add the corresponding tag on the sides of the text.
To make text bold, insert the <b> and </b> tags on the sides of the text.
To make text in italics, insert the <i> and </i> tags on the sides of the text.
To make underlined, insert the <u> and </u> tags on the sides of text.
And, finally, here is a bonus tip:
You can put a line through text by placing the ~~and~~ tags on the sides of the text.
Example:
This is html text in italics.
Code:
<i>This is html text in italics</i>

Html Tip 3: To change the font itself, font size and colors, look at this:
To change the color:
add the <FONT COLOR="color name in english"> and </font color> to the sides of the text.
To change the font size:
add the <font size=number from 1-7> and </font> to the sides of the text.
To change the font:
add the <font face="font name"> and </font> to the sides of the text.
In addition, you can put commas between different fonts like this:
<font face="artistik,arial">This can be in different fonts.</font>
This html code creates text which will be in the artistik font. However, if the computer does not have an artistik font, then the text will be written in arial.
Here is what the html does on your computer:
This can be in different fonts
Here is another example of changing the font size, text or colors:
<font color="red">This is html text in red</font>
And that creates this:
This is html text in red
And finally, another example for people who really like changing fonts:

<b>
<font color="red" font size=5 font face="artistik,times,arial">Fancy html text</font>
</b>

And that html creates this:

Fancy html text

Html Tip 4: It is sometimes useful to move text around a little.
Here are some nice tags:
To start a new paragraph, simply insert <p>
To center text, simply insert <center> and </center> to the sides of the text you want centered.
To align text to the right, simply insert <div style="text-align: right;"> and </div> on the sides of the text you want to be aligned to the right.
To start a new line, simply insert <br>.

Now there is some nice html to make your site look great!

Related Tips:
Having Columns Like in a Newspaper
Blockquotes
Align Text and Images

Having Columns Like in a Newspaper

2004-05-27T18:19:00.000-04:00

This is column 1 and this is column 1 and this is still column 1

This is column 2 and this is column 2 and this is still column 2

This is column 3 and this is column 3 and this is still column 3

The source code for the colums was this:
<TABLE BORDER="0">
<TR>
<TD WIDTH="30%" VALIGN="TOP">
This is column 1 and this is column 1 and this is still column 1<BR>
</TD>
<TD WIDTH="5%"></TD>
<TD WIDTH="30%" VALIGN="TOP">
This is column 2 and this is column 2 and this is still column 2<BR>
</TD>
<TD WIDTH="5%"></TD>
<TD WIDTH="30%" VALIGN="TOP">
This is column 3 and this is column 3 and this is still column 3<BR>
</TD>
</TR>
</TABLE>

When inserting the code, make sure you put it into very few lines.
Change all the little percentages to adjust the coloums, and also make sure you change the text.
This html tip will help your page be professional.

How To Show HTML To People

2004-05-25T19:38:00.000-04:00

Have you ever tried to show HTML code to people, only to have it really operate?
For example, you type in
<b>bold</b> and you just get this:
bold
This is how people (including us) display HTML tags:
In the previous example, we used <b>bold</b> as the displayed code. This is how I wrote that:
<b>bold</b>
Look complicated? It's not. Let's break it down.
The first part is
<b>
This is written as
<b>
Ever noticed how the things around the tags are greater and less than signs (<,>)? Well, that is used here. & l t ; is used for less than and & g t ; is used for greater than.
That's essentially all you need to know!
< = <
> = >
Now you can show people HTML on your website!

NOTE FROM NILS: In addition, & = &

NOTE FROM GEOFFREY: To show people how to show people how to make HTML, remember to use & as an &. So to write < you would write &lt;

Marquees: Scrolling Banners

2004-05-25T19:18:00.000-04:00

Have you ever wanted to have a scrolling banner (marquee) that goes across your web page and attracts people's attention?
Use this simple code:
<marquee bgcolor=pickacolor>THIS IS IN MY MARQUEE</marquee>
If I type yellow in the bgcolor place that gives you:
THIS IS IN MY MARQUEE
You can also just have
<marquee>THIS IS IN MY MARQUEE</marquee>
with no bgcolor value which gives you:
THIS IS IN MY MARQUEE
So use this code to attract attention and to keep your viewers on your site!

Note from Geoffrey:The background color only works for Internet Explorer.
Note from Nils:Now click here to get more advanced!

Javascript: Dialog Boxes

2004-05-24T18:21:00.000-04:00

Here is a normal button that does nothing:

This code made the button:
<form method="POST">
<input type=reset value="Button">
</form>
If you want the button to show a dialog box after being clicked, edit the code to this:
<form method="POST">
<input type=reset value="Alert" OnClick="alert( This is an alert! )">
</form>

That results in:

Javascript: Back and Forward Links on Your Site

2004-05-23T16:13:00.000-04:00

In this html tip, you can have little buttons or links which copy the functions of your browsers back and forward buttons.
Let's show you how to make buttons:
<FORM METHOD="post">
<INPUT TYPE="button"
VALUE="BACK"
OnClick="history.go( -1 );return true;">
<INPUT TYPE="button"
VALUE="FORWARD"
OnClick="history.go( 1 );return true;">
</FORM>
If you insert this code onto one line, you get this:

You can delete the forward button section and you only get a back button.
This is the code for only a back button: (remember to put it on ONE line)
<FORM METHOD="post">
<INPUT TYPE="button"
VALUE="BACK"
OnClick="history.go( -1 );return true;">
</FORM>
If you change the VALUE="BACK" to something else, too, you can get something like this:

Nice, eh?
Hyperlinks are a bit simpler:
<A HREF="javascript:history.go(-1)">Go back</A>
<A HREF="javascript:history.go(1)">Go forward</A>
That code makes this:
Go back
Go forward
Edit the code a bit after you have inserted it, and you are done with this.

NOTE: Always make sure you have the most recent browser and javascript plugins.

Have a Title

2004-05-20T19:05:00.000-04:00

Look at the top, top, top of your browser window.
It should say something like: Html Tips and Tricks
Also look elsewhere on the monitor, and the name may show up somewhere else, too.
It might show up at the bottom, bottom, bottom depending on the OS you are using.
Let's say that on your website, the top of the browser window says: New Page 1.
That's BOR-ING, isn't it?
To change it, simply insert the below html code:
<title>Htmltips.blogspot.com Rocks!</title>
Okay, fine, if you want you can change the text a bit.
But, yes, how about you have a title?

Making Bullets

2004-05-20T18:52:00.000-04:00

Making a bullet is as easy as making a link!
This is what you do for this html tip:
Look at this bullet:

This is next to a bullet

It was made with this simple code:
<li>This is next to a bullet</li>
Insert the above code to your web page,
and then change the message to suit you needs.

Describe Your Links Another Way

2004-05-20T18:27:00.000-04:00

Move your mouse over to this link,
and keep it still for a few seconds:
Google
Wouldn't your links look great with those little things?
Here is how to have them on your website.
Look at the code making a normal link:
<a href="http://www.google.com">Google</A>
Here is the normal link:
Google
And look at the code making the link we looked at first:
<a href="http://www.google.com"TITLE="Click here to go to google">Google</A>
So just insert the above code onto one line, edit it a bit, and you get a really nice link!
This html tip will add some salt and pepper.

Describe Your Links

2004-05-19T20:04:00.000-04:00

This tip will only work with java enabled browsers...
To add a little spice to your links, look at this:
Look at a normal link: (click on it)
google
The link was made with this code:
<a href="http://www.google.com">google</a>
Let's add this after the url:
OnMouseOver = "window.status='click here to go to google'; return true;"
And the code becomes this:
<a href="http://www.google.com" OnMouseOver = "window.status='click here to go to google'; return true;">google</a>
And the link becomes this:
google
Move your mouse to the link and look at the bottom of your web browser.
Wow. It says "click here to go to google" * What a nice html tip!
Modify the html code to your needs and you'll get a nice spiced up web page!

* Note from Geoffrey: If you don't have a bar at the bottom of your screen in Internet Explorer, go to the View menu and click on Status Bar. A bar will show up at the bottom of the screen displaying where a link will go (or, in this case, what its name is).

Having a Button On Your Site

2004-05-19T16:18:00.000-04:00

Make This Your Homepage (Internet Explorer)

2004-05-19T16:05:00.000-04:00

If you have IE (Internet Explorer), than I have an html tip for your website!
Look at the link below, and click on it.
Make This Your Homepage
Did you see that IE set http://htmltips.blogspot.com as the homepage?
Do you want to have a nice link on your website which will do the same?
Simply look at the code below:
<SPAN STYLE="cursor:hand; color:blue; text-decoration:underline" onClick="this.style.behavior='url(#default#homepage)'
;this.setHomePage('http://htmltips.blogspot.com');">
Make This Your Homepage</SPAN>
You can change the url or the message to suit your needs when you insert the html code.
Remember to cram the html code onto ONE line.

Note from Geoffrey: To change your home page back to the correct web page from http://htmltips.blogspot.com, in Internet Explorer go to the Tools menu, then click on Internet Options. The first item at the top will be a text box enabling you to switch your home page to whatever you want.

Alternative Text for Images

2004-05-18T19:14:00.000-04:00

Another tip for image coding in HTML is alternative text. This text shows up in case the graphic does not show up, and also is displayed when the user holds their mouse over an image. Take the Google logo, for example. If I want to display, "This website rocks!" when you hold your mouse over the image, or if it doesn't load, I will use this code:
<IMG SRC="http://www.google.com/images/logo.gif" ALT="This website rocks!">

This gives me this result (drag your mouse over it and hold it still for a few seconds):

The alternative text will also show up when the graphic isn't coded correctly like this:

<IMG SRC="http://www.google.com/images/logoarughaj.gif" ALT="This website rocks!">

That bad code gives me this:

As you can see, alternative text is very handy and a good way to manage images.

Also, if you can't get an image to come up, make sure you have http:// written at the beginning, not just www.!

NOTE FROM NILS: Some of the information shown above may not work on some browsers exactly as described. The information above is accurate for Internet Explorer, however.

Aligning Images

2004-05-18T18:51:00.000-04:00

This is how to insert an image with html:
<img src=http://www.google.com/images/logo.gif>
However, if you want to align it left or right, simply change the code
like this:
<img align="left" src=http://www.google.com/images/logo.gif>
You can also change the left to right.
And also remember to change the url to the url of a picture you want.
I aligned this google icon to the right side:

Open a Page in a New Window

2004-05-17T18:53:00.000-04:00

To have a link in which, when a viewer presses it, will open a page in a new window, you need to listen to this:
Insert something like this:
<A HREF="http://www.google.com/" TARGET="_blank">Open Google in a New Window</a>
And look at what happens:
Open Google in a New Window
You see?

Automatically Redirect Visitors

2004-05-17T18:47:00.000-04:00

To redirect anyone who visits your site, automatically, you just need to insert html:
<meta HTTP-EQUIV="REFRESH" content="0"; url=http://www.google.com">
See the content = "0" thing?
Change the zero to change the amount of seconds before your viewer will be redirected.
I decided not to show an example on this site.

NOTE FROM NILS: People with blogs on blogspot may experience problems with the tip above.

Linking to Other Parts of the Same Webpage

2004-05-17T18:32:00.000-04:00

Before you can link to a part of your webpage you need to mark that part of the web page.
You do this by inserting this into the webpage:
<A NAME="Anyname">Bla, bla, bla</A>
This is how it looks to the viewer:
Bla, bla, bla
Then, you make the link. Here's the code:
<A HREF="#Anyname">Go back to bla, bla, bla</A>
Here's the output: (See what happens)
Go back to bla, bla, bla
Oooh... Aaah...

Resizing Images

2004-05-17T18:15:00.000-04:00

Everybody knows how to put an image in html code:
Code:
<IMG SRC="http://www.google.com/images/logo.gif">
What it looks like to the viewer:

To resize your image do something like this to the code:
<IMG SRC="http://www.google.com/images/logo.gif" WIDTH="180" HEIGHT="55">
And look at the output:

Related Tip:
Making an Image a Link

The Nice Mailto Trick

2004-05-17T17:52:00.000-04:00

If you ever want someone to e-mail you, than mailto is your answer!
When you insert this command into your html code, a link will be created.
Whoever clicks on this link will have their default mail client pop up!
Look at this code:
<A HREF="mailto:?">Send me an email</A>
This is how it looks to the viewer:
Send me an email
We can also before the question mark, type in the address which the viewer is to send the e-mail to, and look at what happens.
<A HREF="mailto:nilsmolina@comcast.net?">Send me an email</A>
Send me an e-mail
We can also add something to the subject line, too.
Look at what happens. We have added subject=This text is on the subject line&
<A HREF="mailto:nilsmolina@comcast.net?subject=This text is on the subject line&">Send me an email</A>
Send me an e-mail
OK, finally, we can even add text in the actual e-mail!
Look at what happens as we add body=This text is in the e-mail
<A HREF="mailto:nilsmolina@comcast.net?subject=This text is on the subject line&body=This text is in the e-mail">Send me an email</A>
Send me an e-mail
Wow, isn't that nice.
Yes, it is the nice mailto trick.

Name:
Email:
Comment: