HTML5

:
1.0
ismaeel.enjreny@gmail.com


HTML5 5...............................................................................................................................................
HTML5 5.....................................................................................................................................
5.................................................................................................................................. HTML5
HTML5 5......................................................................................................................................
6.................................................................................................................................. HTML5
Markup 6..................................................................................................... HTML5
8...................................................................................................................
9............................................................................................................................................. Canvas
9................................................................................................................................
type 9......................................................................................................... input
video 11................................................................................................................................ HTML5
11.................................................................................................................... HTML5
11.............................................................................................................................video
12.................................................................................................................................................. IE
12................................................................................................................................... video
audio 12................................................................................................................................ HTML5
12............................................................................................................... HTML5
13............................................................................................................................... audio
13.................................................................................................................................................. IE
13................................................................................................................................ audio
14............................................................................................................................................... canvas
canvas 14.................................................................................................................. HTML5
14.................................................................................................................................... canvas
canvas 14................................................................................................. JavaScript
15......................................................................................................................... canvas
15........................................................................................................................... canvas
15..................................................................................................................................................
17................................................................................................................................................
18............................................................................................................................
19.......................................................................................................................... canvas
20............................................................................................................... HTML5
2

 20.................................................................................................................................... localStorage
21................................................................................................................................ sessionStorage
input 22............................................................................................................. HTML5
23................................................................................................ input
23................................................................................................................................. email
23...................................................................................................................................... url
24............................................................................................................................. number
25................................................................................................................................. range
25...................................................................................... Date Pickers
26............................................................................................................................... search
26...............................................................................................................Form Elements
26.......................................................................................................................
27.......................................................................................................................................... datalist
27........................................................................................................................................... keygen
28........................................................................................................................................... output
28.................................................................................................................... HTML5
29.............................................................................................................................. autocomplete
30..................................................................................................................................... autofocus
30............................................................................................................................................. form
31................................................................................................. Form
32............................................................................................................................................ width
32........................................................................................................................................... height
32................................................................................................................................................ list
32............................................................................................................................................... min
33.............................................................................................................................................. max
33.............................................................................................................................................. step
33........................................................................................................................................ multiple
33.................................................................................................................................... novalidate
34......................................................................................................................................... pattern
34.................................................................................................................................. placeholder
34....................................................................................................................................... required
34................................................................................................................. HTML5
3

 HTML5
HTML5 HTML, XHTML ,HTML DOM

HTML 1999 Internet ,

HTML5 .HTML5
HTML5
HTML5 (World Wide Web Consortium) w3c.org
.(Web Hypertext Application Technology Working Group) WHATWG
HTML5:
HTML, CSS, DOM .JavaScript
.
.
Markup .JavaScript
HTML5 .
HTML5 .Internet
HTML5
canvas .
video, audio .
.offline storage
article, footer, header, nav, section.
.calendar, date, time, email, url, search
HTML5
,Safary ,Chrome ,Firefox
Opera ,HTML5 IE9 .HTML5

 HTML5
Internet 1999
,HTML4.01 HTML4
, HTML5 Internet ,
.
Markup HTML5

><article
, , .
><aside
,
.
><command
Button Radiobutton
.Checkbox
><details
.
><summary
> ,<details .
><figure
, .
><figcaption

 >.<figure
><footer
, , ,
, .
><header
, .
><hgroup
h1 h6 .
><mark
.
><meter
.
><nav
.
><progress
.
><ruby
.
><rt

 .
><rp
>.<ruby
><section
, headers ,footers
.
><time
.
><wbr
.

><audio
, , .
><video
, , .
><source
.
><embed
.

 Canvas

><canvas
.JavaScript

><datalist
.
><keygen
.
><output
, .JavaScript
type input

tel
type input tel .
search
type input search .
url
type input url
.
email
type input email
.
9

datetime
type input datetime
.
date
type input date .
month
type input month .
week
type input week
.
time
type input time .
datetime-local
type input datetime-local
.
number
type input number .
range
type input range
.
10

color
type input color
#FF0000
video HTML5
HTML5 )( ,
HTML5 .video
HTML5

HTML5:
:Ogg Ogg Thedora .Vorbis
:MPEG4 MPEG4 H.264 .AAC
video

)( HTML5 :
><video src="movie.ogg" controls="controls"></video
controls ,play pause ,
width .height > <video
> </video :video
>"<video src="movie.ogg" width="320" height="240" controls="controls
video
></video
Ogg ,Firefox Opera ,Chrome
Safari .MPEG4 video
source :

11

>"<video width="320" height="240" controls="controls

><source src="movie.ogg" type="video/ogg" /
><source src="movie.mp4" type="video/mp4" /
video
></video
IE

IE8 video IE9 video .MPEG4

video

:autoplay autoplay .
:controls controls ) .(...
:height .
:loop loop .

:preload preload ,
.autoplay

:src .
:width .
audio HTML5
HTML5 ,
HTML5 .audio
HTML5

HTML5 :
.Ogg Vorbis
.MP3
.Wav
12

 audio

HTML5 :
><audio src="song.ogg" controls="controls"></audio
controls ,play pause
. > <audio > </audio
:audio
> audio</audio >"<audio src="song.ogg" controls="controls
Ogg ,Firefox Opera ,Chrome
Safari .MP3, Wav audio
source :
>"<audio controls="controls
><source src="song.ogg" type="audio/ogg" /
><source src="song.mp3" type="audio/mpeg" /
audio
></audio
IE

IE8 audio IE9 .audio

audio

:autoplay autoplay .
:controls controls ) .(...
:loop loop .

:preload preload ,
.autoplay
13

 :src .
canvas
canvas .JavaScript

canvas HTML5

canvas HTML5 JavaScript , canvas

. canvas
Methods JavaScript .
canvas

canvas , canvas id width

height.
><canvas id="canvasTest" width="200" height="100"></canvas
canvas JavaScript

canvas Methods JavaScript

:
>"<script type="text/javascript
;)"var c=document.getElementById("canvasTest
;)"var cxt=c.getContext("2d
;"cxt.fillStyle="#FF0000
;)cxt.fillRect(0,0,150,75
14

></script

id canvas JavaScript :
;)"var c=document.getElementById("canvasTest
:canvas
;)"var cxt=c.getContext("2d
) getContext(2d ,HTML5 Methods
Paths ,Boxes ,Circles , :
;"cxt.fillStyle="#FF0000
;)cxt.fillRect(0,0,150,75
fillStyle , fillRect canvasTest
.
canvas

fillRect ) ,(0,0,150,75
150 ,75 ,(0,0) canvasTest x,y
canvas.
canvas

.
><!DOCTYPE HTML
15

<html>
<body>
<canvas

id="myCanvas"

width="200"

height="100"

#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</body>
</html>

16

style="border:1px

solid

canvas
<!DOCTYPE HTML>
<html>
<body>
<canvas

id="myCanvas"

width="200"

height="100"

#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
17

style="border:1px

solid

<!DOCTYPE HTML>
<html>
<body>
<canvas

id="myCanvas"

width="200"

height="100"

#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
18

style="border:1px

solid

</script>
</body>
</html>

canvas

canvas
<!DOCTYPE HTML>
<html>
<body>
<canvas

id="myCanvas"

width="200"

height="100"

#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="img_flwr.png"
19

style="border:1px

solid

;)cxt.drawImage(img,0,0
></script
></body
></html

HTML5
HTML5 Methods :
:localStorage .
:sessionStorage .
cookies , cookies
, . HTML5
,
.
. javaScript .
localStorage

localStorage , ,
, . :
>"<script type="text/javascript
;"localStorage.lastname="Smith
;)document.write(localStorage.lastname
20

</script>
:
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
sessionStorage

sessionStorage
: ,
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
21

:
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
HTML5 input
, input HTML5
: .
.email
.url
.number
.range
.Date pickers (date, month, week, time, datetime, datetime-local)
.search
22

 .color
input

IE

Firefox

Opera

Chrome

Safari

email

9.0

url

9.0

number

9.0

range

9.0

4.0

4.0

Date pickers

9.0

search

color

: Opera ,
.
email

email ,

>E-mail: <input type="email" name="user_email" /

: Safari iPhone email
)@ .(.com
url

url ,
:

>Homepage: <input type="url" name="user_url" /

: Safari iPhone url
).(.com
23

 number

number ,

>oints: <input type="number" name="points" min="1" max="10" /

:
:max .
:min .
:step ) = 3 ,-3
.(... 6 ,3 ,0
:value .
><!DOCTYPE HTML
><html
><body
>"<form action="demo_form.asp" method="get
>Points: <input type="number" name="points" min="1" max="10" /
><input type="submit" /
></form
></body
></html

24

 : Safari iPhone number

.
range

range

, , :

><input type="range" name="points" min="1" max="10" /

:
:max .
:min .
:step ) = 3 ,-3
.(... 6 ,3 ,0
:value .
Date Pickers

HTML5 :
:date ) -(:
>Date: <input type="date" name="user_date" /

:month :
><input type="month" name="user_date" /

25

 :time ) -(:
>Time: <input type="time" name="user_date" /

:datetime :
><input type="datetime" name="user_date" /

:datetime-local :
><input type="datetime-local" name="user_date" /

search

Form Elements
HTML5 :
.datalist
.keygen
.output

IE

Firefox

Opera

Chrome

Safari

datalist

9.5

keygen

10.5

3.0

26

output

9.5

datalist

datalist , option
,datalist datalist list
id :datalist
><input type="url" list="url_list" name="link" /
>"<datalist id="url_list
><option label="SyrDev" value="http://www.SyrDev.net" /
><option label="Google" value="http://www.google.com" /
><option label="Microsoft" value="http://www.microsoft.com" /
></datalist
keygen

keygen , keygen
, private public ,
, .

.
>"<form action="demo_form.asp" method="get
>Username: <input type="text" name="usr_name" /
>Encryption: <keygen name="security" /
><input type="submit" /
></form
27

output

output

:JavaScript

<output id="result" onforminput="resCalc()"></output>

HTML5
: input form HTML5
:form
.autocomplete o
.novalidate o
:input
.autocomplete o
.autofocus o
.form o
.(formoverrides) formaction o
.(formoverrides) formenctype o
.(formoverrides) formmethod o
.(formoverrides) formnovalidate o
.(formoverrides) formtarget o
.height o
.width o
.list o
.min o
.max o
28

.step o
.multiple o
.pattern (regexp) o
.placeholder o
.required o
Safari

Chrome

Opera

Firefox

IE

4.0

3.0

9.5

3.5

4.0

3.0

10.0

autofocus

9.5

form

10.5

formoverrides

4.0

3.0

9.5

3.5

8.0

height

4.0

3.0

9.5

3.5

8.0

width

9.5

list

3.0

9.5

min

3.0

9.5

max

3.0

9.5

step

4.0

3.0

3.5

multiple

novalidate

3.0

9.5

pattern

3.0

3.0

placeholder

3.0

9.5

required

8.0 autocomplete

autocomplete

input form autocomplete

text, :< input> < form> autocomplete ,autocomplete
.search, url, tel, email, password, datepickers, range, color
:
<form action="demo_form.asp" method="get" autocomplete="on">
29

First name: <input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

. autocomplete :
autofocus

autofocus , autofocus
:input
<input type="text" name="user_name" autofocus="autofocus" />
form

,input form
, id
:<input> form
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
30

Last name: <input type="text" name="lname" form="user_form" />

Form

:< form>
.form action :formaction
.form enctype :formenctype
.form method :formmethod
.form novalidate :formnovalidate
.form target :formtarget
, submit, image <input>
.
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br />
</form>

31

width

:< input> image

<input type="image" src="img_submit.gif" width="24" height="24" />
height

:< input> image

<input type="image" src="img_submit.gif" width="24" height="24" />
list

, datalist , datalist list

text, search, url, tel, email, date pickers, :< input>
.number, range, color
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="SyrDev" value="http://www.syrdev.net" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
min

min , number min

:date pickers, number, range :< input>
Points: <input type="number" name="points" min="0" max="10" step="3" />

32

 max

max number , max

> <inputdate pickers, number, :
:range
>Points: <input type="number" name="points" min="0" max="10" step="3" /

step

step number , step

> <inputdate pickers, number, :
:range
>Points: <input type="number" name="points" min="0" max="10" step="3" /
multiple

multiple ,
>:email, file :<input
>Select images: <input type="file" name="img" multiple="multiple" /
novalidate

novalidate ,
> <form >text, search, url, tel, email, :<input
:password, date pickers, range, color
>"<form action="demo_form.asp" method="get" novalidate="true
>E-mail: <input type="email" name="user_email" /
><input type="submit" /
></form
33

 pattern

pattern ) (
, >:text, search, url, tel, email, password :<input
"}Country code: <input type="text" name="country_code" pattern="[A-z]{3
>title="Three letter country code" /
placeholder

placeholder ,
> ,text, search, url, tel, email, password :<input
:
>" / "=placeholder

"<input type="search" name="user_search

required

required ,
>text, search, url, tel, email, password, date pickers, number, :<input
:checkbox, radio, file
>Name: <input type="text" name="usr_name" required="required" /
HTML5
,contenteditable true false true
,
.
:contextmenu id > <menu .
:data-yourvalue HTML5 .data-
:draggable true, false, auto
.

34

 :hidden hidden
, .JavaScript
:item empty string url ,syrdev.net
.
:itemprop item:
><section item=syrdev.net.article
></h1 <h1 itemprop=syrdev.net.title>HTML5
> HTML</h1 ><h1 itemprop=syrdev.net.desc
></section
:spellcheck true, false false

.
:subject id ,:
>"<div id="about
></p <p>...
></div
...
> syrdev.net</p >"<p subject="about

35