Intro to HTML 5 / CSS 3

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% ﬁnalized, but is broken
into “modules,” many of which are ﬁnalized.
• 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
• ﬁgure • section
• ﬁgcaption • time

Changed Elements
• <a> can now wrap around block elements.

• <b> and <i> are back (but not presentational).

• <cite> deﬁned 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 • 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-ﬂash” 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”>

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:ﬁrst-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 speciﬁc modiﬁer
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

Intro to HTML 5 / CSS 3

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Intro to HTML 5 / CSS 3 (20)

More from Tadpole Collective (8)

Recently uploaded (20)

Intro to HTML 5 / CSS 3