Html5 101

THE INTRO
•HTML4
•XHTML
•WHATWG (Web Hypertext Application Technology Working Group)
•W3C adopte HTML5
•XHTML 2 versus HTML5/HTML 5
•in 2009 HTML5 had “won.”

THE INTRO

HTML5 = HTML 5 + CSS3 + JS
Content

Presentation

Script

HTML5 technologies:
•Device Access
•3D, Graphics & Effects
•CSS3
•Semantics
•Multimedia
•Connectivity
•Performance & Integration
•Offline & Storage

HTML5 gives us new standards for how we can create web

When Will HTML5 Be Ready for Use?

2022
Do I Have to Wait Until 2022 ?

NO

New Structural Elements in HTML5
New Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>

Old Character Encoding

New Character Encoding
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8" />

Old JavaScript and CSS Links
<script type="text/javascript" src="script.js"></script>

New JavaScript and CSS Links
<link rel="stylesheet" type="text/css" href="style.css"/>
Old Doctype





<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>

New Structural Elements in HTML5

HTML5 Starting Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>page title</title>
<script src="my-script.js"></script>
<link rel="stylesheet" href="my-css.css" />
</head>
<body>

Header Markup
<header>
<img alt="my logo" src="logo.png" />
<h1><a href="#">my site</a></h1>
</header>

Navigation Markup
<nav>
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
</nav>

href="#">Home</a></li>
href="#">About</a></li>
href="#">News</a></li>
href="#">Contact</a></li>

Multi Navigation Markup
<nav>
<h2>title 1</h2>
<ul>
<li><a href="#">menu
</ul>
<h2>title 2</h2>
<ul>
</ul> </nav>

1</a></li>
2</a></li>

3</a></li>
4</a></li>

Article Markup

<article>
<header>
<h1>title</h1> <p>14nd Feb 2014</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi
</article>

Section Markup
<section>
<h1> heading </h2>

<section>
<h3> title </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid
</section>
</section>

Aside Markup
<aside>
<h2>links</h2>
<nav>
<ul>
<li><a href="#">10 things about HTML5</a></li>
<li><a href="#">10 things about CSS3</a></li>
<li><a href="#">10 things about JavaScript</a></li>
</ul>
</nav>
</aside>

Footer Markup
<footer>
<p>This article was published on <time>13 FEB 2014</time></p>
<small>© Copyright HTML5 101</small>
</footer>

Details Markup

<details open>
<summary>details 1</summary>
</details>
<details>
<summary>details 2</summary>
</details>

Order list Markup
<ol reversed>
<li>Red</li> <li>Green</li> <li>Blue</li>
</ol>
<ol start="2" type="I">
<li>Red</li> <li>Green</li> <li>Blue</li>
</ol>
type="1"
type="a"
type="A"
type="i"
type="I"

=
=
=
=
=

1,
a,
A,
i,
I,

2, 3,4, 5
b, c, d, e
B, C, D, E
ii, iii, iv, v
II, III, IV, V

Definition list Markup
<h1>course infos</h1>
<dl>
<dt>Title:</dt>
<dd>HTML5 ISI</dd>
<dt>cover:</dt>
<dd>HTML5</dd>
<dd>CSS3</dd>
<dd>JS</dd>
<dt>Club:</dt>
<dd>Creative Lab</dd>
</dl>

Form Markup
<form><fieldset>
<legend>Fieldset legend </legend>
<label for="date">What date do you leave?</label>
<input required type="date" id="date" name="date" />
<textarea id="textarea" rows="5" cols="40">This is a textarea</textarea>
<select id="select">
<option>Option 1</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 4</option>
</select>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</fieldset></form>

Input type Markup
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input

type="text" />
type="date" />
type="checkbox" />
type="radio" />
type="file" />
type="password" />
type="email" />
type="tel" />
type="url"/>
type="search" />
type="color">
type="number" />
type="range" />

Input attributes
Required Input



<input required type="****" />

Autofocus



<input autofocus type="****" />

Placeholder



<input type="****" placeholder="sample text" />

Multiple File Uploads



<input multiple type="file" id="upload" name="upload" />
Value , id , class ...

Input & Datalist Markup
<label for="sport">What's your favourite sport?</label>
<input list="sportlist" type="text" id="sport" name="sport" />
<datalist id="sportlist">
<option label="Basketball" value="Basketball" />
<option label="Football " value="Football" />
<option label="Handball" value="Handball" />
</datalist>

Video Markup
<video src="movie.mp4"></video>

OR
<video src="movie.mp4" />

OR
<video width="320" height="240" controls >
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
<source src="movie.ogv" type="video/ogg" />
<p>Sorry, your browser is really old. Please upgrade.</p>
</video>

Option attributes: preload,

autoplay, poster="img.jpg", loop, audio="muted"

Audio Markup
<audio src="music.mp3" controls />

OR
<audio controls>
<source src="music.mp3" type="audio/mp3" />
<source src="music.ogg" type="audio/ogg" />
</audio>
Option attributes: controls, preload, autoplay, loop

Progress & Meter Markup
Progress
<p>You are downloading a very important file, please wait.</p>
<progress value="45" max="100"></progress><span> 45% complete</span>

Meter
<meter value="10" min="0" max="100" low="40" high="90" optimum="100"></meter>

Intro to the DOM
What's DOM ?
Why I should know it ?
How I use it ?

What's Next ?
HTML5 developing doesn't need more than a text editor and a latest browser ,
So , I advise you to use one from this list as a text editor :
Sublime text 2 , Bracket , Adobe Edge Code , Adobe DreamWeaver .
And use chrome (canary) or firefox (Nightly) as a browser

Html5 101

More Related Content

What's hot (16)

Viewers also liked (8)

Similar to Html5 101 (20)

Recently uploaded (20)

Html5 101