Ch. 2 HTML5, CIS 110 13F

1,827 views

Published on

Presentation slides from Web Dev. & Des. Foundations, 6ed (Pearson)

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,827
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
123
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ch. 2 HTML5, CIS 110 13F

  1. 1. WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts Copyright © Terry Felke-Morris Wednesday, October 23, 13 1
  2. 2. HTML ELEMENTS  containers <p>Fourscore and 20 years ago...</p>  empty elements <hr> <img src=”../images/anna.png”> Copyright © Terry Felke-Morris Wednesday, October 23, 13 4
  3. 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. 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. 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. 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
  7. 7. TITLE ELEMENT META ELEMENT Copyright © Terry Felke-Morris Wednesday, October 23, 13 13
  8. 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. 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. 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
  11. 11. BLOCKQUOTE ELEMENT Blockquote element Indents a block of text for special emphasis <blockquote> …text goes here… </blockquote> Copyright © Terry Felke-Morris Wednesday, October 23, 13 17
  12. 12. PHRASE ELEMENTS  Indicate the context and meaning of the text Copyright © Terry Felke-Morris Wednesday, October 23, 13 18
  13. 13. HTML LISTS Unordered List Ordered List Description List formerly called a definition list Copyright © Terry Felke-Morris Wednesday, October 23, 13 19
  14. 14. UNORDERED LIST EXAMPLE <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul> Copyright © Terry Felke-Morris Wednesday, October 23, 13 21
  15. 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
  16. 16. DESCRIPTION LIST EXAMPLE <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl> Copyright © Terry Felke-Morris Wednesday, October 23, 13 25
  17. 17. SPECIAL CHARACTERS  Display special characters such as quotes, copyright symbol, etc. Character © < > & Copyright © Terry Felke-Morris Wednesday, October 23, 13 Code &copy; &lt; &gt; &amp; &nbsp; 27
  18. 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. 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. 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. 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. 22. WRITING VALID HTML Hands On Practice, 2.8, p. 43  http://validator.w3.org Copyright © Terry Felke-Morris Wednesday, October 23, 13 34
  23. 23. Ch. 2 Assessment: Learning Outcomes - Know the following Copyright © Terry Felke-Morris Wednesday, October 23, 13 35

×