Selasa, 28 Desember 2004

HTML Requests

20.47 Unknown

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!


Jumat, 16 Juli 2004

Problems with Tips and Tricks

08.11 Unknown

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.






Kamis, 01 Juli 2004

Introduction to Stylesheets

05.46 Unknown

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


Minggu, 20 Juni 2004

Create More Advanced Forms

15.23 Unknown

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:




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:

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


Sabtu, 19 Juni 2004

Page Fading: Internet Explorer

10.10 Unknown

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




Kamis, 17 Juni 2004

Background Color

11.03 Unknown

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

10.57 Unknown

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

07.11 Unknown

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.




Rabu, 16 Juni 2004

Put in a Tiled Background

13.54 Unknown

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.


Selasa, 15 Juni 2004

Justify Text

16.13 Unknown

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

15.42 Unknown

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!


Senin, 14 Juni 2004

Javascript: Print This Page

16.38 Unknown

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!


Minggu, 13 Juni 2004

Building a Web Page From Scratch

11.26 Unknown

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

11.20 Unknown

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

10.38 Unknown

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


Senin, 07 Juni 2004

Make Advanced Tables

14.50 Unknown

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)


Kamis, 03 Juni 2004

Weird Tips for Scrolling Banners (Marquees)

17.01 Unknown

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! google picture in a marquee for this html tip so whatever



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! google picture in a marquee for this html tip so whatever



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! google picture in a marquee for this html tip so whatever



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! google picture in a marquee for this html tip so whatever



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! google picture in a marquee for this html tip so whatever



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! google picture in a marquee for this html tip so whatever



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! google picture in a marquee for this html tip so whatever



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!


Selasa, 01 Juni 2004

Creating Numbered Lists

16.25 Unknown

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.


Create a Little Table

12.15 Unknown

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.


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!