HTML Code 101

HTML Code 101 is the Best HTML CodesTutorial Site

Learn HTML on HTMLCODE101.WEBS.com

 


HTML Codes
< Untitled

Site News: We now are trying to update weekly...................Marquee Generator Coming Soon...............More Videos Coming................

About HTML

HTML is a language that the internet browser reads.It then translates it to what we want it to be shown as. There are other languages like , JavaScript and CSS. We , here , will show you cool yet simple (and some that are not) codes to improve your sites. We also have some fun codes that are not to be memorized , just copied and pasted. I use my HTML for my sites and there are many more codes. I hope that the codes given are helpful to you all. If you have any questions at all , visit the Questions page.

Thank you for visiting our site. Register to our site.



The HyperLink

The HyperLink or Link is the mpst useful code on the internet. Without it , you would have to copy and paste your URLs into the address bar! This code makes it a lot easier I think!
Heres a Video on How to do it.



HTML Videos

HyperLink
Marquee
Font Color & Size
Font Face
Images
HTML-Editor
Table
Our YouTube Channel

 

 

Code:

<a href="URL" mce_href="URL" >Your Text!</a>

If codes do not work you may need to update your computer or browser.

Build Your Own Websites And Make Money Doing It!

All HTML 101 Code Subscribers Are Encouraged To Try GDI!

title

New Codes

Bouncing Ball On Cursor.(list below) 

 

 

<STYLE>
v\:* {
 BEHAVIOR: url(#default#VML)
}
</STYLE>
 
<SCRIPT language="JavaScript1.2">

 

var stringcolor="red" //SPECIFY STRING COLOR
var ballsrc="http://www.dynamicdrive.com/dynamicindex4/superball.gif" //SPECIFY URL TO BALL IMAGE

///No editing required below this line//////////////////////////

if (document.all&&window.print){
document.write('<IMG id=Om style="LEFT: -10px; POSITION: absolute" src="'+ballsrc+'">')
ddx=0;ddy=0;PX=0;PY=0;xm=0;ym=0
OmW=Om.width/2;OmH=Om.height/2
}

function Ouille(){
 x=Math.round(PX+=(ddx+=((xm-PX-ddx)*3)/100))
 y=Math.round(PY+=(ddy+=((ym-PY-ddy)*3-300)/100))
 Om.style.left=x-OmW
 Om.style.top=y-OmH
 elastoc.to=x+","+y
 //elastoc.strokecolor="RGB("+x+","+(2*y)+",0)"
 elastoc.strokecolor=stringcolor
 setTimeout("Ouille()",1)  
}
function momouse(){
 xm=window.event.x+5
 ym=window.event.y+document.body.scrollTop+15
 elastoc.from=xm+","+ym
}

if(document.all&&window.print){
code="<v:line id=elastoc style='LEFT:0;POSITION:absolute;TOP:0' strokeweight='1.5pt'></v:line>"} else {
code="<v:group style='LEFT:-10;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' coordsize='21600,21600'><v:line id=elastoc style='LEFT:0;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' strokeweight='1.5pt'></v:line></v:group>"}

if(document.all&&window.print){
document.body.insertAdjacentHTML("afterBegin",code)
document.onmousemove=momouse
Ouille()
}

</SCRIPT>

Here are some other images to put in the code:

Copy&Paste

 Pistol

http://tbn2.google.com/images?q=tbn:j-AaxeaWki7gnM:http://mario239303.files.wordpress.com/2008/09/gun.jpg

 

Earth

http://tbn1.google.com/images?q=tbn:8kfFQsenJm7XzM:http://www.thinkspace.com/blog/wp-content/uploads/2009/01/earth-transparent.png

Soccer Ball

http://tbn2.google.com/images?q=tbn:OnCCuaMNhmCcpM:http://www.clker.com/cliparts/9/0/f/5/1194986802274589086football_ball_brice_boye_01.svg.med.pnghttp://www.clker.com/cliparts/9/0/f/5/1194986802274589086football_ball_brice_boye_01.svg.med.png

new codesT

Code For Huge Messages

 

 

script>

 


var themessage="<font color=YOURCOLOR>Your Message!</font>"
var fontsize=10
//Below determines how long the message will appear before disappearing. 3000=3 seconds
var appearfor=3000

function position_at_top(){
if (document.layers)
document.test.top=pageYOffset
else if (document.all){
test.innerHTML='<div align=center><font face="Arial">'+themessage+'</font></div>'
setTimeout("test.style.top=document.body.scrollTop+10;test.style.left=document.body.scrollLeft+10",100)
}
else if (document.getElementById){
document.getElementById("test").innerHTML='<div align=center><font face="Arial">'+themessage+'</font></div>'
document.getElementById("test").style.top=pageYOffset
}
}

function expand(){
if (document.layers){
document.test.document.write('<div align=center style="font-size:'+fontsize+'px"><font face="Arial">'+themessage+'</font></div>')
document.test.document.close()
}
else if (document.all)
test.style.fontSize=fontsize+'px'
else if (document.getElementById)
document.getElementById("test").style.fontSize=fontsize+'px'
fontsize+=5
if (fontsize>90){
if (document.layers)
setTimeout("document.test.visibility='hide'",appearfor)
else if (document.all)
setTimeout("test.style.visibility='hidden'",appearfor)
else if (document.getElementById)
setTimeout("document.getElementById('test').style.visibility='hidden'",appearfor)
return
}
else
setTimeout("expand()",50)
}

</script>

 

tEXT fOLLOW CURSOR

<!-- this script got from www.javascriptfreecode.com-Coded by: Krishna Eydatoula -->

<!-- START OF Mouse Cursor Text Trailer DHTML -->


<!-- SUMMARY BRIEF

This DHTML script will make a text message follow
your cursor around the screen. You can change the
message to say whatever you want.

You can change the font face, color and size in
the .trailersytle tag below. You can change the message
in the javascript below that. Just look for the
comment that says "Insert your personal message below."

-->


<!-- Put this portion of the script inside of your <HEAD> tag -->


<style>
.trailerstyle {
position: absolute;
visibility: visible;
top: -50px;
font-size: 12px;
font-family: Arial,Helvetica,Verdana;
font-weight: bold;
color: green;
}
</style>

<script>
<!--

var x,y
var step=20
var flag=0

// Insert your personal message below.
// Important: Do NOT remove the space at the end of the sentence!!!

var message=" HTML Codes Are Awsome! "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}

function mousetrailer() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}

else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("mousetrailer()",30)
}

//-->
</script>


<!-- Put this code inside of your <BODY> tag. -->


<script>
<!--

for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='trailerstyle'>")
document.write(message[i])
document.write("</span>")
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

//-->
</script>


<!-- Lastly, insert the following into the <BODY> tag, itself, just like the example that follows. -->


example:
<body onLoad="mousetrailer()" style="width:100%;overflow-x:hidden;overflow-y:scroll">


 

MovING TITLE

<!-- this script got from www.javascriptfreecode.com-Coded by: Krishna Eydatoula -->
<SCRIPT language=javascript>
msg = "HTML By Luke! Get this code!";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</SCRIPT>

 

Falling leaves

<!-- this script got from www.javascriptfreecode.com-Coded by: Krishna Eydatoula -->
<script language="JavaScript1.2">

//Pre-load your image below!
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="http://javascriptfreecode.com/images/barg.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://javascriptfreecode.com/images/barg.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://javascriptfreecode.com/images/barg.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://javascriptfreecode.com/images/barg.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://javascriptfreecode.com/images/barg.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://javascriptfreecode.com/images/barg.gif"

Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;

if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= Math.random()*5+3;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',20);
}

window.onload=fall
//-->
</script>

 

Great  website Design Software products

SEARCH

title

<!--Start of CBproAds search plug-in -->
<form action="http://cbproads.com/searchsf.asp?plugin=no" target=_blank method="get" >
<input type=hidden value=38752 name=id>
SEARCH <input name=sc value="" >
<input type=submit value="Search">
</form><!-- end -->

Welcome

eBooks, Software and Downloads

Recent Blog Entries

by Web Designer Guy | 0 comments


Webs Counter

Recent Videos

57 views - 2 comments
24 views - 0 comments

Newest Members