| 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)
(Single line user input)
(Multi line user input)
(Menu selection)
(Radio button selection)
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
On this page: HTML | META tags | CSS | Special characters Net lab main page | AUSTRIA INFORMATION SWITCHBOARD |