1 / 18

HTML Validation & HTML5

HTML Validation & HTML5. WRA 210 10 /16/ 13. Today’s Agenda. Overview of new objects: lists, tables Overview of metadata: meta tags, comments History of the Web Evolution of Web Standards Intro to HTML5 Activities along the way. Overview of HTML Objects. lists what are they used for?

nevan
Download Presentation

HTML Validation & HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Validation& HTML5 WRA 210 10/16/13

  2. Today’s Agenda • Overview of new objects: lists, tables • Overview of metadata: meta tags, comments • History of the Web • Evolution of Web Standards • Intro to HTML5 • Activities along the way

  3. Overview of HTML Objects • lists • what are they used for? • what kinds of children do they have? • how do we create nested lists? • tables • what are they used for? • how have they been (incorrectly) used in the past? • how does the <table> tag work, what children?

  4. Overview: Metadata • <meta> tags • what are they good for? • what kinds of metadata can we include? • what of this metadata is still useful? why / why not? • HTML Comments • what are they? • why do people use them? • how do they work? (syntax)

  5. Reminder: Saving Exercises • No modules for a few weeks • Ungraded exercises • Create a new AFs folder - exercises • Create a new HTML file • name file exercise2.html or something else relevant • paste code from Thimble into it • save to AFS in exercises folder • Create new list item for "Exercises" on course page • Add sublist, create link to today's exercise

  6. Discuss Zeldman frequently discusses the need to remove “presentation from structure.” Discuss what this means, particularly in the relationship between HTML and CSS.

  7. Before Web Standards • Transition from print to digital technologies • New: users choose how to interact with a text • New: how do texts age as technologies evolve? • Browser Wars • Browser developers made their own rules • No way to trust that a design would render the same in different browsers • Maintaining multiple versions of the same website for different browsers

  8. Before Web Standards The Culprits - Netscape and Microsoft

  9. Where Do Standards Come From • The World Wide Web Consortium • Started in 1994 • Didn't really have teeth until 2004 • Mozilla and Firefox led, others followed • W3C consists of members with a vested interest in the web • Microsoft, Google, Apple, Mozilla, Adobe, etc • Group deliberates on how standards evolve

  10. Benefits of Standards • Reliable display across browsers [almost] • Improved backwards compatibility • Structure - Presentation - Behavior • Universal support of CSS • Separation of content from presentation [almost] • Texts that transform for different audiences and tech • Universal support of JavaScript • Interactive texts, advanced web services

  11. Being Standards-compliant • Markup must follow syntax rules • All required attributes • No objects with children they can't have • All rules of tags followed • lowercase letters • all attributes in quotation marks • all tags closed properly (especially <img />) • Your markup will be tested for compliance

  12. Validating Your Markup • W3C Validator - free, easy to use • Upload files or paste markup into it • This is how you will be evaluated • Test your favorite website course page • See if google.com is valid • What kind of errors do we get back?

  13. Activity • Check your course pages for compliance • Report - what kind of errors (if any)? (do this in thimble) • Fix your markup (if necessary) • Remember: • your markup will be graded for proper syntax • validate early, validate often

  14. Read These Things • https://www.apple.com/hotnews/thoughts-on-flash/ • https://blogs.adobe.com/conversations/2011/11/flash-focus.html • http://www.buuteeq.com/blog/html5-and-the-death-of-flash/ • Question: • think of HTML5 and Flash in terms of standards • what are the primary advantages of HTML5 over Flash? (do this in timble)

  15. What HTML5 is About • Not brand new - evolutionary, not revolutionary • Almost all of HTML4 survives (some things obsolete) • Usable now; browser support varies • Adds native support for audio, video, drawing (canvas) Simplifies a lot of complicated markup • Adds new forms of semantic markup

  16. Lots of HTML5 to Play With • Choose One • https://www.apple.com/html5/ • http://html5demos.com/ • http://beta.theexpressiveweb.com/ • http://www.chromeexperiments.com/ • https://developer.mozilla.org/en-US/demos/ • Play - take demos for a spin • Think - these are done without Flash • Significance of these being in the browser? (thimble)

  17. You and HTML5 • Your course page template was written in HTML5 • Week after next: using HTML5 semantic features to create your portfolio layouts • Learn: HTML5 for Web Designers • Learn: http://5stepstohtml5.com

  18. For Next Time • Explore further - play! • Read/Watch: • What is the DOM? • What is CSS? • Lynda.com CSS Introduction

More Related