Download presentation
Presentation is loading. Please wait.
1
HTML5 HyperText Markup Language
Instructs a browser how to “render”/display/format text
2
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
3
Start Tag “<“ Name of the tag 0 or more “attributes” “>” E.g.
<a href=”next-page.html”> name attributes
4
Content May be plain text May include other elements E.g. Hello world
She wore a <em>very</em> large hat
5
Attributes Name/value pairs Syntax: name=“value” E.g.
href=“next-page.html” cellspacing=“5”
6
End tag “</” Name of the corresponding start tag “>” E.g.
7
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>
![Html element Every document consists of a single html element: [link]greendreams.html.](http://slideplayer.com./slide/12967293/79/images/7/Html+element+Every+document+consists+of+a+single+html+element%3A+%5Blink%5Dgreendreams.html..jpg "<html> <head> <title>Green Dreams</title> </head> <body> Green dreams sleep peacefully. </body> </html>")
8
<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” />
9
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%
10
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.
11
<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>
12
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>
13
Logical Highlighting <em>…</em> - emphasis (usually italics) <strong>…</strong> - stronger emphasis (usually boldface) linklogical html
14
Physical Highlighting
<i>…</i> - italics <b>…</b> - bold <sub>…</sub> - subscript <sup>…</sup> - superscript linkphysical.html
15
Special Characters < < > > & & " “
16
Misc. elements Comments: <!-- your comment goes here -->
Horizontal rule: <hr />
17
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”/>
18
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
19
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>!
20
Block Level Elements Lists Tables Framesets
21
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
22
Lists (unordered) Produces a bulleted list: <ul>…</ul>
Each item in the list is a <li>…</li> element
23
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
24
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
25
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
26
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
27
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>
28
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
29
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>
30
Syntax property selector dt { color: red } name value link dl_with_css
31
Selector name of an element <dt>, <ol>, <td>
name of a class .pastoral {...} name of an ID attribute h1#main_section {...}
32
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
33
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)
34
Linked Style Sheets <link> element inside the <head> element <link rel=”stylesheet” href=”foo.css” type=”text/css”>
35
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
36
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
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")