Create More Advanced Forms

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>&nbsp;</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:

Here is my comment...

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:

Here is my comment...

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

This is a good website.
This is a bad website.
I don't know.

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:

Milk
Butter
Cheese

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

Read the rest of this entry »

Page Fading: Internet Explorer

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).

Read the rest of this entry »

Background Color

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.

Read the rest of this entry »

Internet Explorer: Background Sound

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.

Read the rest of this entry »

Prevent Browsers from Caching

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.

Read the rest of this entry »

Put in a Tiled Background

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.

Read the rest of this entry »

Justify Text

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

Read the rest of this entry »

Align Text/Images

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!

Read the rest of this entry »

Javascript: Print This Page

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!

Read the rest of this entry »

Building a Web Page From Scratch

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.

Read the rest of this entry »

Hit Counter

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!

Read the rest of this entry »

Have Text Highlighted

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

Read the rest of this entry »

Make Advanced Tables

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)

Read the rest of this entry »

Weird Tips for Scrolling Banners (Marquees)

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!

Read the rest of this entry »

Creating Numbered Lists

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:

1. Item Number 1
   
   
2. 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:

1. Item Number 1
   
   
2. 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:

1. Item Number 1
   
   
2. 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.

Read the rest of this entry »

Create a Little Table

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.

Read the rest of this entry »