Page creation templates   Net lab
   



On this page:  HTML  |  META tags  |  CSS  |  Special characters

Mark and copy code on page with mouse and paste it in a new editor document.
HTML is not case sensitive.

There is a ready to use page for people new to HTML who don't know how to arrange these page elements.
Click here to see the page and explanation. After you have done your page there are several providers
who offer a place for your page free of charge.


Fast page creation template:


<HTML>
<HEAD>
<TITLE>Page title</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" ALINK="#FF0000" VLINK="#000099">
<BLOCKQUOTE>

<H2>Headline</H2>

<FONT SIZE="3" FACE="times, georgia">Text</FONT>

<IMG SRC="image.gif" ALT="Image description" BORDER="0">

<A HREF="http://...">Link</A>

<A HREF="MAILTO:your_email_@_address">E-mail</a>

<BR> <P>

</BLOCKQUOTE>
</BODY>
</HTML>




Table template:


<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
<TR>
<TD> </TD>
</TR>
</TABLE>




Definition list:


<DL>
<DT>Currencies</DT>
<DD>US$</DD>
<DD>Euro</DD>
<DD>Yen</DD>
</DL>




Form template
There are different input elements to choose from.



(E-Mail Form)

<FORM ACTION="MAILTO:youremail@address" METHOD="POST" ENCTYPE="text/plain">

</FORM>


(CGI Form)

<FORM ACTION="../cgi-bin/prog.pl" METHOD="GET">

</FORM>


(Single line user input)

<INPUT NAME="line" SIZE="50" MAXLENGTH="50">


(Multi line user input)

<TEXTAREA NAME="textblock" ROWS="6" COLS="50" WRAP="PHYSICAL"></TEXTAREA>


(Menu selection)

Select to choose an entry:
<P>
<SELECT NAME="Pref" SIZE="3">
<OPTION> US$
<OPTION> Euro
<OPTION> Yen
</SELECT>


(Radio button selection)

Click on button to choose:
<P>
<INPUT TYPE=RADIO NAME="ch1" VALUE="choice1"> US$
<BR>
<INPUT TYPE=RADIO NAME="ch2" VALUE="choice2"> Euro
<BR>
<INPUT TYPE=RADIO NAME="ch3" VALUE="choice3"> Yen
<BR>


(Send and Reset buttons)

<INPUT TYPE=SUBMIT VALUE="Send">
<INPUT TYPE=RESET VALUE="Clear">




Frames
Two columns frame set: First frame is one quarter, second frame three quarter of screen wide.



<HTML>
<HEAD><TITLE>Page title</TITLE></HEAD>

<FRAMESET COLS="25%,75%" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME NAME="frame1" SRC="http://... " MARGINWIDTH="5" MARGINHEIGHT="5">
<FRAME NAME="frame2" SRC="http://... " MARGINWIDTH="5" MARGINHEIGHT="5">
</FRAMESET>

<NOFRAMES>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" ALINK="#FF0000" VLINK="#000080">
<BLOCKQUOTE>
<A HREF="http://... ">Click for non frame version.</A>
</BLOCKQUOTE>
</NOFRAMES>
</HTML>





Meta tags
Meta tags are placed between the <HEAD>   </HEAD> tags.



Page content in short for search index programs:
<META NAME="description" CONTENT="Net lab web page templates">
<META NAME="keywords" CONTENT="templates, html, meta, css, tags">

Exclusion from search index programs:
<META NAME="robots" CONTENT="none, noindex, noarchive, nofollow">

Refresh or redirection:
<META HTTP-EQUIV="Refresh" CONTENT="15; URL=http://www.examplename.int/loadthis.htm">

Page is not stored in cache:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Expiration from cache:
<META HTTP-EQUIV="Expires" CONTENT="Wed, 31 Dec 2004 23:59:59 GMT">

Display standards:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=ISO-8859-1">





CSS Cascading Style Sheets

In this section: CSS definitions  in a separate file  |  between page head tags  |  within the page body
/* (A selection of other possible values) */     /* Remarks */


It doesn't matter if you write CSS in lower, UPPER or Mixed Case.


Links to style sheets in separate files are placed between the <HEAD>  </HEAD> tags:

<LINK REL="stylesheet" HREF="yourdef.css" TYPE="text/css">


Style sheet definitions placed between the <HEAD>  </HEAD> tags:

<STYLE TYPE="text/css">
<!--

BODY
{
background-color: #FFFFFF;     /*   (transparent)   */
background-image: url(http://www.examplename.int/yourimg.gif);
background-repeat: repeat-y;     /*   (repeat, repeat-x, no-repeat)   */
background-attachment: fixed;     /*   (scroll)   */
background-position: top center;     /*   (in combination or alone: top, center, bottom, left, right)   */

/*All in one body:
{background: #FFFFFF url(http://www.examplename.int/yourimg.gif) repeat-y fixed top center}

*/

font-family: Times,"Times New Roman",Garamond,Georgia,serif;
font-size: 18px;
font-style: italic;     /*   (normal)   */
font-weight: bold;     /*   (normal or 100, 200 ... 900)   */
font-variant: normal;     /*   (small-caps)   */
line-height: 120%;

 /* All in one font:
  {font: bold italic 18px/120% Times,"Times New Roman",Garamond,Georgia,serif}
  - but for this short hand heed the sequence: style, size, family.

*/

margin-top: 30px;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 50px;
border-color: white;
border-style: solid;     /*   (dashed, dotted, double, groove, inset, none, outset, ridge)   */
border-top-width: 4px;
border-left-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
}

.a1 {color: #669966; font-weight: bold;}
.a2
{
color: #993366;
font-weight: bold;
display: inline;     /*   (block, list-item, none)   */
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 30px;
}
/* Use these in the page body with something like <DIV CLASS="a1">Common</DIV> */

#z1 {color: #669966; font-size: 36px}
/* Use each #ID only once in the page body with something like <DIV ID="z1">Unique</DIV> */

A:link
{
text-decoration: none;
color: #990000;
}

A:hover
{
text-decoration: underline;
color: #CCCC00;
}

A:active
{
text-decoration: none;
color: #CC0000;
}

A:visited
{
text-decoration: none;
color: #660000;
}

IMG
{
float: none;     /*   (left, right)   */
vertical-align: middle;     /*   (top, text-top, text-bottom, bottom, super, baseline, sub)   */
width: 100%;     /*   (auto)   */
height: 200px;     /*   (auto)   */
}

P
{
background:white;
text-align: justify;     /*   (left, center, right)   */
text-indent: 30px;
text-decoration: normal;     /*   (blink, line-through, overline, underline)   */
word-spacing: normal;
letter-spacing: normal;
white-space: normal;     /*   (nowrap, pre)   */
font-size: 14px;
font-family: arial, helvetica;
color:black;
margin: 10 20% 10 20%;     /*   values for top, right, bottom, left margin   */
padding: 5;
border-width: 0;
clear: none;     /*   (both, left, right)   */
}

H1, H2, H3, H4, H5, H6
{
color: #996666;
border: 10 dashed #999900;
text-transform: none;     /*   (capitalize, lowercase, uppercase)   */
}

UL
{
list-style-type: square;     /*   (circle, decimal, disc, lower-alpha, lower-roman, none, upper-roman, upper-alpha)   */
list-style-image: url(http://www.examplename.int/listitem.gif);
list-style-position: outside; /*   (inside)   */
}

HR
{
color: black;
}
//-->
</STYLE>


Style sheets within page text:

<p style="font-size: 14px; font-family: times,serif; padding:30px;">a matter of taste</p>






HTML Special Characters

&aacute;
&Aacute;
&acirc;
&Acirc;
&aelig;
&AElig;
&agrave;
&Agrave;
&amp;
&aring;
&Aring;
&atilde;
&Atilde;
&auml;
&Auml;
&brvbar;
&ccedil;
&Ccedil;
&cedil;
&cent;
&copy;
&deg;
&eacute;
&Eacute;
&ecirc;
&Ecirc;
&egrave;
&Egrave;
&eth;
&ETH;
&euml;
&Euml;
&euro;
&frac12;
&frac14;
&frac34;
&gt;
&iacute;
&Iacute;
&icirc;
&Icirc;
&iexcl;
&igrave;
&Igrave;
&iquest;
&iuml;
&Iuml;
&laquo;
&lt;
&macr;
&micro;
&middot;
&nbsp;
&not;
&ntilde;
&Ntilde;
&oacute;
&Oacute;
&ocirc;
&Ocirc;
&ograve;
&Ograve;
&ordf;
&ordm;
&oslash;
&Oslash;
&otilde;
&Otilde;
&ouml;
&Ouml;
&para;
&plusmn;
&pound;
&quot;
&raquo;
&reg;
&sect;
&shy;
&sup1;
&sup2;
&sup3;
&szlig;
&thorn;
&THORN;
&times;
&uacute;
&Uacute;
&ucirc;
&Ucirc;
&ugrave;
&Ugrave;
&uuml;
&Uuml;
&yacute;
&Yacute;
&yen;
&yuml;
&#33;
&#34;
&#35;
&#36;
&#37;
&#38;
&#39;
&#40;
&#41;
&#42;
&#43;
&#44;
&#45;
&#46;
&#47;
&#48;
&#49;
&#50;
&#51;
&#52;
&#53;
&#54;
&#55;
&#56;
&#57;
&#58;
&#59;
&#60;
&#61;
&#62;
&#63;
&#64;
&#65;
&#66;
&#67;
&#68;
&#69;
&#70;
&#71;
&#72;
&#73;
&#74;
&#75;
&#76;
&#77;
&#78;
&#79;
&#80;
&#81;
&#82;
&#83;
&#84;
&#85;
&#86;
&#87;
&#88;
&#89;
&#90;
&#91;
&#92;
&#93;
&#94;
&#95;
&#96;
&#97;
&#98;
&#99;
&#100;
&#101;
&#102;
&#103;
&#104;
&#105;
&#106;
&#107;
&#108;
&#109;
&#110;
&#111;
&#112;
&#113;
&#114;
&#115;
&#116;
&#117;
&#118;
&#119;
&#120;
&#121;
&#122;
&#123;
&#124;
&#125;
&#126;
&#131;
&#133;
&#136;
&#138;
&#139;
&#145;
&#146;
&#147;
&#148;
&#149;
&#150;
&#151;
&#153;
&#155;
&#159;
&#160;
&#161;
&#162;
&#163;
&#164;
&#165;
&#166;
&#167;
&#168;
&#169;
&#170;
&#171;
&#172;
&#173;
&#174;
&#175;
&#176;
&#177;
&#178;
&#179;
&#180;
&#181;
&#182;
&#183;
&#184;
&#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#191;
&#192;
&#193;
&#194;
&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;
&#208;
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#215;
&#216;
&#217;
&#218;
&#219;
&#220;
&#221;
&#222;
&#223;
&#224;
&#225;
&#226;
&#227;
&#228;
&#229;
&#230;
&#231;
&#232;
&#233;
&#234;
&#235;
&#236;
&#237;
&#238;
&#239;
&#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#247;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;
á
Á
â
Â
æ
Æ
à
À
&
å
Å
ã
Ã
ä
Ä
¦
ç
Ç
¸
¢
©
°
é
É
ê
Ê
è
È
ð
Ð
ë
Ë

½
¼
¾
>
í
Í
î
Î
¡
ì
Ì
¿
ï
Ï
«
<
¯
µ
·
 
¬
ñ
Ñ
ó
Ó
ô
Ô
ò
Ò
ª
º
ø
Ø
õ
Õ
ö
Ö

±
£
"
»
®
§
­
¹
²
³
ß
þ
Þ
×
ú
Ú
û
Û
ù
Ù
ü
Ü
ý
Ý
¥
ÿ
!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
{
|
}
~
ƒ

ˆ
Š










Ÿ
 
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯
°
±
²
³
´
µ

·
¸
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ






On this page:  HTML  |  META tags  |  CSS  |  Special characters
Net lab main page    |    AUSTRIA INFORMATION SWITCHBOARD