|
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>
|
|
|
|
|
|
|
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:
|
|
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:
|
|
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:
|
|
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 cl dud... I mean !!!
|
|
Add a Line for Spacing with <hr>
|
<hr>
and it looks like:
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
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...
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 <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...
|
|
Placing images beside each other with 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> <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><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> <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><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
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 <br>s, (spaces below/above). Using many
will make the space larger, like so... . 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...
|
|
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...
|
|
|
|
|
|
|
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 . . .
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.
|
|
|
|
|
Color
Codes
dafont Fonts
Special
Chars
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.
|
