Download - Ch. 2 HTML5, CIS 110 13F
Copyright © Terry Felke-Morris
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5
Chapter 2Key Concepts
1Copyright © Terry Felke-MorrisWednesday, October 23, 13
Copyright © Terry Felke-Morris
HTML ELEMENTS containers
<p>Fourscore and 20 years ago...</p>
empty elements
<hr>
<img src=”../images/anna.png”>
4
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
WHAT IS HTML5 ?Newest draft version of HTML/XHTMLIntended to be backwards compatibleAdds many new elements
7
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
DOCUMENT TYPE DEFINITION
Document Type Definition (DTD)doctype statementidentifies the version of HTML contained
in your document.placed at the top of a web page
document
8
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
EXAMPLE HTML5 WEB PAGE <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Page Title Goes Here</title></head><body>... body text and more HTML5 tags go here ...</body></html>
11
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
HEAD & BODY SECTIONSHead Section
describes the document <head>…head section info goes here</head>
Body SectionContains the content<body>…body section info goes here</body>
12
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
TITLE ELEMENTMETA ELEMENT
13
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
THE HEADING ELEMENT
<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>
14
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
PARAGRAPH ELEMENT
Paragraph element<p> …paragraph goes here… </p>
Configures a blank line above and below the paragraph
=> block display elements vs.=> inline display elements
15
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
LINE BREAK ELEMENT
Line Break elementempty element
XHTML syntax: <br /> HTML syntax: <br>
…text goes here <br>This starts on a new line….
Causes the next element or text to display on a new line
16
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
BLOCKQUOTE ELEMENT
Blockquote elementIndents a block of text for special
emphasis
<blockquote> …text goes here…</blockquote>
17
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
Indicate the context and meaning of the text
PHRASE ELEMENTS
18
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
HTML LISTS
Unordered ListOrdered ListDescription List
formerly called a definition list
19
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
UNORDERED LIST EXAMPLE
<ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul>
21
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
ORDERED LIST EXAMPLE
<ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol>
23
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
DESCRIPTION LIST EXAMPLE<dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd></dl>
25
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
Display special characters such as quotes, copyright symbol, etc.
Character Code © © < < > > & &
SPECIAL CHARACTERS
27
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
DIV ELEMENT
Configures a structural block or “division” on a web page with empty space above and below.
Can contain other block display elements (including div elements)
<div>Home Services Contact</div>
28
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
ANCHOR ELEMENT hyperlink
<a href="contact.html">Contact Us</a> ^ landing page ^anchor text
29
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
ABSOLUTE & RELATIVE HYPERLINKSAbsolute link
Link to other websites
<a href="http://yahoo.com">Yahoo</a>
Relative linkLink to pages on your own site
<a href="index.htm">Home</a>
30
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
WRITING VALID HTMLCheck your code for syntax errors
Valid code displays the same in all browsers
W3C HTML Validation Tool http://validator.w3.org
34
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
WRITING VALID HTML
Hands On Practice, 2.8, p. 43
http://validator.w3.org
34
Wednesday, October 23, 13
Copyright © Terry Felke-Morris
Ch. 2 Assessment:Learning Outcomes - Know the following
35
Wednesday, October 23, 13