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&amp;body=Text&amp;cc=Email2&amp;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 !')">

 [Menu]
Last Update
10/12/2018
32718 visitors
850589 robots
since 01/01/2003
Page generated
in 0.51 second
💗 2003-2018 by S. MARLIERE. Copying is an act of love. Love is not subject to law. Please copy and share.