Hardcore HTML
Upcoming SlideShare
Loading in...5
×
 

Hardcore HTML

on

  • 3,527 views

 

Statistics

Views

Total Views
3,527
Views on SlideShare
3,527
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • It’s generally considered to be invented in the 40’s, but the idea of marking up text is way older than that. Anyone know what this is?
  • This mark is called a PILCROW.
  • It is hypertext that denotes a paragraph.
  • What this tells you is that the web existed for 5 years before any sort of standards body started taking over. This is part of the reason why it’s taken so many years to get all of these browser manufactures to agree on any sort of standards at all. Although the W3C started publishing standards, the manufactures all had their own ideas.
  • Time Berners Lee
  • Older versions of IE will not display elements they don’t recognize.
  • So add this script to the top of all of your HTML files, and you can start using HTML5. It might not be styled at all, but at least it’ll display. You can always use CSS and javascript to get the behavior you want.
  • No more using language Javascript. The language tag is deprecated, and javascript is the only supported spec language. So you can just write “script” and optionally “src”
  • A section is a block of text. It’s much more structured than a div, but not as structured as an article.
  • You can often have multiple sections in a single page, but won’t as often have more than one article.
  • You can embed sections inside articles. Though you can also embed articles inside sections, it’s kind of a design smell. It’s allowed, but the general rule for articles is that they should could make sense as stand alone pages.
  • Mark is for reference purposes
  • definition list, definition term, definition description
  • Along with article and section, one of the biggest layout changes has been more semantically meaningful navigation.Nav is like div. It has no style of it’s own, but it’s semantically meaningful, which is enough.
  • Menu are different from nav. Where nav is meant to manage navigation between pages on a single site, menus are meant to group actions that can be taken on a page. Like saving a form.Where you can use buttons, there’s a new element called command. It’s just like a button, but somehow more semantic.But before you decide to run out and start using them, you should know that NO BROWSERS currently support this tag.Of course, this doesn’t mean you can’t use it, you’ll just have to do a bit of extra JavaScript and CSS work to make the elements function.In short:nav: the navigation for the site.menu: the menu for a web application
  • Cite is a weird little tag. It’s been around since HTML2, originally for citing scientific works, specifically, the AUTHOR of the work.But it’s changed in the HTML5 spec to instead
  • Their justification is that, because browsers italicize the cite tag, and you generally don’t italicize people’s names in citation, then cite should be used for the work rather than the person.To quote Jeremy Keith:The tail is wagging the dog here.The spec wants you to trade semantically meaningful markup for non meaningful one just because browsers have weird default output.
  • These elements will not display. Again, just giving meaning so computers can understand your page. If you want SEO, if you want really detailed, maintainable and fancy CSS, use them. Give your text meaning.
  • If you really want to be a good citizen, use the datetime attribute to track WHEN the text was deleted.
  • If you really want to be a good citizen, use the datetime attribute to track WHEN the text was deleted.
  • I don’t like this element. It adds no semantic meaning to the document, but instead, just says what a block can do… which isn’t any different to me than elements and attributes that dictate how a document is displayed (like the “font“ tag). I begrudgingly use it, because the related DOM actions are useful. But I dislike it on principle, and prefer to use javascript to inject these attributes when necessary and leave this crap out of the markup entirely.
  • Scoped styles. I have mixed feelings on this one. On one hand, I like the idea of scoping extractable sections of the DOM to have their own visuals without polluting the whole namespace with special classes and ids. On the other hand, it promotes inlining styles, which I really don’t like. We’ll just have to see how it shakes out.That said, no browsers actually support this yet, except in a s uper secret development mode in Chrome. It was just introduced, so it may die in the boardroom. But I’m all for experimentation, so let me know if you like it.
  • Not supported in all browsers. However, there’s a jquery plugin to make a work in them.
  • Not supported in all browsers. However, there’s a jquery plugin to make a work in them.
  • Generates a secure cryptography on the browser, and sends it as part of a form.
  • Number input typ
  • Audio or video: multiple codecs. The browser will play the one it recognizes

Hardcore HTML Hardcore HTML Presentation Transcript

  • HARDCORE HTML
  • A SHORT HISTORY OF Hardcore HTML HTML
  • Hypertext Invented in the 1940’s A SHORT Metadata for text HISTORY OF HTML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
  • ¶ This is my paragraph. There are many like it, but this one ismine.¶ My paragraph is my best friend. It is my life. I must master itas 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 writestraighter than my editor who is trying to kill me. I must writebefore he corrects me. I will...
  • Hypertext Invented in the 1940’s A SHORT Metadata for text HISTORY OF HTML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
  • Hypertext Invented in the 1940’s A SHORT Metadata for text HISTORY OF HTML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
  • Becoming a Standard HTML2 was introduced in A SHORT Geneva, May 1994 HISTORY OF HTML 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
  • WAR! IE fucks everyone, Aug 1995 A SHORT  Embeds ActiveX HISTORY OF HTML NS invents craps, Sep 1995  Adds framesBrowser designers start driving HTML standardsHTML4 was published But no one fully supported it
  • Years wasted on XML XHTML invented in 1999 A SHORT  No one used it HISTORY XHTML2 created in 2002 OF HTML  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
  • Changes in the SpecHTML5 from HTML4
  • NEW SEMANTIC ELEMENTS <article>  D e fi n es a n a r t i c l e <aside>  Co n te nt a s i de fro m pa g e c o n te n t <bdi>  Is o la tes di re c t i o nal tex t < c o mmand >  Co m man d but to n t h a t a us e r c a n i nvo ke < d et a i l s >  D e fi n es a ddi t i o nal, to g g l eable det a i l s < s u m mar y >  A v i s ible h e a di n g fo r < det a i l s > e l e m ent < f i gu re >  Se l f - c o nt aine d c o n te n t ( l i ke di a g ra ms) < f i gc a pti on >  A c a pt i o n fo r a < fi g ure > e l e men t < fo o te r>  A fo ote r fo r a do c um e n t o r s e c t i on <he a d e r >  D e fi n es a h e a de r fo r a do c um e n t o r s e cti o n < h gro u p >  G ro ups a s et o f < h 1 > to < h 6 > e l e m ent s < m a rk >  D e fi n es m a rke d/ highlighte d tex t < m ete r >  A s c a l a r m e a s urement w i t h i n a ra n g e < n av >  D e fi n es n av i gat ion l i n k s < p ro gre s s >  Th e pro g re s s o f a t a s k < ru by >  Ruby a n n ot a t io n ( E a s t As i a n t y po g ra phy ) <rt>  An ex pl a n a t ion/pro nun ciat ion o f c h a ra cte r s <rp>  Wh a t to s h ow w h e n ruby a n n ot a t ions a re un s uppo r te d < s e c t i on>  A s e c t i o n i n a do c um e n t <time>  A da te / t i m e < wb r >  A p o s s i b l e l i n e - bre ak
  • OTHER NEW ELEMENTS < a u d i o>  D e fi n es s o un d c o n te n t <video>  A v i de o o r m ov i e <so u rc e >  D e fi n es m ul t i ple m e di a re s o urc e s <embed>  A c o n t a i n er fo r a n ex te rn a l a pp ( pl ug i n) < t r a c k>  D e fi n es t ra c k s fo r < v i de o > a n d < a udi o > < c a nvas >  Us e d to draw g ra ph i c s o n t h e fl y, v i a s c ri pt i ng < d a t al is t >  Spe c i fi es a l i s t o f o pt i o n s fo r i n put s < keyge n >  A key - pa i r g e n e ra tor fi e l d ( fo r fo rm s ) < o u t put>  Co n t a ins re s ul t o f a c a l c ul a t ion
  • DEAD ELEMENTS (FROM HTML 4) <acronym>  <font> <applet>  <frame> <basefont>  <frameset> <big>  <noframes> <center>  <strike> <dir>  <tt>
  • THE BASIC BASICS Basically
  • <!DOCTYPE html><html lang="en-US"> THE BASIC <head> BASICS <meta charset="utf-8"> Simple Page L ayo ut <title>Duck Page</title> </head> <body> Text about Ducks </body></html>
  • USE MODERNIZR 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>
  • <div> Im a DIV</div> THE BASIC BASICS The simplest tags
  • <div> Im a DIV</div> THE BASIC BASICS<div> The simplest tags Im a DIV (new line)</div>
  • <span> Im a SPAN</span> THE BASIC BASICS<span> The simplest tags Im a SPAN (same line)</span>
  • <p id=main class=important THE BASIC BASICS title="Cool Information” The simplest style="color:red;" tags dir=ltr lang=en data-attributes="yes"> I like attributes</p>
  • ArticlesLAYOUTS and Sections
  • <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>
  • ElementsGROUPING that group things
  • <p>Thisisareallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreally<wbr>reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword </p>
  • <blockquote lang="en-GB"> Look around and you will find, no-ones 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> <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>
  • TEXT-LEVEL SEMANTICS
  • <!-- pre HTML5 --><p> <cite title="Eats, Shoots, and Leaves: The Zero Tolerance Approach toPunctuation">Lynne Truss</cite> said <q>Freeze or get stabbed, mate. Its yourchoice.</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. Its your choice.</q></p>
  • The cite element represents the title of a work … A person’sname is not the title of a work … and the element musttherefore 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’sname is not the title of a work … and the element musttherefore not be used to mark up people’s names. WRONG. BAD. STUPID!http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-cite-element
  • <p> The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn> is adevice that allows off-world teams to open the iris.</p><p> Dont forget the <a href="#gdo"><abbr title="Garage DoorOpener">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>
  • Useful bits and thingsUTILITIES Eric doesn’t like
  • <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 &#x25b6;"></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@address.com"><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 thatmoment. </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 thatmoment. </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>