HTML-CSS_Reference

The most current version of this document (and many other references) can be found at NeatInfo.com/dev_notes/_cheat

Quick Reference

The most current version of this document (and many other references) can be found at NeatInfo.com/dev_notes/_cheat-sheets

by Jan Zumwalt

The most current version of this document (and many other references) can be found at

by Jan Zumwalt - NeatInfo.com

NeatInfo.com - by Jan Zumwalt June 20, 2012 HTML / CSS Reference Copyright © 2005-2012

Pg 2 of 77

Syntax: HTML h1 color:red; font-size:16pt; <h1>Hello World </h1> CLASS .font1 color:red; font-size:16pt; <span class=” font1”>Hello World</span> CLASS h2.font1 color:red; font-size:16pt; <h2 class=” font1”>Hello World</h2> ID #font1 color:red; font-size:16pt; <span id=”fo nt1”>Hello World</span> DIV <div>content...</div> <div class=”font1”>Hello Wo rld</div> SPAN <span>content...</span> <span class=”font1”>Hell o World</span

Class Style Template  font-family : Arial;  color : #000;  text-decoration : none;  text-align : left;  background-color : #FFF; 

Body Style Template body  volume : soft;

\* margin *\ margin-top : 50pt; margin-bottom : 50pt; margin-left : 50pt; margin-right : 50pt; background-repeat : repeat; background-image : url(http://www.ne atinfo.com/!-media/bg_starfield1.png); \* font *\ h1 color : #f53; font-siz e:28pt; text-align:center; font-style:italic; h2 color : #6cf; font-siz e:14pt; margin-bottom:3pt; text-align:left; h3 color : skyblue; font-siz e:10pt; margin-bottom:3pt; text-align:left; h4 color : #9f9; font-siz e:10pt; font-weight:normal; text-align:left; a text-decoration : none; a:link color : #ee6; font-weight :bold; a:visited color : #ee6; font-weight :bold; a:active color : burlywood; a:hover color : #9f9; font-weight :bold; font-family : arial; font-size : 12pt; color : #cdf;

Other Styles h1 color : #f53; font-size:28 pt; text-align:center; font-style:italic; h2 color : #6cf; font-size:14 pt; margin-bottom:3pt; text-align:left; h3 color : skyblue; font-size:10 pt; margin-bottom:3pt; text-align:left; h4 color : #9f9; font-size:10 pt; font-weight:normal; text-align:left; a text-decoration : none; a:link color : #ee6; font-weight:bol d; a:visited color : #ee6; font-weight:bol d; a:active color : burlywood; a:hover color : #9f9; font-weight:bol d;

Common RGB Colors blue dark = #35a orange dark = #b50 teal dark = #355 white dark = #bbb blue med = #8bc orange med = #c85 teal med = #388 white med = #ddd blue lite = #bef orange lite = #fc8 teal lite = #3bb white lite = #fff brown dark = #b85 purple dark = #a5c yello w dark = #bb5 grey dark = #666 brown med = #db8 purple med = #a7d yello w med = #cc8 grey med = #888 brown lite = #fdb purple lite = #aaf yello w lite = #deb grey lite = #aaa green dark = #5a6 red dark = #f55 black dark = #000 green med = #6b8 red med = #f88 black med = #222 green lite = #7ca red lite = #fbb black lite = #444


Pg 3 of 77

Table of Contents QUICK REFERENCE ............................................................................................ 1

Class Style Template ...................................................................................................... 2

Body Style Template ...................................................................................................... 2

Other Styles ................................................................................................................... 2

Common RGB Colors ..................................................................................................... 2

TABLE OF CONTENTS ......................................................................................... 3

SYMBOLS USED ................................................................................................. 6

REDIRECT WITH HTML META TAGS ...................................................................... 6

Refresh meta http-equiv tag ............................................................................................ 6

REDIRECT WITH JAVASCRIPT ............................................................................... 6

REDIRECT WITH PHP ......................................................................................... 6

USING “REFRESH” HEADER ................................................................................. 7

3SAMPLE ONE - HTML FILE ................................................................................ 7

SAMPLE ONE - HTML FILE .................................................................................. 8

SAMPLE TWO - HTML FILE ................................................................................. 9

ALPHABETIZED HTML COMMANDS .................................................................... 10

HTML EVENTS ................................................................................................ 11

PARAGRAPHS & BREAKS .................................................................................. 11

SOUNDS .......................................................................................................... 11

FONTS ............................................................................................................ 12

FONT & BACKGROUND COLORS ........................................................................ 12

FONT SPECIAL CHARACTERS ............................................................................ 12

LINKS & URLS .................................................................................................. 13

IMAGES, MAPS, HR .......................................................................................... 13

OBJECTS ......................................................................................................... 13

CODE-BLOCK FORMATTING .............................................................................. 14

POSITION ........................................................................................................ 14

LISTS .............................................................................................................. 15

FORMS ............................................................................................................ 16

GET METHOD .................................................................................................. 16

POST METHOD ................................................................................................ 17

<INPUT...> ...................................................................................................... 18

<INPUT ATTRIBUTE...> ...................................................................................... 18

CSS TABLES ................................................................................................... 28

COLORED TABLE SCHEMES .............................................................................. 29

ALL CSS BORDER PROPERTIES ........................................................................ 33

FRAMES .......................................................................................................... 34

SCRIPTS .......................................................................................................... 34


Pg 4 of 77

EXAMPLES ....................................................................................................... 34

HTML 5 FEATURES ......................................................................................... 35

New Markup Elements .................................................................................................. 35

New Media Elements .................................................................................................... 35

The Canvas Element .................................................................................................... 36

New Form Elements ..................................................................................................... 36

New Input Type Attribute Values ................................................................................... 36

Semantic Markup and Page Layout .............................................................................. 36

DRAWING IN HTML5 USING CANVAS ELEMENT ................................................... 38

AUDIO AND VIDEO SUPPORT ............................................................................. 39

AUDIO ............................................................................................................. 40

SUPPORT FOR OLDER BROWSERS ...................................................................... 42

Summary ...................................................................................................................... 45

QUICK OVERVIEW OF CSS SYNTAX AND USE ..................................................... 46

What are Selectors – html, class, id, div, span .............................................................. 46

HTML selectors ............................................................................................................ 46

CLASS selectors .......................................................................................................... 46

ID selectors .................................................................................................................. 46

DIV and SPAN selectors ............................................................................................... 46

Single and Multiline Properties / Comments .................................................................. 47

Location – inline, imbedded, external ............................................................................ 47

HTML SELECTORS ........................................................................................... 48

USING CLASS SELECTORS – CONTROLLING GROUPS OF ELEMENTS ...................... 49

ID SELECTORS – CONTROLLING SPECIFIC ELEMENTS .......................................... 50

INLINE STYLES ................................................................................................. 51

COMMON STYLES ............................................................................................ 52

Text Background Color ................................................................................................. 52

Adding a Border around text ......................................................................................... 52

Round Corners ............................................................................................................. 53

Set New Margins .......................................................................................................... 54

CSS Column Formatting ............................................................................................... 54

ADVANCED ELEMENT STYLES ........................................................................... 56

Z-index and overlapping ............................................................................................... 56

:focus ........................................................................................................................... 56

:first-child ...................................................................................................................... 56

:nth-child() .................................................................................................................... 57

:nth-last-child() .............................................................................................................. 58

:nth-of-type() ................................................................................................................. 58

:nth-last-of-type() .......................................................................................................... 58

:last-child ...................................................................................................................... 58

:first-of-type and :last-of-type ........................................................................................ 58

:only-child ..................................................................................................................... 59

:only-of-type ................................................................................................................. 59

:empty .......................................................................................................................... 59

:not() ............................................................................................................................ 59

:disabled & :enabled ..................................................................................................... 59

:checked ....................................................................................................................... 59

:indeterminate............................................................................................................... 59

LINKS .............................................................................................................. 60

Different link colors ....................................................................................................... 60

Border Properties ......................................................................................................... 61

GUIDELINES ..................................................................................................... 62


Pg 5 of 77

STYLE PROPERTY ............................................................................................ 63

ALPHABETIZED HTML COMMANDS .................................................................... 64

HTML 16 NAMED COLORS ................................................................................ 71

X11 COLOR NAMES (ALL BROWSERS SUPPORT THESE) ........................................ 72

IE 46 NAMED COLORS ...................................................................................... 73

WEBSAFE 210 COLORS .................................................................................... 74

BACK PAGE ..................................................................................................... 77

Html Documentation ..................................................................................................... 77

Html Tutorials ............................................................................................................... 77

CSS Documentation ..................................................................................................... 77

CSS Tutorials ............................................................................................................... 77


Pg 6 of 77

Symbols Used URL URL of an external file (or just file name if in the same directory) ? Arbitrary number (i.e. <H?> = <H1>, <H2 >, <H3>, etc.) % Arbitrary percentage (i.e. <HR WIDTH=“%”> = <HR WIDTH=“50%”> ) *** Arbitrary text (i.e. ALT=“***” means fill in with text) $$$$$$ Arbitrary hex (i.e. BGCOLOR=“#$$$$$$ ” = BGCOLOR=“#00FF1C” ) ::: Arbitrary date (i.e. DATETIME=“:::” = “1994-11-05T08:15:30”) @ Email address (i.e. “mailto:@” = “ma ilto:[email protected]” etc.) ,,, Comma-delimited (i.e. COORDS=“,,,” = C OORDS=“0,0,50,50”, etc.) Alternatives (i.e. ALIGN=LEFT|RIGHT|CEN TER = pick one)

Redirect with HTML meta tags

These go in the section of your html. Usually when you use this meta redirect method you should also use the javascript method, just to be safe.

Refresh meta http-equiv tag

Redirects to http://www.sample.com after 0 seconds.

<meta http-equiv="refresh" content="0;url=http://ww w.sample.com" />

Redirect with javascript

These go in the section of your html.

Basic javascript Redirect method

Will redirect user to http://www.sample.com immediately

<script type="text/javascript"> window.location.href='http://www.sample.com'; </script>

Redirect after specific time period

This will redirect to http://www.sample.com after 2 seconds

<body onload="javascript:setTimeout(function()window.loc ation.href='http://www.sample.com',2000);">

Redirect with PHP Using “Location” header <?php header('Location:http://www.sample.com'); exit; exit(); ?>


Pg 7 of 77

Using “Refresh” header <?php header('Refresh: 0; URL=http://www.sample.com'); exit; exit(); ?>

Ultimate PHP method

It redirects to a page specified by “$url”. $mode can be:

• LOCATION: Redirect via Header “Location” • REFRESH: Redirect via Header “Refresh” • META: Redirect via HTML META tag • JS: Redirect via JavaScript command

<?php function do_redirect($url,$mode) if (strncmp('http:',$url,5) && strncmp('https:' ,$url,6)) $starturl = ($_SERVER["HTTPS"] == 'on' ? 'h ttps' : 'http') . '://'. (empty($_SERVER['HTTP_HOST'])? $_SERVER['SE RVER_NAME'] : $_SERVER['HTTP_HOST']); if ($url[0] != '/') $starturl .= dirname($_ SERVER['PHP_SELF']).'/'; $url = "$starturl$url"; switch($mode) case 'LOCATION': header("Location: $url"); exit; case 'REFRESH': header("Refresh: 0; URL=\"$url\""); exit; case 'META': exit; default: ?><script type="text/javascript"> window.location.href='<?=$url?>'; </script><? exit; ?>

3

Pg 8 of 77

Sample One - HTML file 1. <html > 2. <HEAD> 3.  18.  19. <meta http-equiv ="Content-Type" content ="text/html; charset=windows-1252" > 20. <meta name="DESCRIPTION" content ="What this page does, What this page is about" > 21. <meta name="GENERATOR" content ="Plain Text Editor" > 22. <meta name="KEYWORDS" content ="search words, or phrases, so, forth" > 23. <meta name="RATING" content ="General" > 24. <meta name="ROBOTS" content ="index, follow" > 25. 26.  27. <TITLE >Page Title </ TITLE > 28. <link rel ="icon" href ="favicon.ico" type ="image/x-icon" > 29. <link rel ="shortcut icon" href ="favicon.ico" type ="image/x-icon" > 30. <LINK rel ="shortcut icon" href ="favicon.ico" > 31. <embed src ="http://www.neatinfo.com/!-- media/default.wav" autostart ="true" loop ="false"

width ="0" height ="0" > 32. </ embed> 33. 34.  35. <style type ="text/css" > 36. BODY SCROLLBAR-FACE-COLOR:#FF0000; SCROLLBAR- HIGHLIGHT-COLOR:#000000; 37. SCROLLBAR-SHADOW-COLOR:#000000; SCROLLBAR-3D LIGHT-COLOR:#FF0000; 38. SCROLLBAR-ARROW-COLOR:#000000; SCROLLBAR-TR ACK-COLOR:#3241D4; 39. SCROLLBAR-DARKSHADOW-COLOR:#3241D4; 40. MARGIN-TOP:50pt; MARGIN-BOTTOM:50pt; MARGIN- LEFT:50pt; MARGIN-RIGHT:50pt; 41. BACKGROUND:WHITE; BACKGROUND-REPEAT:REPEAT; BACKGROUND-IMAGE:URL(default.jpg); 42. FONT-FAMILY:ARIAL; FONT-SIZE:12PT; COLOR:BLA CK; 43. VOLUME:SOFT; 44. 45. H1 COLOR:RED; FONT-SIZE:28PT; TEXT-ALIGN :CENTER; font-style:italic; 46. H2 COLOR:BLUE; FONT-SIZE:18PT; TEXT-ALIGN :CENTER; 47. H3 COLOR:NAVY; FONT-SIZE:14PT; TEXT-ALIGN :LEFT; 48. A TEXT-DECORATION: NONE; 49. A:LINK COLOR:NAVY; font-style:italic; 50. A:VISITED COLOR:GREEN; 51. A:ACTIVE COLOR:NAVY; 52. A:HOVER FONT-WEIGHT:BOLD; COLOR:RED; FONT-SIZE :95%; TEXT-DECORATION: underline overline; 53. </ style > 54. 55.  56. <BODY style ="font-family:arial;" > 57. <H1>H1 Hello World! </ H1> 58. <H2>H2 Is anybody there? </ H2> 59. <H3>H3 This is all I have to say... </ H3> 60. <a href ="http://www.neatinfo.com/" >Here is a HREF URL link. </ a><br / ><br / > 61. <a href ="http://www.neatinfo.com/" ><img src ="http://www.neatinfo.com/test.jpg"

border ="0" ><br >Here is a linked image. </ a> 62. <form > 63. <input type ="button" value ="Button Link" onClick ="window.location='http://www.neatinfo.com'" / > 64. </ form > 65. 66. </ BODY> 67. </ HTML>

Pg 9 of 77

Sample Two - HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD><TITLE>Shell Exercise</TITLE> <META NAME="keywords" CONTENT="HTML, headings , HTML tutorial"> <META NAME="description" CONTENT="How to use paragraphs, line breaks, and headings in HTML."> </HEAD> <BODY>  <BR/> <H1><CENTER>Hello World!</CENTER></H1> </BODY> </HTML>

Pg 10 of 77

Alphabetized HTML Commands  comment <!DOCTYPE> the document type <a> anchor <abbr> abbreviation <acronym> acronym <address> address element <applet> Deprecated. applet <area> area inside an image map <b> bold text <base> base URL all page links <basefont> Deprecated. base font <bdo> the direction of text display <big> big text <blockquote> indent <body> the body element <br> Inserts a single line break <button> push button <caption> table caption <center> Deprecated. centered text <cite> citation <code> code text (formatted txt) <col> attributes for table columns <colgroup> groups of table columns <dd> definition description <del> deleted text <dir> Deprecated. directory list <div> section in a document <dfn> definition term <dl> definition list <dt> definition term <em> emphasized text <fieldset> fieldset <font> Deprecated see style, font size, select font, etc <form> form <frame> sub window (a frame) <frameset> set of frames <h1> to <h6> header 1 to header 6 <head> information about the document <hr> horizontal rule <html> html document <i> italic text <iframe> inline sub window (frame) <img> image <input> input field <ins> inserted text <isindex> Deprecated

single- line input field <kbd> keyboard text <label> label for a form control <legend> title in a fieldset <li> list item <link> resource reference <map> image map <menu> Deprecated. menu list <meta> meta information <noframes> noframe section <noscript> noscript section <object> embedded object <ol> ordered list <optgroup> option group <option> option in a dropdown list <p> paragraph <param> parameter for an object <pre> preformatted text <q> short quotation <s> Deprecated. strikethrough text <samp> sample computer code <script> script <select> selectable list <small> small text <span> section in a document <strike> Deprecated. strikethrough text <strong> strong text <style> css style definition <sub> subscripted text <sup> superscripted text <table> table <tbody> table body <td> table cell <textarea> text area <tfoot> table footer <th> table header <thead> table header <title> the document title <tr> table row <tt> teletype text, similar to <code> and <pre> <u> Deprecated. underlined text <ul> unordered list <var> variable, usually same as italics <xmp> Deprecated use “code” instead


Pg 11 of 77

HTML Events onload occurs after the window or all frames within a fr ameset have loaded. onunload occurs when the user agent removes a document fro m a window or frame. onclick triggered when the mouse button is clicked over t he element. ondblclick occurs when the pointing device button is double c licked over an element. onmousedown triggered when the mouse button is pressed over t he element. onmouseup occurs when the pointing device button is release d over an element. onmouseover triggered when the mouse is moved onto the elemen t. onmousemove occurs when the pointing device is moved while it is over an element. onmouseout triggered when the mouse is moved away from the e lement. onfocus when an element receives focus from the pointing or tabbing device. onblur triggered when an element loses focus of pointing or tabbing device. onkeypress occurs when a key is pressed and released over an element. onkeydown triggered when a key is pressed down over the ele ment. onkeyup occurs when a key is released over an element. onsubmit triggered when a form is submitted. onreset occurs when a form is reset. onselect triggered when a user selects some text in a text field. onchange occurs when a control loses input focus and its v alue was changed.

Paragraphs & Breaks Paragraph <P></P> (closing t ag often unnecessary) Align Text <P ALIGN=LEFT|CENTER|RIGHT></P> Justify Text <P ALIGN=xxx></P> (xxx = left, right, center, justify) Line Break <BR> (a single carriage return) Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL> No Break <NOBR></NOBR> (prevents line breaks) Word Break <WBR> (where to break a line if needed)

Sounds Background Sound <BGSOUND SRC=“***” LOOP=?|INFI NITE>

Pg 12 of 77

Fonts Comment  (not displa yed by the browser) Heading <H?></H?> <h1></h1> . .. <h7></h7> Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></ H?> Bold <B></B> Emphasis <EM></EM> Font styl e = italic Strong <STRONG></STRONG> Font styl e = bold Italic <I></I> Underline <U></U> (not wide ly implemented) Strikeout <STRIKE></STRIKE> (not wide ly implemented) Strikeout <S></S> (not widely implemented) Subscript <SUB></SUB> Superscript <SUP></SUP> Typewriter <TT></TT> (displays in monospaced font) Preformatted <PRE></PRE> (display text spacing as-is) Preformatted <XML></XML> (works wh en <pre> does not) Width <PRE WIDTH=?></PRE> (in charac ters) Center <CENTER></CENTER> (for both text and images) Blinking <BLINK></BLINK> (the most derided tag ever) Font Size <FONT SIZE=?></FONT> (ra nges from 1-7) Change Size <FONT SIZE=“+$”></FONT> $= ran ges from 1-7 Change Size <FONT SIZE=“+?”></FONT> increa se or decrease relative size Change Size <big></big>, <small></small> i ncrease or decrease font size Point size <FONT POINT-SIZE=?></FONT> Weight <FONT WEIGHT=?></FONT> 100to90 0, normal=400, bold=700 Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3, or 100to900,) Font Color <FONT COLOR=“#$$$$$$|name”></F ONT> Font family <FONT FACE=“name”></FONT>

Font & Background Colors Background Tiled <BODY BACKGROUND=“URL”> or <BODY BACKGROUND:URL(file.ext);> No tiling <BODY BACKGROUND:URL(file.ext) no -repeat;> Watermark <BODY BGPROPERTIES=“FIXED”> Background Color<BODY BGCOLOR=“#$$$$$$”> (order i s red/green/blue) Text Color <BODY TEXT=“#$$$$$$”> Link Color <BODY LINK=“#$$$$$$”> Visited Link <BODY VLINK=“#$$$$$$”> Active Link <BODY ALINK=“#$$$$$$”>

Font Special Characters Special Character &????; (where ? is the ISO 885 9-1 code) < < or & #60; > > or > & & or & “ " 0r " Registered TM ® or ® Copyright © or © Non-Breaking Spc Wide space &emsp; the width of “m” Medium space &ensp; the width of “n” Thin space thin space Small dash &ndash or – Large dash &mdash or & #8212;


Pg 13 of 77

Links & Urls Redirection <META HTTP-EQUIV=“Refresh” CON TENT=“?; URL=URL”> URL of This File <BASE HREF=“URL”> (must be in header) Base Window Name <BASE TARGET=“***”>(must be in header) Relationship <LINK REV=“***” REL=“***” HREF =“URL”> (in header) Linked File <LINK TYPE=“***” SRC=“***”></L INK> Link Something <A HREF=“URL”></A> Link Image <A HREF=“URL”><image src=“path or URL” border=“0”>text title</A> Link to <A HREF=“URL#***”></A> (if in another document) <A HREF=“#***”></A> (if in current document) Target Window <A HREF=“URL” TARGET=“***”></A > On Click <A HREF=“URL” ONCLICK=“***”></ A> (Javascript) Mouseover <A HREF=“URL” ONMOUSEOVER=“*** ”></A> (Javascript) Mouse out <A HREF=“URL” ONMOUSEOUT=“***” ></A> (Javascript) Link to Email <A HREF=“mailto:@”></A> Specify subject <A HREF=“mailto:@?SUBJECT=***” ></A> (use a real ?) Define Location <A NAME=“***”></A> <a style=“text-decoration:none;” href=“...”> tur ns off link underlining

Images, Maps, HR Display Image <IMG SRC=“URL”> Alignment <IMG SRC=“URL” ALIGN=TOP|BOTTO M|MIDDLE|LEFT|RIGHT> Alignment <IMG SRC=“URL” ALIGN=TEXTTOP|A BSMIDDLE|BASELINE|ABSBOTTOM> Alternate <IMG SRC=“URL” ALT=“***”> (if image not displayed) Dimensions <IMG SRC=“URL” WIDTH=? HEIGHT= ?> (in pixels) <IMG SRC=“URL” WIDTH=% HEIGHT= %> (as percentage) Border <IMG SRC=“URL” BORDER=?> (in pixels) Runaround Space <IMG SRC=“URL” HSPACE=? VSPACE =?> (in pixels) Low-Res Proxy <IMG SRC=“URL” LOWSRC=“URL”> Imagemap <IMG SRC=“URL” ISMAP> (req uires a script) Imagemap <IMG SRC=“URL” USEMAP=“URL”> Movie Clip <IMG DYNSRC=“***” START=“***” LOOP=?> Client-Side Map <MAP NAME=“***”></MAP> (desc ribes the map) Map Section <AREA SHAPE=“DEFAULT|RECT|CIRC LE|POLY” COORDS=“,,,” HREF=“URL”| NOHREF> Marquee <MARQUEE></MARQUEE> Horizontal Rule <HR> Alignment <HR ALIGN=LEFT|RIGHT|CENTER> Thickness <HR SIZE=?> (in pixels) Width <HR WIDTH=?> (in pixels) Width Percent <HR WIDTH=“%”> (as a percent age of page width) Solid Line <HR NOSHADE> (without the 3D cutout look)

Objects Embed Object <EMBED SRC=“URL”> (insert obj ect into page) Object Size <EMBED SRC=“URL” WIDTH=? HEIGH T=?> Object <OBJECT></OBJECT> Parameters <PARAM> Searchable <ISINDEX> (indicates a searchable index) Prompt <ISINDEX PROMPT=“***”> (tex t to prompt input) Send Search <A HREF=“URL?***”></a> (use a real question mark) Bidirect Off <BDO DIR=LTR|RTL></BDO> (for c ertain character sets)

Pg 14 of 77

Code-Block Formatting Note: <div> vs <span> The primary difference between the <span> and <div> tags is that <span> doesn't do any

formatting of it's own. The <div> tag includes a paragraph break, because it is defining a logical division in the

document. <div> tag also gives you the ability to name sections to be acted on by style sheets or Dynamic HTML. Comment  (not displa yed by the browser) Heading <H?></H?> <h1></h1> . .. <h7></h7> Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></ H?> Division <DIV></DIV> Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|J USTIFY></DIV> Defined Content <SPAN></SPAN> Block Quote <BLOCKQUOTE></BLOCKQUOTE> ( usually indented) Quote <Q></Q> (for short quotations) Citation <Q CITE=“URL”></Q> Citation <CITE></CITE> (usually it alics) Code <CODE></CODE> (pre format ed, for source code listings) Sample Output <SAMP></SAMP> Keyboard Input <KBD></KBD> Variable <VAR></VAR> Definition <DFN></DFN> (not widely implemented) Author's Address <ADDRESS></ADDRESS> Large Font Size <BIG></BIG> increases f ont size Small Font Size <SMALL></SMALL> decreases f ont size Insert <INS></INS> (marks addi tions in new version) Time of Change <INS DATETIME=“:::”></INS> Comments <INS CITE=“URL”></INS> Delete <DEL></DEL> (marks dele tions in new version) Time of Change <DEL DATETIME=“:::”></DEL> Comments <DEL CITE=“URL”></DEL> Acronym <ACRONYM></ACRONYM> Abbreviation <ABBR></ABBR>

Position Multi-Column <MULTICOL COLS=?></MULTICOL> Column Gutter <MULTICOL GUTTER=?></MULTICOL> Column Width <MULTICOL WIDTH=?></MULTICOL> Spacer <SPACER> Spacer Type <SPACER TYPE=HORIZONTAL|VERTIC AL|BLOCK> Size <SPACER SIZE=?> Dimensions <SPACER WIDTH=? HEIGHT=?> Alignment <SPACER ALIGN=LEFT|RIGHT|CENTE R> Layer <LAYER></LAYER> Name <LAYER ID=“***”></LAYER> Location <LAYER LEFT=? TOP=?></LAYER> Rel. Position <LAYER PAGEX=? PAGEY=?></LAYER > Source File <LAYER SRC=“***”></LAYER> Stacking <LAYER Z-INDEX=?></LAYER> Stack Position <LAYER ABOVE=“***” BELOW=“***” ></LAYER> Dimensions <LAYER HEIGHT=? WIDTH=?></LAYE R> Clipping Path <LAYER CLIP=,,,></LAYER> Visible? <LAYER VISIBILITY=SHOW|HIDDEN| INHERIT></LAYER> Background <LAYER BACKGROUND=“$$$$$$”></L AYER> Color <LAYER BGCOLOR=“$$$$$$”></LAYE R> Inline Layer <ILAYER></ILAYER> (same attr ibutes as LAYER) Alt. Content <NOLAYER</NOLAYER>


Pg 15 of 77

Lists Unordered List <UL><LI></UL> (<LI> before e ach list item) Compact <UL COMPACT></UL> Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (fo r the whole list) <LI TYPE=DISC|CIRCLE|SQUARE> (th is & subsequent) Ordered List <OL><LI></OL> (<LI> befor e each list item) Compact <OL COMPACT></OL> Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list) <LI TYPE=A|a|I|i|1> (this & subsequent) Starting Number <OL START=?> (for the whole list) <LI VALUE=?> (this & subsequent) Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition) Compact <DL COMPACT></DL> Menu List <MENU><LI></MENU> (<LI> befor e each list item) Compact <MENU COMPACT></MENU> Directory List <DIR><LI></DIR> (<LI> befor e each list item) Compact <DIR COMPACT></DIR>


Pg 16 of 77

Forms Alignment <LEGEND ALIGN=“TOP|BOTTOM|LEFT|RI GHT”></LEGEND> Button <BUTTON></BUTTON> Button Name <BUTTON NAME=“***”></BUTTON> Button Type <BUTTON TYPE=“FILE|BUTTON|IMAGE|H IDDEN|SUBMIT|RESET”></BUTTON> Checked? <INPUT CHECKED> (checkboxes and radio boxes) Default Option <OPTION SELECTED> Default Value <BUTTON VALUE=“***”></BUTTON> Define Form <FORM ACTION=“URL” METHOD=GET|POS T></FORM> Field Name <INPUT NAME=“***”> Field Size <INPUT SIZE=?> (in characte rs) Field Value <INPUT VALUE=“***”> File Upload <FORM ENCTYPE=“multipart/form-dat a”></FORM> Group elements <FIELDSET></FIELDSET> Input Box Size <TEXTAREA ROWS=? COLS=?></TEXTARE A> Input Field <INPUT TYPE=“TEXT|PASSWORD|CHECKB OX|RADIO| Item Labeled <LABEL FOR=“***”></LABEL> Label <LABEL></LABEL> Legend <LEGEND></LEGEND> (caption fo r field sets) Max Length <INPUT MAXLENGTH=?> (in characte rs) Multiple Choice <SELECT MULTIPLE> (can select more than one) Name of Box <TEXTAREA NAME=“***”></TEXTAREA> Name of List <SELECT NAME=“***”></SELECT> Option <OPTION> (items that ca n be selected) Option Group <OPTGROUP LABEL=“***”></OPTGROUP> Option Value <OPTION VALUE=“***”> Selection List <SELECT></SELECT> Size #rows <SELECT SIZE=?></SELECT> Wrap Text <TEXTAREA WRAP=OFF|HARD|SOFT></TE XTAREA>

Get Method When you specify the method="GET" in your <form> tag, information is sent with key=value pairs of text or numbers. The first pair is precede d by the question mark “ ?” , subsequent pairs are preceded with the “ &” sign. These value pairs are sent right after the p age URL and are VISIBLE TO THE USER . Passwords and other secure information should NOT be sent this way. Without special security measures, the us er can cut and past the address line at the top of their browser and compromise the data or subroutine call. Certain Javascript calls have problems with POST, o therwise POST is preferred over GET calls. Forms do allow GET data to be assigned as a “hidden” data type. The data may also be sent as part of a link.

Example:

http://www.myweb.com/somedir/ prog.php ?var1=text1 &var2=to34 &var3=577 or <form name=”test_form” action=”prog.php” method=GET > <input type=”text” var1 =” Joe ” name=”fname”> <input type=”text” var2 =” Main ” name=”street”> <input type=”text” var3 =” 123 ” name=”address” <input type=”submit” value=”save”> </form>

The page receiving the value pairs must use a scrip ting language such as PHP or JAVASCRIPT to extract the data. The above example c ould be received by PHP with the following code….


Pg 17 of 77

<?php $first = $_GET[‘ var1 ’]; // $first would equal “Joe” $second = $_GET[‘ var2 ’]; // $second would equal “Main” $third = $_GET[‘ var3 ’]; // $third would equal “123” ?>

JavaScript allows access to the above html form var iables like this…

<script LANGUAGE=”javascript”> first = document.test_form.name // “first” wo uld equal “Joe” second = document.test_form.street // “second” w ould equal “Main” third = document.test_form.address // “third” wo uld equal “123” or first = document.test_form[0] // “first” wo uld equal “Joe” second = document.test_form[1] // “second” w ould equal “Main” third = document.test_form[2] // “third” wo uld equal “123” </script>

Post Method The post method sends your data to the server “behi nd the scenes” by putting it on what computer folks call standard input. Because the pur pose of POST is to keep the data hidden, it can not be include in the url address li ke the GET example above. You can only specify the method="POST" in your <form> tag. Form information is sent with key=value pairs HIDDEN TO THE USER, they are NOT visible on the address line . Passwords and other secure information SHOULD be sent this way. Certain Javascript calls have problems with POST, otherwise POST is preferred over GET calls.

The page receiving the value pairs must use a scrip ting language such as PHP or Javascript to extract the data. The above example c ould be received by PHP with the following code….

<?php $first = $_POST[‘ var1 ’]; // $first would equal “Joe” $second = $_POST[‘ var2 ’]; // $second would equal “Main” $third = $_POST[‘ var3 ’]; // $third would equal “123” ?>

JavaScript allows access to the form variables in t he same manner that we used for GET...

<script LANGUAGE=”javascript”> first = document.test_form.name // “first” wo uld equal “Joe” second = document.test_form.street // “second” w ould equal “Main” third = document.test_form.address // “third” wo uld equal “123” or first = document.test_form[0] // “first” wo uld equal “Joe” second = document.test_form[1] // “second” w ould equal “Main” third = document.test_form[2] // “third” wo uld equal “123” </script>


Pg 18 of 77

<Input...> <INPUT ...> creates most types of data entry fields on an HTML form,( <BUTTON ...>,<TEXTAREA ...>,<SELECT ...> also create some.) The TYPE attribute establishes what type of field the input is creating. The other <INPUT ...> attributes affect different types of inputs di fferent ways (or not at all). So let's jump straight into the TYPE attribute and look at t he different types of input fields.

<Input attribute...> ACCESSKEY: shortcut key

ALIGN: text flow around picture

ALT: text if no picture

AUTOCOMPLETE: If browser supports it

BORDER: border around image

CHECKED: checkbox/radio button

DISABLED: field grayed out, unchangeable

HEIGHT: height of image

HSPACE: horiz dist btw pict & text

LANGUAGE: script language to use

LOWSRC: alternate low res picture

MAXLENGTH: maximum num char NAME: name of field

READONLY: field cannot be changed

SIZE : width of text field

SRC: URL of image

TABINDEX: tab order

TYPE: type of field

VALUE: value of this field

VSPACE: vert dist btw pict & text

WIDTH: width of image

See also “events”, ie. Mouse & keyboard

text Creates a single-line text input control. password Like "text", but the input text is rendered in such a way as to hide the characters (e.g., a series

of asterisks). This control type is often used for sensitive input such as passwords. Note that the current value is the text entered by the user, not the text rendered by the user agent.

Note. Application using “password” only gives light security protection. Although the password is masked by user agents from casual observers, it is transmitted to the server in clear text, and may be read by anyone with low-level access to the network.

checkbox Creates a checkbox. radio Creates a radio button. submit Creates a submit button. image Creates a graphical submit button. The value of the src attribute specifies the URI of the image

that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternate approaches:

Use multiple submit buttons (each with its own image) in place of a single graphical submit button. Authors may use style sheets to control the positioning of these buttons.

Use a client-side image map together with scripting.

reset Creates a reset button. button Creates a push button. User agents should use the value of the value attribute as the button's

label. hidden Creates a hidden control.


Pg 19 of 77

file Creates a file select control. User agents may use the value of the value attribute as the initial file name.

<Button...> Note: You can have more than one submit button in a form by using different names or values.

<button type=“button” value=“pressed”>Click Me!</bu tton>

<input type=“submit” name=“Insert” value=“Insert”>

<form>

<input type

=“button” value=“CodingForums” onClick=“window.loca tion='http://www.codingforums.com” />

</form>

<input type=“button” value=“Click me!” onclick=“Jav aScript:alert('Thanks... I feel much better now!')” />

<input type=“submit” value=“Send me your name!”>

<BUTTON TYPE=SUBMIT><IMG SRC=“../graphics/test.gif” HEIGHT=97WIDTH=105 ALT=“Starflower” ALIGN=“ABSMIDDLE”><STRONG>Send It In!</STRONG></BUT TON>

Basic Form

<form name="input" action="process-form.php" method ="post"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> Checkbox

<form name="input" action="process-form.php" method ="post"> <input type="checkbox" name="vehicle" value="Bike " /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car<br /> <input type="submit" value="Submit" /> </form>


Pg 20 of 77

<Mouse & Keyboard Events>

Standard Attribute Value Description

accesskey character Specifies a keyboard shortcut to access an element

class classname Specifies a classname for an element

dir rtl ltr

Specifies the text direction for the content in an element

id id Specifies a unique id for an element

lang language_code Specifies a language code for the content in an ele ment

style style_definition Specifies an inline style for an element

tabindex number Specifies the tab order of an element

title text Specifies extra information about an element

xml:lang language_code Specifies a language code for the content in an ele ment, in XHTML documents

Optional Attribute Value Description

disabled disabled Specifies that a button should be disable d

name name Specifies the name for a button

type button reset submit

Specifies the type of a button

value text Specifies the underlying value of a button

Event Attribute Value Description

onblur script when element loses focus

onclick script on mouse click

ondblclick script on mouse double-click

onfocus script when element gets focus

onmousedown script when mouse button is pressed

onmousemove script when mouse pointer moves

onmouseout script when mouse pointer moves out of an element

onmouseover script when mouse pointer moves over an element

onmouseup script when mouse button is released

onkeydown script when key is pressed

onkeypress script when key is pressed and released

onkeyup script when key is released


Pg 21 of 77


Pg 22 of 77

Note: In the picture of the form, the indentation (margin offset) was done by inclosing the form elements in a blockquote, ie. <blockquote>…</blockquote>. Box Outline With Legend <fieldset><legend>Fieldset</legend> <input type="text" name="name1" size="20"><br /> <input type="text" name="age" size="5"><br /> </fieldset> Text <br> Optional description <input name="text_box" size="2 0" type="text"> Access key character <br /> <u>D</u>escription <input name="text_box" size="20" type="text" accesskey="d"> Password <br /> <input name="password" size="20" value="*********" type="password"> No Input <br /> Read only: <input type=text size=10 name="code" value="Pre set" readonly/><br/> Greyed out: <input type=text size=10 name="noinp ut" value="Dim text" disabled/> Radio Buttons <br /> <input name="radio_bt1" value="Good" type="radio" c hecked="checked"> I do not agree<br /> <input name="radio_bt2" value="OK" type="radio"> I may soon agree<br /> <input name="radio_bt3" value="Best" type="radio"> I want to agree<br /> <input name="radio_bt4" value="Best" type="radio"> I will never agree<br /> Radio Buttons In Table <br /> <table><tbody><tr><td> <input name="radio_bt1” value="01" type="radio"><fo nt size="4"><strong> one</strong></font><br /></td> <td> <input name="radio2_bt2" value="02" checked="checke d" type="radio"><font size="4"><strong> two</strong></font><br /></td></tr> <tr><td> <input name="radio_bt3" value="03" type="radio"><fo nt size="4"><strong> three</strong></font><br /></td> <td> <input name="radio_bt4" value="04" type="radio"><fo nt size="4"><strong> four</strong></font></td></tr> </tbody></table> Check Box <br /> <input name="check_box" value="box1" type="checkbox " checked="checked"> Gone With the Wind<br /> <input name="check_box" value="box2" type="checkbox "> Dr Zhivago<br /> <input name="check_box" value="box3" type="checkbox "> Ben Hur<br /> <input name="check_box" value="box4" type="checkbox " checked="checked"> The Rascals<br /> Textarea <br /> <textarea name="text_area" rows="7" cols="70"> ___ ____ ___ ____( \ .-' `-. / )___ _ (____ \___ / (O O) \ ___/ ___ _) (____ `----( ) )----' __ __) (____ __________\ .____. /__________ ___ _) (______/ `-.____.-' \______) Text areas are unformatted! </textarea> Pull Down List <br /> <select name="animal">

Pg 23 of 77

<option value="down1" selected="yes">Lion</option >  <option value="down2">Giraffe</option> <option value="down3">Tigers</option> <option value="down4">Coyote</option> <option value="down5">Bears</option> <option value="down6">Horse</option> </select> Option Groups <br /> <select name="Choices"> <optgroup label="Level 1"> <option value="1a">Choice 1a</option> <option value="1b">Choice 1b</option> <option value="1c">Choice 1c</option> </optgroup> <optgroup label="Level 2"> <option value="2a">Choice 2a</option> <option value="2b">Choice 2b</option> <option value="2c">Choice 2c</option> </optgroup> <optgroup label="Level3"> <option value="3a">Choice 3a</option> <option value="3b">Choice 3b</option> </optgroup> </select> Scrolling List <br /> <select name="scroll_list" size="5"> <option value="list1">Old</option> <option value="list2">Mc Donald</option> <option value="list3">Had</option> <option value="list4">a</option> <option value="list5">very</option> <option value="list6">large</option> <option value="list7">form</option> <option value="list8">over</option> <option value="list9">there!</option> </select> Button <br /> <button type="submit" name="b1" value="bt_01" class ="btn">Button text<br/>that's formatted</button> File brouser <br /> Choose file: <input type="file" name="photo" size=" 40"> Hidden <br /> <input name="hidden" value="Yes there really is hid den information here" type="hidden"> <font color="#bfbfbf">Yes, you can have hidden info rmation</font> Submit & Reset <br /> <input value="Submit" type="submit"> <input value="Reset" type="reset"> Image action <br /> <input type=image name="navbar" src="Imagemap.gif" />


Pg 24 of 77

Tables Define Table <TABLE></TABLE> Table Alignment <TABLE ALIGN=LEFT|RIGHT|CENTER> Table Border <TABLE BORDER></TABLE> (either on or off) Table Border <TABLE BORDER=?></TABLE> (you ca n set the value) Cell Spacing <TABLE CELLSPACING=?> Cell Padding <TABLE CELLPADDING=?> Desired Width <TABLE WIDTH=?> (in pix els) Width Percent <TABLE WIDTH=%> (percen tage of page) Table Color <TABLE BGCOLOR=“$$$$$$”></TABLE> Table Frame <TABLE FRAME=VOID|ABOVE|BELOW|HSI DES|LHS|RHS| VSIDES|BOX|BORDER></TABLE> Table Rules <TABLE RULES=NONE|GROUPS|ROWS|COL S|ALL></TABLE> Border Color <TABLE BORDERCOLOR=“$$$$$$”></TAB LE> Dark Border <TABLE BORDERCOLORDARK=“$$$$$$”>< /TABLE> Light Border <TABLE BORDERCOLORLIGHT=“$$$$$$”> </TABLE> Table Row <TR></TR> Alignment <TR ALIGN=LEFT|RIGHT|CENTER VALIG N=TOP|MIDDLE|BOTTOM> Table Cell <TD></TD> (must appear w ithin table rows) Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIG N=TOP|MIDDLE|BOTTOM> No linebreaks <TD NOWRAP> Columns to Span <TD COLSPAN=?> Rows to Span <TD ROWSPAN=?> Desired Width <TD WIDTH=?> (in pixels) Width Percent <TD WIDTH=“%”> (percentage of table) Cell Color <TD BGCOLOR=“#$$$$$$”> Header Cell <TH></TH> (same as data, exce pt bold centered) Alignment <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> No Linebreaks <TH NOWRAP> Columns to Span <TH COLSPAN=?> Rows to Span <TH ROWSPAN=?> Desired Width <TH WIDTH=?> (in pixels) Width Percent <TH WIDTH=“%”> (percentage of table) Cell Color <TH BGCOLOR=“#$$$$$$”> Table Body <TBODY> Table Footer <TFOOT></TFOOT> (must come before THEAD> Table Header <THEAD></THEAD> Table Caption <CAPTION></CAPTION> Alignment <CAPTION ALIGN=TOP|BOTTOM|LEFT|RI GHT> Column <COL></COL> (groups column attributes) Columns Spanned <COL SPAN=?></COL> Column Width <COL WIDTH=?></COL> Width Percent <COL WIDTH=“%”></COL> Group columns <COLGROUP></COLGROUP> (groups c olumn structure) Columns Spanned <COLGROUP SPAN=?></COLGROUP> Group Width <COLGROUP WIDTH=?></COLGROUP> Width Percent <COLGROUP WIDTH=“%”></COLGROUP>

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

by Jan Zumwalt

Pg 25 of 77 June 20, 2012 Copyright © 2005-2012


Pg 26 of 77

Table Examples

Single line <body> <table style="border:1px solid #000000;" cellpadd ing="2" cellspacing="0"> <tr> <td style="border:1px solid #000000;">Hello</ td> <td style="border:1px solid #000000;">World</ td> </tr> <tr> <td style="border:1px solid #000000;">I'm</td > <td style="border:1px solid #000000;">here</t d> </tr> </table> </body> </html>

Merged columns

<TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER>My friends</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE>

Custom size and format

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12 WIDTH=100 HEIGHT=75 align=center> <TR> <TD>Ed</TD> <TD>Thomas</TD> <TD>Rick</TD> </TR> <TR align=center > <TD>Mo</TD> <TD>Larry</TD> <TD>Curly</TD> </TR>

My friends

Larry Curly Mo


Pg 27 of 77

</TABLE>


Pg 28 of 77

CSS Tables border-style values:

none: Defines no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders are the same as the border-width value

groove: Defines a 3D grooved border. The effect depends on the border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color value

inset: Defines a 3D inset border. The effect depends on the border-color value

outset: Defines a 3D outset border. The effect depends on the border-color value

<table border="1" cellpadding="5" cellspacing="5" w idth="100%"

style="background-color:yellow;border:3px dashed black;" >

<tr>

<th style="text-align:left">Table header</th>

<th style="text-align:left">Table header</th>

</tr>

<tr>

<td width="20%">Table cell 1</td><td>Table cell 2</ td>

</tr>

</table>


Pg 29 of 77

Colored Table Schemes


Pg 30 of 77

<style type="text/css"> /* Note: IE9 currently does not support thes CS S color style, you must */ /* insert the colors into each individula <tr> or <td> tag. */ body font-size : 12 pt; font-family : arial; color : #fff; /* white font c olor */ background-color : #666; line-height : 12 pt; margin : 100 px; /* yellow1 table style */ table.yellow1 border-c ollapse: collapse; /* no border */ table.yellow1 th backgrou nd-color: #e0d000; /* header color */ table.yellow1 tr:nth-of-type(even) backgrou nd-color: #e5d590; /* 1st data row */ table.yellow1 tr:nth-of-type(odd) backgrou nd-color: #d0d090; /* 2nd data row */ table.yellow1 td:nth-of-type(+1) backgrou nd-color: #d0d060; /* 1st column */ /* yellow2 table style */ table.yellow2 border-c ollapse: collapse; /* no border */ table.yellow2 th backgrou nd-color: #d92; /* header color */ table.yellow2 tr:nth-of-type(even) backgrou nd-color: #eb4; /* 1st data row */ table.yellow2 tr:nth-of-type(odd) backgrou nd-color: #ea2; /* 2nd data row */ table.yellow2 td:nth-of-type(+1) backgrou nd-color: #da0; /* 1st column */ /* yellow3 table style */ table.yellow3 border-c ollapse: collapse; /* no border */ table.yellow3 th backgrou nd-color: #940; /* header color */ table.yellow3 tr:nth-of-type(even) backgrou nd-color: #962; /* 1st data row */ table.yellow3 tr:nth-of-type(odd) backgrou nd-color: #953; /* 2nd data row */ table.yellow3 td:nth-of-type(+1) backgrou nd-color: #a60; /* 1st column */ /* red1 table style */ table.red1 border-c ollapse: collapse; /* no border */ table.red1 th backgrou nd-color: #e00; /* header color */ table.red1 tr:nth-of-type(even) backgrou nd-color: #fa9; /* 1st data row */ table.red1 tr:nth-of-type(odd) backgrou nd-color: #f87; /* 2nd data row */ table.red1 td:nth-of-type(+1) backgrou nd-color: #e54; /* 1st column */ /* red2 table style */ table.red2 border-c ollapse: collapse; /* no border */ table.red2 th backgrou nd-color: #a00; /* header color */ table.red2 tr:nth-of-type(even) backgrou nd-color: #a88; /* 1st data row */ table.red2 tr:nth-of-type(odd) backgrou nd-color: #a66; /* 2nd data row */ table.red2 td:nth-of-type(+1) backgrou nd-color: #a53; /* 1st column */ /* red3 table style */ table.red3 border-c ollapse: collapse; /* no border */ table.red3 th backgrou nd-color: #700; /* header color */ table.red3 tr:nth-of-type(even) backgrou nd-color: #963; /* 1st data row */ table.red3 tr:nth-of-type(odd) backgrou nd-color: #943; /* 2nd data row */ table.red3 td:nth-of-type(+1) backgrou nd-color: #732; /* 1st column */ /* green1 table style */ table.green1 border-c ollapse: collapse; /* no border */ table.green1 th backgrou nd-color: #0c0; /* header color */ table.green1 tr:nth-of-type(even) backgrou nd-color: #9c6; /* 1st data row */ table.green1 tr:nth-of-type(odd) backgrou nd-color: #6c6; /* 2nd data row */ table.green1 td:nth-of-type(+1) backgrou nd-color: #3b3; /* 1st column */ /* green2 table style */ table.green2 border-c ollapse: collapse; /* no border */ table.green2 th backgrou nd-color: #292; /* header color */ table.green2 tr:nth-of-type(even) backgrou nd-color: #8a6; /* 1st data row */ table.green2 tr:nth-of-type(odd) backgrou nd-color: #596; /* 2nd data row */ table.green2 td:nth-of-type(+1) backgrou nd-color: #494; /* 1st column */ /* green3 table style */ table.green3 border-c ollapse: collapse; /* no border */


Pg 31 of 77

table.green3 th backgrou nd-color: #040; /* header color */ table.green3 tr:nth-of-type(even) backgrou nd-color: #684; /* 1st data row */ table.green3 tr:nth-of-type(odd) backgrou nd-color: #474; /* 2nd data row */ table.green3 td:nth-of-type(+1) backgrou nd-color: #263; /* 1st column */ /* blue1 table style */ table.blue1 border-co llapse: collapse; /* no border */ table.blue1 th backgroun d-color: #09e; /* header color */ table.blue1 tr:nth-of-type(even) backgroun d-color: #9be; /* 1st data row */ table.blue1 tr:nth-of-type(odd) backgroun d-color: #6af; /* 2nd data row */ table.blue1 td:nth-of-type(+1) backgroun d-color: #4ae; /* 1st column */ /* blue2 table style */ table.blue2 border-co llapse: collapse; /* no border */ table.blue2 th backgroun d-color: #00e; /* header color */ table.blue2 tr:nth-of-type(even) backgroun d-color: #89e; /* 1st data row */ table.blue2 tr:nth-of-type(odd) backgroun d-color: #77e; /* 2nd data row */ table.blue2 td:nth-of-type(+1) backgroun d-color: #35e; /* 1st column */ /* blue3 table style */ table.blue3 border-co llapse: collapse; /* no border */ table.blue3 th backgroun d-color: #006; /* header color */ table.blue3 tr:nth-of-type(even) backgroun d-color: #86a; /* 1st data row */ table.blue3 tr:nth-of-type(odd) backgroun d-color: #66a; /* 2nd data row */ table.blue3 td:nth-of-type(+1) backgroun d-color: #339; /* 1st column */ /* grey1 table style */ table.grey1 border-co llapse: collapse; /* no border */ table.grey1 th backgroun d-color: #c0c0d0; /* header color */ table.grey1 tr:nth-of-type(even) backgroun d-color: #dddddd; /* 1st data row */ table.grey1 tr:nth-of-type(odd) backgroun d-color: #cfd6de; /* 2nd data row */ table.grey1 td:nth-of-type(+1) backgroun d-color: #d0d0d0; /* 1st column */ /* grey2 table style */ table.grey2 border-co llapse: collapse; /* no border */ table.grey2 th backgroun d-color: #a0a0a0; /* header color */ table.grey2 tr:nth-of-type(even) backgroun d-color: #b0b0c0; /* 1st data row */ table.grey2 tr:nth-of-type(odd) backgroun d-color: #c0c0c8; /* 2nd data row */ table.grey2 td:nth-of-type(+1) backgroun d-color: #b0b0b0; /* 1st column */ /* grey3 table style */ table.grey3 border-co llapse: collapse; /* no border */ table.grey3 th backgroun d-color: #808080; /* header color */ table.grey3 tr:nth-of-type(even) backgroun d-color: #8890a0; /* 1st data row */ table.grey3 tr:nth-of-type(odd) backgroun d-color: #a0a0a8; /* 2nd data row */ table.grey3 td:nth-of-type(+1) backgroun d-color: #909090; /* 1st column */ /* grey4 table style */ table.grey4 border-co llapse: collapse; /* no border */ table.grey4 th backgroun d-color: #505050; /* header color */ table.grey4 tr:nth-of-type(even) backgroun d-color: #6a6a78; /* 1st data row */ table.grey4 tr:nth-of-type(odd) backgroun d-color: #808088; /* 2nd data row */ table.grey4 td:nth-of-type(+1) backgroun d-color: #606060; /* 1st column */ /* grey5 table style */ table.grey5 border-co llapse: collapse; /* no border */ table.grey5 th backgroun d-color: #222; /* header color */ table.grey5 tr:nth-of-type(even) backgroun d-color: #555; /* 1st data row */ table.grey5 tr:nth-of-type(odd) backgroun d-color: #445; /* 2nd data row */ table.grey5 td:nth-of-type(+1) backgroun d-color: #333; /* 1st column */ /* grey6 table style */ table.grey6 border-co llapse: collapse; /* no border */ table.grey6 th backgroun d-color: #000; /* header color */ table.grey6 tr:nth-of-type(even) backgroun d-color: #445; /* 1st data row */ table.grey6 tr:nth-of-type(odd) backgroun d-color: #334; /* 2nd data row */ table.grey6 td:nth-of-type(+1) backgroun d-color: #223; /* 1st column */ /* border1 - 1px table borders */ table.border1 border-collapse: collapse; /* no cell spacing */ table.border1 td, th border: 1px #000 solid ; /* border color */ /* rounded corners, works w/all browsers */ .box


Pg 32 of 77

color: #aef; padding: 20px; font-size: 125%; font-family: arial; width: 200px; background-color: #aaa; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; </style>


Pg 33 of 77

All CSS Border Properties

Property Description Values CSS

border Sets all the border properties in one declaration border-width

border-style border-color

1

border-bottom Sets all the bottom border properties in one

declaration

border-bottom-width

border-bottom-style border-bottom-color

1

border-bottom-color Sets the color of the bottom border border-color 2

border-bottom-style Sets the style of the bottom border border-style 2

border-bottom-width Sets the width of the bottom border border-width 1

border-color Sets the color of the four borders color_name

hex_number rgb_number

transparent

inherit

1

border-left Sets all the left border properties in one

declaration

border-left-width

border-left-style

border-left-color

1

border-left-color Sets the color of the left border border-color 2

border-left-style Sets the style of the left border border-style 2

border-left-width Sets the width of the left border border-width 1

border-right Sets all the right border properties in one

declaration

border-right-width

border-right-style

border-right-color

1

border-right-color Sets the color of the right border border-color 2

border-right-style Sets the style of the right border border-style 2

border-right-width Sets the width of the right border border-width 1

border-style Sets the style of the four borders none hidden

dotted

dashed

solid double

groove

ridge inset

outset

inherit

1

border-top Sets all the top border properties in one

declaration

border-top-width

border-top-style

border-top-color

1

border-top-color Sets the color of the top border border-color 2

border-top-style Sets the style of the top border border-style 2

border-top-width Sets the width of the top border border-width 1

border-width Sets the width of the four borders thin

medium

thick

length inherit

1

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).


Pg 34 of 77

Frames Frame Document <FRAMESET></FRAMESET> (instead of <BODY>) Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %) Row Heights <FRAMESET ROWS=*></FRAMESET> (* = relative size) Column Widths <FRAMESET COLS=,,,></FRAMESET> (pixels or %) Column Widths <FRAMESET COLS=*></FRAMESET> (* = relative size) Borders <FRAMESET FRAMEBORDER=“yes|no”></ FRAMESET> Border Width <FRAMESET BORDER=?></FRAMESET> Border Color <FRAMESET BORDERCOLOR=“#$$$$$$”>< /FRAMESET> Frame Spacing <FRAMESET FRAMESPACING=?></FRAMES ET> Define Frame <FRAME> (contents of an individual frame) Display Document<FRAME SRC=“URL”> Frame Name <FRAME NAME=“***”|_blank|_self|_p arent|_top> Margin Width <FRAME MARGINWIDTH=?> (left an d right margins) Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins) Scrollbar? <FRAME SCROLLING=“YES|NO|AUTO”> Not Resizable <FRAME NORESIZE> Borders <FRAME FRAMEBORDER=“yes|no”> Border Color <FRAME BORDERCOLOR=“#$$$$$$”> Unframed Content <NOFRAMES></NOFRAMES> (for non-frames browsers) Inline Frame <IFRAME></IFRAME> (takes same attributes as FRAME) Dimensions <IFRAME WIDTH=? HEIGHT=?></IFRAME > Dimensions <IFRAME WIDTH=“%” HEIGHT=“%”></IF RAME>

Scripts Script <SCRIPT></SCRIPT> Location <SCRIPT SRC=“URL”></SCRIPT> Type <SCRIPT TYPE=“***”></SCRIPT> Language <SCRIPT LANGUAGE=“***”></SCRIPT> Other Content <NOSCRIPT></NOSCRIPT> (if scripts not supported) Applet <APPLET></APPLET> File Name <APPLET CODE=“***”> Parameters <APPLET PARAM NAME=“***”> Location <APPLET CODEBASE=“URL”> Identifier <APPLET NAME=“***”> (for ref erences) Alt Text <APPLET ALT=“***”> (for no n-Java browsers) Alignment <APPLET ALIGN=“LEFT|RIGHT|CENTER”> Size <APPLET WIDTH=? HEIGHT=?> (in pix els) Spacing <APPLET HSPACE=? VSPACE=?> (in pix els) Server Script <SERVER></SERVER> Examples

<?php ... ?> <script language = ”javascript”>…</script> <script type = ”text/javascript”>…</script> <script type = "text/vbscript" src="http://sample.c om/vbcalc"></script>


Pg 35 of 77

HTML 5 Features We will cover the new semantic markup, canvas for drawing and animation, audio and video support, and how to use HTML5 with older browsers. New Markup Elements

New elements for better structure:

Tag Description

<article> Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.

<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content

<bdi> For text that should not be bound to the text-direction of its parent elements

<command> A button, or a radiobutton, or a checkbox

<details> For describing details about a document, or parts of a document

<summary> A caption, or summary, inside the details element

<figure> For grouping a section of stand-alone content, could be a video

<figcaption> The caption of the figure section

<footer> For a footer of a document or section, could include the name of the author, the date of

the document, contact information, or copyright information

<header> For an introduction of a document or section, could include navigation

<hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of

the section, and the others are sub-headings

<mark> For text that should be highlighted

<meter> For a measurement, used only if the maximum and minimum values are known

<nav> For a section of navigation

<progress> The state of a work in progress

<ruby> For ruby annotation (Chinese notes or characters)

<rt> For explanation of the ruby annotation

<rp> What to show browsers that do not support the ruby element

<section> For a section in a document. Such as chapters, headers, footers, or any other sections of

the document

<time> For defining a time or a date, or both

<wbr> Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag Description

<audio> For multimedia content, sounds, music or other audio streams

<video> For video content, such as a movie clip or other video streams

<source> For media resources for media elements, defined inside video or audio elements

<embed> For embedded content, such as a plug-in


Pg 36 of 77

<track> For text tracks used in mediaplayers

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag Description

<canvas> For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag Description

<datalist> A list of options for input values

<keygen> Generate keys to authenticate users

<output> For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element's type attribute has many new values, for better input control before sending it to the server:

Type Description

tel The input value is of type telephone number

search The input field is a search field

url The input value is a URL

email The input value is one or more email addresses

datetime The input value is a date and/or time

date The input value is a date

month The input value is a month

week The input value is a week

time The input value is of type time

datetime-local The input value is a local date/time

number The input value is a number

range The input value is a number in a given range

color The input value is a hexadecimal color, like #FF8800

placeholder Specifies a short hint that describes the expected value of an input field

Semantic Markup and Page Layout Semantic elements describe their meaning or purpose clearly to the browser and to the developer. Contrast that with (for example) the <div> tag. The <div> tag defines a division or a section in an HTML document, but it doesn’t tell us anything about its content or convey any clear meaning. <div> Developers commonly use IDs and/or class names with these <div> tags. This conveys more meaning to the developers, but unfortunately, it doesn’t help browsers derive the purpose of that markup. <div id="header">


Pg 37 of 77

In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers and browsers. Here are a few of the new semantic elements in HTML5:

article aside figcaption figure footer header hgroup mark nav section time

Now, imagine this in the hands of someone good at C SS (which I am not). <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Title</title> <link href="css/html5reset.css" rel="stylesheet " /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header> <hgroup> <h1>Header in h1</h1> <h2>Subheader in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. This is <mark>highlighted</mark>. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. These articles could be blog posts, etc. </section> </article> </section> <aside> <section> <h1>Links</h1> <ul>


Pg 38 of 77

<li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> <figure> <img width="85" height="85" src="http://www.windowsdevbootcamp. com/Images/JennMar.jpg" alt="Jennifer Marsman" /> <figcaption>Jennifer Marsman</figcaptio n> </figure> </aside> <footer>Footer - Copyright 2011</footer> </body> </html>

Drawing in HTML5 using Canvas element

Another new element in HTML5 is the <canvas> tag. It’s just what it sounds like——a blank surface for drawing. You need to use JavaScript to manipulate and draw on the canvas.

You may want to give your canvas element an id attribute so you can programmatically access it from your JavaScript code (or if you’re using jQuery and it’s the only canvas on the page, you could access it using $(‘canvas’) without needing to name it).

You can also (optionally) specify a height and a width for the canvas. Between the <canvas> and </canvas>, you can specify some text to display in browsers that don’t support the canvas element.

Here is a simple example of using the canvas to draw. (I’m attempting to draw the flag of Scotland. Please forgive any inaccuracies.)

<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">Your browser does not sup port the canvas tag.</canvas> <script type="text/javascript"> var canvas = document.getElementById('myCan vas'); var ctx = canvas.getContext('2d'); // Draw blue rectangle ctx.fillStyle = '#0065BD'; ctx.fillRect(0, 0, 125, 75); // Draw white X ctx.beginPath(); ctx.lineWidth = "15"; ctx.strokeStyle = "white"; ctx.moveTo(0, 0); ctx.lineTo(125, 75); ctx.moveTo(125, 0); ctx.lineTo(0, 75); ctx.stroke(); </script> </body> </html> Here’s what the code produces:


Pg 39 of 77

Now let’s walk through the code.

First, I create the actual canvas and give it an ID of “myCanvas”. If this code were viewed in a browser that doesn’t support the HTML5 canvas element, it would display “Your browser does not support the canvas tag” instead of drawing the flag.

Next, I have a script. Remember, the canvas tag is only a container for graphics; you must use JavaScript to actually draw and render graphics on it. First, I grab a reference to the canvas using the “myCanvas” ID, and then get the canvas’s context which provides methods/properties for drawing and manipulating graphics on the canvas. I specified “2d” to use a 2-dimensional context to draw on the page.

Then, I draw the blue rectangle. I use fillStyle to specify the blue color. I use fillRect to draw the rectangle, specifying the size and position. Calling fillRect(0, 0, 125, 75) means: starting at position (0, 0)——the upper left-hand corner——draw a rectangle with width=125 pixels and height=75 pixels.

Finally, I draw the white X on the flag. I first call beginPath to start the process of painting a path. I specify a lineWidth of 15 pixels (using the guess-and-check method of trying different values until it looked correct) and a strokeStyle of “white” to make the path’s color white. Then I trace out the path using moveTo and lineTo. These methods position a “cursor” for you to draw; the difference is that moveTo moves the cursor without drawing a line and lineTo draws a line while moving. I start by moving to position (0, 0)——the upper left-hand corner——and then drawing a line to (125, 75)——the lower right-hand corner. Then I move to position (125, 0)——the upper right-hand corner——and draw a line to (0, 75)——the lower left-hand corner. Finally, the stroke method actually renders these strokes.

Audio and Video Support

One of the big features that is new in HTML5 is the ability to support playing audio and videos. Prior to HTML5, you needed a plug-in like Silverlight or Flash for this functionality. In HTML5, you can embed audio and video using the new <audio> and <video> tags.

From a coding perspective, the audio and video elements are very simple to use. (I’ll give you a more in-depth look at their attributes below.) The audio and video elements are also supported in all major browsers (the latest versions of Internet Explorer, Firefox, Chrome, Opera, and Safari). However, the tricky part is that you need codecs to play audio and video, and different browsers support different codecs.

Fortunately, this isn’t a show-stopper. The support for audio and video was implemented in a brilliant way, where there is support to try several different file formats (the browser will try each and then drop down to the next one if it can’t play it). As a best practice, you should provide multiple sources of audio and video to accommodate different browsers. You can also fallback to Silverlight or Flash. Finally, any text between the opening and closing tags (such as <audio> and </audio>) will be displayed in browsers that do not support the audio or video element.

For example:

<audio controls="controls"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element . </audio>


With this code, the browser will first try to play the laughter.mp3 file. If it it will next try to play the laughter.ogg file. If the audio element is not recognized at all by the browser, it will display the text “Your browser does not support the audio element” where the audio control shou

One caveat to audio and video: there is no builtimplement this yourself as the developer. See need for DRM content, also check out the

Audio

First, let’s look at <audio> in more detail.

<audio controls="controls"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element.</audio>

We already discussed the fallback effect of trying each source until it hopefully finds one that can be played.

Note that there is a controls attribute. This will display audio playback controtime, a mute button, and volume controls. In most situations, it’s good to display audio controls to the user; I hate visiting a website with sound and being unable to stop it, mute it, or turn it down. Don’t you?

Here’s what the audio controls look like in Internet Explorer:

The controls look different in different browsers. Here are what they look like in Chrome (with a song playing). The drop-down volume pops down when you hover over the sound icon on the far rig

Here are the controls in Firefox (with a song paused). Like Chrome, it also has a popshown) when you hover over the sound icon on the far right.

Other fun attributes on the audio element include:

Attribute Possible Values

Description

autoplay autoplay Starts the audio playing as soon as it’s ready controls controls Displays audio playback controls on the page loop loop Causes audio to repeat and play again every time it finishes

preload auto, metadata,

Determines whether to load the audio when the page is loaded. The value auto will load the audio, metadata will l oad only

by Jan Zumwalt

Pg 40 of 77

With this code, the browser will first try to play the laughter.mp3 file. If it does not have the right codecs to play it, it will next try to play the laughter.ogg file. If the audio element is not recognized at all by the browser, it will display the text “Your browser does not support the audio element” where the audio control shou

One caveat to audio and video: there is no built-in digital rights management (DRM) support; you have to implement this yourself as the developer. See this link from the W3C which explains their position. (If you have a need for DRM content, also check out the Silverlight DRM documentation, which might be an easier solution.)

First, let’s look at <audio> in more detail.

<source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element.


Note that there is a controls attribute. This will display audio playback controls including a play/pause button, the time, a mute button, and volume controls. In most situations, it’s good to display audio controls to the user; I hate visiting a website with sound and being unable to stop it, mute it, or turn it down. Don’t you?

e’s what the audio controls look like in Internet Explorer:

The controls look different in different browsers. Here are what they look like in Chrome (with a song playing). down volume pops down when you hover over the sound icon on the far rig

Here are the controls in Firefox (with a song paused). Like Chrome, it also has a popshown) when you hover over the sound icon on the far right.

Other fun attributes on the audio element include:

Description

Starts the audio playing as soon as it’s ready Displays audio playback controls on the page Causes audio to repeat and play again every time it finishes Determines whether to load the audio when the page is loaded. The value auto will load the audio, metadata will l oad only

June 20, 2012 Copyright © 2005-2012

does not have the right codecs to play it, it will next try to play the laughter.ogg file. If the audio element is not recognized at all by the browser, it will display the text “Your browser does not support the audio element” where the audio control should be.

in digital rights management (DRM) support; you have to from the W3C which explains their position. (If you have a

ght be an easier solution.)


ls including a play/pause button, the time, a mute button, and volume controls. In most situations, it’s good to display audio controls to the user; I hate visiting a website with sound and being unable to stop it, mute it, or turn it down. Don’t you?

The controls look different in different browsers. Here are what they look like in Chrome (with a song playing). down volume pops down when you hover over the sound icon on the far right.

Here are the controls in Firefox (with a song paused). Like Chrome, it also has a pop-up volume control (not

Starts the audio playing as soon as it’s ready Displays audio playback controls on the page Causes audio to repeat and play again every time it finishes Determines whether to load the audio when the page is loaded. The value auto will load the audio, metadata will l oad only



Description

none metadata associated with the audio file, and none w ill not preload audio. (This attribute will be ignored if a utoplay is specifi

src (some URL) Specifies the URL of the audio file to play

So this code sample would not only display audio playback controls, but also start the audio playing immediately and repeat it over and over in a loop.

<audio controls="controls" autoplay="autoplay" loop="loop"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element.</audio>

If you’d like to play around with the <audio> element yourshttp://w3schools.com that allows you to edit some sample code and see what happens. Or try the an HTML5 audio player to your site

Video Now, let’s examine the <video> element.

Collapse | Copy Code <video width="320" height="240" contr <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag.</video>

As we discussed above, the video element has support for multiple sources, which it will try in order and then fall down to the next option.

Like audio, video has a controls attribute. Here is a screenshot of the video controls in Internet Explorer:

Other fun attributes of the video element include:


Description

audio muted Sets the default state of the audio (currently, “muted” is the only option) autoplay autoplay Starts the video playing as soon as it’s ready controls controls Displays video playback controls on the page height (value in Sets the height of the video player

by Jan Zumwalt

Pg 41 of 77

Description

metadata associated with the audio file, and none w ill not preload audio. (This attribute will be ignored if a utoplay is specifi ed.) Specifies the URL of the audio file to play

So this code sample would not only display audio playback controls, but also start the audio playing immediately and repeat it over and over in a loop.

autoplay="autoplay" loop="loop"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element.

If you’d like to play around with the <audio> element yourself in your browser, there is a great “Tryit Editor” on that allows you to edit some sample code and see what happens. Or try the

article.

Now, let’s examine the <video> element.

<video width="320" height="240" contr ols="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag.

As we discussed above, the video element has support for multiple sources, which it will try in order and then


her fun attributes of the video element include:

Description

Sets the default state of the audio (currently, “muted” is the only option) Starts the video playing as soon as it’s ready Displays video playback controls on the page Sets the height of the video player

June 20, 2012 Copyright © 2005-2012

metadata associated with the audio file, and none w ill not preload audio. (This attribute will be ignored if a utoplay is

Specifies the URL of the audio file to play

So this code sample would not only display audio playback controls, but also start the audio playing immediately

elf in your browser, there is a great “Tryit Editor” on that allows you to edit some sample code and see what happens. Or try the How to add

As we discussed above, the video element has support for multiple sources, which it will try in order and then


Sets the default state of the audio (currently, “muted” is the only option)


Pg 42 of 77

Attribute Possible Values Description

pixels) loop loop Causes video to repeat and play again every time it finishes poster (some URL) Specifies the URL of an image to represent the video when no video data is available

preload auto, metadata, none

Determines whether to load the video when the page is loaded. The value auto will load the video, metadata will load only metadata associated with the video file, and none will not preload video. (This attribute will be ignored if autoplay is specified.)

src (some URL) Specifies the URL of the video file to play

width (value in pixels)

Sets the width of the video player

Support for older browsers

We’ve discussed a lot of cool new functionality in HTML5, including the new semantic elements, the canvas tag for drawing, and the audio and video support.

You may think that this stuff is really cool, but you can’t possibly adopt HTML5 when many of your users don’t have HTML5-compatible browsers yet. Not to mention that the browsers that DO support HTML5 support different pieces of it; not all of the new HTML5 functionality is supported in all browsers and various features may be implemented differently.

But there is a way to use the new features without breaking your site for users with older browsers. You can use polyfills.

According to Paul Irish, a polyfill is “a shim that mimics a future API, providing fallback functionality to older browsers.” A polyfill fills in the gaps in older browsers that don’t support the HTML5 functionality in your site. Learning to use polyfills will let you use HTML5 today without leaving behind users of older browsers.

One way to get polyfill support is the JavaScript library Modernizr (but there are many polyfills available). Modernizr adds feature detection capability so you can check specifically for whether a browser supports (for example) the canvas element and provide a backup option if it doesn’t.

Let’s walk through an example. Remember the code sample that I used when introducing semantic elements and page layout?

We can use the Internet Explorer developer tools to see what this would look like in older versions of IE. In Internet Explorer, press F12 to access the developer tools.

Note that the Browser Mode (in the grey menu bar across the top) is currently set to IE9. Click on the Browser Mode, and from the resulting dropdown menu, select “Internet Explorer 8” (which does not have HTML5 support).


After I make this change and switch to a non

Although this looks like a monster problem to fix, it’s not actually that bad. The reason that this doesn’t work is that IE8 doesn’t recognize the new HTML5 elements that I’m usingcan’t style them using CSS.

However, just adding a reference to Modernizr (without making any other code changes!) will bruteelements into the DOM. Download it from <head> section like so:

<head> <meta charset="utf-8" /> <title>Title</title> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel=" <script src="script/jquery <script src="script/modernizr</head>

I added two script references, one to jQuery and one to Modernizr. I don’t actthis point, but we will need it for the next script, so I’m adding it now.

Just this simple change now gets my site to this state in Internet Explorer 8:

It’s not perfect, but that is pretty close to the original versthese new HTML5 elements that IE8 didn’t understand into the DOM, and since they were in the DOM, we could style them using CSS.

by Jan Zumwalt

Pg 43 of 77

tch to a non-HTML5-compatible browser, this is what my webpage looks like:

Although this looks like a monster problem to fix, it’s not actually that bad. The reason that this doesn’t work is that IE8 doesn’t recognize the new HTML5 elements that I’m using, so it doesn’t add them to the DOM, so you

However, just adding a reference to Modernizr (without making any other code changes!) will bruteelements into the DOM. Download it from http://www.modernizr.com/download/ and add a reference in the

<link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel=" stylesheet" /> <script src="script/jquery - 1.6.2.min.js" type="text/javascript"></script><script src="script/modernizr - 2.0.6.js" type="text/javascript"></script>

I added two script references, one to jQuery and one to Modernizr. I don’t actually need the jQuery reference at this point, but we will need it for the next script, so I’m adding it now.

Just this simple change now gets my site to this state in Internet Explorer 8:

It’s not perfect, but that is pretty close to the original version that we see in Internet Explorer 9. Modernizr added these new HTML5 elements that IE8 didn’t understand into the DOM, and since they were in the DOM, we could

June 20, 2012 Copyright © 2005-2012

compatible browser, this is what my webpage looks like:

Although this looks like a monster problem to fix, it’s not actually that bad. The reason that this doesn’t work is , so it doesn’t add them to the DOM, so you

However, just adding a reference to Modernizr (without making any other code changes!) will brute-force these and add a reference in the

1.6.2.min.js" type="text/javascript"></script> 2.0.6.js" type="text/javascript"></script>

ually need the jQuery reference at

ion that we see in Internet Explorer 9. Modernizr added these new HTML5 elements that IE8 didn’t understand into the DOM, and since they were in the DOM, we could


But Modernizr does more than that! Notice that one of the differences webpage is that the IE9 version has nice rounded corners on the two articles and the figure, and the IE8 version doesn’t. We can also use Modernizr to fix this.

<script type="text/javascript"> if (!Moder nizr.borderradius) $.getScript("script/jquery.corner.js", function() $("article").corner(); $("figure").corner(); ); </script>

In this script, we’re checking the Modernizr object toIf not, I use a jQuery script called jquery.corner.js (which is available for download at http://jquery.malsup.com/corner/ and requires that extra call the corner method from that script on my articles and figures to give them rounded corners.

OR, you can do this a slightly different way. Modernizr has an optional (not included) conditional resource loader called Modernizr.load(), based on Yepnope.jsneed, and it loads scripts asynchronously and in parallel which can sometimes offer a performance boost. To get Modernizr.load, you have to include it in a custom build of Modernizr which you have to create at http://www.modernizr.com/download/can write a script like this:

<script type="text/javascript"> Modernizr.load( test: Modernizr.borderradius, nope: 'script/jquery.corner.js', callback: function () $('article').corner(); $('figure').corner(); ); </script>

In short, this implements the same functionality as our prevproperty “Modernizr.borderradius” to see if it is supported. Then, nope defines the resources to load if test is false. Since IE8 doesn’t support the CSS3 property “borderradius”, it will load the jquery.the callback specifies a function to run whenever the script is done loading, so we will call the “corner” method on my articles and figures as we did before. There is a brief tutorial on Modernizr.load at http://www.modernizr.com/docs/#load

by Jan Zumwalt

Pg 44 of 77

But Modernizr does more than that! Notice that one of the differences between our IE8 and IE9 versions of the webpage is that the IE9 version has nice rounded corners on the two articles and the figure, and the IE8 version doesn’t. We can also use Modernizr to fix this.

<script type="text/javascript"> nizr.borderradius)

$.getScript("script/jquery.corner.js", function() $("article").corner(); $("figure").corner();

In this script, we’re checking the Modernizr object to see if there is support for “borderradius” (a CSS3 feature). If not, I use a jQuery script called jquery.corner.js (which is available for download at

and requires that extra reference to jQuery which I made earlier). Then I simply call the corner method from that script on my articles and figures to give them rounded corners.

OR, you can do this a slightly different way. Modernizr has an optional (not included) conditional resource loader Yepnope.js. This allows you to load only the polyfilling scripts that y

need, and it loads scripts asynchronously and in parallel which can sometimes offer a performance boost. To get Modernizr.load, you have to include it in a custom build of Modernizr which you have to create at http://www.modernizr.com/download/; it is not included in the Development version. With Modernizr.load, we

<script type="text/javascript">

test: Modernizr.borderradius, nope: 'script/jquery.corner.js', callback: function ()

$('article').corner(); $('figure').corner();

In short, this implements the same functionality as our previous script. Modernizr.load first tests the Boolean property “Modernizr.borderradius” to see if it is supported. Then, nope defines the resources to load if test is false. Since IE8 doesn’t support the CSS3 property “borderradius”, it will load the jquery.the callback specifies a function to run whenever the script is done loading, so we will call the “corner” method on my articles and figures as we did before. There is a brief tutorial on Modernizr.load at http://www.modernizr.com/docs/#load if you want to dive deeper.

June 20, 2012 Copyright © 2005-2012

between our IE8 and IE9 versions of the webpage is that the IE9 version has nice rounded corners on the two articles and the figure, and the IE8 version

see if there is support for “borderradius” (a CSS3 feature). If not, I use a jQuery script called jquery.corner.js (which is available for download at

reference to jQuery which I made earlier). Then I simply call the corner method from that script on my articles and figures to give them rounded corners.

OR, you can do this a slightly different way. Modernizr has an optional (not included) conditional resource loader . This allows you to load only the polyfilling scripts that your users

need, and it loads scripts asynchronously and in parallel which can sometimes offer a performance boost. To get Modernizr.load, you have to include it in a custom build of Modernizr which you have to create at

; it is not included in the Development version. With Modernizr.load, we

ious script. Modernizr.load first tests the Boolean property “Modernizr.borderradius” to see if it is supported. Then, nope defines the resources to load if test is false. Since IE8 doesn’t support the CSS3 property “borderradius”, it will load the jquery.corner.js script. Finally, the callback specifies a function to run whenever the script is done loading, so we will call the “corner” method on my articles and figures as we did before. There is a brief tutorial on Modernizr.load at


Pg 45 of 77

Now, by using either of those scripts, our Internet Explorer 8 version (which doesn’t support HTML5) looks like this:

Therefore, using polyfills and tools like Modernizr allow you to utilize new HTML5 functionality and still provide a good experience on older browsers as well. For more information, check out http://www.diveintohtml5.org/detect.html which describes in detail how Modernizr detects HTML5 features.

Summary

In this introduction to HTML5, we covered semantic markup, canvas, audio and video, and using HTML5 while retaining support for older browsers. But also note that there’s a lot we didn’t cover: microdata, storage, CSS3, etc.


Pg 46 of 77

Quick Overview of CSS Syntax and Use

Remember: HTML selectors are re-defined tags and may appear as often as desired. CLASS selectors are user-defined tags controlling groups and may appear many times. ID selectors are user-defined tags controlling a unique element and may appear only once. DIV selectors add a line break before it. SPAN selectors do not add a line break.

Syntax: HTML h1 color:red; font-size:16pt; <h1>Hello World </h1> CLASS .font1 color:red; font-size:16pt; <span class=” font1”>Hello World</span> ID #font1 color:red; font-size:16pt; <span id=”f ont1”>Hello World</span> DIV <div>content...</div> <div class=”font1”>Hello World</div> SPAN <span>content...</span> <span class=”font1”>Hell o World</span>

What are Selectors – html, class, id, div, span CSS selectors give control over how the elements in your web page look and act. Depending on which tool you use, you can affect man y, just one, or a series (i.e odd/even) of elements. There are five basic operati ons that can be performed html, class, id, div, and span. HTML selectors HTML selectors are re-defined tags and may appear as often as desi red. For example we can change the color and font size of th e standard <h1> tag.

h1 color:red; font-size:16pt; /* tag selector * /

CLASS selectors Class selectors are user defined names and may appear as often as desired.

.font1 color:red; font-size:16pt; font1.h2 color:red; font-size:16pt; /* class with element definition */

Notice the period (stop) at t he beginning.

ID selectors ID selectors are user defined names, but may be used only once on a page. Usually its element or unique location will be need ed by some other tag.

#menuitem1 color:red; font-size:16pt; #menuitem1 h2 color:red; font-size:16pt; /* id wi th element definition */

DIV and SPAN selectors


Pg 47 of 77

<Div> and <span> tags are identical except <div> ta gs insert a break <br> prior to the tag.

This is a<DIV Class = FontOne> div tag </DIV> and h ere is a <SPAN Class = FontOne> span tag. </SPAN>

Result

This is a

div tag and here is a span tag

Notice the break before the div tag.

Single and Multiline Properties / Comments

Property values may eith er be single or multi line.

/*This is a comment*/ H1 Color: Red; Font-weight: Bold;

Here is the multiple line version:

H1 Color: Red; /*This is a comment*/ Font-weight: Bold;

Location – inline, imbedded, external Inline definitions a re placed directly inside tags.

<h1 style=”color:red; font-size:16pt;”>Hello</h1>

Imbedded styles go in the <head> section and are the most c ommon.

<html> <head> <style type=”text/css”>

Style definitions go here…

</style> </head> <body>

External definitions are located in text files that will be included in the html <head> section. They have the advantage that severa l programs can use the same external file. A sample test file named “default.cs s” could look like this…

.font1 color:red; font-size:16pt;

Notice that no <style> tags are required

The html page that uses it would have this…

<head> <link rel=stylesheet type="text/css" href="default.css"> </head>


Pg 48 of 77

HTML selectors

Here is a web page without any CSS.

<HTML> <HEAD> <TITLE>CSS Style Example</TITLE> </HEAD> <BODY> <h1>Nursery Rhyme</h1> <h2>Mary Had A Little Lamb</h2> <h3>First stanza</h3> <p> Mary had a little lamb,<br> Its fleece was white as snow;<br> And everywhere that Mary went,<br> The lamb was sure to go.</p> <h3>Second stanza</h3> <p> He followed her to school one day,<br> Which was against the rule;<br> It made the children laugh and play<br> To see a lamb at school.</p> </body> </HTML>

Now we add modest HTML styling.

<HTML> <HEAD> <TITLE>CSS Style Example</TITLE> <STYLE TYPE = "text/css"> body font-family: arial; p font-style: italic; color: #059; h1 color: red; h2 color: blue; font-size:12pt h3 font-weight: normal; </STYLE> </HEAD> <BODY> <h1>Nursery Rhyme</h1> <h2>Mary Had A Little Lamb</h2> <h3>First stanza</h3> <p> Mary had a little lamb,<br> Its fleece was white as snow;<br> And everywhere that Mary went,<br> The lamb was sure to go.</p> <h3>Second stanza</h3> <p> He followed her to school one day,<br> Which was against the rule;<br> It made the children laugh and play<br> To see a lamb at school.</p> </body> </HTML>


Pg 49 of 77

Using Class Selectors – controlling groups of eleme nts

Classes are user defined tags that can be used as often as needed. To set up a Class, the code looks like this:

.ClassSelector Property: Value

Let us suppose that we need to use our normal <h3> tag somewhere else, but we need to customize how the “stanza” line looks. Just for fun we will watch the effects of defining the second verse with the same style. Here we go…

<HTML> <HEAD> <TITLE>CSS Style Example</TITLE> <STYLE TYPE = "text/css"> body font-family: arial; p font-style: italic; color: #059; h1 color: red; h2 color: blue; font-size:12pt .stanza font-size: 10pt; color: e60; font-weight: normal; </STYLE> </HEAD> <BODY> <h1>Nursery Rhyme</h1> <h2>Mary Had A Little Lamb</h2> <h3>First stanza (regular h3)</h3> <p> Mary had a little lamb,<br> Its fleece was white as snow;<br> And everywhere that Mary went,<br> The lamb was sure to go.</p> <h3 class=stanza>Second stanza(stanza h3)</h3 > <p class=stanza> He followed her to school on e day,<br> Which was against the rule;<br> It made the children laugh and play<br> To see a lamb at school.</p> </body> </HTML>

Notice the original <h3> of the first stanza works as it normally would. But, the second stanza and text have picked up the attributes of the “stanza” class.

It is important to notice that when we defined the .stanza class we did not modify the font style. So, while it changed the color and size of the text, it did not change the <h3> from “normal” or the <p> “italic”.

The CLASS selector starts working a little different when we use them with the <DIV> and <SPAN> tags. In the next example we have used them around Mary’s name in the first stanza. Notice the different effects:

code... <h3>First stanza (regular h3)</h3> <p> <span class=stanza>Mary</span> had a little lamb,<br> Its fleece was white as snow;<br>


Pg 50 of 77

And everywhere that <div class=stanza>Mary< /div> went,<br> The lamb was sure to go.</p> code continues...

When we used the CLASS style with SPAN (the first MARY - purple arrow) everything worked as we would expect. However, using the CLASS style with DIV (second Mary – red arrows) causes three things to happen that we might not have expected.

1. it caused a line break before the style took effect. 2. a line break occurred after it was done, really what it did was… 3. text after the DIV reverted back to the default style and caused a line break. (notice the black

text without italics)

For the reasons just given, SPAN is usually used for small sections of text. DIV is usually used for major blocks of code such as the entire section of a menu or footer.

Remember: DIV does strange things!

ID Selectors – controlling specific elements ID selectors allow us to identify a unique element on the web page. Remember that a CLASS can be used many times. But a ID may only be used one time on a page. You write an ID selector in exactly the same way that you use the Class selectors. The only difference is the spelling of the word CLASS vs ID.

<DIV ID = FontOne>Class Selector</DIV>

Why would we need an ID selector? A scripting language may want to cause something to happen such as a color to change or something to appear or disappear. The scripting language will control the page element by referring to it’s ID “name”.

We now present a script that allows the title of our web page to either change it’s visibility (it’s there, we just won’t see it), or to entirely removed from the html page (completely removed).

<HTML> <HEAD> <TITLE>CSS Style Example</TITLE> <STYLE TYPE = "text/css"> body font-family: arial; p font-style: italic; color: #059; h1 color: red; h2 color: blue; font-size:12pt; </STYLE> <script type="text/javascript"> // toggles visibility of element ID passed to this function, hidden/visible function toggleVisibility(x) if(document.getElementById(x).style.visibili ty == "hidden" ) document.getElementById(x).style.visibility = "visible"; else document.getElementById(x).style.visibility = "hidden"; // toggles existence of element ID passed to this function, added/removed from page function toggleExistance(x)


Pg 51 of 77

if(document.getElementById(x).style.display == "none" ) document.getElementById(x).style.display = ""; else document.getElementById(x).style.display = "none"; </script> </HEAD> <BODY> <h1 ><div id="toggleMe" style="visibility: vi sible;display=''">Nursery Rhyme</div></h1> <h2>Mary Had A Little Lamb</h2> <h3>First stanza</h3> <p> Mary had a little lamb,<br> Its fleece was white as snow;<br> And everywhere that Mary went,<br> The lamb was sure to go.</p> <h3>Second stanza</h3> <p> He followed her to school one day,<br> Which was against the rule;<br> It made the children laugh and play<br> To see a lamb at school.</p> <a href="#" onclick="toggleVisibility('toggleMe ');">[ Toggle Visibility ]</a>&emsp; <a href="#" onclick="toggleExistance('toggleMe' );">[ Toggle Display ]</a> </body> </HTML>

When you click on one of the links at the bottom, it causes one of the javascript routines to be run and changes the visibility of the page title that we gave a ID=”toggleme”.

Inline Styles We are going to write code that changes the color of a hyperlink based on whether the mouse is moved over it. The easiest way to do this is to add the style within the element on the page.

Inline Style Create a new web page with a white background color. The HTML code in your editor should now look like this:

<html> <head> <title>Inline Style</title> </head> <body> <A Href = "http://www.example.com" onmouseover ="style.color='Red'" onmouseout="style.color='Blue'"> Click Me Now!</A> </body> </html> or <html> <head> <title>Inline Style</title> <style> body font-family: arial a:link,a:visited,a:active,a:hover text-deco ration: none; a:hover font-weight:bold; font-size: 14pt </style> </head> <body> <A Href = "http://www.example.com" onmouseover ="this.style.color='Red'" onmouseout="this.style.color='Blue'"> Click Me Now!</A> </body>


Pg 52 of 77

</html>

View it in a browser, and test it out by moving you r mouse over the hyperlink and moving it away.

this.style.color= or style.color=

The word "this" doesn't have to be there. It means "this document" and tells the browser exactly which web page you mean. It's used more on the scripting side of things than on the style side. It could have been s hortened to:

We told the browser what to do when it detects an " OnMouseOver" event (more on this in the scripting section), and what to do when it detects an "OnMouseOut" event. What it does is to change the color of the t ext for the link.

Common Styles Text Background Color

We'll now use an editor to add a style that changes the background color behind some text. This will demonstrate the how the Class Selector works. First we add the style definition in head of the html page…

<html> <head> <STYLE> .BlueBgText Background-Color: Blue; Color: White; </STYLE> </HEAD> <body> <SPAN Class = BlueBgText >Text with blue backgrou nd.</SPAN> </body> </html>

Save your work and view the results in a browser

It should look like the text below:

Text with blue background. Adding a Border around text

We'll now add a border around a paragraph of text. This will demonstrate how to use the ID Selectors.

So create a new web page. Add a paragraph or two of text. Again, it's a two step process to set up and apply an ID selector. First a dd the style definition to the head of the html page.

<HEAD> <TITLE>Add a Border</TITLE> <STYLE> .Borders Border: 3pt solid Black; Padding: 10pt; </STYLE> </HEAD>


Pg 53 of 77

Note the name of the ID Selector - Borders . The Hash symbol (#) in front of it is enough to set up an ID selector.

Now we apply the ID selector to some text:

<body> <span class = Borders> A Little bit of text to put a border around. </DIV> </body> </html>

Save your work and view the results in a browser. Y our paragraph should look something like this:

A Little bit of text to put a border around.

Round Corners There is no command consensus among browsers when i t comes to creating rounded corners. The example shown here will work with all browsers – of course you must set the three alternate css style commands shown he re. Unfortunately, capabilities also vary. Some browsers allow each corner to be in dividually defined, while some browsers lack this capability.

<!DOCTYPE html> <html> <head> <title>Round corners for all browsers</title> <style type="text/css"> body padding: 0px; margin: 75px; .box color: #aef; padding: 10px; font-size: 125%; font-family: arial; width: 200px; background-color: #aaa; border-radius: 25px; /* css standar d, IE9 */ -moz-border-radius: 25px; /* firefox */ -webkit-border-radius: 25px; /* chrome, ope ra, android */ </style> </head> <body> <div class="box"> The quick brown fox jumped over the lazy dogs back. </div> </body> </html>


Pg 54 of 77

Set New Margins

Now lets se how to set margins. This Rule allows yo u to specify how far from the left you want some text to be positioned. Create a new web page and type in the margin style definition.

<HEAD> <TITLE>Margins and Indents</TITLE> <STYLE> .Margins Margin-Top: 5em; Margin-Bottom: 5em ; Margin-Left: 5em; Margin-Right: 5em; P text-indent: 3em; </STYLE> </HEAD>

Notice that both a Class selector and a HTML select or have been set up. The HTML Selector is the P tag. You don't have to do anything else with the H TML selector. Once it is set up, the text in every set of <P> </P> tags will have the first line indented by a value 3em. Note the property for the first line indent - text-indent:

However, the margins properties are in a Class Sele ctor called Margins . Now we have to apply the Class Selector in order to use it . So do the following:

<P CLASS = Margins> A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. </P>

Now that the HTML selector for the P tag has been s et, all the first lines of paragraphs on the page will be indented like this:

A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text.

CSS Column Formatting

For example, include this in your style sheet:

.leftcolumn position: absolute; width: 200; top: 0px; left: 0px; background-color: #00FFFF;

Now you've created a class called leftcolumn. In your HTML document, create a DIV that calls the leftcolumn class, and you have a red box 200 pixels wide in the top left corner of the page. Fill up the box with whate ver you want to be in the left column, like so:

<DIV class="leftcolumn"> Contents of left column.


Pg 55 of 77

</DIV>

You can do the same thing using IDs instead of CLAS Ses if you prefer.

Of course, a left column is seldom encountered with out a right column, so you'll need to define a rightcolumn class as well. For bes t results, everything on the page should be in a division that has its position specified in a style sheet.

We can create a right column class like so:

.rightcolumn position: absolute; top: 0px; left: 200px;

Remember that the left column is 200 pixels wide. S ince the right column begins 200 pixels from the left edge, it should be right n ext to the left column, where it belongs. Simple, eh? A bit too simple, in fact. The layout we've just created serves as a good, clear example of how positioning with CSS works, but in the real world, your style sheets will need to be much more complex to get the results you want. Some other things you need to consider are:

Borders, padding, etc. Just like table cells, divisions can have borders, background colors, padding and other properties.

Stretchability. Like tables, divisions need to be able to stretch to accommodate different user window sizes. You can specify dimens ions in percentage values as well as in pixels. Another handy trick is leaving a division's size unspecified, and using margins to position the contents of the d ivision.

Inheritance. That pesky inheritance can upset your best-laid po sitioning plans, especially if you're using relative positioning.

Browser bugs. Remember how we covered our posteriors at the begi nning of the article by mentioning certain "notable exceptions" to current browsers' support for CSS?

The important point to remember is that if you're g oing to use CSS for positioning, you have to get it right. A tiny error can cause a page to appear as a jumbled mess, although perhaps only in certain browsers . To get the most out of this powerful set of tools, you need to know all th e positioning properties of CSS backwards and forwards. Peruse some of the CSS tutorials you'll find here at the WDVL, and keep a good reference at your elbow as yo u code (such as Eric Meyer's Style Sheet Reference Guide ).

Or, if you're not the studious type, you can simply copy what someone else has done. There are two excellent sites that offer pref ab CSS layouts that you can freely copy and modify for your own use. Eric Coste llo's excellent site glish.com features several great layouts including 2-column a nd 3-column layouts both fluid (stretchable columns) and static (fixed-width colum ns) and one that is particularly amazing, a nested float (which allows you to wrap text around a division). The Layout Reservoir from Bluerobot.com is another similar resource.

I strongly recommend glish.com to anyone dabbling i n CSS positioning. Their layouts are the product of collaboration among several leading CSS geeks, who have tested their layouts in lots of browsers. They've f igured out exactly how padding


Pg 56 of 77

and margins work, something that has baffled many a designer. They also have clever workarounds for the browser-specific problem s we mentioned above. Glish also has lots of links to CSS tutorials and other r esources.

a:link color:#3344dd a:visited color:#804180 a:hover color:#b50010 a:active color:#b50010

The above CSS pseudo-classes should already be fami liar to you. These are all used for styling links while :focus below is used for fi elds in forms.

Advanced Element Styles Z-index and overlapping The z-index property defines the vertical stacking order of elements. For example, an element that has z-index:2

will appear on top of an element that has z-index:1 if their positions on the page overlap.

You can combine image and text by putting your graphic and your text in two different divisions, with the same (or overlapping) x and y coordinates, but different z-indices, as in the example below.

:focus This will give the field a yellow background when t he cursor is clicked in the box:

<!DOCTYPE HTML> <html> <head> <style type="text/css"> body font-family: arial input:focus background-color:#ffc; </style> </head> <body> <p>Click inside text fields to see yellow backg round:</p> <form> First name: <input type="text" name="firstnam e" /><br /> Last name: <input type="text" name="lastname" /> </form> <p>IE8 requires a DOCTYPE to be declared.</p> </body> </html>

:focus is not support in IE6 and IE7 and :active is not supported in IE6 and only partially supported in IE7. :first-child This is a useful CSS rule and it serves as an intro duction to the myriad of CSS 3.0 pseudo-classes.


Pg 57 of 77

The only browser it doesn't work in is IE6. Here's how it looks in action and it does what you would expect:

<!DOCTYPE HTML> <html> <head> <style type="text/css"> p:first-child background : #fcf; ul li:first-child background : #ffc; table tr:first-child background : #cff; </style> </head> <body> <p>First paragraph</p> <p>Second paragraph</p> <p>Third paragraph</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <table> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </td> </table> </body> </html>

The three styles affect the first paragraph, list i tem, and table row. This only works in IE9 or newer, but works in the l atest versions of Opera, Chrome, Firefox and Safari. There are limited JavaS cript solutions available for earlier versions of IE. :nth-child() To demonstrate this pseudo-class lets say you have a list with five items. You need to style the third item and the third item onl y. If this is the case then use :nth-child() as below.

ul li:nth-child(3) background : #ffffcc But it's more powerful than just this simple use. ul li:nth-child(even) background : #ffffcc ul li:nth-child(odd) background : #ffffcc

The above will target all even numbered list items and odd numbered lists respectively. I'm using lists as an example but it could just as easily be paragraphs, table columns or a variety of different purposes. There's even a more precise use for :nth-child():


Pg 58 of 77

ul li:nth-child(3n+2) color: yellow;

Note the addition of the letter n. This is a number expression an+b and this will target the second and fifth list item and so on in a pattern of 3.

ul li:nth-child(4n+3) color: yellow;

Above will target the fourth and seventh list item and upwards in a pattern of 4. Confused? The best way of understanding this is by creating a simple HTML list and playing around with this CSS syntax yourself. :nth-last-child() This is exactly the same as :nth-child() but it rev erses the order, for instance the code below would target the last list item on a page:

ul li:nth-last-child(1) background : #ffffcc;

:nth-of-type() As with :nth-child() this can either be a number, o dd or even and a number expression; however, this matches a child of a spec ific element type while :nth-child() matches any child. Again, lets give an example:

p img:nth-of-type(1) border : 2px solid #ffff00;

This will target the first image in any paragraph w hich :nth-of-type() is particularly useful for.

p img:nth-of-type(1) float : right; p img:nth-of-type(2) float : left;

Above will float the first image in the paragraph t o the right and the second image to the left. The use of nth-of-type() over nth-child() allows mo re precision in targeting elements. :nth-last-of-type() The same as :nth-of-type expect it selects from the bottom up. Below will give a border to the last image in a paragraph:

p img:nth-of-type(1) border : 2px solid #ffff00;

:last-child The reverse of :first-child. Below will highlight t he last item in a list:

ul li:last-child background : #ffffcc

:first-of-type and :last-of-type


Pg 59 of 77

What :nth-of-type() is to :nth-child(), so :first-o f-type and :last-of-type are to :first-child and :list-child respectively. :only-child This targets a single child of its parents. Look at the following code:

#wrapper p:only-child background : #ffffcc

Above would give a background colour to the paragra ph only if there was one paragraph in the wrapper div. It's a struggle to fi nd an example where this would come handy. If you can think of one post it up belo w! :only-of-type Matches the only child element of its type. If you want to create a border around an image in a paragraph if there is only one image then use the following code:

p img:only-of-type border: 2px solid #ffffcc;

:empty With this pseudo-class you can target an element wi th nothing in it. Maybe you are using a CMS and you want to hide a box until there is some user-generated content in which case you could use the code below. However , it's not particularly practical because even white space within the box w ould prevent it from working.

.box:empty display: none;

:not() Also known as the negation pseudo-class this target s everything except that declared in the brackets. As an example this CSS wi ll give every paragraph a yellow background except that with a class of highl ight:

p:not(.highlight) background : #ffffcc;

:disabled & :enabled There are two attributes in HTML that help restrict the users ability to input data into a field. They are disabled and readonly. For instance you may want to add disabled=”disabled” to the submit button until the user fills in all the required details. They are mostly only used in conj unction with JavaScript and CSS 3.0 allows styling of one of these – disabled.

input:disabled background : #ffff00; input:enabled background : #ffff00;

The first example above would allows styling of all fields using the disabled attribute while the latter would affect fields not using it. :checked This is a useful little bit of CSS to use. It allow s the styling of a form checkbox when it is checked. Below enlarges the box upon user interaction:

input:checked width: 20px; height: 20px;

:indeterminate


Pg 60 of 77

This matches checkbox elements whose indeterminate DOM attribute is set to true by JavaScript. Links Different link colors If you want to have different colours or styles for certain links you need to assign those links a class and write the styles for each class. Assuming we have two links "Blue Bold Link" and "Re d Italic Link" we assign each a suitable class link this:

<a href="blue.htm" class="blue">Blue Bold Link</a> <a href="red.htm" class="red">Red Italic Links</a>

Our css for these links would be in this form: (not e: blue=#0000ff, red=#ff0000)

<style type="text/css"> a.blue:link color: #0000ff; background: #ffffff ; font-weight: bold; a.blue:active color: #0000ff; background: #ffffff ; font-weight: bold; a.blue:visited color: #0000ff; background: #ffffff ; font-weight: bold; a.blue:hover color: #0000ff; background: #ffffff ; font-weight: bolder; a.red:link color: #ff0000; background: #ffffff ; font-style: italic; a.red:active color: #ff0000; background: #ffffff ; font-style: italic; a.red:visited color: #ff0000; background: #ffffff ; font-style: italic; a.red:hover color: #ff0000; background: #ffffff ; font-style: normal; </style>

You can have any number of link styles on a page on ce you assign each one a class and specify the styles for each class. Effective us e of "hover" can add a lot to a web page. Experiment!


Pg 61 of 77

Border Properties

Property Description Values CSS

border Sets all the border properties in one declaration border-width border-style

border-color

1

border-bottom Sets all the bottom border properties in one

declaration

border-bottom-width

border-bottom-style

border-bottom-color

1

border-bottom-color Sets the color of the bottom border border-color 2

border-bottom-style Sets the style of the bottom border border-style 2

border-bottom-width Sets the width of the bottom border border-width 1

border-color Sets the color of the four borders color_name

hex_number

rgb_number

transparent inherit

1

border-left Sets all the left border properties in one

declaration

border-left-width

border-left-style border-left-color

1

border-left-color Sets the color of the left border border-color 2

border-left-style Sets the style of the left border border-style 2

border-left-width Sets the width of the left border border-width 1

border-right Sets all the right border properties in one

declaration

border-right-width

border-right-style

border-right-color

1

border-right-color Sets the color of the right border border-color 2

border-right-style Sets the style of the right border border-style 2

border-right-width Sets the width of the right border border-width 1

border-style Sets the style of the four borders none

hidden

dotted dashed

solid

double

groove

ridge

inset

outset inherit

1

border-top Sets all the top border properties in one

declaration

border-top-width

border-top-style border-top-color

1

border-top-color Sets the color of the top border border-color 2

border-top-style Sets the style of the top border border-style 2

border-top-width Sets the width of the top border border-width 1

border-width Sets the width of the four borders thin

medium thick

length

inherit

1

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).


Pg 62 of 77

Guidelines Like everything else in this life, it is all subjec tive and depends on what you are going to do. For instance, if your intended aud ience was somebody wanting to bank from you, buy stocks or hive their hard-earned money to you, the guidelines may be more stringent than a web site geared toward s having fun or something you threw together yourself. With that in mind, there a re certain "annoyances" everybody is aware of and is essentially universal for any web page out there. In fact, for some really, really nasty web site design and to know NOT what to do, see http://www.worstoftheweb.com it's great!

1. Make sure your fonts are clear and readable. This m eans to not have really gigantic fonts that are dark green on a black backg round and expect people to understand the message you are trying to say, es pecially on a professional-like level. In very rare circumstances , without readable fonts, then visitors will go away.

2. Just like HTML, Java, JavaScript, the same annoyanc e guidelines still apply to CSS. Loud backgrounds, clashing elements, nasty background graphics, cluttered (or haphazard) formatting, etc. will only discourage visitors from taking you seriously. If you are not serious and wa nt to do this for fun or to make a statement, then fine.

3. Test, test, test! Whenever you try something new an d want to implement something different then you need to test your code in a number of browsers in as many platforms as possible. Remember, CSS is NOT perfect, and not everything that may work for you will work for some body else. As said in the compatibility chart by Mark A. Meyer, there are man y browsers out there and not everything in CSS is supported. Whenever in dou bt, refer to that document.

4. There is nothing wrong with simple. If at all possi ble, keep your styles as simple as possible and to add to your web page not overwhelm it. This is not the end-all rule, but how many pages have you visit ed that are so loud or over burdened with crap you, no matter how helpful the content, you just click the "back" button on your browser? Of course, most of us have. In fact, there is nothing wrong with having a plain te xt version if at all possible as a catch all especially if you sell stuf f and depend on it for income.

5. Get a second opinion. That's why you have friends a nd AntiOnline, to get constructive criticism (or flames), praise, and fee dback to make things better. Because you think it looks good may not goo d to somebody else. Remember, you cannot please everybody, but you want to make it appealing to as many as possible.

6. If all else fails, go to www.google.com. 7. These guidelines do not apply if you or your intend ed audience do not care.

If you have a site where you want to express yourse lf and your intended audience does not care, or you do not care, then th ese guidelines are just that.

8. Keep your code readable and maintainable by reasona ble name conventions. Like other programming languages , the need for useful names are very important in case you need to go back to it later. For instance, the expression does not. At the time of coding, you kne w what CrackWhore meant, but six months, a year down the road, it's time to dig around the code and see what it does.

9. Have fun!

.TopMargin background-color: red; border-color: #8080FF; border-style: solid; font-family: Verdana, Arial, Helvetica;


Pg 63 of 77

This example tells you something useful about what is being controlled.

.BigTrucks background-color: red; border-color: #8080FF; border-style: solid; font-family: Verdana, Arial, Helvetica;

This example tells you very little about what is be ing controlled.

Style Property Note: The CSS style property can be used inside block structures such as <Body...> <table> <p> etc. Example: <body style=“font-family: arial; color: bl ack;>“ or <body style=“font-family: arial; Aural cue cue-after cue-before elevation pause pause-after pause-before pitch pitch-range play-during richness speak speak-numeral speak-punctuation speech-rate stress voice-family volume Boxes border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style

border-top-width border-width margin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left page padding-right padding-top Color / Bkg background background-attachment background-color background-image background-position background-repeat color Dimensions height line-height max-height max-width min-height min-width vertical-align width Font font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight

Interface cursor outline outline-color outline-style outline-width Miscellaneous azimuth content counter-increment counter-reset list-style list-style-image list-style-position list-style-type marker-offset quotes Paging marks orphans page page-break-after page-break-before page-break-inside size widows Positioning bottom clear clip direction display float left overflow position right

top unicode-bidi visibility z-index Table border-collapse border-spacing caption-side empty-cells speak-header table-layout Text color letter-spacing text-align text-decoration text-indent text-shadow text-transform white-space word-spacing Units #ddd #dddddd % 0 does not require unit cm em ex in mm pt px rgb(d,d,d)

Pg 64 of 77

Alphabetized HTML Commands  comment <!DOCTYPE> the document type <a> anchor <abbr> abbreviation <acronym> acronym <address> address element <applet> Deprecated. applet <area> area inside an image map <b> bold text <base> base URL all page links <basefont> Deprecated. base font <bdo> the direction of text display <big> big text <blockquote> indent <body> the body element <br> Inserts a single line break <button> push button <caption> table caption <center> Deprecated. centered text <cite> citation <code> code text (formatted txt) <col> attributes for table columns <colgroup> groups of table columns <dd> definition description <del> deleted text <dir> Deprecated. directory list <div> section in a document <dfn> definition term <dl> definition list <dt> definition term <em> emphasized text <fieldset> fieldset <font> Deprecated see style, font size, select font, etc <form> form <frame> sub window (a frame) <frameset> set of frames <h1> to <h6> header 1 to header 6 <head> information about the document <hr> horizontal rule <html> html document <i> italic text <iframe> inline sub window (frame) <img> image <input> input field <ins> inserted text

<isindex> Deprecated single- line input field <kbd> keyboard text <label> label for a form control <legend> title in a fieldset <li> list item <link> resource reference <map> image map <menu> Deprecated. menu list <meta> meta information <noframes> noframe section <noscript> noscript section <object> embedded object <ol> ordered list <optgroup> option group <option> option in a dropdown list <p> paragraph <param> parameter for an object <pre> preformatted text <q> short quotation <s> Deprecated. strikethrough text <samp> sample computer code <script> script <select> selectable list <small> small text <span> section in a document <strike> Deprecated. strikethrough text <stro ng> strong text <style> css style definition <sub> subscripted text <sup> superscripted text <table> table <tbody> table body <td> table cell <textarea> text area <tfoot> table footer <th> table header <th ead> table header <title> the document title <tr> table row <tt> teletype text, similar to <code> and <pre> <u> Deprecated. underlined text <ul> unordered list <var> variable, usually same as italics <xmp> Deprecated use “code” instead


Pg 65 of 77


Pg 66 of 77


Pg 67 of 77

Special Characters

Character Entity Decimal Hex View

space exclamation ! ! ! quotation mark = APL quote " " " “ number # # # dollar $ $ $ percent % % % ampersand & & & & single quote = apostrophe ' ' ' less-than sign < < < < greater-than sign > > > > ellipses … inverted exclamation mark ¡ ¡ ¡ ¡ cent sign ¢ ¢ ¢ ¢ pound sign £ £ £ £ currency sign ¤ ¤ ¤ ¤ yen sign = yuan sign ¥ ¥ ¥ ¥ broken vertical bar ¦ ¦ ¦ ¦ section sign § § § § spacing diaeresis ¨ ¨ ¨ ¨ copyright sign © © © © feminine ordinal indicator ª ª ª ª left pointing guillemet « « « « not sign ¬ ¬ ¬ ¬ soft hyphen = discretionary hyphen registered sign = registered trade mark sign ® ® ® ® macron = overline = APL overbar ¯ ¯ ¯ ¯ degree sign ° ° ° ° plus-minus sign = plus-or-minus sign ± ± ± ± superscript digit two = squared ² ² ² ² superscript digit three = cubed ³ ³ ³ ³ acute accent = spacing acute ´ ´ ´ ´ micro sign µ µ µ µ pilcrow sign = paragraph sign ¶ ¶ ¶ ¶ middle dot · · · · cedilla = spacing cedilla ¸ ¸ ¸ ¸ superscript one = superscript digit one ¹ ¹ ¹ ¹ masculine ordinal indicator º º º º right pointing guillemet » » » » fraction one quarter ¼ ¼ ¼ ¼ fraction one half ½ ½ ½ ½ fraction three quarters ¾ ¾ ¾ ¾ inverted question mark ¿ ¿ ¿ ¿ Latin capital letter A grave À À À À Latin capital letter A with acute Á Á Á Á Latin capital letter A with circumflex Â Â Â Â Latin capital letter A with tilde Ã Ã Ã Ã Latin capital letter A with diaeresis Ä Ä Ä Ä Latin capital letter A with ring above Å Å Å Å Latin capital ligature AE Æ Æ Æ Æ Latin capital letter C with cedilla Ç Ç Ç Ç Latin capital letter E with grave È È È È Latin capital letter E with acute É É É É Latin capital letter E with circumflex Ê Ê Ê Ê Latin capital letter E with diaeresis Ë Ë Ë Ë Latin capital letter I with grave Ì Ì Ì Ì Latin capital letter I with acute Í Í Í Í Latin capital letter I with circumflex Î Î Î Î Latin capital letter I with diaeresis Ï Ï Ï Ï Latin capital letter ETH Ð Ð Ð Ð Latin capital letter N with tilde Ñ Ñ Ñ Ñ Latin capital letter O with grave Ò Ò Ò Ò Latin capital letter O with acute Ó Ó Ó Ó Latin capital letter O with circumflex Ô Ô Ô Ô


Pg 68 of 77

Character Entity Decimal Hex View Latin capital letter O with tilde Õ Õ Õ Õ Latin capital letter O with diaeresis Ö Ö Ö Ö multiplication sign × × × × Latin capital letter O with stroke Ø Ø Ø Ø Latin capital letter U with grave Ù Ù Ù Ù Latin capital letter U with acute Ú Ú Ú Ú Latin capital letter U with circumflex Û Û Û Û Latin capital letter U with diaeresis Ü Ü Ü Ü Latin capital letter Y with acute Ý Ý Ý Ý Latin capital letter THORN Þ Þ Þ Þ Latin small letter sharp s ß ß ß ß Latin small letter a with grave à à à à Latin small letter a with acute á á á á Latin small letter a with circumflex â â â â Latin small letter a with tilde ã ã ã ã Latin small letter a with diaeresis ä ä ä ä Latin small letter a with ring above å å å å Latin small ligature ae æ æ æ æ Latin small letter c with cedilla ç ç ç ç Latin small letter e with grave è è è è Latin small letter e with acute é é é é Latin small letter e with circumflex ê ê ê ê Latin small letter e with diaeresis ë ë ë ë Latin small letter i with grave ì ì ì ì Latin small letter i with acute í í í í Latin small letter i with circumflex î î î î Latin small letter i with diaeresis ï ï ï ï Latin small letter eth ð ð ð ð Latin small letter n with tilde ñ ñ ñ ñ Latin small letter o with grave ò ò ò ò Latin small letter o with acute ó ó ó ó Latin small letter o with circumflex ô ô ô ô Latin small letter o with tilde õ õ õ õ Latin small letter o with diaeresis ö ö ö ö division sign ÷ ÷ ÷ ÷ Latin small letter o with stroke ø ø ø ø Latin small letter u with grave ù ù ù ù Latin small letter u with acute ú ú ú ú Latin small letter u with circumflex û û û û Latin small letter u with diaeresis ü ü ü ü Latin small letter y with acute ý ý ý ý Latin small letter thorn þ þ þ þ Latin small letter y with diaeresis ÿ ÿ ÿ ÿ Latin capital ligature OE &OElig; Œ Œ Œ Latin small ligature oe &oelig; œ œ œ Latin capital letter S with caron &Scaron; Š Š Š Latin small letter s with caron &scaron; š š š Latin capital letter Y with diaeresis &Yuml; Ÿ Ÿ Ÿ Latin small f with hook = function = florin &fnof; ƒ ƒ ƒ modifier letter circumflex accent &circ; ˆ ˆ ˆ small tilde &tilde; ˜ ˜ ˜ Greek capital letter alpha Α Α Α Α Greek capital letter beta Β Β Β Β Greek capital letter gamma Γ Γ Γ Γ Greek capital letter delta Δ Δ Δ ∆ Greek capital letter epsilon Ε Ε Ε Ε Greek capital letter zeta Ζ Ζ Ζ Ζ Greek capital letter eta Η Η Η Η Greek capital letter theta Θ Θ Θ Θ Greek capital letter iota Ι Ι Ι Ι Greek capital letter kappa Κ Κ Κ Κ Greek capital letter lambda Λ Λ Λ Λ Greek capital letter mu Μ Μ Μ Μ Greek capital letter nu Ν Ν Ν Ν Greek capital letter xi Ξ Ξ Ξ Ξ Greek capital letter omicron Ο Ο Ο Ο Greek capital letter pi Π Π Π Π Greek capital letter rho Ρ Ρ Ρ Ρ Greek capital letter sigma Σ Σ Σ Σ


Pg 69 of 77

Character Entity Decimal Hex View Greek capital letter tau Τ Τ Τ Τ Greek capital letter upsilon Υ Υ Υ Υ Greek capital letter phi Φ Φ Φ Φ Greek capital letter chi Χ Χ Χ Χ Greek capital letter psi Ψ Ψ Ψ Ψ Greek capital letter omega Ω Ω Ω Ω Greek small letter alpha α α α α Greek small letter beta β β β β Greek small letter gamma γ γ γ γ Greek small letter delta δ δ δ δ Greek small letter epsilon ε ε ε ε Greek small letter zeta ζ ζ ζ ζ Greek small letter eta η η η η Greek small letter theta θ θ θ θ Greek small letter iota ι ι ι ι Greek small letter kappa κ κ κ κ Greek small letter lambda λ λ λ λ Greek small letter mu μ μ μ µ Greek small letter nu ν ν ν ν Greek small letter xi ξ ξ ξ ξ Greek small letter omicron ο ο ο ο Greek small letter pi π π π π Greek small letter rho ρ ρ ρ ρ Greek small letter final sigma &sigmaf; ς ς ς Greek small letter sigma σ σ σ σ Greek small letter tau τ τ τ τ Greek small letter upsilon υ υ υ υ Greek small letter phi φ φ φ φ Greek small letter chi χ χ χ χ Greek small letter psi ψ ψ ψ ψ Greek small letter omega ω ω ω ω Greek small letter theta symbol &thetasym; ϑ ϑ ϑϑϑϑ Greek upsilon with hook symbol &upsih; ϒ ϒ ϒϒϒϒ Greek pi symbol ϖ ϖ ϖ no-break space, non-breaking space en space &ensp; em space &emsp;

thin space en dash – – – – em dash — — — — zero width non-joiner &zwnj; ‌ ‌ zero width joiner &zwj; ‍ ‍ left-to-right mark &lrm; ‎ ‎ right-to-left mark &rlm; ‏ ‏ left single quotation mark ‘ ‘ ‘ ‘ right single quotation mark ’ ’ ’ ’ single low-9 quotation mark &sbquo; ‚ ‚ ‚ left double quotation mark “ “ “ “ right double quotation mark ” ” ” “ double low-9 quotation mark &bdquo; „ „ „ dagger &dagger; † † † double dagger &Dagger; ‡ ‡ ‡ bullet = black small circle • • • • horizontal ellipsis = three dot leader … … … … per mille sign &permil; ‰ ‰ ‰ single left-pointing angle quotation mark &lsaquo; ‹ ‹ ‹ single right-pointing angle quotation mark &rsaquo; › › › euro sign € € € € prime = minutes = feet ′ ′ ′ ′ double prime = seconds = inches ″ ″ ″ ″ overline = spacing overscore &oline; ‾ ‾ fraction slash &frasl; ⁄ ⁄ ⁄ script capital P = power set = Weierstrass p &weierp; ℘ ℘ ℘℘℘℘ blackletter capital I = imaginary part &image; ℑ ℑ ℑℑℑℑ blackletter capital R = real part symbol &real; ℜ ℜ ℜℜℜℜ trade mark sign ™ ™ ™ ™


Pg 70 of 77

Character Entity Decimal Hex View alef symbol = first transfinite cardinal &alefsym; ℵ ℵ ℵℵℵℵ leftwards arrow ← ← ← ← upwards arrow ↑ ↑ ↑ ↑ rightwards arrow → → → → downwards arrow ↓ ↓ ↓ ↓ left right arrow ↔ ↔ ↔ ↔ carriage return &crarr; ↵ ↵ ↵↵↵↵ leftwards double arrow ⇐ ⇐ ⇐ ⇐⇐⇐⇐ upwards double arrow &uArr; ⇑ ⇑ ⇑⇑⇑⇑ rightwards double arrow ⇒ ⇒ ⇒ ⇒⇒⇒⇒ downwards double arrow &dArr; ⇓ ⇓ ⇓⇓⇓⇓ left right double arrow ⇔ ⇔ ⇔ ⇔⇔⇔⇔ for all ∀ ∀ ∀ ∀∀∀∀ partial differential ∂ ∂ ∂ ∂ there exists ∃ ∃ ∃ ∃∃∃∃ empty set = null set = diameter ∅ ∅ ∅ ∅∅∅∅ nabla = backward difference ∇ ∇ ∇ ∇∇∇∇ element of ∈ ∈ ∈ ∈∈∈∈ not an element of ∉ ∉ ∉ ∉∉∉∉ contains as member &ni; ∋ ∋ ∋∋∋∋ n-ary product = product sign ∏ ∏ ∏ ∏ n-ary sumation ∑ ∑ ∑ ∑ minus sign − − − − asterisk operator &lowast; ∗ ∗ ∗∗∗∗ square root = radical sign √ √ √ √ proportional to &prop; ∝ ∝ ∝∝∝∝ infinity ∞ ∞ ∞ ∞ angle &ang; ∠ ∠ ∠∠∠∠ logical and = wedge &and; ∧ ∧ ∧∧∧∧ logical or = vee &or; ∨ ∨ ∨∨∨∨ intersection = cap ∩ ∩ ∩ ∩ union = cup ∪ ∪ ∪ ∪∪∪∪ integral ∫ ∫ ∫ ∫ therefore &there4; ∴ ∴ ∴∴∴∴ tilde operator = varies with = similar to &sim; ∼ ∼ ∼∼∼∼ approximately equal to &cong; ≅ ≅ ≅≅≅≅ almost equal to = asymptotic to ≈ ≈ ≈ ≈ not equal to ≠ ≠ ≠ ≠ identical to &equiv; ≡ ≡ ≡ less-than or equal to ≤ ≤ ≤ ≤ greater-than or equal to ≥ ≥ ≥ ≥ subset of ⊂ ⊂ ⊂ ⊂⊂⊂⊂ superset of ⊃ ⊃ ⊃ ⊃⊃⊃⊃ not a subset of &nsub; ⊄ ⊄ ⊄⊄⊄⊄ subset of or equal to &sube; ⊆ ⊆ ⊆⊆⊆⊆ superset of or equal to &supe; ⊇ ⊇ ⊇⊇⊇⊇ circled plus = direct sum &oplus; ⊕ ⊕ ⊕⊕⊕⊕ circled times = vector product &otimes; ⊗ ⊗ ⊗⊗⊗⊗ up tack = orthogonal to = perpendicular &perp; ⊥ ⊥ ⊥⊥⊥⊥ dot operator ⋅ ⋅ ⋅ ···· left ceiling = APL upstile &lceil; ⌈ ⌈ ⌈⌈⌈⌈ right ceiling &rceil; ⌉ ⌉ ⌉⌉⌉⌉ left floor = APL downstile &lfloor; ⌊ ⌊ ⌊⌊⌊⌊ right floor &rfloor; ⌋ ⌋ ⌋⌋⌋⌋

left-pointing angle bracket = bra &lang; 〈 〈 ⟨⟨⟨⟨

right-pointing angle bracket = ket &rang; 〉 〉 ⟩⟩⟩⟩ lozenge &loz; ◊ ◊ ◊ black spade suit &spades; ♠ ♠ ♠ black club suit = shamrock &clubs; ♣ ♣ ♣ black heart suit = valentine &hearts; ♥ ♥ ♥ black diamond suit &diams; ♦ ♦ ♦


Pg 71 of 77

HTML 16 named Colors

The HTML 4.x specifications defines sixteen color names that can be used instead of color values in HTML. These colors are valid values for attributes such as BGCOLOR or LINK on the BODY element. The CSS2 specification also uses these colors as color values which can be used with properties such as color, background-color or border-color.

HTML 4.01 & CSS2 Colors Color Name Hex 6 Hex 3 RGB RGB% Websafe Reallysafe Sample

black #000000 #000 0,0,0 0%,0%,0% Yes Yes

silver #C0C0C0 #CCC 192,192,192 75%,75%,75% No No

gray #808080 #888 128,128,128 50%,50%,50% No No

white #FFFFFF #FFF 255,255,255 100%,100%,100% Yes Yes

maroon #800000 #800 128,0,0 50%,0%,0% No No

red #FF0000 #F00 255,0,0 100%,0%,0% Yes Yes

purple #800080 #808 128,0,128 50%,0%,50% No No

fuchsia #FF00FF #F0F 255,0,255 100%,0%,100% Yes Yes

green #008000 #080 0,128,0 0%,50%,0% No No

lime #00FF00 #0F0 0,255,0 0%,100%,0% Yes Yes

olive #808000 #880 128,128,0 50%,50%,0% No No

yellow #FFFF00 #FF0 255,255,0 100%,100%,0% Yes Yes

navy #000080 #008 0,0,128 0%,0%,50% No No

blue #0000FF #00F 0,0,255 0%,0%,100% Yes Yes

teal #008080 #088 0,128,128 0%,50%,50% No No

aqua #00FFFF #0FF 0,255,255 0%,100%,100% Yes Yes

The HTML 4.01 and CSS2 color names with their corresponding numerical values. Members of the Websafe and Reallysafe palletes are marked.


Pg 72 of 77

X11 color names (all browsers support these)

HTML name Hex RGB Decimal RGB Red colors

IndianRed CD 5C 5C 205 92 92 LightCoral F0 80 80 240 128 128 Salmon FA 80 72 250 128 114 DarkSalmon E9 96 7A 233 150 122 LightSalmon FF A0 7A 255 160 122 Red FF 00 00 255 0 0 Crimson DC 14 3C 220 20 60 FireBrick B2 22 22 178 34 34 DarkRed 8B 00 00 139 0 0

Pink colors

Pink FF C0 CB 255 192 203 LightPink FF B6 C1 255 182 193 HotPink FF 69 B4 255 105 180 DeepPink FF 14 93 255 20 147 MediumVioletRed C7 15 85 199 21 133 PaleVioletRed DB 70 93 219 112 147

Orange colors

LightSalmon FF A0 7A 255 160 122 Coral FF 7F 50 255 127 80 Tomato FF 63 47 255 99 71 OrangeRed FF 45 00 255 69 0 DarkOrange FF 8C 00 255 140 0 Orange FF A5 00 255 165 0

Yellow colors

Gold FF D7 00 255 215 0 Yellow FF FF 00 255 255 0 LightYellow FF FF E0 255 255 224 LemonChiffon FF FA CD 255 250 205 LightGoldenrodYellow FA FA D2 250 250 210 PapayaWhip FF EF D5 255 239 213 Moccasin FF E4 B5 255 228 181 PeachPuff FF DA B9 255 218 185 PaleGoldenrod EE E8 AA 238 232 170 Khaki F0 E6 8C 240 230 140 DarkKhaki BD B7 6B 189 183 107

Purple colors

Lavender E6 E6 FA 230 230 250 Thistle D8 BF D8 216 191 216 Plum DD A0 DD 221 160 221 Violet EE 82 EE 238 130 238 Orchid DA 70 D6 218 112 214 Fuchsia FF 00 FF 255 0 255 Magenta FF 00 FF 255 0 255 MediumOrchid BA 55 D3 186 85 211 MediumPurple 93 70 DB 147 112 219 BlueViolet 8A 2B E2 138 43 226 DarkViolet 94 00 D3 148 0 211 DarkOrchid 99 32 CC 153 50 204 DarkMagenta 8B 00 8B 139 0 139 Purple 80 00 80 128 0 128 Indigo 4B 00 82 75 0 130 DarkSlateBlue 48 3D 8B 72 61 139

HTML name Hex RGB Decimal RGB Green colors

GreenYellow AD FF 2F 173 255 47 Chartreuse 7F FF 00 127 255 0 LawnGreen 7C FC 00 124 252 0 Lime 00 FF 00 0 255 0 LimeGreen 32 CD 32 50 205 50 PaleGreen 98 FB 98 152 251 152 LightGreen 90 EE 90 144 238 144 MediumSpringGreen 00 FA 9A 0 250 154 SpringGreen 00 FF 7F 0 255 127 MediumSeaGreen 3C B3 71 60 179 113 SeaGreen 2E 8B 57 46 139 87 ForestGreen 22 8B 22 34 139 34 Green 00 80 00 0 128 0 DarkGreen 00 64 00 0 100 0 YellowGreen 9A CD 32 154 205 50 OliveDrab 6B 8E 23 107 142 35 Olive 80 80 00 128 128 0 DarkOliveGreen 55 6B 2F 85 107 47 MediumAquamarine 66 CD AA 102 205 170 DarkSeaGreen 8F BC 8F 143 188 143 LightSeaGreen 20 B2 AA 32 178 170 DarkCyan 00 8B 8B 0 139 139 Teal 00 80 80 0 128 128

Cyan colors

Aqua 00 FF FF 0 255 255 Cyan 00 FF FF 0 255 255 LightCyan E0 FF FF 224 255 255 PaleTurquoise AF EE EE 175 238 238 Aquamarine 7F FF D4 127 255 212 Turquoise 40 E0 D0 64 224 208 MediumTurquoise 48 D1 CC 72 209 204 DarkTurquoise 00 CE D1 0 206 209 CadetBlue 5F 9E A0 95 158 160 SteelBlue 46 82 B4 70 130 180

Blue colors LightSteelBlue B0 C4 DE 176 196 222 PowderBlue B0 E0 E6 176 224 230 LightBlue AD D8 E6 173 216 230 SkyBlue 87 CE EB 135 206 235 LightSkyBlue 87 CE FA 135 206 250 DeepSkyBlue 00 BF FF 0 191 255 DodgerBlue 1E 90 FF 30 144 255 CornflowerBlue 64 95 ED 100 149 237 RoyalBlue 41 69 E1 65 105 225 SlateBlue 6A 5A CD 106 90 205 MediumSlateBlue 7B 68 EE 123 104 238 Blue 00 00 FF 0 0 255 MediumBlue 00 00 CD 0 0 205 DarkBlue 00 00 8B 0 0 139 Navy 00 00 80 0 0 128 MidnightBlue 19 19 70 25 25 112

HTML name Hex RGB Decimal RGB

Brown colors

Cornsilk FF F8 DC 255 248 220 BlanchedAlmond FF EB CD 255 235 205 Bisque FF E4 C4 255 228 196 NavajoWhite FF DE AD 255 222 173 Wheat F5 DE B3 245 222 179 BurlyWood DE B8 87 222 184 135 Tan D2 B4 8C 210 180 140 RosyBrown BC 8F 8F 188 143 143 SandyBrown F4 A4 60 244 164 96 Goldenrod DA A5 20 218 165 32 DarkGoldenrod B8 86 0B 184 134 11 Peru CD 85 3F 205 133 63 Chocolate D2 69 1E 210 105 30 SaddleBrown 8B 45 13 139 69 19 Sienna A0 52 2D 160 82 45 Brown A5 2A 2A 165 42 42 Maroon 80 00 00 128 0 0

White colors White FF FF FF 255 255 255 Snow FF FA FA 255 250 250 Honeydew F0 FF F0 240 255 240 MintCream F5 FF FA 245 255 250 Azure F0 FF FF 240 255 255 AliceBlue F0 F8 FF 240 248 255 GhostWhite F8 F8 FF 248 248 255 WhiteSmoke F5 F5 F5 245 245 245 Seashell FF F5 EE 255 245 238 Beige F5 F5 DC 245 245 220 OldLace FD F5 E6 253 245 230 FloralWhite FF FA F0 255 250 240 Ivory FF FF F0 255 255 240 AntiqueWhite FA EB D7 250 235 215 Linen FA F0 E6 250 240 230 LavenderBlush FF F0 F5 255 240 245 MistyRose FF E4 E1 255 228 225

Gray colors

Gainsboro DC DC DC 220 220 220 LightGrey D3 D3 D3 211 211 211 Silver C0 C0 C0 192 192 192 DarkGray A9 A9 A9 169 169 169 Gray 80 80 80 128 128 128 DimGray 69 69 69 105 105 105 LightSlateGray 77 88 99 119 136 153 SlateGray 70 80 90 112 128 144 DarkSlateGray 2F 4F 4F 47 79 79 Black 00 00 00 0 0 0


Pg 73 of 77

IE 46 named Colors

Internet Explorer's Proprietary Names Color Name Hex 6 Hex 3 RGB RGB% Sample

white #FFFFFF #FFF 255,255,255 100%,100%,100%

beige #F5F5DC #FFD 245,245,220 96%,96%,86%

cornsilk #FFF8DC #FFD 255,250,220 100%,97%,86%

lemonchiffon #FFFACD #FFC 255,250,205 100%,98%,80%

blanchedalmond #FFEBCD #FEC 255,235,205 100%,92%,80%

bisque #FFE4C4 #FEC 255,230,195 100%,89%,76%

antiquewhite #FAEBD7 #FED 250,235,215 98%,92%,84%

burlywood #DEB887 #DB8 220,185,135 87%,72%,52%

salmon #FA8072 #F87 250,130,115 98%,50%,44%

coral #FF7F50 #F75 255,125,80 100%,49%,31%

orange #FFA500 #FA0 255,165,0 100%,64%,0%

darkorange #FF8C00 #F80 255,140,0 100%,54%,0%

chocolate #D2691E #D61 210,105,30 82%,41%,11%

darkkhaki #BDB76B #BB6 190,185,105 74%,71%,41%

darkgoldenrod #B8860B #B80 185,135,10 72%,52%,4%

indianred #CD5C5C #C55 205,90,90 80%,36%,36%

darksalmon #E9967A #E97 235,150,120 91%,58%,47%

brown #A52A2A #A22 165,40,40 64%,16%,16%

darkred #8B0000 #800 140,0,0 54%,0%,0%

crimson #DC143C #D13 220,20,60 86%,7%,23%

azure #F0FFFF #FFF 240,255,255 94%,100%,100%

aquamarine #7FFFD4 #7FD 125,255,210 49%,100%,83%

Cyan / Aqua #00FFFF #0FF 0,255,255 0%,100%,100%

lightseagreen #20B2AA #2BA 30,180,170 12%,69%,66%

yellowgreen #9ACD32 #9C3 155,205,50 60%,80%,19%

chartreuse #7FFF00 #7F0 125,255,0 49%,100%,0%

forestgreen #228B22 #282 35,140,35 13%,54%,13%

darkolivegreen #556B2F #562 85,105,50 33%,41%,18%

darkgreen #006400 #060 0,100,0 0%,39%,0%

darkcyan #008B8B #088 0,140,140 0%,54%,54%

cadetblue #5F9EA0 #59A 95,160,160 37%,61%,62%

darkseagreen #8FBC8B #8B8 145,190,140 56%,73%,54%

aliceblue #F0F8FF #FFF 240,250,255 94%,97%,100%

cornflowerblue #6495ED #69E 100,150,235 39%,58%,92%

dodgerblue #1E90FF #19F 30,145,255 11%,56%,100%

blue #0000FF #00F 0,0,255 0%,0%,100%

navy #000080 #008 0,0,130 0%,0%,50%

darkblue #00008B #008 0,0,140 0%,0%,54%

lavender #E6E6FA #EEF 230,230,250 90%,90%,98%

mediumslateblue #7B68EE #76E 125,105,240 48%,40%,93%

slateblue #6A5ACD #65C 105,90,205 41%,35%,80%

blueviolet #8A2BE2 #82E 140,45,225 54%,16%,88%

darkorchid #9932CC #93C 155,50,205 60%,19%,80%

darkmagenta #8B008B #808 140,0,140 54%,0%,54%

lightgrey #D3D3D3 #DDD 210,210,210 82%,82%,82%

darkgray #A9A9A9 #AAA 170,170,170 66%,66%,66%

black #000000 #000 0,0,0 0%,0%,0%

Internet Explorer's proprietary color names with th eir corresponding numerical values. Members of the Websafe and Reallysafe palletes are marked.


Pg 74 of 77

Websafe 210 Colors

Code Color Code Color Code Color Code Color Code Color Code Color

000000 000033 000066 000099 0000cc 0000FF

003300 003333 003366 003399 0033cc 0033ff

006600 006633 006666 006699 0066cc 0066ff

009900 009933 009966 009999 0099cc 0099ff

00cc00 00cc33 00cc66 00cc99 00cccc 00ccff

00FF00 00ff33 00FF66 00ff99 00FFCC 00FFFF

330000 330033 330066 330099 3300cc 3300ff

333300 333333 333366 333399 3333cc 3333ff

336600 336633 336666 336699 3366cc 3366ff

339900 339933 339966 339999 3399cc 3399ff


33ff00 33FF33 33FF66 33ff99 33FFCC 33FFFF

660000 660033 660066 660099 6600cc 6600ff

663300 663333 663366 663399 6633cc 6633ff

666600 666633 666666 666699 6666cc 6666ff

669900 669933 669966 669999 6699cc 6699ff


66FF00 66FF33 66ff66 66ff99 66ffcc 66FFFF

990000 990033 990066 990099 9900cc 9900ff

993300 993333 993366 993399 9933cc 9933ff

996600 996633 996666 996699 9966cc 9966ff

999900 999933 999966 999999 9999cc 9999ff


99ff00 99ff33 99ff66 99ff99 99ffcc 99ffff

cc0000 cc0033 cc0066 cc0099 cc00cc cc00ff




cccc00 cccc33 cccc66 cccc99 cccccc ccccff

ccff00 ccff33 CCFF66 ccff99 ccffcc ccffff

FF0000 FF0033 ff0066 ff0099 ff00cc FF00FF

ff3300 ff3333 ff3366 ff3399 ff33cc ff33ff



ffcc00 ffcc33 ffcc66 ffcc99 ffcccc ffccff

FFFF00 FFFF33 FFFF66 ffff99 ffffcc FFFFFF


Pg 75 of 77

Notes: ___________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________


Pg 76 of 77

Notes: ___________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________

__________________________________________________________________


Pg 77 of 77

Back Page

Html Documentation Introduction to HTML http://www.utoronto.ca/webdocs/htmldocs/NewHTML/htmlindex.html

http://www.w3.org/TR/html4/

http://www.lbl.gov/web/Web-Docs.html

Html Tutorials http://www.w3schools.com/html/html_intro.asp

http://www.html5tutorial.info/index.php

http://www.htmlcodetutorial.com/

http://www.tizag.com/htmlT/

CSS Documentation

http://www.css3.info/

http://reference.sitepoint.com/css

https://developer.mozilla.org/en/CSS/CSS_Reference

http://htmlhelp.com/reference/css/

http://www.w3schools.com/cssref

http://xhtml.com/en/css/reference/

CSS Tutorials http://www.w3schools.com/css/

http://www.echoecho.com/css.htm

http://www.csstutorial.net/

http://www.w3.org/Style/Examples/011/firstcss.en.html

http://www.html.net/tutorials/css/

HTML-CSS_Reference

Documents

Transcript of HTML-CSS_Reference