hardcore html
TRANSCRIPT
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
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
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
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
<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)
<!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
<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
<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
<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>
<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>
<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>
<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>
<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>
<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 itemscope itemtype="http://schema.org/BlogPosting">
<header>
<hgroup>
<h1 itemprop=headline>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p itemprop=articleBody>
This is my main article.
<aside>
By the way... this is an 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>
This is my main article.
<aside>
By the way... this is an 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>
<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>
<nav>
<ol>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</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>
<!-- pre HTML5 -->
<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>
<!-- HTML5 -->
<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>
<p style="display:inline" dir=ltr>
<style scoped=true>
p { color: red; }
</style>
I’m red!
</p>
<p>
I’m not red.
</p>
<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>