Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris

Display special characters such as quotes, copyright symbol, etc. Character Code © © < < > > & & SPECIAL CHARACTERS 2

Copyright © Terry Felke-Morris DIV ELEMENT  Configures a structural block area or “division” on a web page with empty space above and below.  Can contain other block display elements, including other div elements Home Services Contact 3

Copyright © Terry Felke-Morris HTML5 STRUCTURAL ELEMENTS  header Element Contains the web page document’s headings  nav Element Contains web page document’s main navigation  main Element Contains the web page document’s main content  footer Element Contains the web page document’s footer 4

Copyright © Terry Felke-Morris HTML5 STRUCTURAL ELEMENTS document headings go here main navigation goes here main content goes here document footer information goes here 5

Copyright © Terry Felke-Morris HANDS-ON PRACTICE 2.10 (PAGE 49)  chapter2/structure.html 6

Copyright © Terry Felke-Morris ANCHOR ELEMENT  Specifies a hyperlink reference (href) to a file  Text between the and is displayed on the web page. Contact Us  href Attribute  Indicates the file name or URL 7

Copyright © Terry Felke-Morris HANDS-ON PRACTICE 2.11 (PAGE 51)  chapter2/anchor.html 8

Copyright © Terry Felke-Morris ABSOLUTE & RELATIVE HYPERLINKS  Absolute link  Link to a different website Yahoo  Relative link  Link to pages on your own site Home 9

Copyright © Terry Felke-Morris HANDS-ON PRACTICE 2.12 (PAGE 52)  chapter2/practice/index.html  chapter2/practice/services.html  chapter2/practice/contact.html 10

Copyright © Terry Felke-Morris HYPERLINK  Automatically launch the default mail program configured for the browser  If no browser default is configured, a message is displayed 11

HYPERLINKS 12  Hands-On Practice

Copyright © Terry Felke-Morris HANDS-ON PRACTICE 2.13 (PAGE 56)  chapter2/practice2/index.html 13

Copyright © Terry Felke-Morris WRITING VALID XHTML  Check your code for syntax errors  Benefit:  Valid code  more consistent browser display  W3C HTML Validation Tool 

Copyright © Terry Felke-Morris HANDS-ON PRACTICE 2.14 (PAGE 58)  chapter2/design.html 15