Download - Intro to HTML 5 / CSS 3
Introduction to
Andrew Christian
&
Obligatory IntroSo, 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>
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title goes hear</title> <meta charset=”utf-8”>
<link rel=”stylesheet” href=”style.css”>
Document Heading
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• aside• bdi• command• details• summary• figure• figcaption
• footer• header• hgroup• mark• nav• ruby, rt, and rp• section• 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
• date
• search
• tel (telephone)
• color
• 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:
• or specify a color gradient.
header { background-color: #000; opacity: 0.7; }
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:
• or embed a font on the web
.quote { text-shadow: 2px 2px 4px #fff; } Quote TextQuote Text
@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:
• always specify the non-browser specific modifier last, so compliant browsers will use it.
header { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
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
• Use a reset.css to start with a clean slate.
• Use Progressive Enhancement
<head< <!-- [if lt IE9]> <script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”> <![endif] --> </head>
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
