Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to HTML 5 / CSS 3


Published on

This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.

Published in: Design, Technology
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ★★★
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ●●●
    Are you sure you want to  Yes  No
    Your message goes here
  • Njce! Thanks for sharing.
    Are you sure you want to  Yes  No
    Your message goes here

Intro to HTML 5 / CSS 3

  1. 1. Introduction to & Andrew Christian
  2. 2. Obligatory Intro So, who is this guy?• Coding HTML since 1996• WordPress since 2004 (v1.0.2 Art Blakely)• New York WP Community since WordCamp NYC 2009.• - WordPress Hosting, Support, Training and Consulting
  3. 3. I’m assuming...• You are somewhat familiar with previous versions of HTML and CSS .• You know your way around a WordPress theme, but not necessarily hard-core dev.
  4. 4. A Little History• HTML was created to link documents via HyperText (the “HT” in HTML)• Quickly grew into a more rich markup language (the “ML”)• Browser Wars: Microsoft vs. Netscape.
  5. 5. A Little History• XHTML created in order to transition from HTML to XML• XHTML required stricter coding standards.• If not coded properly, it would break... Horribly.
  6. 6. A Little History• 2002: W3C created XHTML 2.0• 2004: Apple, Mozilla, and Opera created the WHATWG, when W3C shot down HTML5.• 2007: W3C created HTML 5 working group.• 2009: W3C abandons XHTML 2.0 in favor of HTML5.
  7. 7. HTML5 Philosophy• Must be backwards compatible with older versions of HTML.• Everything added or removed must be done so for a practical purpose.• The process of deciding what goes in is an open process, involving blogs, twitter, etc.
  8. 8. Can we use it now?• The spec is not 100% finalized, but is broken into “modules,” many of which are finalized.• Most features are supported by all major browsers (Chrome, Firefox 4+, Safari, IE9+)• Most features degrade gracefully in older browsers.
  9. 9. Document Heading<!DOCTYPE html PUBLIC “=//W3C//DTD XHTML 1.0 Transitional//EN”“”><html xmlns="" xml:lang="en"lang="en"><head> <title>Page Titlegoes hear</title> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /><link rel=”stylesheet” href=”style.css” type=”text/css” /><script src=”javascript.css” type=”text/javascript” /> </head>
  10. 10. Document Heading<!DOCTYPE html><html lang="en-us"><head><title>Page Title goes hear</title><meta charset=”utf-8”><link rel=”stylesheet” href=”style.css”>
  11. 11. HTML Code Syntax<IMG SRC=”image.png” ALT=”This is an image, Duh!” /> is the same as <Img sRc=image.png ALt=’This is an image, Duh!’>
  12. 12. New HTML Elements• article • footer< >• aside • header• bdi • hgroup• command • mark• details • nav• summary • ruby, rt, and rp• figure • section• figcaption • time
  13. 13. Changed Elements• <a> can now wrap around block elements.• <b> and <i> are back (but not presentational).• <cite> defined to be the title of a work.• <hr> is now a “paragraph-level thematic break.”• <small> is now for small-print, i.e., legal boilerplate.
  14. 14. Removed Elements• <big>• <center> and <font>• <strike> and <u>• <frame>, <frameset>, and <noframes>• <acronym> is now <abbr>• <applet> is now <object>
  15. 15. Blog Page Structure<div id=”header”> <h1>Page Title</h1> <p>Tag Line text...</p></div><div id=”nav”> <ul>...list of nav links...</ul></div><div id=”sidebar”>...sidebar links...</div><div id=”content”> <div class=”article”> <h2>Article Title</h2> <p>Published on June 9, 2012.</p> <p>Article Content</p> <div class=”entry-meta”>...comments, permalink, etc...</div> </div></div><div id=”footer”>
  16. 16. Blog Page Structure<header> <hgroup> <h1>Page Title</h1> <h2>Tag Line text...</h2> </hgroup></header><nav><ul>...list of nav links...</ul></nav><aside>...sidebar links...</aside><article> <header> <h1>Article Title</h1> <time datetime=”2012-06-09” pubdate”>Published on June 9, 2012.</time> </header> <p>Article Content</p> <footer>...comments, permalink, etc...</footer>
  17. 17. <header> & <hgroup>• When <header> is used outside of other elements, it’s assumed to be the page header.• When <header> is used inside of elements like <aside> and <article>• <header> isn’t necessary when an <h1> is the only element of the header.• Cannot be placed inside a <footer>, <address> or another <header> element.
  18. 18. <header> & <hgroup>• <header> allows you to group other content in with the heading, such as publication date, etc.• <hgroup> links together multiple headings into one header.• Great for headers that have multiple lines, or the Page Title with a Site Description.
  19. 19. <footer>• Just like <header>, you can use more than one <footer> on a page.• A footer typically, but not always, goes at the bottom of content.• For example, if you use a <footer> for next/ previous blog post links, you can use<article> <header>...</header> <footer>...Next/Previous nav links</footer> <p>...Content</p> <footer>...Next/Previous nav links</footer>
  20. 20. <nav>• Usually contains a <ul> list of links.• You can have more than one <nav> list on a page.• Placing the <nav> outside of other elements means it’s navigation across your site.• Placing <nav> inside an <article> means it’s navigation for that article only (useful on single post pages for Next/Previous links).
  21. 21. <article> and <section>• <article> should be a complete block of content that is wholly separate from other content.• <section> divides content into, yes, sections. A section does not stand on its own.• Think of <article> as something you might see in an RSS feed.• However, you can use <article> within another <article> tag. For example, comments could be in separate <article> tags inside of a blog post.
  22. 22. <aside>• Used for “Secondary Content”• Meant for content that is related to, but not necessarily important for understanding, content.• Can be used as a sidebar for a page.• Can also be used inside <article>, etc., for information related to the article.
  23. 23. <aside>• Used for “Secondary Content”• Meant for content that is related to, but not necessarily important for understanding, content.• Can be used as a sidebar for a page.• Can also be used inside <article>, etc., for information related to the article.
  24. 24. Forms - New Attributes• required• autofocus• placeholder• form• autocomplete• pattern
  25. 25. Forms - New Input Types• email • tel (telephone)• date • color• search • number• New input types fall back to type=”text” in older browsers, but newer browsers can display a special input (keyboard, color chooser, number dial, etc.)
  26. 26. Video - the old way<object width=”400 height=”300”> <param name=”movie” value=”” /> <param name=”allowFullScreen” value=”true” /> <param name=”allowscriptaccess” value=”always” /> <embed src=”” type=”application/x- shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”400” height=”300” />• Code is complex and confusing• Relies on 3rd party plugins for functionality.
  27. 27. Video - the new way<video src=”movie.mp4”>
  28. 28. Video - the new way<video controls autoplay> <source src=”movie.mp4” type=”video/mp4; codecs=avc1.42E01E,mp4a.40.2”> <source src=”movie.ogv” type=”vidio/off; codecs=theora,vorbis”> <p>Get the video in <a href=”movie.mp4”>MP4</a> or <a href=”movie.ofv”>Ogg Vorbis</a> format.</p>• Code is easier to read.• Video playback doesn’t require any plugins.• Multiple sources depending on browser support.
  29. 29. Audio - Just as easy!<audio src=”audio.mp3”>
  30. 30. Now it’s time to dig in to
  31. 31. Browser Support• Webkit (Safari and Chrome)• Firefox 4+• Opera• IE 9+• CSS3 doesn’t deprecate anything from CSS 2.1.• Currently uses -moz-, -webkit-, and other browser specific prefixes on many modifiers.
  32. 32. CSS3 and Color• The old way - background-color: #1a2b3c;• RGBa - background-color: rgba(0, 255, 0, 0.7);• HSLa - background-color: hsla(0, 100%, 35%, 0.4);• “a” stands for “alpha”, or opacity.
  33. 33. Opacity and Gradients • You can also specify the opacity of an object: header { background-color: #000; opacity: 0.7; } • or specify a color gradient. background-image: -webkit-gradient( linear, left 50, right 50, color-stop(0.08, rgb(255,255,255)), color-stop(0.54, rgb(133,133,133)), color-stop(0.77, rgb(0,0,0)) );
  34. 34. New selectors• input[type=”text”] { css rules }• li:nth-child(3) { css rules }• li:nth-child(3n+3) { css rules }• li:nth-child(even) { css rules }• li:nth-child(odd) { css rules }• li:first-child { css rules }• li:last-child { css rules }
  35. 35. Text-shadow and Web fonts • You can apply a drop-shadow:.quote {} text-shadow: 2px 2px 4px #fff; Quote Text • or embed a font on the web@font-face { font-family: “BiauKai”; src: url(“fonts/BiauKai.ttf”);}
  36. 36. Web-font resources•••••
  37. 37. Rounded Corners • You can round off the corners of a container:header { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; • always specify the non-browser specific modifier last, so compliant browsers will use it.
  38. 38. And so much more!• Box shadows (like text-shadow, but for block-level)• Specify multiple backgrounds.• Set transition times on “:hover”ed elements• “Transform” objects (rotate, skew, resize)
  39. 39. Implementing CSS3 Today • - compatibility check for HTML5, CSS3 and more based on browser. • HTML5 for Internet Explorer 6 to 8<head< <!-- [if lt IE9]> <script src=”//”> <![endif] --></head> • Use a reset.css to start with a clean slate. • Use Progressive Enhancement
  40. 40. Why use HTML5/CSS3?• Less reliance on JavaScript.• Less reliance on heavy images.• Less reliance on 3rd party plugins.• Better SEO• Better UX for website visitors.• They can do some really cool things.
  41. 41. Credits• Joe Lewis: introduction-to-html5-and-css3-revised• Bruce Lawson and Remy Sharp: Introducing HTML5 (2nd Edition)• and•