Senin, 31 Mei 2004

How to Create a Basic Form

14.39 Unknown

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


Name:
Email:
Comment:
 



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

07.05 Unknown

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&#64;random.com



This displays as:



you@random.com



The same thing goes for a link. Writing



<a href="mailto:you&#64;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, &#64; = @.


Minggu, 30 Mei 2004

Making An Image a Link

07.00 Unknown

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:
Link to Google
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.


Jumat, 28 Mei 2004

Tips for Formatting Text

18.02 Unknown

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


Kamis, 27 Mei 2004

Having Columns Like in a Newspaper

15.19 Unknown

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.


Selasa, 25 Mei 2004

How To Show HTML To People

16.38 Unknown

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:

&lt;b&gt;bold&lt;/b&gt;

Look complicated? It's not. Let's break it down.

The first part is

<b>

This is written as

&lt;b&gt;

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!

&lt; = <

&gt; = >

Now you can show people HTML on your website!



NOTE FROM NILS: In addition, & = &amp;



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


Marquees: Scrolling Banners

16.18 Unknown

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!


Senin, 24 Mei 2004

Javascript: Dialog Boxes

15.21 Unknown

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:




Minggu, 23 Mei 2004

Javascript: Back and Forward Links on Your Site

13.13 Unknown

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.


Kamis, 20 Mei 2004

Have a Title

16.05 Unknown

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

15.52 Unknown

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

    15.27 Unknown

    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.


    Rabu, 19 Mei 2004

    Describe Your Links

    17.04 Unknown

    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

    13.18 Unknown



    Doesn't that button look charming?

    Try clicking on it.

    If you want a button like that on your site,

    insert the code below:

    <form action="http://www.google.com" method="GET">

    <input type="submit" name="anything" value="Google">

    Simply change what I have in italics,

    and you are on your way to have a button on your site!


    Make This Your Homepage (Internet Explorer)

    13.05 Unknown

    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.


    Selasa, 18 Mei 2004

    Alternative Text for Images

    16.14 Unknown

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

    This website rocks!



    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:



    This website rocks!



    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

    15.51 Unknown

    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:


    Senin, 17 Mei 2004

    Open a Page in a New Window

    15.53 Unknown

    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

    15.47 Unknown

    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

    15.32 Unknown

    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

    15.15 Unknown

    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

    14.52 Unknown

    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.


    Twitter Delicious Facebook Digg Favorites More
    RSS FeedSubscribe to our RSS feed!
    Follow me on Twitter!Follow me on Twitter!