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

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (8)

Similar to Html5 101

Similar to Html5 101 (20)

Recently uploaded

Recently uploaded (20)

Html5 101