Hardcore HTML

HARDCORE HTML

Hardcore

HTML

A SHORT HISTORY OF

HTML

Hypertext

Invented in the 1940’s

Metadata for text

Brought to the Computer

HyperCard for Mac in 1987

The Web

Tim Berners-Lee at CERN

Bases HTML on SGML

Hypermedia

Marc Andreessen creates

Mosaic, includes img

A SHORT

HISTORY

OF HTML

¶ This is my paragraph. There are many like it, but this one is

mine.

¶ My paragraph is my best friend. It is my life. I must master it

as I must master my life.

¶ My paragraph, without me, is useless. Without my paragraph,

I am useless. I must word my paragraph true. I must write

straighter than my editor who is trying to kill me. I must write

before he corrects me. I will. . .

Hypertext


Metadata for text



The Web


Bases HTML on SGML

Hypermedia



A SHORT

HISTORY

OF HTML

Hypertext


Metadata for text



The Web


Bases HTML on SGML

Hypermedia



A SHORT

HISTORY

OF HTML

Becoming a Standard

HTML2 was introduced in

Geneva, May 1994

HTML2 spec, July 1994

IETF setup, Sept 1994

W3C launched in Dec 1994

HTML3 was a hot mess

Introduces tags like FONT FACE

and BGCOLOR

HTML no longer semantic

A SHORT

HISTORY

OF HTML

WAR!

IE fucks everyone, Aug 1995

Embeds ActiveX

NS invents craps, Sep 1995

Adds frames

Browser designers start

driving HTML standards

HTML4 was published

But no one fully supported it

A SHORT

HISTORY

OF HTML

Years wasted on XML

XHTML invented in 1999

No one used it

XHTML2 created in 2002

No one implemented it

HTML5

TBL basically forced W3C to draft HTML5 in 2006

W3C is utterly neutered

Largely a secretary for what the browser implementers want

Not necessarily a bad thing

Keeps implementers in sync

A SHORT

HISTORY

OF HTML

Changes in

the Spec

from

HTML4

HTML5

<ar t ic le>

<aside>

<bdi>

<command>

<detai ls>

<summary>

<f igure>

<f igcaption>

<footer>

<header>

<hgroup>

<mark>

<meter>

<nav>

<progress>

<ruby>

<r t>

<rp>

<sect ion>

<time>

<wbr>

Defines an ar t ic le

Content as ide from page content

Isolates di rect ional text

Command button that a user can invoke

Defines addi t ional , toggleable detai ls

A v is ible heading for <detai ls> e lement

Self -contained content ( l ike diagrams)

A capt ion for a <figure> e lement

A footer for a document or sect ion

Defines a header for a document or sect ion

Groups a set of <h1> to <h6> e lements

Defines marked/highl ighted text

A scalar measurement wi th in a range

Defines navigat ion l inks

The progress of a task

Ruby annotat ion (East Asian typography)

An explanat ion/pronunciat ion of characters

What to show when ruby annotat ions are unsuppor ted

A sect ion in a document

A date/t ime

A possible l ine-break

NEW SEMANTIC ELEMENTS

<audio>

<video>

<source>

<embed>

<track>

<canvas>

<datal is t>

<keygen>

<output>

Defines sound content

A v ideo or movie

Defines mult iple media resources

A container for an external app (plugin)

Defines t racks for <v ideo> and <audio>

Used to draw graphics on the f ly, v ia scr ipt ing

Speci f ies a l is t of opt ions for inputs

A key -pai r generator f ie ld ( for forms)

Contains resul t of a calculat ion

OTHER NEW ELEMENTS

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

<tt>

DEAD ELEMENTS (FROM HTML 4)

BasicallyTHE BASIC BASICS

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta charset="utf-8">

<title>Duck Page</title>

</head>

<body>

Text about Ducks

</body>

</html>

Simple Page

Layout

THE BASIC

BASICS

http://modernizr.com/downloads/modernizr -2.5.3.js

USE MODERNIZR

<html>

<head>

<meta charset="utf -8">

<script

src="http://modernizr.com/downloads/modernizr -2.5.3.js">

</script>

</head>

USE MODERNIZR

<html>

<head>

<meta charset="utf -8">

<script

language="Javascript"

src="http://modernizr.com/downloads/modernizr -2.5.3.js">

</script>

</head>

USE MODERNIZR

<div>

I'm a DIV

</div>

The s implest

tags

THE BASIC

BASICS

<div>

I'm a DIV

</div>

<div>

I'm a DIV (new line)

</div>

The s implest

tags

THE BASIC

BASICS

<span>

I'm a SPAN

</span>

<span>

I'm a SPAN (same line)

</span>

The s implest

tags

THE BASIC

BASICS

<p

id=main

class=important

title="Cool Information”

style="color:red;"

dir=ltr

lang=en

data-attributes="yes"

>

I like attributes

</p>

The s implest

tags

THE BASIC

BASICS

Articles

and

SectionsLAYOUTS

<article>

<header>

<hgroup>

<h1>My Favorite Things</h1>

<h2>Books</h2>

</hgroup>

</header>

<p>

This is my main article.

<aside>

By the way... this is an aside.

</aside>

</p>

<footer>

<p>Published <time datetime="2012-06-13">yesterday</time></p>

</footer>

</article>

<article>

<header>

<hgroup>


<h2>Books</h2>

</hgroup>

</header>

<p>


<aside>


</aside>

</p>

<footer>


</footer>

</article>

<article>

<header>

<hgroup>


<h2>Books</h2>

</hgroup>

</header>

<p>


<aside>


</aside>

</p>

<footer>


</footer>

</article>

<article>

<header>

<hgroup>


<h2>Books</h2>

</hgroup>

</header>

<p>


<aside>


</aside>

</p>

<footer>


</footer>

</article>

<article>

<header>

<hgroup>


<h2>Books</h2>

</hgroup>

</header>

<p>


<aside>


</aside>

</p>

<footer>


</footer>

</article>

<article>

<header>

<hgroup>


<h2>Books</h2>

</hgroup>

</header>

<p>


<aside>


</aside>

</p>

<footer>


</footer>

</article>

<article itemscope itemtype="http://schema.org/BlogPosting">

<header>

<hgroup>

<h1 itemprop=headline>My Favorite Things</h1>

<h2>Books</h2>

</hgroup>

</header>

<p itemprop=articleBody>


<aside>


</aside>

</p>

<footer>

<p>Published <time itemprop=datePublished datetime="2012-06-

13">yesterday</time></p>

</footer>

</article>

<article itemscope itemtype="http://schema.org/BlogPosting">

<header>

<hgroup>

<h1 itemprop=headline>My Favorite Things</h1>

<h2>Books</h2>

</hgroup>

</header>

<p itemprop=articleBody>


<aside>


</aside>

</p>

<footer>

<p>Published <time itemprop=datePublished datetime="2012-06-

13">yesterday</time></p>

</footer>

</article>

<section>

<header>

<h1>HTML</h1>

</header>

<p>

HTML is so much fun.

</p>

<footer>

Learn <a href="http://developers.whatwg.org/">more</a> about HTML.

</footer>

</section>

<section>

<header>

<h1>HTML</h1>

</header>

<p>

HTML is so much fun.

</p>

<footer>

Learn <a href="http://developers.whatwg.org/">more</a> about HTML.

</footer>

</section>

<section>

<header>

<h1>JavaScript</h1>

</header>

<p>

JavaScript is a good language.

</p>

<footer>

Learn <a href=”http://w3schools.com/js/">JS</a>.

</footer>

</section>

<article>

<header>

<h1>Computer Languages</h1>

</header>

<section>

<h1>HTML</h1>

<p>HTML is so much fun.</p>

</section>

<section>

<h1>JavaScript</h1>

<p>JavaScript is a good language.</p>

</section>

</article>

Elements

that group

thingsGROUPING

<p>

Thisisareallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyre

allyreally<wbr>reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreall

yreallyreallyreallyreallylongword

</p>

<blockquote lang="en-GB">

Look around and you will find, no-one's really <mark>colour</mark> blind.

</blockquote>

<figure>

<p>This is my paragraph. There are many like it but this one is mine....</p>

<figcaption>Paragraph’s Creed</figcaption>

</figure>

<details>

<summary>Automated Status: Operational</summary>

<p>Velocity: 12m/s</p>

<p>Direction: North</p>

</details>

<dl>

<dt lang="en-US"> <dfn>color</dfn></dt>

<dt lang="en-GB"> <dfn>colour</dfn></dt>

<dd>A visual sensation of different light wavelengths</dd>

<dd>Pretty eye inputs</dd>

</dl>

<pre><code data-language=ruby>

x="hello world!”

puts x

</code></pre>

<p>

The variable <var>x</var> was set a string. Press <kbd>enter</kbd> to

make it run. It will output <samp>hello world!</samp>

</p>

NAVIGATION

<nav>

<ol>

<li><a href="#">Link 1</a></li>



</ol>

</nav>

<menu type=toolbar label="File">

<button type=button onclick="file_new()">New...</button>

<button type=button onclick="file_open()">Open...</button>

<button type=button onclick="file_save()">Save</button>

<command type=command label="Save" onclick="file_save()">Save</command>

</menu>

TEXT-LEVEL SEMANTICS



<p>

<cite title="Eats, Shoots, and Leaves: The Zero Tolerance Approach to

Punctuation">Lynne Truss</cite> said <q>Freeze or get stabbed, mate. It's your

choice.</q>

</p>



<p>

<cite>Eats, Shoots, and Leaves: The Zero Tolerance Approach to Punctuation</cite>

by <b>Lynne Truss</b> says <q>Freeze or get stabbed, mate. It's your choice.</q>

</p>

The cite element represents the title of a work … A person’s

name is not the title of a work … and the element must

therefore not be used to mark up people’s names.

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-

semantics.html#the-cite-element

The cite element represents the title of a work … A person’s

name is not the title of a work … and the element must

therefore not be used to mark up people’s names.

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-

semantics.html#the-cite-element

WRONG. BAD. STUPID!

<p>

The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn> is a

device that allows off-world teams to open the iris.

</p>

<p>

Don't forget the <a href="#gdo"><abbr title="Garage Door

Opener">GDO</abbr></a>.

</p>

<p>

There are <data value="8">bridges</data> of them.

There will be <data value="9">nine</data> on <time datetime"2012-11-12">

Nov, 12</time>.

</p>

<p>

My favorite color is

<del cite="http://en.wikipedia.org/wiki/Blue">blue</del>

<ins cite="http://en.wikipedia.org/wiki/Red">red</ins>!

</p>

<p>

My favorite color is

<del cite="http://en.wikipedia.org/wiki/Blue" datetime="2012-06-0123:59:59Z"

>blue</del>

<ins cite="http://en.wikipedia.org/wiki/Red">red</ins>!

</p>

UTILITIES

Useful bits

and things

Eric

doesn’t

l ike

<meter min=0 max=20 value=12 optimum=15 title="centimeters">

12cm

</meter>

<progress min=0 max=100 value=56 title="download">

56%

</progress>

<div draggable="true">

Drag Me!

</div>

<div dropzone="move">

Into me

</div>

<p style="display:inline" dir=ltr>

<style scoped=true>

p { color: red; }

</style>

I’m red!

</p>

<p>

I’m not red.

</p>

FORMS

<form action="/" method=post>

<fieldset class="fields">

<legend>Info</legend>

<ol>

<li data-required="true">

<label for=ssn>SSN<abbr title=”required”>*</abbr></label>

<input id=ssn name=ssn placeholder="000-00-0000">

</li>

</ol>

</fieldset>

<fieldset class=”buttons">

<legend>Buttons</legend>

<ol>

<li><input type=submit value="Cancel" disabled></li>

<li><input type=submit value="Submit ▶"></li>

</ol>

</fieldset>

</form>

<select name="browsers">

<optgroup label="Good Browsers">

<option value="Chrome">Chrome</option>

<option value="Opera">Opera</option>

<option value="Safari">Safari</option>

</optgroup>

<optgroup label="Not Good Browsers">

<option value="Internet Explorer">Internet Explorer</option>

<option value="Firefox">Firefox</option>

</optgroup>

</select>

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<script

src="https://raw.github.com/miketaylr/jquery.datalist.js/master/jquery.datalist.js">

</script>

<input type=text name="name" autofocus="true" tabindex="1">

<input type=range name="range" main="0" max="25”>

<input type=date name="date" placeholder="2012-12-21”>

<input type=search name="search”>

<input type=email name="required" required="true" pattern=".*@.*"

placeholder="[email protected]">

<input type=text name="read" readonly="true" value="You Can Only Read Me">

<input type=tel name="tel" placeholder="(503) 555-1212" required="true"

pattern=”^(.*\d.*){10}$" >

<input type=color name="color">

<input x-webkit-speech>

<keygen name="key”>

<li>

<input name=arg1 type=number step=any value="0"> +

<input name=arg2 type=number step=any value="0"> =

<output data-function="add" for="arg1 arg2" >0</output>

</li>

<table class="table table-striped">

<caption>

<strong>Actors and their Characters</strong>

<details>

This is a very short list, and is inspired by nothing more than who happened to be in my head at that

moment.

</details>

</caption>

<colgroup><col class="actors"><col class="characters"></colgroup>

<thead>

<tr>

<th>Name</th>

<th>Character</th>

</tr>

</thead>

<tbody>

<tr>

<td>Lou Ferrigno</td>

<td>The Hulk</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>3 Actors</td>

<td>4 Characters</td>

</tr>

</tfoot>

</table>

<table class="table table-striped">

<caption>

<strong>Actors and their Characters</strong>

<details>

This is a very short list, and is inspired by nothing more than who happened to be in my head at that

moment.

</details>

</caption>

<colgroup><col class="actors"><col class="characters"></colgroup>

<thead>

<tr>

<th>Name</th>

<th>Character</th>

</tr>

</thead>

<tbody>

<tr>

<td>Lou Ferrigno</td>

<td>The Hulk</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>3 Actors</td>

<td>4 Characters</td>

</tr>

</tfoot>

</table>

MEDIA

<video>

<source src="http://html5demos.com/assets/dizzy.mp4">

</video>

<audio controls>

<source src="demo-audio.ogg”>

<source src="demo-audio.mp3”>

</audio>

Hardcore HTML

Technology