HTML Cookbook
Hyper Text Markup Language
Basic Structure
<HTML>
<HEAD>
<TITLE>
The title of the page
</TITLE>
</HEAD>
<BODY bgColor=Color>
The page itself
</BODY>
</HTML>
|
Example of Header
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0063)https://www.marliere.org/sylvain/computers/html/ -->
<HTML><HEAD><TITLE>HTML Cookbook</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv="content-type">
<META content="Sylvain - sylvmarl _chez_ hotmail.com" name=Author>
<META content="HTML Cookbook - Everything about HTML on a single page" name=Description>
<META content="html,webpage,website,learning,programmation,tutorial" name=keywords>
<META content="15 days" name=Revisit-after>
<META http-equiv="expires" content="Wed, 9 Jun 1999 14:30:00 GMT"> (or http-equiv="0")
<META content=index,follow name=Robots>
<SCRIPT language=JavaScript src="directory or "file.js" containing JavaScripts"></SCRIPT>
<STYLE type=text/css>.barrev {BACKGROUND: url(http://URL of the picture/bkgrd-col.jpg) repeat-y}</STYLE>
<LINK href="URL for Cascade Sheet Style/styles.css" rel=stylesheet type=text/css>
<META content="MSHTML 5.00.2314.1000" name=GENERATOR></HEAD>
|
Basic Page Setup
|
Default Font :
|
<BASEFONT color=Color face=Font size=Size> (at the beginning of BODY)
|
|
Centering :
|
<CENTER> Text </CENTER>
|
|
Increasing the size :
|
<BIG> Text </BIG>
|
|
Decreasing the size :
|
<SMALL> Text </SMALL>
|
|
Choice of the size :
|
<FONT size=Size> Text </FONT> (Size = 1 to 7)
|
|
Bold Text :
|
<B> Text </B>
|
|
Italic Text :
|
<I> Text </I>
|
|
Underlined Text :
|
<U> Text </U>
|
|
Jump to next line :
|
<BR>
|
|
Horizontal Rule :
|
<HR noShade size=Size align=algt width=x> (x=100 or "20%")
|
|
Title :
|
<Hx> Text </Hx> (x = 1 to 6)
|
|
New Paragraph :
|
<P align=x> Text </P> (x = left, right, center or justify)
|
|
Comments :
|
<!-- Text -->
|
Links
|
Create a mark :
|
<a name="Mark"></a>
|
|
Link towards a page / mark :
|
<A href="URL_Page#Mark" target=Target> Text </A> (Target = _blank, _self, _parent, _top, frame_name)
|
|
Link towards an email :
|
<A href="mailto:EMail1?subject=Subject&body=Text&cc=Email2&bcc=Email3"> Text </A>
|
|
Font properties of the link :
|
<STYLE type="text/css"> a:link { color:#FFFF00 } a:visited { color:#FFDD00; font-weight:bold } a:active { color:#FFFF00; font-style:italic }</STYLE>
|
Pictures
|
Insert a picture :
|
<IMG SRC="URL_Picture" HEIGHT=x WIDTH=y ALIGN=algt BORDER="" HSPACE="" VSPACE=""> (algt=left, right, absbottom, absmiddle, baseline, bottom, texttop)
|
|
Background Picture :
|
<BODY background="URL_Picture" bgColor=Color>
|
Sounds
|
Insert a background sound :
|
<BGSOUND SRC="URL_Sound" LOOP="1|2|...|infinite">
(into <HEAD>, Formats : MID|WAV|AIF|AIFF|AIFC|AU|SND)
|
Lists
|
Unsorted list :
|
<UL type=Type><LI>Item1</LI> <LI>Item2</LI></UL> (with Type=disk, circle or square)
|
|
Sorted list :
|
<OL type=Type start=Start><LI>Item1</LI> <LI>Item2</LI></OL> (with Type=1, A, a, I, or i)
|
|
Definition list :
|
<DL><DT>TermA<DD>DefinitionA1 <DD>DefinitionA2<DT>TermB<DD><DefinitionB1</DL>
|
Tables
|
Define a table :
|
<TABLE border=x cellspacing=y cellpadding=z width=w height=h bgcolor=c borderColorDark=cd borderColorLight=cl> <TR><TH>Title A</TH><TH>Title B</TH></TR> <TR><TD>Data A1</TD> <TD>Data B1</TD></TR> </TABLE>
|
|
Define cells :
|
Into TR, TH, TD : ALIGN="left|center|right" VALIGN="top|middle|bottom" WIDTH="x" HEIGHT="y" ROWSPAN="n" COLSPAN="n" Into TABLE : <COLGROUP width="x" span="n">
|
|
Caption :
|
<CAPTION align="left|center|right" valign="top|middle|bottom"> Text </CAPTION>
|
Formularies
|
Define a formulary :
|
<FORM action="mailto:Email?subject=Subject" method="post|get" enctype="text/plain" name="Name" onSubmit="Script">
|
|
1 line Zone :
|
<INPUT name=Name size=DisplayedSize maxlength=Max type="text|int|float|date|url|password" value=Value min=Min max=Max>
|
|
Multilines Zone :
|
<TEXTAREA name=Name cols=y rows=x> Text </TEXTAREA>
|
|
Simple Buttons :
|
<BUTTON type="submit|reset|button" name=Name value=Value onFocus="Script" onBlur="Script" onClick="Script">Text</BUTTON>
|
|
Radio Buttons :
|
<INPUT type="Radio" name=Name value=Value CHECKED>
|
|
Checkbox Buttons :
|
<INPUT type="Checkbox" name=Name value=Value>
|
|
Choice List :
|
<SELECT name=Name size=Size multiple> <OPTION selected> Item </OPTION> </SELECT>
|
|
Command Buttons :
|
<INPUT type="SUBMIT|RESET|FILE" value=Name>
|
|
Formulary Zone :
|
<FIELDSET><LEGEND align=algt> Text </LEGEND></FIELDSET>
|
Frames
|
Frame Division :
|
<FRAMESET rows|cols="x,y%,z%,...,*">
|
|
Frame Error :
|
<NOFRAME> Your Explorer doesn't handle frames </NOFRAME>
|
|
Frame Definition :
|
<FRAME scr="URL" name=Name noresize scrolling="yes|no|auto" frameborder="yes|no" marginwidth=x marginheight=y>
|
|
HTML Include Frame :
|
<IFRAME scr="file.htm" height=h width=w scrolling="yes|no|auto" frameborder="yes|no" marginwidth=x marginheight=y>
|
Dynamic HTML
|
OnClick :
|
<TD onclick="alert('Clicked !')">Click on this cell</TD>
|
OnMouseOut/
OnMouseOver :
|
<TD onmouseout="this.innerHTML='<A href=>Click !</A>'"
onmouseover="this.innerHTML='Missed !'"><A href=>Click !</A></TD>
|
|
OnFocus/OnBlur :
|
<TD><INPUT onblur="if(this.value!='') alert(this.value+'written')" onfocus="this.value=''" value="Fill here"></INPUT> <INPUT type=submit value=OK></INPUT></TD>
|
|
OnChange :
|
<TD><SELECT onchange="if(this.selectedIndex>0) alert('You got '+this.selectedIndex)"> <OPTION selected>Choose</OPTION><OPTION>Choice 1</OPTION></SELECT></TD>
|
|
OnBlur :
|
<BODY onBlur=this.focus()>
|
|
OnLoad/OnUnLoad :
|
<BODY onLoad="javascript:alert('Hi !')" onUnLoad="javascript:alert('Bye !')">
|
46136 visitors
850589 robots
since 01/01/2003
Page generated
in 4.21 seconds
💗 2003-2024 by S. MARLIERE. Copying is an act of love. Love is not subject to law. Please copy and share.