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.

Forms - New Attributes

• required

• autofocus

• placeholder

• form

• autocomplete

• pattern

Forms - New Input Types

• email

• 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<  </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

intro to html 5 / css 3

Design

article content

secondary content

list of links

sidebar links

content inwith

nextprevious links

page header

list of nav links