Purple Glitter
PURPLE GLITTER geek grrl freak grrl fun

Web Design Tools

HTML Reference

Tags

Cursors, Body, IFrame, Tables, ><, Bold/Italic/Small/etc, Span, Preformatted Text, Blockquote, Comments, Status Bar, Marquee, Horizontal Rule, Links, Images, Image Map, Lists, Special Characters, Forms

Cursors



top

Body

<body background ="yourimage.gif" bgproperties="fixed">
<body onload="if (self != top) top.location = self.location">
<body bgcolor="#ffffff" topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0>
<body background="starrynight.jpg" bgcolor="#000000" text="#555555" link="#ccccff" vlink="#9999ff" alink="#ccccff">
<body onMouseOver="window.status='Your text goes here.';return true">

top

IFrame

<iframe src="http://www.yourdomain.com/yourpage.php " width="590" height="350" hspace="1" vspace="1"></iframe>


top

Tables

<table border="0" cellpadding="2" align="center" width="50%"><tr><td background="yourimage.gif"></td></tr></table>
<table border="2" cellpadding="2" cellspacing="2" width="100%" bgcolor="#333333" bordercolor="#666666">
<tr>
<td width="50%" bgcolor="#cccccc">column 1</td>
<td width="50%">column2</td>
</tr>
</table>


top

HTML Decimal Character Codes and Values

  • " &quot;
  • & &amp;
  • < &lt;
  • > &gt;
  • © &copy;
  • ® &reg
  •   &nbsp;
  • &#153;
  • % &#137;
  • @ &#64;
  • $ &#36;
  • ö &ouml;
  • ñ &ntilde;
  • è &egrave;


top

Bold, Italic, Underline, Typewriter, Strong, Small, Big

  • Bold Text: <b>
  • Italic Text: <i>
  • Typewriter Text: <tt>
  • Strong Text: <strong>
  • Small Text: <small>


top

Span

<span style="background-color:red">Your text goes here.</span>


top

Preformatted Text

<pre>
The quick brown fox jumped over the lazy dog.
</pre>


top

Blockquote

<blockquote>
vigorous writing is concise. a sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.
--william strunk, jr., 1918
</blockquote>


top

Comments

<!-- your comments here -->


top

Status Bar

<body bgcolor="#002814" text="white" link="yellow" vlink="green" onload="window.status='i am not going to let you see what is in the status bar!'">


top

Marquee

<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">example marquee</marquee>


top

Horizontal Rule

<hr size=4 width="50%" color="#666666">


top

Links

Relative
<a href="../hello.php ">

Title, New Window
<a href="http://www.yourdomain.com/yourpage.php " title="hello" target="_blank">

Mailto with Subject & Body
<a href="mailto:soandso@yourdomain.com?subject=from yourdomain.com&amp;body=from yourdomain.com">mailto:soandso@yourdomain.com?subject=from yourdomain.com&amp;body=from yourdomain.com</a>

Within Document
<a name="hello">hello</a> <a href="#hello">go to hello</a>

Status Text
<a href="hello.php " onmouseover="window.status='hello there'; return true" onmouseout="window.status=";return true">hello there</a>

Highlight
<a href="http://www.yourdomain.com" style="background:yellow; color:black;">

Alert Box
<a href="" onmouseover="alert('your message');return true;"> place link text here</a>


top

Images

<img src="graphic.jpg" border="0" width="100" height="100" align="center" alt="this is my graphic...">

Make Lines with Images

<img src="http://www.yourdomain.com/yourimage.gif" width="200" height="2" border="0">
<img src="http://www.yourdomain.com/yourimage.gif" width="200" height="5" border="0">
<img src="http://www.yourdomain.com/yourimage.gif" width="2" height="200" border="0">
<img src="http://www.yourdomain.com/yourimage.gif" width="5" height="200" border="0">
<img border="0" align="left" src="yourimage.jpg"> your text image displayed on right:
<img border="0" align="right" src="yourimage.jpg"> your text


top

Image Map

<map name="hit7">
<area shape="rect" coords="478,299,549,322" href="http://www.yourdomain.com/yourpage.htm ">
<area shape="rect" coords="472,114,542,137" href="page1.htm" title="title1">
<area shape="rect" coords="475,271,546,294" href="page2.htm" title="title2">
<area shape="rect" coords="473,242,544,265" href="page3.htm" title="title3">
<area shape="rect" coords="483,215,554,237" href="page4.htm" title="title4">
<area shape="rect" coords="472,191,543,214" href="page5.htm" title="title5">
<area shape="rect" coords="469,164,540,187" href="page6.htm" title="title6">
<area shape="rect" coords="472,135,544,158" href="page7.htm" title="title7">
<area shape="rect" coords="472,87,544,110" href="page8.htm" title="title8">
</map>
<img width=701 height=455 border=0 src="http://www.yourdomain.com/yourimage.gif" usemap="#hit7">


top

Lists

Unnumbered, Bulleted List
<ul>
<li> apples
<li> bananas
<li> grapefruit
</ul>


top

Numbered/Ordered List
<ol>
<li> oranges
<li> peaches
<li> grapes
</ol>


top

Definition List
<dl>
<dt> ncsa
<dd> ncsa, the national center for supercomputing
applications, is located on the campus of the
university of illinois at urbana-champaign.
<dt> cornell theory center
<dd> ctc is located on the campus of cornell
university in ithaca, new york.
</dl>


top

Nested List
<ul>
<li> a few new england states:
<ul>
<li> vermont
<li> new hampshire
<li> maine
</ul>
<li> two midwestern states:
<ul>
<li> michigan
<li> indiana
</ul>
</ul>


top

List Styles
<ul style="list-style-type: square">
<li style="list-style-type: circle">
<li style="list-style-type: disc">
<li style="list-style-type: decimal">
<li style="list-style-type: lower-alpha">
<li style="list-style-type: upper-alpha">
<li style="list-style-type: lower-roman">
<li style="list-style-type: upper-roman">
<li style="list-style-image: none">
<li style="list-style-image: url(gif/button3.gif)">
<li style="list-style: url(gif/button3.gif) inside;">


top

Special Characters

Name Code Signs
Dagger &dagger;
Double Dagger &Dagger;
Black spade suit &spades;
Black club suit &clubs;
Black heart suit &heart;
Black diamond suit &diams;
Leftward arrow &larr;
Upward arrow &uarr;
Rightward arrow &rarr;
Downward arrow &darr;
Left angle quote &laquo; «
Right angle quote &raquo; »
Cent sign &cent; ¢
General currency sign &curren; ¤
Yen sign &yen; ¥
Copyright &copy; ©
Section sign &sect; §
Paragraph sign &para;
Micro sign &micro; µ
Plus or minus &plusmn; ±

Forms

Email Button
<form><input type="button" value="email me" onclick="location.href='mailto:soandso@yourdomain.com">


top

Drop Down Menu


top

Preformatted Forms
<form><pre>
name: <input type="text">
email:<imput type="text">
</pre></form>


top

Customizing Forms
<input type="text" size="10" maxlength="30" value="your text">
<input type="text" style="color: #ffffff; background- color: #72a4d2;" size="10" maxlength="30">
<input type="hidden">
<input type="image">
<input type="password">
<input type="submit">
<input type="reset">


top

Using an Image for a SubmitButton
<input type=image name="submit" src="yourimage.gif" border="0">


top

Radios and Checkboxes Selected
<input type="radio" name="option1" checked>option 1
<input type="radio" name="option2">option 2
<input type="radio" name="option3">option 3
<input type="checkbox" name="selection1"> selection 1
<input type="checkbox" name="selection2"> selection 2
<input type="checkbox" name="selection3"> selection 3


top



- - - - -

Creative Writing

Author/Poet Fansites

Character Names

Haiku Creator

Haiku Generator

Haiku Writer

Magnetic Words

Name Genie

Never Ending Story

Poem Generator

Poem Generator (original)

Poem Maker

Random Text Generator

Title Generator

Word Generator From Words

Word Scramble

Writing Ideas

- - - - -

Fun

Free Backgrounds

- - - - -

Glitter Graphics & Layouts

- - - - -

Rebecca Guay Shrine

- - - - -

Secret Love Letter

- - - - -

Free Tarot Reading

- - - - -

Polls

- - - - -

Links

- - - - -

GeekGrrl