INK ABLAZE

ALL I NEED TO ACHIEVE TRUE HAPPINESS IS...

INK COFFEE & PAPER

HTML Codes Cheat Sheet

here is a glossary to reference for many html codes that are
used frequently, all categorized neatly in one easy to find place!

Text Links

regular link:
<a href="url">Link text</a>

link opens in pop-up window:
<a href="http://www.yoursite.com/"target="_blank">link text</a>

text link to jump further down the page:
<a href="#label">click title to jump</a> <a name="label">see this further down the page!</a>

Image Links

show an image on a page:
<img src="your image url here">

image link full size:
<a href="url you want the image to link"><img src="your image url"></a>

image link thumbnail:
<a href="url you want the image to link"> < img height=100 width=100 src="your image url "></a>

image link detail thumbnail:
<a href="detail image url"><img src="full image url"></a>
*note: this required two images to work correctly. a seperate, smaller "detail" image, which links to the full size image.

no blue border around image:
<img src="your image url here" border="0"></a>

image link as pop-up window:
<a href="url you want the image to link" target="_blank"><img src="your image url"></a>

Text / Image Properties And Positions

<b>Bold</b>

<i> Italic </i>

<u> Underline </u>

<s> ~~Strikethrough~~ </s>

Left: <div align="left"> align text/image left </div>

Right: <div align="right"> align text/image right </div>

Center: <div align="center"> align text/image center </div>

Justified: <div align="justify"> align text/image justified </div>

Blockquote: <blockquote> use this to align a segment of text into a blockquote </blockquote>

Position: Absolute (will put the text/image anywhere on the page, placement defined by pixels)

for text:
<div style="position: absolute; top:100px; left:600px; width:200px; height:25px">define how far from the top and the left the text is on the page, and how high and wide the text portion is!</div>
for an image:
<img style="position:absolute; top:255px; left:470px; (optional-->)width:30px; height:300px"(<--) src="image url">

Image Background Properties
css is a better option for "background images" repeated on every page, but
for special images not repeated on every page, here is some useful codes:

Image background, not repeated:
<div style="background-image:url('yourimageurlhere')"></div>

Image background, repeated vertically:
<div style="background-image:url('yourimageurlhere'); background-repeat:repeat-y;"></div>

Image background repeated horizontally:
<div style="background-image:url('yourimageurlhere'); background-repeat:repeat-x;"></div>

Image background repeated vertically and horizontally:
<div style="background-image:url('yourimageurlhere'); background-repeat:repeat;"></div>

Image background not repeated, fixed:
<div style="background-image:url('yourimageurlhere');background-attachment:fixed;"></div>

Image background repeated, fixed:
<div style="background-image:url('yourimageurlhere');background-attachment:fixed;"></div>

Image background for an entire page:
<body style="background-image:url('yourimageurlhere');">...content goes here...</body>

Align Text Next To An Image

Aligns the top of the text to the top of the image:
<img src="image url" alt="align box" align=texttop>

Aligns The text to the middle of the image:
<img src="image url" alt="align box" align=absmiddle>

Aligns the text to the bottom of the image:
<img src="image url" alt="align box" align=absbottom>

image floats to the left of the text:
<img src="image url" alt="align box" align=left>

image floats to the right of the text:
<img src="image url" alt="align box" align=right>

Scroll Boxes

Standard Scroll Box:

<div style="font: 8px/8px Georgia, Garamond, Serif; overflow: scroll; width: 200px; height: 40px; text-align: left;"> scrolly text goes here!</div>

scrolling text marquee box!:

<div align="center"><style= border: 2px dotted #e8e8e8;> <marquee scrollamount="2" direction="up" loop="true" width="200px"> <center> <font color="#bdbdbd" size="2px">you can use this to make scrolling text! If you want your text lines to be broken up and not glommed together, just put <br> between any line! </font> </center> </marquee></div>

Show HTML In A Text Area

convert my html to text here!

just input your html code here and it will automatically change the code for you to show as text. Genius.

Random Image Script

use this script to generate a random image on your website

get the code:

Calendar Script

use this script to show an accurate calendar on your page that highlights todays date!

get the code:

<center><SCRIPT language="JavaScript"> monthnames = new Array ( "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var linkcount=0; function addlink(month, day, href) { var entry = new Array(3); entry[0] = month; entry[1] = day; entry[2] = href; this[linkcount++] = entry; } Array.prototype.addlink = addlink; linkdays = new Array(); monthdays = new Array(12); monthdays[0]=31; monthdays[1]=28; monthdays[2]=31; monthdays[3]=30; monthdays[4]=31; monthdays[5]=30; monthdays[6]=31; monthdays[7]=31; monthdays[8]=30; monthdays[9]=31; monthdays[10]=30; monthdays[11]=31; todayDate=new Date(); thisday=todayDate.getDay(); thismonth=todayDate.getMonth(); thisdate=todayDate.getDate(); thisyear=todayDate.getYear(); thisyear = thisyear % 100; thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear)); if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) ||(thisyear % 400 == 0)) monthdays[1]++; startspaces=thisdate; while (startspaces > 7) startspaces-=7; startspaces = thisday - startspaces + 1; if (startspaces < 0) startspaces+=7; document.write("<FONT face='verdana'>"); document.write("<table width=100% border=0 " ); document.write("style='font-size : 10px; color : #aaaaaa;' cellpadding=0 cellspacing=1>"); document.write("<tr><td colspan=7><ce><upper><center>" + monthnames[thismonth] + " " + thisyear + "</center></upper></ce></td></tr>"); document.write("<tr>"); document.write("<td align=center><strong><ce>S</ce></strong></td>"); document.write("<td align=center><strong><ce>M</ce></strong></td>"); document.write("<td align=center><strong><ce>T</ce></strong></td>"); document.write("<td align=center><strong><ce>W</ce></strong></td>"); document.write("<td align=center><strong><ce>T</ce></strong></td>"); document.write("<td align=center><strong><ce>F</ce></strong></td>"); document.write("<td align=center><strong><ce>S</ce></strong></td>"); document.write("</tr>"); document.write("<tr>"); for (s=0;s<startspaces;s++) { document.write("<td align=center>-</td>"); } count=1; while (count <= monthdays[thismonth]) { for (b = startspaces;b<7;b++) { linktrue=false; document.write("<td align=center>"); for (c=0;c<linkdays.length;c++) { if (linkdays[c] != null) { if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) { document.write("<a href=\"" + linkdays[c][2] + "\">"); linktrue=true; } } } if (count==thisdate) { document.write("<B>"); } if (count <= monthdays[thismonth]) { document.write(count); } else { document.write("-"); } if (count==thisdate) { document.write("</B>"); } if (linktrue) document.write("</a>"); document.write("</td>"); count++; } document.write("</tr>"); document.write("<tr>"); startspaces=0; } document.write("</table>"); document.write("</FONT>"); // End --> </SCRIPT></center>

Inner Html

what is inner html? it looks like this:

want to see some text?

get the code:

hello there