HTML5 HyperText Markup Language Instructs a browser how to “render”/display/format text
HTML5 Syntax The basic building block is the “element” An element is composed of a “start tag”, some text (content) and an “end tag” E.g. <a href=”next-page.html”> hello world </a> End tag Start tag content
Start Tag “<“ Name of the tag 0 or more “attributes” “>” E.g. <a href=”next-page.html”> name attributes
Content May be plain text May include other elements E.g. Hello world She wore a <em>very</em> large hat
Attributes Name/value pairs Syntax: name=“value” E.g. href=“next-page.html” cellspacing=“5”
End tag “</” Name of the corresponding start tag “>” E.g.
Html element Every document consists of a single html element: [link]greendreams.html <html> <head> <title>Green Dreams</title> </head> <body> Green dreams sleep peacefully. </body> </html>
<meta> element only inside a <head> element “name” attribute specifies a property name “content” attribute specifies a property value typical properties: author, keywords, description <meta name=”author” content=”Brian Koehler” />
Spacing Adjacent spaces, tabs, newlines in the input reduce to a single space in the output linkspacing.html The following will not display what you expect: Province Sales Tax Rate Ontario 8% Alberta 0% British Columbia 7%
Paragraphs The spacing rules apply to newlines between paragraphs: linkbad_para.htm This is paragraph 1. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog. This is paragraph 2. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog.
<p> element Enclose logical paragraphs inside a <p>…</p> element linkgood_para.html <p>This is paragraph 1. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog.</p> <p>This is paragraph 2. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog.</p>
Header elements Use the <h1> to <h6> elements to delineate sections of a document linkheader.html <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4>
Logical Highlighting <em>…</em> - emphasis (usually italics) <strong>…</strong> - stronger emphasis (usually boldface) linklogical html
Physical Highlighting <i>…</i> - italics <b>…</b> - bold <sub>…</sub> - subscript <sup>…</sup> - superscript linkphysical.html
Special Characters < < > > & & " “
Misc. elements Comments: <!-- your comment goes here --> Horizontal rule: <hr />
Images Inserted using <img> element Src attribute specifies file containing the image to insert Alt attribute specifies the text to display when the browser can’t render the image E.g. linkbill1.html <h1>Speedy Bill</h1> <img src="bill.jpg" alt=“This is Bill G”/>
Resizing Images Use the “width” and “height” attributes to specify the desired size <img src=“bill.jpg” width=“200” height=“200”/> linkbill2.html <img src=“bill.jpg” width=“90%” height=“90%” /> linkbill3.html
Links Links to other documents are implemented with the <a>…</a> or “anchor” element Href attribute specifies the document to link to E.g linklink.html See Bill <a href=“bill1.html”>drive fast</a>!
Block Level Elements Lists Tables Framesets
Layout (Block v. Inline) inline elements flow together one after another; a new line is started only if the next element will not fit on the current line block level elements almost always start on a new line
Lists (unordered) Produces a bulleted list: <ul>…</ul> Each item in the list is a <li>…</li> element
Lists (ordered) Produces a numbered list: <ol>…</ol> The browser numbers the items automatically Each item in the list is <li>…</li> element listlist1.html
Tables Creates a rectangular array of cells: <table>…</table> The “border” attribute specifies the width, in pixels, of the border around the table The “cellspacing” attribute specifies the amount of space, in pixels between adjacent cells The “cellpadding” attribute specifies the amount of space, in pixels between a cell and its own contents
Rows and Cells A “table” element contains one or more rows: <tr>…</tr> The first “tr” element usually contains one or more heading cells: <th>…</th> The remaing row elements are composed of one or more regular cells: <td>…</td> linktable1.html
Cell Spanning By default all cells are the same size and shape The “rowspan” attribute allows a cell to cross two or more columns The “colspan” attribute allows a cell to cross two or more rows linktable2.html
Definition Lists <dl>…</dl> definition list <dt>…</dt> term being defined <dd>…</dd> definition linkdefinition_list.html <dl> <dt>Dweeb</dt> <dd>young excitable person who may mature into a <em>Nerd</em> or <em>Geek</em></dd> <dt>Hacker</dt> <dd>a clever programmer</dd> <dt>Nerd</dt> <dd>technically bright but socially inept person</dd> </dl>
Cascading Style Sheets Separates content from presentation Used to globally alter the presentation of elements in a document E.g definition lists linkdefinition_list.html With font elements linkdl_with_font.html
CSS Syntax Styles are defined within a <style>…</style> element within the <head>…</head> element of the document E.g. <style type=“text/css”> dt { color: red } </style>
Syntax property selector dt { color: red } name value link dl_with_css
Selector name of an element <dt>, <ol>, <td> name of a class .pastoral {...} name of an ID attribute h1#main_section {...}
Common Properties Amount of space to leave inside the element before its content to the left padding-left Amount of space to leave vertically before element margin-top Normal, italic, or oblique font-style Normal or bold font-weight background-color Foreground colour color Description Name
Length units Relative em (ems, the height of the element's font) ex (x-height, the height of the letter "x") px (pixels, relative to the canvas resolution) Absolute in (inches; 1in=2.54cm) cm (centimeters; 1cm=10mm) mm (millimeters) pt (points; 1pt=1/72in) pc (picas; 1pc=12pt)
Linked Style Sheets <link> element inside the <head> element <link rel=”stylesheet” href=”foo.css” type=”text/css”>
Colours 12 bit RGB triple e.g. #47B 24 bit RGB triple e.g #F7342B name: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
Other considerations For filenames, stick to lowercase, numbers and underscores ‘_’ Use the proper extension: .html for HTML .gif, .jpg for images ‘src’ and ‘href’ attributes are relative to the current document