SlideShare a Scribd company logo

Intro to HTML 5 / CSS 3

•
•
Tadpole Collective
Tadpole Collective

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.

Related slideshows

Html intro
Html introHtml intro
Html intro
 
CSS
CSSCSS
CSS
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
1 of 41
Download to read offline
Introduction to & Andrew Christian
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. • Tadpole.cc - WordPress Hosting, Support, Training and Consulting
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.
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.
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.
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.
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.
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.
Document Heading <!DOCTYPE html PUBLIC “=//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml-1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Page Title goes 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>
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”>
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!’>
New HTML Elements • article • footer < > • aside • header • bdi • hgroup • command • mark • details • nav • summary • ruby, rt, and rp • figure • section • figcaption • time
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.
Removed Elements • <big> • <center> and <font> • <strike> and <u> • <frame>, <frameset>, and <noframes> • <acronym> is now <abbr> • <applet> is now <object>
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”>
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>
<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.
<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.
<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>
<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).
<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.
<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.
<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.
Forms - New Attributes • required • autofocus • placeholder • form • autocomplete • pattern
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.)
Video - the old way <object width=”400 height=”300”> <param name=”movie” value=”http://www.youtube.com/v/ddO9idmax0o” /> <param name=”allowFullScreen” value=”true” /> <param name=”allowscriptaccess” value=”always” /> <embed src=”http://www.youtube.com/v/ddO9idmax0o” 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.
Video - the new way <video src=”movie.mp4”>
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.
Audio - Just as easy! <audio src=”audio.mp3”>
Now it’s time to dig in to
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.
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.
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)) );
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 }
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”); }
Web-font resources • fontsquirrel.com • typekit.com • fontdeck.com • webfonts.fonts.com • google.com/webfonts
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.
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)
Implementing CSS3 Today • caniuse.com - compatibility check for HTML5, CSS3 and more based on browser. • HTML5 for Internet Explorer 6 to 8 <head< </head> • Use a reset.css to start with a clean slate. • Use Progressive Enhancement
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.
Credits • Joe Lewis: http://www.slideshare.net/sanbeiji/ introduction-to-html5-and-css3-revised • Bruce Lawson and Remy Sharp: Introducing HTML5 (2nd Edition) • w3schools.com/html and w3schools.com/css • HTML5doctor.com

More Related Content

Intro to HTML 5 / CSS 3

  • 1. Introduction to & Andrew Christian
  • 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. • Tadpole.cc - WordPress Hosting, Support, Training and Consulting
  • 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. 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. 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. 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. 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. 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. Document Heading <!DOCTYPE html PUBLIC “=//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml-1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Page Title goes 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. 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. 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. New HTML Elements • article • footer < > • aside • header • bdi • hgroup • command • mark • details • nav • summary • ruby, rt, and rp • figure • section • figcaption • time
  • 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. Removed Elements • <big> • <center> and <font> • <strike> and <u> • <frame>, <frameset>, and <noframes> • <acronym> is now <abbr> • <applet> is now <object>
  • 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. 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. <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. <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. <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. <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. <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. <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. <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. Forms - New Attributes • required • autofocus • placeholder • form • autocomplete • pattern
  • 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. Video - the old way <object width=”400 height=”300”> <param name=”movie” value=”http://www.youtube.com/v/ddO9idmax0o” /> <param name=”allowFullScreen” value=”true” /> <param name=”allowscriptaccess” value=”always” /> <embed src=”http://www.youtube.com/v/ddO9idmax0o” 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. Video - the new way <video src=”movie.mp4”>
  • 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. Audio - Just as easy! <audio src=”audio.mp3”>
  • 30. Now it’s time to dig in to
  • 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. 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. 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. 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. 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. Web-font resources • fontsquirrel.com • typekit.com • fontdeck.com • webfonts.fonts.com • google.com/webfonts
  • 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. 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. Implementing CSS3 Today • caniuse.com - compatibility check for HTML5, CSS3 and more based on browser. • HTML5 for Internet Explorer 6 to 8 <head< <!-- [if lt IE9]> <script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”> <![endif] --> </head> • Use a reset.css to start with a clean slate. • Use Progressive Enhancement
  • 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. Credits • Joe Lewis: http://www.slideshare.net/sanbeiji/ introduction-to-html5-and-css3-revised • Bruce Lawson and Remy Sharp: Introducing HTML5 (2nd Edition) • w3schools.com/html and w3schools.com/css • HTML5doctor.com