TRP360 BASIC HTML

BASIC HTML

Always remember to OPEN and CLOSE your tags :

OPEN

CLOSE

<center>

</center>





<a href="website">

</a>





<a href="site">

</a>

Fonts

What it is...

Font faces=

color="#ffffff" means WHITE

color="#000000" is BLACK

(the number 0 not the letter)

Open font = 

Close font = 

Verdana

I'm a cool dud... I mean dude!

and it looks like this:

I'm a cool dud... I mean dude!

Times

I'm a cool dud... I mean dude!

and it looks like this...

I'm a cool dud... I mean dude!

Many pages will offer a variety of fonts like
Verdana, Arial, Helvetica
so if a computer does not have one font it will
read and use the next font in line.

I'm a cool dud... I mean dude!

and it looks like this...

I'm a cool dud... I mean dude!

Bold Font

text

I'm a cool dud... I mean dude!

and it looks like this:

I'm a cool dud... I mean dude!

Italics

text

I'm a cool dud... I mean dude!

and it looks like this:

I'm a cool dud... I mean dude!

Bold and Italics

text

I'm a cool dud... I mean dude!

and it looks like this:

I'm a cool dud... I mean dude!

Size and Color

are placed in the Font code.

You can use any color by name or use the color codes in webmasters of this site.

If the color codes do not match the color you picked you must use the other color codes, html or css depending on the style of your page.

Size ranges from 1 to 7.

I'm a cool dud... I mean dude!

and it looks like this:

I'm a cool dud... I mean dude!

I'm a cool dud... I mean dude!

and it looks like this:

I'm a cool dud... I mean dude!

Marquee

Moving Text

<marquee>text</marquee>

<marquee>I'm a cool dud... I mean dude!</marquee>

and it looks like this:

I'm a cool dud... I mean dude!

Marquee Text

Faster Baby!

<marquee scrollamount="30">text</marquee>

Try different numbers to suit.

<marquee scrollamount="10">I'm a cool dud... I mean dude!</marquee>

and it looks like this:

I'm a cool dud... I mean dude!

Marquee Text

Other Direction

<marquee direction="right">text</marquee>

<marquee direction="right">I'm a cool dud... I mean dude!</marquee>

and it looks like this:

I'm a cool dud... I mean dude!

Blinking Text

<blink>text</blink>

I'm a c<blink>oo</blink>l dud... I mean <blink>dude</blink>!!!

and it looks like this:

I'm a cool dud... I mean dude!!!

Add a Line for Spacing with <hr>

<hr>

and it looks like:

Text Links

Text Link that opens in the same window.

<A href="http://www.trp360.com" >TRP360.com</A>

and it looks like this:

TRP360.com

Text Link that open in NEW window.

<A href="http://www.trp360.com" target="_blank">TRP360.com</A>

and it looks like this:

TRP360.com

Text Link that open in NEW window in the color red.

<A href="http://www.trp360.com" target="_blank">TRP360.com</A>

and it looks like this:

TRP360.com

Text Link that open in NEW window in the color green with larger font size.

<A href="http://www.trp360.com" target="_blank">TRP360.com</A>

and it looks like this.

TRP360.com

Text Link that open in NEW window in the color purple with larger font size.

This time Bold and Italic and in a Times font face and Centered.

<center><A href="http://www.trp360.com" target="_blank">TRP360.com</A></center>

and it looks like this...

TRP360.com

Image Links

First lets just add an image with out a link:

<center><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></center>

and it looks like this...

Photo Sharing
and Video Hosting at Photobucket

Note that I used PhotoBucket on purpose since all images on the web have to be hosted somewhere on a server and PhotoBucket is free. They also have a very large image selection to choose from and they will host your own pictures for free as well. They also allow for resizing and rotation of images to suit.

Other Notes in the Code:

Border="0" means there is no border around the picture.

Alt is the alternative text that appears when a picture is rolled over, this text also replaces the picture if the user's computer has the images set to off.

Making an Image into a Link:

<center><a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a></center>

and it looks like this...

click image to go to PhotoBucket.com

Breaking down the code:

#1.)<center>

#2.)<a href="http://photobucket.com" target="_blank">

#3.)<img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket">

#4.)</a>

#5.)</center>

________________________________________________

#1.) Center image.

#2.) Start Link = a href = a hyper reference

#3.) Img src = image source = where the image is hosted and it's name.

#4.) End Link = /a.

#5.) End Center of code.

Resizing the Image to Fit Your Page with width="100":

<center><a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="100" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a></center>

and it looks like this...

Placing many images with different spacing using s, (breaks) and changing their sizes with different widths:

<center><a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="100" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a></center>

 

<center><a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a></center>

 

<center><a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="200" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a></center>

 

<center><a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="250" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a></center>

and it looks like this...

Placing images beside each other with   and under each other with and adding text to the top and bottom with out tables:

<center>Click any image to go to PhotoBucket.com <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>  <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>  <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>  <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>  <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> Click any image to go to PhotoBucket.com</center>

and it looks like...

Click any image to go to PhotoBucket.com





Click any image to go to PhotoBucket.com

Notice in that big code there is only one <center> at the beginning and one </center> at the end, this is what gives it the grid appearance with the  , (spaces beside) and the s, (spaces below/above). Using many   will make the space larger, like so...     . Using many s will make the space larger too... .

Yes, you can use all different images each with it's own link to different sites or build your own navigation menu with links to your own pages. If you do so it is a good idea not to open the links in a new window with target="_blank" or target="tlx_new" since you are linking to the same site. New windows are usually for linking to other websites so viewers can explore them and then close them and your site is still there.

Adding a Border to Images with border="4" or any other number you want:

<center><a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="200" border="4" alt="Photo Sharing and Video Hosting at Photobucket"></a></center>

and it looks like...

Moving an Image arcoss the page with <marquee></marquee>:

<marquee><a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="100" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a></marquee>

and it looks like this...

MORE...

Little Box With HTML Inside of it for Copying:

<textarea cols="50" rows="4">HTML GOES HERE</textarea>

cols equals columns of letters / width of box,

rows equals rows of text / height of box,

these numbers may be changed to suit.

and it looks like this...

HTML GOES HERE

If the HTML is too big for the textarea box then scroll bars are added automatically, like so...

<center>Click any image to go to PhotoBucket.com <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> <a href="http://photobucket.com" target="_blank"><img src="http://i150.photobucket.com/albums/s112/TRP360/160197034_laaweb-small.jpg" width="150" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> Click any image to go to PhotoBucket.com</center>

Add an Image Link to this Site:

<center><a href="http://www.trp360.com" target="_blank"><img src="http://www.trp360.com/sitebuildercontent/sitebuilderpictures/trp360smb.gif" border="0" alt="TRP360.com"></a></center>

and this is it . . .

or

<center><a href="http://www.trp360.com" target="_blank"><img src="http://www.trp360.com/sitebuildercontent/sitebuilderpictures/trp.gif" border="0" alt="TRP360.com"></a></center>

and this is it . . .

Add The REID PUZZLES button:

Note it has a roll over effect, try it out.

READ THIS FIRST : This is NOT basic HTML, it is javascript so some web page editors will not support it. Be sure to see if your editor does support it before adding it as it may damage your page. I would create a new page and add it, if it works... cool but if it doesn't then just delete the entire test page. Also, this code will only work once per page, if added twice the first one will cancel out the second one.

<center>
<script language="javascript">
var aryImages = new Array(2);
aryImages[0] = "http://sir_jake1.tripod.com//sitebuildercontent/sitebuilderpictures/trp2.gif";
aryImages[1] = "http://sir_jake1.tripod.com//sitebuildercontent/sitebuilderpictures/trp1.gif";
for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}
function swap(imgIndex) {
document['link1'].src = aryImages[imgIndex];
}
</script>
<a href="http://www.the-reid-puzzles.com/" target="_blank">
<IMG SRC="http://sir_jake1.tripod.com//sitebuildercontent/sitebuilderpictures/trp1.gif" WIDTH=102 HEIGHT=34 BORDER=0 ALT="Clicky_Thingy"
name="link1" onMouseOver="swap(0)" onMouseOut="swap(1)">
</a></center>

and this is it . . .

FOR YOU : You can use one of your own images twice in the code, just make one a bit larger than the other with width="##" to create your own roll over effect, (or two different pictures). Of course change the URL from mine to yours so people go to your site. You may also want to change the alt as well since I put it as "clicky_thingy" hee hee.