{\rtf1\adeflang1025\ansi\ansicpg1252\uc1\adeff0\deff0\stshfdbch0\stshfloch0\stshfhich0\stshfbi0\deflang1033\deflangfe1033{\fonttbl{\f0\froman\fcharset0\fprq2{\*\panose 02020603050405020304}Times New Roman;}{\f1\fswiss\fcharset0\fprq2{\*\panose 020b0604020202020204}Arial;}
{\f2\fmodern\fcharset0\fprq1{\*\panose 02070309020205020404}Courier New;}{\f3\froman\fcharset2\fprq2{\*\panose 05050102010706020507}Symbol;}{\f37\froman\fcharset238\fprq2 Times New Roman CE;}{\f38\froman\fcharset204\fprq2 Times New Roman Cyr;}
{\f40\froman\fcharset161\fprq2 Times New Roman Greek;}{\f41\froman\fcharset162\fprq2 Times New Roman Tur;}{\f42\fbidi \froman\fcharset177\fprq2 Times New Roman (Hebrew);}{\f43\fbidi \froman\fcharset178\fprq2 Times New Roman (Arabic);}
{\f44\froman\fcharset186\fprq2 Times New Roman Baltic;}{\f45\froman\fcharset163\fprq2 Times New Roman (Vietnamese);}{\f47\fswiss\fcharset238\fprq2 Arial CE;}{\f48\fswiss\fcharset204\fprq2 Arial Cyr;}{\f50\fswiss\fcharset161\fprq2 Arial Greek;}
{\f51\fswiss\fcharset162\fprq2 Arial Tur;}{\f52\fbidi \fswiss\fcharset177\fprq2 Arial (Hebrew);}{\f53\fbidi \fswiss\fcharset178\fprq2 Arial (Arabic);}{\f54\fswiss\fcharset186\fprq2 Arial Baltic;}{\f55\fswiss\fcharset163\fprq2 Arial (Vietnamese);}
{\f57\fmodern\fcharset238\fprq1 Courier New CE;}{\f58\fmodern\fcharset204\fprq1 Courier New Cyr;}{\f60\fmodern\fcharset161\fprq1 Courier New Greek;}{\f61\fmodern\fcharset162\fprq1 Courier New Tur;}
{\f62\fbidi \fmodern\fcharset177\fprq1 Courier New (Hebrew);}{\f63\fbidi \fmodern\fcharset178\fprq1 Courier New (Arabic);}{\f64\fmodern\fcharset186\fprq1 Courier New Baltic;}{\f65\fmodern\fcharset163\fprq1 Courier New (Vietnamese);}}
{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;
\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;\red192\green192\blue192;}{\stylesheet{\ql \li0\ri0\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 \rtlch\fcs1 \af0\afs24\alang1025 
\ltrch\fcs0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 \snext0 Normal;}{\*\cs10 \additive \ssemihidden Default Paragraph Font;}{\*
\ts11\tsrowd\trftsWidthB3\trpaddl108\trpaddr108\trpaddfl3\trpaddft3\trpaddfb3\trpaddfr3\trcbpat1\trcfpat1\tblind0\tblindtype3\tscellwidthfts0\tsvertalt\tsbrdrt\tsbrdrl\tsbrdrb\tsbrdrr\tsbrdrdgl\tsbrdrdgr\tsbrdrh\tsbrdrv 
\ql \li0\ri0\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 \rtlch\fcs1 \af0\afs20 \ltrch\fcs0 \fs20\lang1024\langfe1024\cgrid\langnp1024\langfenp1024 \snext11 \ssemihidden Normal Table;}{
\s15\ql \li0\ri0\sb100\sa100\sbauto1\saauto1\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 \rtlch\fcs1 \af0\afs24\alang1025 \ltrch\fcs0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 \sbasedon0 \snext15 \styrsid3748167 
Normal (Web);}{\*\cs16 \additive \rtlch\fcs1 \af0 \ltrch\fcs0 \ul\cf2 \sbasedon10 \styrsid11277696 Hyperlink;}{\s17\ql \li0\ri0\widctlpar
\tx916\tx1832\tx2748\tx3664\tx4580\tx5496\tx6412\tx7328\tx8244\tx9160\tx10076\tx10992\tx11908\tx12824\tx13740\tx14656\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 \rtlch\fcs1 \af2\afs20\alang1025 \ltrch\fcs0 
\f2\fs20\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 \sbasedon0 \snext17 \styrsid11866672 HTML Preformatted;}{\*\cs18 \additive \rtlch\fcs1 \ai\af0 \ltrch\fcs0 \i \sbasedon10 \styrsid11866672 Emphasis;}}{\*\latentstyles\lsdstimax156\lsdlockeddef0}
{\*\pgptbl {\pgp\ipgp0\itap0\li0\ri0\sb0\sa0}{\pgp\ipgp0\itap0\li0\ri0\sb0\sa0}{\pgp\ipgp0\itap0\li0\ri0\sb0\sa0}{\pgp\ipgp0\itap0\li0\ri0\sb0\sa0}{\pgp\ipgp0\itap0\li0\ri0\sb0\sa0}{\pgp\ipgp0\itap0\li0\ri0\sb0\sa0}}{\*\rsidtbl \rsid330320\rsid524402
\rsid538506\rsid602803\rsid667068\rsid1114792\rsid1585609\rsid1772482\rsid1852126\rsid2036165\rsid2887568\rsid3168172\rsid3748167\rsid4275701\rsid5261439\rsid5318540\rsid5906028\rsid6779308\rsid6846839\rsid7102183\rsid7212577\rsid7366087\rsid7422518
\rsid7423765\rsid7605275\rsid7960143\rsid8339830\rsid8467079\rsid8798696\rsid8938830\rsid9001505\rsid9068860\rsid9456417\rsid9513749\rsid9771607\rsid11037695\rsid11277696\rsid11477782\rsid11613130\rsid11802453\rsid11866672\rsid12138356\rsid12611971
\rsid13111977\rsid13702187\rsid14169379\rsid14617866\rsid14770653\rsid15010054\rsid15012360\rsid15936474\rsid16535095\rsid16675444}{\*\generator Microsoft Word 11.0.0000;}{\info{\operator LuisChua}{\creatim\yr2011\mo7\dy22\hr10\min12}
{\revtim\yr2011\mo7\dy22\hr18\min45}{\version54}{\edmins251}{\nofpages8}{\nofwords1688}{\nofchars9627}{\nofcharsws11293}{\vern24615}{\*\password 00000000}}{\*\xmlnstbl {\xmlns1 http://schemas.microsoft.com/office/word/2003/wordml}{\xmlns2 urn:schemas-micr
osoft-com:office:smarttags}}\paperw12240\paperh15840\margl1800\margr1800\margt1440\margb1440\gutter0\ltrsect 
\widowctrl\ftnbj\aenddoc\donotembedsysfont0\donotembedlingdata1\grfdocevents0\validatexml0\showplaceholdtext0\ignoremixedcontent0\saveinvalidxml0\showxmlerrors0\horzdoc\dghspace120\dgvspace120\dghorigin1701\dgvorigin1984\dghshow0\dgvshow3
\jcompress\viewkind4\viewscale100\rsidroot5906028 \fet0{\*\wgrffmtfilter 013f}\ilfomacatclnup0\ltrpar \sectd \ltrsect\linex0\sectdefaultcl\sftnbj {\*\pnseclvl1\pnucrm\pnstart1\pnindent720\pnhang {\pntxta .}}{\*\pnseclvl2
\pnucltr\pnstart1\pnindent720\pnhang {\pntxta .}}{\*\pnseclvl3\pndec\pnstart1\pnindent720\pnhang {\pntxta .}}{\*\pnseclvl4\pnlcltr\pnstart1\pnindent720\pnhang {\pntxta )}}{\*\pnseclvl5\pndec\pnstart1\pnindent720\pnhang {\pntxtb (}{\pntxta )}}{\*\pnseclvl6
\pnlcltr\pnstart1\pnindent720\pnhang {\pntxtb (}{\pntxta )}}{\*\pnseclvl7\pnlcrm\pnstart1\pnindent720\pnhang {\pntxtb (}{\pntxta )}}{\*\pnseclvl8\pnlcltr\pnstart1\pnindent720\pnhang {\pntxtb (}{\pntxta )}}{\*\pnseclvl9\pnlcrm\pnstart1\pnindent720\pnhang 
{\pntxtb (}{\pntxta )}}\pard\plain \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 \rtlch\fcs1 \af0\afs24\alang1025 \ltrch\fcs0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 
\f1\fs20\insrsid12138356 A good practice is to comment the text inside scripts and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.
\par 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid538506 New to HTML5
\par 
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid6779308 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid6779308 //browser will use the first recognizable format
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid6779308 
\par <audio controls="controls">\line \~ <source src="song.ogg" type="audio/ogg" />\line \~ <source src="song.mp3" type="audio/mpeg" />\line Your browser does not support the audio element.\line </audio>}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid538506 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid6779308 
\par }\pard\plain \ltrpar\s15\ql \li0\ri-1800\sb100\sa100\sbauto1\saauto1\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin-1800\lin0\itap0\pararsid5261439 \rtlch\fcs1 \af0\afs24\alang1025 \ltrch\fcs0 
\fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid14169379 <video width="320" height="240" controls="controls">\line \~ <source src="movie.ogg" type="video/ogg" />\line \~
 <source src="movie.mp4" type="video/mp4" />\line \~ <source src="movie.webm" type="video/webm" />\line Your browser does not support the video tag.\line </video> 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid14770653 //}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid3748167 The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics. }{\rtlch\fcs1 \af0 \ltrch\fcs0 
\insrsid1772482\charrsid3748167 
\par }\pard\plain \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid14770653 \rtlch\fcs1 \af0\afs24\alang1025 \ltrch\fcs0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 
\f1\fs20\insrsid14770653\charrsid14770653 <canvas id="myCanvas">your browser does not s}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid14770653 upport the canvas tag </canvas>}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 
\f1\fs20\insrsid14770653\charrsid14770653 
\par <script type="text/javascript">
\par var canvas=document.getElementById('myCanvas');
\par var ctx=canvas.getContext('2d');
\par ctx.fillStyle='#FF0000';
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid14770653 ctx.fillRect(0,0,80,100);}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid14770653\charrsid14770653 
\par </script>}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid538506 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid5261439 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid5261439 The <embed> tag defines embedded content, such as a plug-in.
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid5261439\charrsid5261439 <embed src="helloworld.swf" />
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid14770653 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid1114792 //like }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid9001505 caption for table}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid1114792 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid1114792 <figure>\line \~ <figcaption>A view of the pulpit rock in {\*\xmlopen\xmlns2{\factoidname country-region}}{\*\xmlopen\xmlns2{\factoidname place}}Norway{\*\xmlclose}{\*\xmlclose}</figcaption>\line \~
 <img src="img_pulpit.jpg" width="304" height="228" />\line </figure>
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid9001505 
\par //highlight
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid9001505\charrsid9001505 <mark>milk</mark>
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid9001505 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid1585609 //key generation}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid9001505 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid1585609\charrsid1585609 <keygen name="security" />
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid1114792 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid524402 //word break
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid524402 XML<wbr>Http<wbr>Request}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid524402 
\par 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid7422518 //local storage much better than cookies
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid7422518 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid7422518 <script type="text/javascript">}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 
\f1\fs20\insrsid7422518\charrsid7422518 
\par if (localStorage.pagecount)
\par \tab \{
\par \tab localStorage.pagecount=Number(localStorage.pagecount) +1;
\par \tab \}
\par else
\par \tab \{
\par \tab localStorage.pagecount=1;
\par \tab \}
\par document.write("Visits: " + localSt}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid7422518 orage.pagecount + " time(s).");}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid7422518\charrsid7422518 
\par </script>
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid7422518 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid7423765 //new input types
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid8467079\charrsid8467079 <input type="email" name="user_email" />
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid8798696 {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid11037695 <input type="url" list="url_list" name="link" />}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 
\f1\fs20\insrsid11037695\charrsid8798696  }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid11037695 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid8798696\charrsid8798696 <datalist id="url_list">
\par \tab <option label="W3Schools" value="http://www.w3schools.com" />
\par \tab <option label="Google" value="http://www.google.com" />
\par \tab <option label="Microsoft" value="http://www.microsoft.com" />
\par </datalist>
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid15936474 <form action="demo_form.asp" method="get" autocomplete="on">}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid8339830  //autocomplete}{
\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid9068860 
\par <form action="demo_form.asp" novalidate="novalidate"> // no validation}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid9456417  }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid8798696 
\par }\pard \ltrpar\ql \li0\ri0\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0\pararsid16535095 {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid16535095 <input type="text" name="user_name"\~ autofocus="autofocus" />}{\rtlch\fcs1 \af0 
\ltrch\fcs0 \insrsid7212577  // edit cursor focus}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid667068 
\par }\pard \ltrpar\ql \li0\ri-990\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin-990\lin0\itap0\pararsid7212577 {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid7212577 
<input type="file" name="img" multiple="multiple" />  // selecting multiple files in browse}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid667068 
\par }\pard \ltrpar\ql \li0\ri0\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0\pararsid602803 {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid602803 <input type="text" name="country_code"\line pattern="[A-z]\{3\}
" title="Three letter country code" /> //pattern
\par }\pard \ltrpar\ql \li0\ri0\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0\pararsid16535095 {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid11477782 <input type="text" name="usr_name" required="required" /> //required}{\rtlch\fcs1 \af0 
\ltrch\fcs0 \insrsid7212577 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid602803 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid667068 //text input outside of form
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid667068\charrsid667068 <form action="demo_form.asp" method="get" id="user_form">}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid16535095  }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid9513749 </form>}{\rtlch\fcs1 \af0 \ltrch\fcs0 
\insrsid16535095 
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid667068\charrsid667068 <input type="text" name="lname" form="user_form" />}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 
\f1\fs20\insrsid667068   }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid16535095 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid7366087 
\par //}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid7366087 These attributes are helpful for creating different submit buttons.
\par }\pard \ltrpar\ql \li0\ri0\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0\pararsid330320 {\rtlch\fcs1 \af0 \ltrch\fcs0 \hich\af3\insrsid330320 \loch\af0\dbch\af0\hich\f3 \'b7}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid330320 
  formaction - Overrides the form action attribute 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \hich\af3\insrsid330320 \loch\af0\dbch\af0\hich\f3 \'b7}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid330320   formenctype - Overrides the form enctype attribute 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \hich\af3\insrsid330320 \loch\af0\dbch\af0\hich\f3 \'b7}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid330320   formmethod - Overrides the form method attribute 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \hich\af3\insrsid330320 \loch\af0\dbch\af0\hich\f3 \'b7}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid330320   formnovalidate - Overrides the form novalidate attribute 
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid330320 {\rtlch\fcs1 \af0 \ltrch\fcs0 \hich\af3\insrsid330320 \loch\af0\dbch\af0\hich\f3 \'b7}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid330320 
  formtarget - Overrides the form target attribute
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid330320\charrsid330320 <form action="demo_form.asp" method="get" id="user_form">
\par E-mail: <input type="email" name="userid" /><br />
\par <input type="submit" value="Submit" /><br />
\par <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br />
\par <input type="submit" formnovalidate="true" value="Submit without validation" /><br />
\par </form>}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid330320 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid9771607 
\par //image submit
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid9771607 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid9771607\charrsid9771607 <form action="demo_form.asp" method="get">
\par User name: <input type="text" name="user_name" /><br />
\par <input type="image" src="img_submit.gif" width="24" height="24" />
\par </form>
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid330320 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid9771607 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid6846839 //editable paragraph}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid13111977  with spellcheck}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid6846839\charrsid330320 
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid6846839\charrsid6846839 <p contenteditable="true"}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid13111977  }{\rtlch\fcs1 
\af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid13111977\charrsid13111977 spellcheck="true"}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid6846839\charrsid6846839 >This is a paragraph. It is editable. Try to change this text.</p>}{\rtlch\fcs1 \af1\afs20 
\ltrch\fcs0 \f1\fs20\insrsid6846839  }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid15936474\charrsid6846839 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid6846839 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid16675444 //hide content
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid16675444\charrsid16675444 <p hidden="hidden">This is a paragraph.</p>
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid6846839 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid11277696 //placeholder
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid11277696\charrsid11277696 <input type="search" name="user_search" placeholder="Search W3Schools" />
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid11277696 
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid5318540 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid5318540 //accept only gif}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid14617866  (not working}{
\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid8938830  vague}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid14617866 )}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid5318540\charrsid5318540 
\par <form action="demo_form.asp" method="post">
\par <input type="file" name="pic" accept="image/gif" />
\par <input type="submit" />
\par </form>}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid5318540\charrsid5318540 
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid5318540 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid13702187 //shorter labels for dropdown (not working on firefox)
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0\pararsid13702187 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid13702187\charrsid13702187 <select>
\par <option label="Volvo">Volvo (Latin for "I roll")</option>
\par </select>}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid13702187\charrsid13702187 
\par }\pard \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid13702187 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid11866672 //}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid15010054 avoid hard wrap cause it adds carriage return}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid11866672 
\par }\pard\plain \ltrpar\s17\ql \li0\ri0\widctlpar\tx916\tx1832\tx2748\tx3664\tx4580\tx5496\tx6412\tx7328\tx8244\tx9160\tx10076\tx10992\tx11908\tx12824\tx13740\tx14656\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0\pararsid11866672 
\rtlch\fcs1 \af2\afs20\alang1025 \ltrch\fcs0 \f2\fs20\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 {\rtlch\fcs1 \af2 \ltrch\fcs0 \insrsid11866672 <textarea maxlength="20"}{\rtlch\fcs1 \af2 \ltrch\fcs0 \insrsid11866672  }{\rtlch\fcs1 \ai\af2 
\ltrch\fcs0 \cs18\i\insrsid11866672 WRAP=}{\rtlch\fcs1 \ai\af2 \ltrch\fcs0 \cs18\i\insrsid11866672 \'94}{\rtlch\fcs1 \ai\af2 \ltrch\fcs0 \cs18\i\insrsid15010054 soft}{\rtlch\fcs1 \ai\af2 \ltrch\fcs0 \cs18\i\insrsid11866672 \'94}{\rtlch\fcs1 \af2 
\ltrch\fcs0 \insrsid11866672 >}{\rtlch\fcs1 \af2 \ltrch\fcs0 \insrsid11866672  }{\rtlch\fcs1 \af2 \ltrch\fcs0 \insrsid11866672\charrsid11866672 
\par }\pard\plain \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 \rtlch\fcs1 \af0\afs24\alang1025 \ltrch\fcs0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid11866672 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid12611971 <form action="demo_form.asp" accept-charset="UTF-8"}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid11613130  }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid11613130 enctype="multipart/form-data"}{\rtlch\fcs1 \af0 
\ltrch\fcs0 \insrsid12611971 >}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid11613130 (not working}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid8938830  vague}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid11613130 )}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid12611971 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid12611971 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid2887568 //headers}{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid15012360  attribute can be used by screen readers.}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid15012360 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid15012360 <table>\line \~ <tr>\line \~\~\~ <th id="name">Name</th>\line \~\~\~ <th id="email">Email</th>\line \~\~\~ <th id="phone">Phone</th>\line \~\~\~ <th id="addr">Address</th>\line \~ </tr>\line \~ <tr>\line \~
\~\~ <td headers="name">John Doe</td>\line \~\~\~ <td headers="email">someone@example.com</td>\line \~\~\~ <td headers="phone">+45342323</td>\line \~\~\~ <td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>\line \~ </tr>\line </table>}{\rtlch\fcs1 
\af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid15012360 
\par 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid15012360\charrsid3168172 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid12138356 //important attribute for most tags
\par }{\field\fldedit{\*\fldinst {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid11277696  HYPERLINK "http://www.w3schools.com/html5/att_input_maxlength.asp" }}{\fldrslt {\rtlch\fcs1 \af0 \ltrch\fcs0 \cs16\ul\cf2\insrsid11277696 maxlength}}}\sectd 
\linex0\sectdefaultcl\sftnbj {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid11277696 
\par }{\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid4275701 size}{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid4275701 
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid12138356 Accesskey //shift alt (letter) for firefox
\par Tabindex // tab
\par title
\par <sub>subscript</sub>
\par <sup>superscript</sup>
\par <code>Computer code text</code>
\par <noscript>Your browser does not support JavaScript!</noscript>
\par 
\par //opening a new tab
\par <a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> 
\par 
\par //linking to a section in the page
\par <a href="#C4">See also Chapter 4</a><a name="C4">Chapter 4</a>
\par 
\par //send mail
\par <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
\par 
\par //abbreviations, acronym can give useful information to browsers, spellcheckers, screen readers, translation systems and search-engines.
\par <acronym title="as soon as possible">ASAP</acronym>
\par 
\par //image maps
\par <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
\par <map name="planetmap">
\par   <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
\par   <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
\par   <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
\par </map>
\par 
\par <head>
\par <base href="http://www.w3schools.com/images/" /> // all image has a base href
\par <base target="_blank" />  //all links have target of blank
\par </head>
\par 
\par //reverse direction of text
\par <bdo dir="rtl">Here is some Hebrew text that should be written from right-to-left!</bdo>
\par 
\par //indents text
\par <blockquote>
\par This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
\par </blockquote>
\par 
\par //Always specify the type attribute for the button. The default type for Internet Explorer is "button", while in other browsers (and in the W3C specification) it is "submit".
\par <button type="button">Click Me!</button>
\par 
\par //definition list
\par <dl>
\par   <dt>Coffee</dt>
\par   <dd>- black hot drink</dd>
\par   <dt>Milk</dt>
\par   <dd>- white cold drink</dd>
\par </dl>
\par 
\par //show modification in text
\par <p>My favorite color is <{\*\xmlopen\xmlns2{\factoidname place}}del{\*\xmlclose}>blue</{\*\xmlopen\xmlns2{\factoidname place}}{\*\xmlopen\xmlns2{\factoidname place}}del{\*\xmlclose}{\*\xmlclose}> <ins>red</ins>!</p>
\par 
\par //group fields
\par <fieldset>
\par <legend>Personalia:</legend>
\par Name: <input type="text" size="30" /><br />
\par Email: <input type="text" size="30" /><br />
\par Date of birth: <input type="text" size="10" />
\par </fieldset>
\par 
\par //horizontal line
\par <p>This is some text.</p>
\par <hr />
\par <p>This is some text.</p>
\par 
\par //To deal with browsers that do not understand iframes, place the text you want between the opening <iframe> tag and the closing </iframe> tag.
\par <iframe src="/default.asp" width="100%" height="300">
\par   <p>Your browser does not support iframes.</p>
\par </iframe>
\par 
\par //You cannot use the body element together with the frameset element. However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in a body element.
\par //horizontal
\par <frameset cols="25%,50%,25%">
\par   <frame src="frame_a.htm" noresize="noresize"/>
\par   <frame src="frame_b.htm" />
\par   <frame src="frame_c.htm" />
\par   <noframes>
\par     Sorry, your browser does not handle frames!
\par   </noframes>
\par </frameset>
\par 
\par //vertical
\par <frameset rows="25%,*,25%">
\par   <frame src="frame_a.htm" />
\par   <frame src="frame_b.htm" />
\par   <frame src="frame_c.htm" />
\par </frameset>
\par 
\par 
\par //The alt attribute is meant to be used as an alternative text if the image is not available
\par <p>
\par <img src="angry.gif" alt="Angry" align="right" width="32" height="32" />
\par A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.
\par </p>
\par 
\par //if the user clicks on the text within the label element, it toggles the control.
\par <label for="male">Male</label><input type="radio" name="sex" id="male" />
\par 
\par //Use the pre element to display computer code!
\par <pre>
\par Text in a pre element
\par is displayed in a fixed-width
\par font, and it preserves
\par both      spaces and
\par line breaks
\par </pre>
\par 
\par //grouping option values
\par <select>
\par   <optgroup label="Swedish Cars">
\par     <option value="volvo">Volvo</option>
\par     <option value="saab">Saab</option>
\par   </optgroup>
\par   <optgroup label="German Cars">
\par     <option value="mercedes">Mercedes</option>
\par     <option value="audi">Audi</option>
\par   </optgroup>
\par </select>
\par 
\par //metadata
\par <head>
\par <meta name="description" content="Free Web tutorials" />
\par <meta name="keywords" content="HTML,CSS,XML,JavaScript" />
\par <meta name="author" content="Hege Refsnes" />
\par <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
\par </head>
\par 
\par //sending mail through form
\par <form action="mailto:luis.chua@emerson.com" method="post" enctype="text/plain">
\par Name:<br />
\par <input type="text" name="name" size="20" />
\par <br />
\par Email:<br />
\par <input type="text" name="email" size="20" />
\par <br />
\par Comment:<br />
\par <input type="text" name="comment" size="40" />
\par <br /><br />
\par <input type="submit" value="Send" />
\par <input type="reset" value="Reset" />
\par </form>
\par 
\par //The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. Only the width attribute works in Firefox (none of the other attributes).
\par //The CSS border property in the col element will only work if the table is set to border-collapse:collapse.
\par <table width="100%" style="border:1px solid black;border-collapse:collapse">
\par   <caption>Monthly savings</caption>
\par   <colgroup span="2" style="background:#98bf21;width:100px;border:5px solid black" />
\par   <colgroup/>
\par   <tr>
\par     <th>ISBN</th>
\par     <th>Title</th>
\par     <th>Price</th>
\par   </tr>
\par   <tr>
\par     <td>3476896</td>
\par     <td>My first HTML</td>
\par     <td>$53</td>
\par   </tr>
\par   <tr>
\par     <td>2489604</td>
\par     <td>My first CSS</td>
\par     <td>$47</td>
\par   </tr>
\par </table>
\par 
\par <table border="1">
\par   <thead>
\par     <tr>
\par       <th>Month</th>
\par       <th>Savings</th>
\par     </tr>
\par   </thead>
\par   <tfoot>
\par     <tr>
\par       <td>Sum</td>
\par       <td>$180</td>
\par     </tr>
\par   </tfoot>
\par   <tbody>
\par     <tr>
\par       <td>January</td>
\par       <td>$100</td>
\par     </tr>
\par     <tr>
\par       <td>February</td>
\par       <td>$80</td>
\par     </tr>
\par   </tbody>
\par </table>
\par 
\par <h4>Cell that spans two columns:</h4>
\par <table border="1">
\par <tr>
\par   <th>Name</th>
\par   <th colspan="2">Telephone</th>
\par </tr>
\par <tr>
\par   <td>Bill Gates</td>
\par   <td>555 77 854</td>
\par   <td>555 77 855</td>
\par </tr>
\par </table>
\par 
\par <h4>Cell that spans two rows:</h4>
\par <table border="1">
\par <tr>
\par   <th>First Name:</th>
\par   <td>Bill Gates</td>
\par </tr>
\par <tr>
\par   <th rowspan="2">Telephone:</th>
\par   <td>555 77 854</td>
\par </tr>
\par <tr>
\par   <td>555 77 855</td>
\par </tr>
\par </table>
\par 
\par http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_frame
\par http://www.w3schools.com/tags/ref_colornames.asp
\par http://www.w3schools.com/tags/ref_symbols.asp
\par http://www.w3schools.com/tags/ref_httpmessages.asp
\par }}