top



Basic Document

 -


Copy all this (blue) text to notepad and save it as 'yourtext.htm'.
It will produce a basic webpage containing most of the most common HTML tags.
Copy and paste and re-arrange this source text to suit your needs.

<!--SOME TAGS TO COPY---
LINK <p><a href="XYZ.htm" target="_blank" title="Go here">link text or img</a></p>
IMAGE <img src="xyz.jpg" width="100" height="150" alt="text" border="1">
SPAN STYLE <span style="background:#fffff"></span>
ABSOLUTE style="position:absolute;top:0px;left:0px;"
---MORE BELOW-->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content=" ">
<meta name="description" content=" ">

<link rel="stylesheet" type="text/css" href="MYstyle.css">
<script language="JavaScript1.2" src="MY.js" type="text/javascript"></script>

<style type="text/css">
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:#ccffcc;background:green;}
a:active {color:blue;}
a {text-decoration:none}
p {display:inline;color:black;font-family:arial;font-weight:normal;font-size:12px;}
body {background-color:rgb(222,237,244)}
</style>

<title>your title bar</title><!--code comment-->
</head>
<body>
<center>
<table cellspacing="0" style="width:500px;height:;border:1px solid black">
<tr>
<td style="background-color:rgb(255,255,220);padding:10px" valign="top">
<p>
Girl: When we get married, I want to share all your worries, troubles and lighten your burden. <br> Boy: It's very kind of you, darling, but I don't have any worries or troubles. <br> Girl: Well that's because we aren't married yet. <br> <br>
</p>
</td>
</tr>
</table>
</center>
</body>
</html>

<!--
I-FRAME
<iframe name="myframe" src="xyz.jpg" marginwidth="0px" marginheight="50px" frameborder="yes" hspace="50" vspace="0" style="overflow:visible;width:px;height:300px;"></iframe>

POPUP
<body onunload="win1.close()">
<p><a href="#"
onclick="win1=window.open('your.htm','win1','
toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,
width=350,height=350,left=250,top=140');win1.focus(); return false">Link
Text</a></p>

WINDOWS MEDIA PLAYER
<object id="video" width="323" height="306"
style="position:absolute; left:50;top:50;"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject">
<param name="url" value="XXX">
<param name="SendPlayStateChangeEvents" value="True">
<param name="AutoStart" value="True">
<param name="uiMode" value="full">
<param name="PlayCount"value="1"><param name="BufferingTime" value="5">
<paramname="AnimationAtStart" value="true">
<param name="Volume" value="-200">
</object>
-->


layout



BACKGROUND

Color


<body bgcolor="#cccc0">


Image


<body background="xyz.gif" alt="abc">


Fixed image


<bg properties="fixed">



GENERAL LAYOUT

Line breaks


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

Paragraph


<p></p>

Align


<center></center>
<p align="right">

Horizontal line


<hr width=60% size=3 noshade></hr>
<hr width=400 size=5></hr>


Blockquote


<blockquote>..text..</blockquote>


The 'float' style


<img style="float:right" hspace="6" vspace="6" src="xyz.jpg" >


Clear 'float'


<br clear="all">


Text area


<textarea
style="width:300px;height:190px;border:1px solid black">
blah-blah-blah-blah-</textarea>




text



TEXT AND FONT

Header


 <h2></h>

Bold


<b></b>

Italic


<i></i>

Underline


<u></u>

Typeface, size and color


<font face="arial" size=4 color="#ff0000">text</font>


Other font attributes


<strong></strong>
<big></big>
<small></small>


Subscript


<sub></sub>


Superscript


<sup></sup>


Special characters




LINKS

Basic


<a href="xyz.htm" title="Go here!">your text</a>


Open in new window


<a href="xyz.htm" target="_blank" title="Go here">link text or img</a>


Open at bookmark


<a href="xyz.htm#aaa" title="Go here">link text or img</a>


Bookmark


<a name="aaa">text</a>


Mail link


Send me<a href="mailto:jensimmo@optushome.com.au">Email</a>


Link to (up one level)


<a href="

../

foldername/xyz.htm" title="Go here!">your text</a>




img



IMAGE

Basic


<img src="xyz.jpg" alt="xyz">


With attributes


<img src="xyz.jpg" width="100" height="150" alt="text" border="1">


Align attributes


align="top"
align="middle"
align="bottom"


The 'float' style


<img style="float:right" hspace="6" vspace="6" src="xyz.jpg" >


Clear 'float'


<br clear="all">




LISTS

Ordered and Unordered


Code                        and            example -

<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<ol>
<li>6am - 9am</li>
<li>9am - 12pm</li>
<li>12n - 3pm</li>
<li>3pm - 6pm</li>
</ol>
<li>Thursday</li>
<li>Friday</li>
</ul>

  • Monday
  • Tuesday
  • Wednesday
    1. 6am - 9am
    2. 9am - 12pm
    3. 12n - 3pm
    4. 3pm - 6pm
  • Thursday
  • Friday

Unordered list tags attributes


<ul type="disc">  <ul type="circle">  <ul type="square">


Ordered list tags attributes


<ol type="A">  <ol type="a">  <ol type="I">  <ol type="i">





table



BASIC TABLE

Example


<table style="border:1px solid black;width:60%" cellspacing="0">
<caption style="font-size:....">My Caption</caption>
<tr>
<th style="padding:3;border-right:1px solid black;border-bottom:1px solid black"><p>Heading</p></th>
<th style="padding:3;border-bottom:1px solid black"><p>Another Heading</p></th>
</tr><tr>
<td style="padding:3;border-right:1px solid black;border-bottom:1px solid black"><p>row 1, cell 1</p></td>
<td style="padding:3;border-bottom:1px solid black"><p>row 1, cell 2</p></td>
</tr><tr>
<td style="padding:3;border-right:1px solid black"><p>row 2, cell 1</p></td>
<td>  </td>
</tr> </table>


The code above makes this -


My Caption

Heading

Another Heading

row 1, cell 1

row 1, cell 2

row 2, cell 1

Span


<td colspan="2">
<td rowspan="4">


Table data align

align="left"
align="center"
align="right"

valign="top"
valign="middle"
valign="bottom"




frame



FRAMES

Example


<html>
<head>
<title></title>
</head>
<frameset cols="25%,75%" border="0"
framespacing="0" frameborder="0">
<frame src="page1.htm" name="f1">
<frameset rows="33%,* ">
<frame src="page2.htm" name="f2"
 scrolling="no">
<frame src="page3.htm" name="f3">
</frameset>
</frameset>
</html>

frames

LOAD page xyz to f2 from any link


<a href="xyz.htm" target="f2">your text</a>


Escape frames


<a href="xyz" target="_top">your text</a>


Other 'frame src' attributes


noresize  marginwidth="2"  marginheight="2"


I-frame


<iframe name="myframe" src="xyz.jpg"
 scrolling="yes" marginwidth="0"
 marginheight="50" frameborder="1"
 vspace="50" hspace="0" style="overflow:visible;
 width:75%;height:100%;"></iframe>


Changing 2 frames


<head>
<script language="javascript">
<!----hide
function change2()
{
parent.frame name.location="page3.htm";
parent.frame name.location="page4.htm";
}
//------>
</script>
</head>
<body>
<a href="javascript:change2()">TEXT</a>
</body>





css



Some basic C.S.S

External stylesheet


<link rel="stylesheet" type="text/css" href="mystyle.css">


Syntax -

The CSS syntax is made up of three parts: a selector, a property and a value:


selector {property: value}

body {color: black}


Note: If  the value is multiple words, put quotes around the value:


p {font-family: "sans serif"}


p {text-align:center;color:red}


All header elements will be displayed in green text color:


h1,h2,h3,h4,h5,h6 {color: green}


The class Selector


p.right {text-align: right}
p.center {text-align: center}
<p class="right">


Note: To apply more than one class per given element, the syntax is:


<p class="center bold">This is a paragraph.</p>


The paragraph above will be styled by the class "center" AND the class "bold".


 In the example below, all HTML elements with class="center" will be center-aligned:


.center {text-align: center}


 Do NOT start a class name with a number! It will not work in Mozilla/Firefox.


The style rule below will match all input elements that has a type attribute with a value of "text":


input[type="text"] {background-color: blue}


The id Selector


The style rule below will match the element that has an id attribute with a value of "green":


#green {color: green}


The style rule below will match the p element that has an id with a value of "para1":


p#para1 {text-align: center;color: red}


 Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.


CSS Comments


/* This is a comment */




ascii



ASCII Entities with new Entity Names


Description--Entity Name--Entity Number


" quotation mark &quot; &#34;


' apostrophe  &apos; (does not work in IE) &#39;


& ampersand &amp; &#38;


< less-than &lt; &#60;


> greater-than &gt; &#62;


 



ISO 8859-1 Symbol Entities


Description--Entity Name--Entity Number


  non-breaking space &nbsp; &#160;


¡ inverted exclamation mark &iexcl; &#161;


¤ currency &curren; &#164;


¢ cent &cent; &#162;


£ pound &pound; &#163;


¥ yen &yen; &#165;


¦ broken vertical bar &brvbar; &#166;


§ section &sect; &#167;


¨ spacing diaeresis &uml; &#168;


© copyright &copy; &#169;


ª feminine ordinal indicator &ordf; &#170;


« angle quotation mark (left) &laquo; &#171;


¬ negation &not; &#172;


­ soft hyphen &shy; &#173;


® registered trademark &reg; &#174;


™ trademark &trade; &#8482;


¯ spacing macron &macr; &#175;


° degree &deg; &#176;


± plus-or-minus  &plusmn; &#177;


² superscript 2 &sup2; &#178;


³ superscript 3 &sup3; &#179;


´ spacing acute &acute; &#180;


µ micro &micro; &#181;


¶ paragraph &para; &#182;


· middle dot &middot; &#183;


¸ spacing cedilla &cedil; &#184;


¹ superscript 1 &sup1; &#185;


º masculine ordinal indicator &ordm; &#186;


» quotation mark (right) &raquo; &#187;


¼ fraction 1/4 &frac14; &#188;


½ fraction 1/2 &frac12; &#189;


¾ fraction 3/4 &frac34; &#190;


¿ inverted question mark &iquest; &#191;


× multiplication &times; &#215;


÷ division &divide; &#247;


 


ISO 8859-1 Character Entities


Description--Entity Name--Entity Number


À capital a, grave accent &Agrave; &#192;


Á capital a, acute accent &Aacute; &#193;


 capital a, circumflex accent &Acirc; &#194;


à capital a, tilde &Atilde; &#195;


Ä capital a, umlaut mark &Auml; &#196;


Å capital a, ring &Aring; &#197;


Æ capital ae &AElig; &#198;


Ç capital c, cedilla &Ccedil; &#199;


È capital e, grave accent &Egrave; &#200;


É capital e, acute accent &Eacute; &#201;


Ê capital e, circumflex accent &Ecirc; &#202;


Ë capital e, umlaut mark &Euml; &#203;


Ì capital i, grave accent &Igrave; &#204;


Í capital i, acute accent &Iacute; &#205;


Î capital i, circumflex accent &Icirc; &#206;


Ï capital i, umlaut mark &Iuml; &#207;


Ð capital eth, Icelandic &ETH; &#208;


Ñ capital n, tilde &Ntilde; &#209;


Ò capital o, grave accent &Ograve; &#210;


Ó capital o, acute accent &Oacute; &#211;


Ô capital o, circumflex accent &Ocirc; &#212;


Õ capital o, tilde &Otilde; &#213;


Ö capital o, umlaut mark &Ouml; &#214;


Ø capital o, slash &Oslash; &#216;


Ù capital u, grave accent &Ugrave; &#217;


Ú capital u, acute accent &Uacute; &#218;


Û capital u, circumflex accent &Ucirc; &#219;


Ü capital u, umlaut mark &Uuml; &#220;


Ý capital y, acute accent &Yacute; &#221;


Þ capital THORN, Icelandic &THORN; &#222;


ß small sharp s, German &szlig; &#223;


à small a, grave accent &agrave; &#224;


á small a, acute accent &aacute; &#225;


â small a, circumflex accent &acirc; &#226;


ã small a, tilde &atilde; &#227;


ä small a, umlaut mark &auml; &#228;


å small a, ring &aring; &#229;


æ small ae &aelig; &#230;


ç small c, cedilla &ccedil; &#231;


è small e, grave accent &egrave; &#232;


é small e, acute accent &eacute; &#233;


ê small e, circumflex accent &ecirc; &#234;


ë small e, umlaut mark &euml; &#235;


ì small i, grave accent &igrave; &#236;


í small i, acute accent &iacute; &#237;


î small i, circumflex accent &icirc; &#238;


ï small i, umlaut mark &iuml; &#239;


ð small eth, Icelandic &eth; &#240;


ñ small n, tilde &ntilde; &#241;


ò small o, grave accent &ograve; &#242;


ó small o, acute accent &oacute; &#243;


ô small o, circumflex accent &ocirc; &#244;


õ small o, tilde &otilde; &#245;


ö small o, umlaut mark &ouml; &#246;


ø small o, slash &oslash; &#248;


ù small u, grave accent &ugrave; &#249;


ú small u, acute accent &uacute; &#250;


û small u, circumflex accent &ucirc; &#251;


ü small u, umlaut mark &uuml; &#252;


ý small y, acute accent &yacute; &#253;


þ small thorn, Icelandic &thorn; &#254;


ÿ small y, umlaut mark &yuml; &#255;



Some Other Entities supported by HTML


Description--Entity Name--Entity Number


Πcapital ligature OE &OElig; &#338;


œ small ligature oe &oelig; &#339;


Š capital S with caron &Scaron; &#352;


š small S with caron &scaron; &#353;


Ÿ capital Y with diaeres &Yuml; &#376;


ˆ modifier letter circumflex accent &circ; &#710;


˜ small tilde &tilde; &#732;


  thin space &thinsp; &#8201;


‌ zero width non-joiner &zwnj; &#8204;


‍ zero width joiner &zwj; &#8205;


‎ left-to-right mark &lrm; &#8206;


‏ right-to-left mark &rlm; &#8207;


– en dash &ndash; &#8211;


— em dash &mdash; &#8212;


‘ left single quotation mark &lsquo; &#8216;


’ right single quotation mark &rsquo; &#8217;


‚ single low-9 quotation mark &sbquo; &#8218;


“ left double quotation mark &ldquo; &#8220;


” right double quotation mark &rdquo; &#8221;


„ double low-9 quotation mark &bdquo; &#8222;


† dagger &dagger; &#8224;


‡ double dagger &Dagger; &#8225;


… horizontal ellipsis &hellip; &#8230;


‰ per mille  &permil; &#8240;


‹ single left-pointing angle quotation &lsaquo; &#8249;


› single right-pointing angle quotation &rsaquo; &#8250;


€ euro &euro; &#8364;


Top

Layout

Text-Link

Img-List

Table

Frame

CSS

Char.