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


HTML ELEMENTS containers

<p>Fourscore and 20 years ago...</p>

empty elements

<hr>

<img src=”../images/anna.png”>

4

Wednesday, October 23, 13


WHAT IS HTML5 ?Newest draft version of HTML/XHTMLIntended to be backwards compatibleAdds many new elements

7



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



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



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



TITLE ELEMENTMETA ELEMENT

13



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



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



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



BLOCKQUOTE ELEMENT

Blockquote elementIndents a block of text for special

emphasis

<blockquote> …text goes here…</blockquote>

17



Indicate the context and meaning of the text

PHRASE ELEMENTS

18



HTML LISTS

Unordered ListOrdered ListDescription List

formerly called a definition list

19



UNORDERED LIST EXAMPLE

<ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul>

21



ORDERED LIST EXAMPLE

<ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol>

23



DESCRIPTION LIST EXAMPLE<dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd></dl>

25



Display special characters such as quotes, copyright symbol, etc.

Character Code © © < < > > & &

SPECIAL CHARACTERS

27



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



ANCHOR ELEMENT hyperlink

<a href="contact.html">Contact Us</a> ^ landing page ^anchor text

29



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



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


http://validator.w3.org/



WRITING VALID HTML

Hands On Practice, 2.8, p. 43

http://validator.w3.org

34


http://www.cs.uoregon.edu/Classes/13F/cis110/code/HTML5-Stu-Files/hands-on-practice/

http://www.cs.uoregon.edu/Classes/13F/cis110/code/HTML5-Stu-Files/hands-on-practice/




Ch. 2 Assessment:Learning Outcomes - Know the following

35


Education

Ch. 2 HTML5, CIS 110 13F