Mais conteúdo relacionado Semelhante a Ch. 2 HTML5, CIS 110 13F (20) Ch. 2 HTML5, CIS 110 13F1. WEB DEVELOPMENT & DESIGN
FOUNDATIONS WITH HTML5
Chapter 2
Key Concepts
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
1
3. WHAT IS HTML5 ?
Newest draft version of HTML/XHTML
Intended to be backwards compatible
Adds many new elements
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
7
4. DOCUMENT TYPE DEFINITION
Document Type Definition
(DTD)
doctype statement
identifies the version of HTML contained
in your document.
placed at the top of a web page
document
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
8
5. 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>
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
11
6. HEAD & BODY SECTIONS
Head Section
describes the document
<head>
…head section info goes here
</head>
Body Section
Contains the content
<body>
…body section info goes here
</body>
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
12
8. 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>
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
14
9. 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
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
15
10. LINE BREAK ELEMENT
Line Break element
empty 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
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
16
15. ORDERED LIST EXAMPLE
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
23
17. SPECIAL CHARACTERS
Display special characters such as
quotes, copyright symbol, etc.
Character
©
<
>
&
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
Code
©
<
>
&
27
18. 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>
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
28
19. ANCHOR ELEMENT
hyperlink
<a href="contact.html">Contact Us</a>
^ landing page
^anchor text
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
29
20. ABSOLUTE & RELATIVE HYPERLINKS
Absolute link
Link to other websites
<a href="http://yahoo.com">Yahoo</a>
Relative link
Link to pages on your own site
<a href="index.htm">Home</a>
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
30
21. WRITING VALID HTML
Check your code for syntax
errors
Valid code
displays the same in all
browsers
W3C HTML Validation Tool
http://validator.w3.org
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
34
22. WRITING VALID HTML
Hands On Practice, 2.8, p. 43
http://validator.w3.org
Copyright © Terry Felke-Morris
Wednesday, October 23, 13
34