View
120
Download
0
Category
Tags:
Preview:
DESCRIPTION
Citation preview
!o" #esi$%ers
zaterdag 29 december 12
coding dojozaterdag 29 december 12
• Strive for completion of character.• Don’t give up, be faithful.• Strive to be your best.• Respect the othe%..• Refrain from violent behavior.• Each pilot flights for 15 minutes
coding dojo
zaterdag 29 december 12
Geschiedenis
zaterdag 29 december 12
XHTML2.0“The future is xml based markup”
1998zaterdag 29 december 12
<br /><img src=”..” />
zaterdag 29 december 12
AppleMozillaOpera
WHATWG
Web Hypertext Application Technology Working Groupzaterdag 29 december 12
2004
HTML5“Don’t break the web”
zaterdag 29 december 12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
zaterdag 29 december 12
<!DOCTYPE html>
zaterdag 29 december 12
nieuwe html elementenhttp://html5doctor.com/element-index/
zaterdag 29 december 12
Rank Value Frequency
1 footer 179.528
2 menu 146.673
3 style1 138.308
4 msonormal 123.374
5 text 122.911
6 content 113.951
7 title 91.957
8 style2 89.851
9 header 89.274
10 copyright 86.979
11 button 81.503
12 main 69.620
13 style3 69.349
http://devfiles.myopera.com/articles/572/classlist-url.htm
class namesRank Value Frequency
1 footer 1.085.482
2 table 482.760
3 img 471.807
4 input 372.905
5 a 319.619
6 form 266.886
7 td 230.312
8 ul 192.453
9 span 180.553
10 object 165.628
11 li 91.022
12 body 90.883
13 p 81.128
id names
http://devfiles.myopera.com/articles/572/elementsusingid-url.htm
zaterdag 29 december 12
<section><header><footer><article><aside>
...zaterdag 29 december 12
<div id= “header”>
<div id= “footer”>
<div id= “sidebar”> <div class= “post”>
<div class= “post”>
XHTML2.0
zaterdag 29 december 12
<header/>
<footer/>
<aside/><article/>
<article/>
HTML5
zaterdag 29 december 12
zaterdag 29 december 12
zaterdag 29 december 12
<section>Represents a generic document or application section. In this context, a section is a
thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, the various tabbed pages in a tabbed dialog box, or the
numbered sections of a thesis. A web site's home page could be split into sections for an introduction, news items, contact information.
zaterdag 29 december 12
<header>Represents the "header" of a document or section of a document. The header element is
typically used to group a set of h1–h6 elements to mark up a page's title with its subtitle or tagline. header elements may, however, contain more than just the section's
headings and subheadings — e.g., version history information or publication date
http://html5doctor.com/the-header-element/zaterdag 29 december 12
<input>
• colo!• date• datetime• datetime-local• email• month• numbe!• range• search• tel• time• url• w"k
zaterdag 29 december 12
internet explorer?
zaterdag 29 december 12
<h1> <p>
<strong><em><div>
zaterdag 29 december 12
displayThe display property defines how a certain
HTML element should be displayed.
zaterdag 29 december 12
<b><strong>
zaterdag 29 december 12
<i><em>
zaterdag 29 december 12
display• none;• inline;• block;• inline-block;• list-item;• compact;• table;• inline-table;• table-caption;• ...
zaterdag 29 december 12
positioning• relative (container object)• absolute• static (iOS4+)
zaterdag 29 december 12
<ul> =! <ol>
zaterdag 29 december 12
basic )s selecto%<div class=”header”><div id=”header”> <a href=””><article>
.header { ... }#header { ... }a { ... }article { ... }
.item > .first-subitem
@media (min-width: 130px)
zaterdag 29 december 12
reset.c*normalize.c*
zaterdag 29 december 12
Boilerplate 3.0http://html5boilerplate.com/
zaterdag 29 december 12
SCSS
zaterdag 29 december 12
zaterdag 29 december 12
zaterdag 29 december 12
L+ Brimelow
zaterdag 29 december 12
Paul Irish
zaterdag 29 december 12
http://dochub.io/http://html5please.us/
http://livedom.validator.nu/http://codex.wordpress.org/Function_Referencehttp://stackoverflow.com/questions/tagged/html
http://jqapi.com/http://jsfiddle.net/
zaterdag 29 december 12
Recommended