trp360-virtual-toronto-website-title-image-2014-clear.jpg

DUNDAS SQUARE
CITY HALL
THE CN TOWER
HTO PARK
ART GALLERY
YORKVILLE
KOREA TOWN
GREEK TOWN
TRANSIT
DESTINATIONS
VIDEOS
CHAT

BASIC HTML

to Home page


Always remember to OPEN and CLOSE your tags :

OPEN
CLOSE

<center>

</center>

<font face="Verdana" size="5">

</font>

<a href="website">

</a>

<b><i>

</i></b>

<a href="site"><font size="3"><b><i>

</i></b></font></a>

Fonts

What it is...




Font faces=

color="#ffffff" means WHITE

color="#000000" is BLACK

(the number 0 not the letter)

Open font = <font>

Close font = </font>

Verdana

<font face="Verdana" color="#ffffff">I'm a cool dud... I mean dude!</font>

and it looks like this:

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


Times

<font face="Times" color="#ffffff">I'm a cool dud... I mean dude!</font>

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.

<font face="Verdana, Arial, Helvetica" color="#ffffff">I'm a cool dud... I mean dude!</font>

and it looks like this...

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

Bold Font

<b>text</b>

<font face="Verdana" color="#ffffff"><b>I'm a cool dud... I mean dude!</b></font>

and it looks like this:

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

Italics

<i>text</i>

<font face="Verdana" color="#ffffff"><i>I'm a cool dud... I mean dude!</i></font>

and it looks like this:

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

Bold and Italics

<b><i>text</i></b>

<font face="Verdana" color="#ffffff"><b><i>I'm a cool dud... I mean dude!</i></b></font>

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.

<font face="Verdana" size="1" color="Yellow" ><b><i>I'm a cool dud... I mean dude!</i></b></font>

and it looks like this:

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



<font face="Verdana" size="5" color="Orange" ><b><i>I'm a cool dud... I mean dude!</i></b></font>

and it looks like this:

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

Marquee

Moving Text

<marquee>text</marquee>

<font face="Verdana" size="6" color="#b2b2b2" ><marquee><i>I'm a cool dud... I mean dude!</i></marquee></font>

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.

<font face="Verdana" size="6" color="#b2b2b2" ><marquee scrollamount="10"><i>I'm a cool dud... I mean dude!</i></marquee></font>

and it looks like this:

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

Marquee Text

Other Direction

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

<font face="Verdana" size="6" color="#000099" ><marquee direction="right"><i>I'm a cool dud... I mean dude!</i></marquee></font>

and it looks like this:

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

Blinking Text

<blink>text</blink>


<font face="Verdana" color="#ffffff" size="4">I'm a c<blink>oo</blink>l dud... I mean <blink>dude</blink></font><font color="red">!!!</font>

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"><font color="red">TRP360.com</font></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"><font color="green" size="7">TRP360.com</font></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"><font face="Times" color="purple" size="7"><b><i>TRP360.com</i></b></font></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

Photo Sharing and Video Hosting at Photobucket


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

Photo Sharing and Video Hosting at Photobucket


Placing many images with different spacing using <br>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>

<br>

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

<br><br>

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

<br><br><br><br>

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

Photo Sharing and Video Hosting at Photobucket

Photo Sharing and Video Hosting at Photobucket


Photo Sharing and Video Hosting at Photobucket




Photo Sharing and Video Hosting at Photobucket


Placing images beside each other with &nbsp; and under each other with <br> and adding text to the top and bottom with out tables:


<center><font face="Verdana" color="Yellow" size="2">Click any image to go to PhotoBucket.com</font><br><br><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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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><br><br><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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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><br><br><font face="Verdana" color="Lime" size="3">Click any image to go to PhotoBucket.com</font></center>

and it looks like...

Click any image to go to PhotoBucket.com

Photo Sharing and Video Hosting at Photobucket  Photo Sharing
                                                            and Video Hosting at Photobucket  Photo Sharing and Video Hosting at Photobucket

Photo Sharing
                                                            and Video Hosting at Photobucket  Photo Sharing and Video Hosting at Photobucket  Photo Sharing and Video Hosting at Photobucket

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 &nbsp;, (spaces beside) and the <br>s, (spaces below/above). Using many &nbsp; will make the space larger, like so... &nbsp;&nbsp;&nbsp;&nbsp;. Using many <br>s will make the space larger too... <br><br><br><br>.

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

Photo Sharing and Video Hosting at Photobucket


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

Photo Sharing and Video Hosting at Photobucket

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



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



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

TRP360.com

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

TRP360.com

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

Clicky_Thingy



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.


Color Codes

dafont Fonts

Special Chars

trp360-logo.jpg

Note: This page of basic html is basic html. It is not Transitional, it is not css nor any other form derived from html. It is not w3 approved as all w3 web pages are loaded with errors as is. While all codes will work in any editor some may not work in business associated forms as they tweak theirs to work with their system only and not to conform to any set of Earth based or universal guidelines.

GUIDE

Yonge Dundas Square
Toronto City Hall
The CN Tower
HTO Park
Art Gallery of Toronto
Bloor Yorkville
Korea Town
Greek Town
Transit

EXTRA

Destinations
Toronto
Toronto Panorama
Fun House 2
StoneHenge
2D 3D
3D Builds 1
3D Builds 2
City Council

FUN

Videos
Chat
Search
Games
Basic html
Reid Puzzles
Reading Post
Prime Gridian
Home

spacer-focus-blu.jpg

TRP360 is The Right Place all the way around / TRP360 Copyright 2014 / The Second Life virtual world is a trademark of Linden Research, Inc