html validation html5 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML Validation & HTML5 PowerPoint Presentation
Download Presentation
HTML Validation & HTML5

Loading in 2 Seconds...

play fullscreen
1 / 18

HTML Validation & HTML5 - PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on

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?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML Validation & HTML5' - nevan


Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html validation html5
HTML Validation& HTML5

WRA 210

10/16/13

today s agenda
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
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?
overview metadata
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)
reminder saving exercises
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
discuss
Discuss

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

before web standards
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
before web standards1
Before Web Standards

The Culprits - Netscape and Microsoft

where do standards come from
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
benefits of standards
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
being standards compliant
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
validating your markup
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?
activity
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
read these things
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)
what html5 is about
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
lots of html5 to play with
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)
you and html5
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
for next time
For Next Time
  • Explore further - play!
  • Read/Watch:
    • What is the DOM?
    • What is CSS?
    • Lynda.com CSS Introduction