Presentation is loading. Please wait.

Presentation is loading. Please wait.

Neal Stublen A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”

Similar presentations


Presentation on theme: "Neal Stublen A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”"— Presentation transcript:

1 Neal Stublen nstublen@jccc.edu

2

3 A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”  Link to your CSS  Perhaps some JavaScript

4 HTML5 Compatibility  Simplifications were introduced after determining what could be removed while still working with modern browsers  None of these document changes should fail to render

5 DOCTYPE HTML 4.01…

6 DOCTYPE XHTML 1.0…

7 DOCTYPE HTML 5…

8 Character Set HTML 4.01, XHTML 1.0…

9 Character Set HTML 5…

10 Style Sheets HTML 4.01, XHTML 1.0…

11 Style Sheets HTML 5…

12 JavaScript HTML 4.01, XHTML 1.0…

13 JavaScript HTML 5…

14 XHTML Differences  Void tags don’t need to be closed But it’s still okay

15 XHTML Differences  Uppercase/lowercase doesn’t matter on tags and attributes

16 XHTML Differences  Quoting attribute values isn’t necessary

17 XHTML Differences  Boolean attributes don’t need values

18 HTML5 Compatibility  HMTL5 introduces some new element tags  Most older browsers don’t care Unknown element tags are rendered as inline elements  However, IE8 and earlier won’t apply styling to unknown element tags Use html5shiv.js

19

20 Page Structure  Look at the page we want to design for the HTML Herald. How would we create the page structure using elements? Header with navigation links Content area with three columns Footer

21 HTML5 “Semantic” Content  Additions to HTML5 are intended to provide better descriptions of content  Tag names imply meaning/purpose  Not just divs… header, nav, section, article, aside, footer  Why? Standard implementation Useful to non-human readers

22 The header element  Contains introductory elements or navigational links  The header is not defined by its location on the page, but its purpose within the page The entire page A section of the page Both

23 The section element  Thematic grouping of content, typically with a heading  If the content within the section isn’t related, use a div  Prefer a more specific tag if possible article, aside, nav

24 The article element  Similar to section, but…  Self-contained composition  Independently distributable  Possible examples: Forum posts Magazine articles Blog posts User comments

25 The nav element  Intended to wrap a set of navigation links that are of primary importance for the page  May be links to pages within the site  May be links to anchors within the page  You can have multiple nav sections

26 The aside element  Marks content that is tangentially related to the content around it or the content on the page  Possible examples: Side bar Advertisements

27 The footer element  Indicates footer content  It may appear at the end of the page  It may appear at the end of an article or section  Does not necessarily imply anything about position on the page, but relationship to content on the page Information about an author

28 Page Structure Revisited  How would we update the HTML Herald page layout to use the new HTML5 elements? header nav section article aside footer


Download ppt "Neal Stublen A Basic Template  HTML doctype Much simpler than HTML4/XHTML  Title and meta content Again simpler than “Content-Type”"

Similar presentations


Ads by Google