SlideShare a Scribd company logo

Html5

•
Mehdi Jalal, profile picture
Mehdi Jalal

The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.

Technology
1 of 64
Downloaded 14 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
HTML5   Mehdi  Jalal   Trainer:  Cresco  Solu4on   So5ware  Developer:  NETLINKS   Email:  mehdi@netlinks.af   Skype:  mehdijalal01               Afghanistan  Workforce   Development  Program      
Html5
Agenda   •  HTML5  Introduc4on   •  HTML5  New  Elements   •  HTML5  Canvas   •  HTML5  SVG   •  HTML5  Drag/Drop   •  HTML5  Geoloca4on   •  HTML5  Video   •  HTML5  Audio   •  HTML5  Input  Types  
Agenda   •  HTML5  Form  Elements   •  HTML5  Form  ASributes   •  HTML5  Seman4c  Elements   •  HMTL5  Web  Storage   •  HMTL5  Applica4on  Cache   •  HMTL5  Web  Workers  
HTML5  Introduc4on   •  What  is  HTML5?   – HTML5  will  be  the  standard  for  HTML   – HTML  4.01  came  in  1999.  Web  changed  a  lot!   – HTML5  is  s4ll  work  in  progress   – Major  browsers  support  HTML5  elements  &  API   •  How  Did  HTML5  Get  Started?   – Coopera4on  between  World  Wide  Web   Consor4um  (W3C)  and  Web  Hypertext  Applica4on   Technology  Working  Group  (WHATWG)  
HTML5  Introduc4on   •  The  HTML5  <!DOCTYPE>   – There  is  only  one  <!DOCTYPE>  declara4on.  Simple       <!DOCTYPE html>
HTML5  Introduc4on   •  Minimum  HTML5  Document     <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
HTML5  Introduc4on   •  HTML5  New  Features   – The  <canvas>  element  for  2D  drawing   – The  <video>  and  <audio>  elements  for  media   playback   – Support  for  local  storage   – New  content-­‐specific  elements,  like  <ar4cle>,   <footer>,  <header>,  <nav>,  <sec4on>   – New  form  controls,  like  calendar,  date,  4me,   email,  url,  search  
HTML5  Introduc4on   •  Browser  Support  for  HTML5   – Not  full  standard!   – No  browser  has  full  support   – In  a  con4nuous  development  (Chrome,  Safari,   Internet  Explorer,  Firefox,  Opera)    
Html5
HTML5  New  Elements   •  Use  of  internet  changed  a  lot  since  HTML  4.01   (1999)   •  Several  HTML  4.01  elements  are  obsolete,  never   used  or  never  used  the  way  they  were  intended   •  To  beSer  handle  todays  internet,  HTML5  brings   new  changes:  New  elements  for  drawing   graphics,  adding  media  content,  beSer  page   structure,  beSer  form  handling,  and  several  APIs   to  drag/drop  elements,  find  Geoloca4on,  include   web  storage,  applica4on  cache,  web  workers,   etc.  
HTML5  New  Elements  
HTML5  New  Elements  
HTML5  New  Elements  
HTML5  New  Elements  
HTML5  New  Elements  
HTML5  New  Elements   •  Removed  Elements   –  <acronym>   –  <applet>   –  <basefont>   –  <big>   –  <center>   –  <dir>   –  <font>   –  <frame>   –  <frameset>   –  <noframes>   –  <strike>   –  <S>  
HTML5  Canvas   •  The  <canvas>  element  is  used  to  draw  graphics,   on  the  fly,  on  a  web  page.   •  What  is  Canvas?   –  The  HTML5  <canvas>  element  is  used  to  draw   graphics,  on  the  fly,  via  scrip4ng  (usually  JavaScript).   –  The  <canvas>  element  is  only  a  container  for  graphics.   You  must  use  a  script  to  actually  draw  the  graphics.   –  Canvas  has  several  methods  for  drawing  paths,  boxes,   circles,  characters,  and  adding  images.  
HTML5  Canvas   •  Browser  Support   – Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and   Safari  support  the  <canvas>  element.   – Note:  Internet  Explorer  8  and  earlier  versions,  do   not  support  the  <canvas>  element.   •  Crea4ng  a  Canvas   <canvas id="myCanvas" width="200" height="100"></canvas>
HTML5  Canvas   •  Tip:  You  can  have  mul4ple  <canvas>  elements   on  one  HTML  page.     •  Canvas  example:     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
HTML5  Canvas   •  Draw  Onto  The  Canvas  With  Javascript     <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
HTML5  Canvas   •  Canvas  Coordinates   •  This  means:  Start  at  the  upper-­‐le5  corner  (0,0)   and  draw  a  150x75  pixels  rectangle.  
HTML5  Canvas   •  Canvas  Paths   – To  draw  straight  lines  on  a  canvas,  we  will  use  the   following  two  methods:   •  moveTo(x,y)  defines  the  star4ng  point  of  the  line   •  lineTo(x,y)  defines  the  ending  point  of  the  line   – To  actually  draw  the  line,  we  must  use  one  of  the   "ink"  methods,  like  stroke().   var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
HTML5  Canvas   •  To  draw  a  circle  on  a  canvas,  we  will  use  the   following  method:   – arc(x,y,r,start,stop)   •  To  actually  draw  the  circle,  we  must  use  one   of  the  "ink"  methods,  like  stroke()  or  fill().    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
HTML5  Canvas   •  To  draw  text  on  a  canvas,  the  most  important   property  and  methods  are:   – font  -­‐  defines  the  font  proper4es  for  text   – fillText(text,x,y)  -­‐  Draws  "filled"  text  on  the  canvas   – strokeText(text,x,y)  -­‐  Draws  text  on  the  canvas  (no   fill)   Using  fillText():    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
HTML5  Canvas   Using  strokeText():     var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);
HTML5  SVG   •  HTML5  has  support  for  inline  SVG.   •  What  is  SVG?   –  SVG  stands  for  Scalable  Vector  Graphics   –  SVG  is  used  to  define  vector-­‐based  graphics  for  the   Web   –  SVG  defines  the  graphics  in  XML  format   –  SVG  graphics  do  NOT  lose  any  quality  if  they  are   zoomed  or  resized   –  Every  element  and  every  aSribute  in  SVG  files  can  be   animated   –  SVG  is  a  W3C  recommenda4on  
HTML5  SVG   •  Advantages  of  using  SVG  over  other  image   formats  (like  JPEG  and  GIF)  are:   –  SVG  images  can  be  created  and  edited  with  any  text   editor   –  SVG  images  can  be  searched,  indexed,  scripted,  and   compressed   –  SVG  images  are  scalable   –  SVG  images  can  be  printed  with  high  quality  at  any   resolu4on   –  SVG  images  are  zoomable  (and  the  image  can  be   zoomed  without  degrada4on)  
HTML5  SVG   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,   and  Safari  support  inline  SVG.     •  Embed  SVG  Directly  Into  HTML  Pages    <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke- width:5;fill-rule:evenodd;"> </svg> </body> </html>
HTML5  SVG   •  Differences  Between  SVG  and  Canvas   –  SVG  is  a  language  for  describing  2D  graphics  in  XML.   –  Canvas  draws  2D  graphics,  on  the  fly  (with  a  JavaScript).   –  SVG  is  XML  based,  which  means  that  every  element  is  available   within  the  SVG  DOM.  You  can  aSach  JavaScript  event  handlers   for  an  element.   –  In  SVG,  each  drawn  shape  is  remembered  as  an  object.  If   aSributes  of  an  SVG  object  are  changed,  the  browser  can   automa4cally  re-­‐render  the  shape.   –  Canvas  is  rendered  pixel  by  pixel.  In  canvas,  once  the  graphic  is   drawn,  it  is  forgoSen  by  the  browser.  If  its  posi4on  should  be   changed,  the  en4re  scene  needs  to  be  redrawn,  including  any   objects  that  might  have  been  covered  by  the  graphic.  
HTML5  Canvas  
HTML5  Drag  &  Drop   •  Drag  and  drop  is  a  part  of  the  HTML5   standard.     •  Drag  and  drop  is  a  very  common  feature.  It  is   when  you  "grab"  an  object  and  drag  it  to  a   different  loca4on.   •  In  HTML5,  drag  and  drop  is  part  of  the   standard,  and  any  element  can  be  draggable.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,   and  Safari  support  drag  and  drop.  
HTML5  Drag  &  Drop   <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69”> </body> </html>
HTML5  Geoloca4on   •  HTML5  Geoloca4on  is  used  to  locate  a  user's  posi4on.   •  The  HTML5  Geoloca4on  API  is  used  to  get  the   geographical  posi4on  of  a  user.   •  Since  this  can  compromise  user  privacy,  the  posi4on  is   not  available  unless  the  user  approves  it.   •  Browser  Support   –  Internet  Explorer  9+,  Firefox,  Chrome,  Safari  and  Opera   support  Geoloca4on.   –  Note:  Geoloca4on  is  much  more  accurate  for  devices  with   GPS,  like  iPhone.  
HTML5  Geoloca4on   <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
HTML5  Geoloca4on   function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }
HTML5  Geoloca4on   •  Displaying  the  result  in  a  map     function showPosition(position) { var latlon=position.coords.latitude +","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/ staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
HTML5  Video   •  Many  modern  websites  show  videos.  HTML5  provides  a   standard  for  showing  them.     •  Un4l  now,  there  has  not  been  a  standard  for  showing  a   video/movie  on  a  web  page.   •  Today,  most  videos  are  shown  through  a  plug-­‐in  (like  flash).   However,  different  browsers  may  have  different  plug-­‐ins.   •  HTML5  defines  a  new  element  which  specifies  a  standard   way  to  embed  a  video/movie  on  a  web  page:  the  <video>   element.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and  Safari   support  the  <video>  element.   –  Note:  Internet  Explorer  8  and  earlier  versions,  do  not  support   the  <video>  element.  
HTML5  Video   <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
HTML5  Video   <!DOCTYPE html> <html> <body> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
HTML5  Audio   •  HTML5  provides  a  standard  for  playing  audio  files.   •  Un4l  now,  there  has  not  been  a  standard  for  playing  audio   files  on  a  web  page.   •  Today,  most  audio  files  are  played  through  a  plug-­‐in  (like   flash).  However,  different  browsers  may  have  different   plug-­‐ins.   •  HTML5  defines  a  new  element  which  specifies  a  standard   way  to  embed  an  audio  file  on  a  web  page:  the  <audio>   element.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and  Safari   support  the  <audio>  element.   –  Note:  Internet  Explorer  8  and  earlier  versions,  do  not  support   the  <audio>  element.  
HTML5  Audio   •  HTML5  Audio  –  How  it  Works     <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/ mpeg"> Your browser does not support the audio element. </audio>
HTML5  Audio  
HTML5  Input  Types   •  HTML5  has  several  new  input  types  for  forms.  These  new  features  allow  beSer   input  control  and  valida4on.   –  color   –  date   –  date4me   –  date4me-­‐local   –  email   –  month   –  number   –  range   –  search   –  tel   –  4me   –  url   –  week   •  Note:  Not  all  major  browsers  support  all  the  new  input  types.  However,  you  can   already  start  using  them;  If  they  are  not  supported,  they  will  behave  as  regular   text  fields.  
HTML5  Form  Elements   •  HTML5  has  the  following  new  form  elements:   – <datalist>   – <keygen>   – <output>   •  Note:  Not  all  major  browsers  support  all  the   new  form  elements.  However,  you  can  already   start  using  them;  If  they  are  not  supported,   they  will  behave  as  regular  text  fields.  
HTML5  Form  Elements   •  <datalist>   – HTML5  <datalist>  Element   – The  <datalist>  element  specifies  a  list  of  pre-­‐ defined  op4ons  for  an  <input>  element.   – The  <datalist>  element  is  used  to  provide  an   "autocomplete"  feature  on  <input>  elements.   Users  will  see  a  drop-­‐down  list  of  pre-­‐defined   op4ons  as  they  input  data.   – Use  the  <input>  element's  list  aSribute  to  bind  it   together  with  a  <datalist>  element.  
HTML5  Form  Elements   <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
HTML5  Form  Elements   •  <keygen>   –  The  purpose  of  the  <keygen>  element  is  to  provide  a   secure  way  to  authen4cate  users.   –  The  <keygen>  tag  specifies  a  key-­‐pair  generator  field   in  a  form.   –  When  the  form  is  submiSed,  two  keys  are  generated,   one  private  and  one  public.   –  The  private  key  is  stored  locally,  and  the  public  key  is   sent  to  the  server.  The  public  key  could  be  used  to   generate  a  client  cer4ficate  to  authen4cate  the  user   in  the  future.  
HTML5  Form  Elements   <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
HTML5  Form  Elements   •  <output>   – The  <output>  element  represents  the  result  of  a   calcula4on  (like  one  performed  by  a  script).       <form oninput="x.value=parseInt(a.value) +parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
HTML5  New  Form  Elements   •  HTML5  has  several  new  aSributes  for  <form>  and  <input>.   •  New  aSributes  for  <form>:   –  autocomplete   –  Novalidate   •  New  aSributes  for  <input>:   –  autocomplete   –  autofocus   –  form   –  formac4on   –  formenctype   –  formmethod   –  formnovalidate   –  formtarget   –  height  and  width   –  list   –  min  and  max   –  mul4ple   –  paSern  (regexp)   –  placeholder   –  required   –  step  
HTML5  Seman4c  Elements   •  What  Are  Seman4c  Elements?   – A  seman4c  element  clearly  describes  its  meaning   to  both  the  browser  and  the  developer.   – Examples  of  non-­‐seman4c  elements:  <div>  and   <span>  -­‐  Tells  nothing  about  its  content.   – Examples  of  seman4c  elements:  <form>,  <table>,   and  <img>  -­‐  Clearly  defines  its  content.   – Internet  Explorer  9+,  Firefox,  Chrome,  Safari  and   Opera  supports  the  seman4c  elements  described   in  this  chapter.  
HTML5  Seman4c  Elements  
HTML5  Web  Storage   •  What  is  HTML5  Web  Storage?   –  With  HTML5,  web  pages  can  store  data  locally  within  the   user's  browser.   –  Earlier,  this  was  done  with  cookies.  However,  Web  Storage   is  more  secure  and  faster.  The  data  is  not  included  with   every  server  request,  but  used  ONLY  when  asked  for.  It  is   also  possible  to  store  large  amounts  of  data,  without   affec4ng  the  website's  performance.   –  The  data  is  stored  in  key/value  pairs,  and  a  web  page  can   only  access  data  stored  by  itself.   –  Web  storage  is  supported  in  Internet  Explorer  8+,  Firefox,   Opera,  Chrome,  and  Safari.  
HTML5  Web  Storage   •  localStorage  and  sessionStorage   – There  are  two  new  objects  for  storing  data  on  the   client:   •  localStorage  -­‐  stores  data  with  no  expira4on  date   •  sessionStorage  -­‐  stores  data  for  one  session   – Before  using  web  storage,  check  browser  support   for  localStorage  and  sessionStorage:     if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }
HTML5  Web  Storage   •  The  localStorage  Object   – The  localStorage  object  stores  the  data  with  no   expira4on  date.  The  data  will  not  be  deleted  when   the  browser  is  closed,  and  will  be  available  the   next  day,  week,  or  year.       localStorage.lastname="Smith"; document.getElementById("result").innerHTML ="Last name: " + localStorage.lastname;
HTML5  Web  Storage   •  The  sessionStorage  Object   – The  sessionStorage  object  is  equal  to  the   localStorage  object,  except  that  it  stores  the  data   for  only  one  session.  The  data  is  deleted  when  the   user  closes  the  browser  window.     if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
HTML5  Applica4on  Cache   •  With  HTML5  it  is  easy  to  make  an  offline  version  of  a   web  applica4on,  by  crea4ng  a  cache  manifest  file.     •  HTML5  introduces  applica4on  cache,  which  means  that   a  web  applica4on  is  cached,  and  accessible  without  an   internet  connec4on.   •  Applica4on  cache  gives  an  applica4on  three   advantages:   –  Offline  browsing  -­‐  users  can  use  the  applica4on  when   they're  offline   –  Speed  -­‐  cached  resources  load  faster   –  Reduced  server  load  -­‐  the  browser  will  only  download   updated/changed  resources  from  the  server  
HTML5  Applica4on  Cache   <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> CACHE MANIFEST /theme.css /logo.gif /main.js CACHE MANIFEST /theme.css /logo.gif /main.js FALLBACK: /html/ /offline.html
HTML5  Web  Workers   •  A  web  worker  is  a  JavaScript  running  in  the   background,  without  affec4ng  the  performance  of  the   page.   •  When  execu4ng  scripts  in  an  HTML  page,  the  page   becomes  unresponsive  un4l  the  script  is  finished.   •  A  web  worker  is  a  JavaScript  that  runs  in  the   background,  independently  of  other  scripts,  without   affec4ng  the  performance  of  the  page.  You  can   con4nue  to  do  whatever  you  want:  clicking,  selec4ng   things,  etc.,  while  the  web  worker  runs  in  the   background.  
HTML5  Web  Workers   <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script>
HTML5  Web  Workers   var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); Demo_workers.js  
Html5
QUESTIONS?  

More Related Content

PDF
Html5
Mehdi Jalal
 
PPTX
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
PDF
Dive into HTML5: SVG and Canvas
Doris Chen
 
PPTX
HTML5 Essential Training
Kaloyan Kosev
 
PPTX
HTML5 and SVG
yarcub
 
PPTX
Top 10 HTML5 features
Gill Cleeren
 
PDF
SVG For Web Designers (and Developers)
Sara Soueidan
 
ZIP
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig
 
Html5
Mehdi Jalal
 
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
Dive into HTML5: SVG and Canvas
Doris Chen
 
HTML5 Essential Training
Kaloyan Kosev
 
HTML5 and SVG
yarcub
 
Top 10 HTML5 features
Gill Cleeren
 
SVG For Web Designers (and Developers)
Sara Soueidan
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig
 

What's hot (19)

PPTX
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Guillaume Kossi
 
PPTX
New Elements & Features in HTML5
Jamshid Hashimi
 
PDF
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
 
PDF
Next generation Graphics: SVG
David Corbacho Román
 
KEY
2022 HTML5: The future is now
Gonzalo Cordero
 
PPTX
SVG - Scalable Vector Graphic
Akila Iroshan
 
PPTX
HTML5 - A Whirlwind tour
Lohith Goudagere Nagaraj
 
PDF
Learn svg
FitBlar Mit
 
KEY
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
PPTX
SilverlightDevIntro
Pratik Aggarwal
 
ZIP
Html5 public
doodlemoonch
 
PPT
Svg
Steve Fort
 
PDF
HTML5, just another presentation :)
François Massart
 
PPT
Css
Sumit Gupta
 
PDF
Web Development using Ruby on Rails
Avi Kedar
 
PPTX
Accessibility Hacks version 2
Graham Armfield
 
PDF
The Future Of CSS
Andy Budd
 
PDF
HTML5: Introduction
Guillermo Paz
 
PPTX
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Guillaume Kossi
 
New Elements & Features in HTML5
Jamshid Hashimi
 
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
 
Next generation Graphics: SVG
David Corbacho Román
 
2022 HTML5: The future is now
Gonzalo Cordero
 
SVG - Scalable Vector Graphic
Akila Iroshan
 
HTML5 - A Whirlwind tour
Lohith Goudagere Nagaraj
 
Learn svg
FitBlar Mit
 
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
SilverlightDevIntro
Pratik Aggarwal
 
Html5 public
doodlemoonch
 
Svg
Steve Fort
 
HTML5, just another presentation :)
François Massart
 
Css
Sumit Gupta
 
Web Development using Ruby on Rails
Avi Kedar
 
Accessibility Hacks version 2
Graham Armfield
 
The Future Of CSS
Andy Budd
 
HTML5: Introduction
Guillermo Paz
 
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
 
Ad

Viewers also liked (13)

PPT
Retirement income
Xin Luo, CFA
 
PPTX
The south after the civil war
AMSchnur
 
PPT
Prospectiva
jarmendipg
 
PPT
Exportfinancing
Kiruthika Ekambaram
 
PPTX
Universidad tecnica de ambato
Moiss Almendariz
 
PPT
Bahan ajar ii
T Fachrurrazi Jacob
 
PPTX
C1 study slides
lawrencembio
 
PPTX
Role and responsibilities of an allied health professional
Nasreen Begum
 
PPTX
Search Engine Optimization
Viplove Saini
 
PPTX
Preparing foods with nutrition and safety in mind
Nasreen Begum
 
PPTX
Food safety and hygiene
Nasreen Begum
 
PPTX
Genres Of Music During Spanish Time
teruzmo_647
 
PPT
2.ky nang lang nghe hvkt
Thành Bôn
 
Retirement income
Xin Luo, CFA
 
The south after the civil war
AMSchnur
 
Prospectiva
jarmendipg
 
Exportfinancing
Kiruthika Ekambaram
 
Universidad tecnica de ambato
Moiss Almendariz
 
Bahan ajar ii
T Fachrurrazi Jacob
 
C1 study slides
lawrencembio
 
Role and responsibilities of an allied health professional
Nasreen Begum
 
Search Engine Optimization
Viplove Saini
 
Preparing foods with nutrition and safety in mind
Nasreen Begum
 
Food safety and hygiene
Nasreen Begum
 
Genres Of Music During Spanish Time
teruzmo_647
 
2.ky nang lang nghe hvkt
Thành Bôn
 
Ad

Similar to Html5 (20)

PDF
HTML 5 Step By Step - Ebook
Scottperrone
 
PPTX
Top 10 HTML5 features every developer should know!
Gill Cleeren
 
ODP
Html5
prithag92
 
ODP
Html5
prithag92
 
PPTX
Html5
Zeeshan Ahmed
 
PPTX
Html5 tutorial for beginners
Singsys Pte Ltd
 
PPTX
HTML5-Tutorial-For-Beginn.6202488.pptx
BCAGen
 
PPTX
Delhi student's day
Ankur Mishra
 
PDF
Building a Better Web with HTML5 and CSS3
Karambir Singh Nain
 
PPT
Introduction of html5
kokila T
 
DOCX
Html viva questions
Vipul Naik
 
PDF
Html5 CSS3 jQuery Basic
Ravi Yelluripati
 
PPT
Introdution to HTML 5
onkar_bhosle
 
PDF
Echo HTML5
Nathan Smith
 
PDF
11 tips to...
Thomas Deceuninck
 
PDF
HTML tips
dangerdk007
 
PPTX
Html5 Basics
Pankaj Bajaj
 
PPT
HTML 5
Renu Karthick.S
 
PDF
Jsf2 html5-jazoon
Roger Kitain
 
PDF
HTML 5, CSS3 and ASP.NET Best Practices by Example
Darren Sim
 
HTML 5 Step By Step - Ebook
Scottperrone
 
Top 10 HTML5 features every developer should know!
Gill Cleeren
 
Html5
prithag92
 
Html5
prithag92
 
Html5
Zeeshan Ahmed
 
Html5 tutorial for beginners
Singsys Pte Ltd
 
HTML5-Tutorial-For-Beginn.6202488.pptx
BCAGen
 
Delhi student's day
Ankur Mishra
 
Building a Better Web with HTML5 and CSS3
Karambir Singh Nain
 
Introduction of html5
kokila T
 
Html viva questions
Vipul Naik
 
Html5 CSS3 jQuery Basic
Ravi Yelluripati
 
Introdution to HTML 5
onkar_bhosle
 
Echo HTML5
Nathan Smith
 
11 tips to...
Thomas Deceuninck
 
HTML tips
dangerdk007
 
Html5 Basics
Pankaj Bajaj
 
HTML 5
Renu Karthick.S
 
Jsf2 html5-jazoon
Roger Kitain
 
HTML 5, CSS3 and ASP.NET Best Practices by Example
Darren Sim
 

Recently uploaded (20)

PPTX
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
PPTX
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
PDF
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PPTX
Simple and concise overview about Quantum computing..pptx
mughal641
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PDF
Get More from Fiori Automation - What’s New, What Works, and What’s Next.pdf
Precisely
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
PPTX
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
How ETL Control Logic Keeps Your Pipelines Safe and Reliable.pdf
Stryv Solutions Pvt. Ltd.
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
Simple and concise overview about Quantum computing..pptx
mughal641
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
Get More from Fiori Automation - What’s New, What Works, and What’s Next.pdf
Precisely
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
How ETL Control Logic Keeps Your Pipelines Safe and Reliable.pdf
Stryv Solutions Pvt. Ltd.
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 

Html5

  • 1. HTML5   Mehdi  Jalal   Trainer:  Cresco  Solu4on   So5ware  Developer:  NETLINKS   Email:  [email protected]   Skype:  mehdijalal01               Afghanistan  Workforce   Development  Program      
  • 3. Agenda   •  HTML5  Introduc4on   •  HTML5  New  Elements   •  HTML5  Canvas   •  HTML5  SVG   •  HTML5  Drag/Drop   •  HTML5  Geoloca4on   •  HTML5  Video   •  HTML5  Audio   •  HTML5  Input  Types  
  • 4. Agenda   •  HTML5  Form  Elements   •  HTML5  Form  ASributes   •  HTML5  Seman4c  Elements   •  HMTL5  Web  Storage   •  HMTL5  Applica4on  Cache   •  HMTL5  Web  Workers  
  • 5. HTML5  Introduc4on   •  What  is  HTML5?   – HTML5  will  be  the  standard  for  HTML   – HTML  4.01  came  in  1999.  Web  changed  a  lot!   – HTML5  is  s4ll  work  in  progress   – Major  browsers  support  HTML5  elements  &  API   •  How  Did  HTML5  Get  Started?   – Coopera4on  between  World  Wide  Web   Consor4um  (W3C)  and  Web  Hypertext  Applica4on   Technology  Working  Group  (WHATWG)  
  • 6. HTML5  Introduc4on   •  The  HTML5  <!DOCTYPE>   – There  is  only  one  <!DOCTYPE>  declara4on.  Simple       <!DOCTYPE html>
  • 7. HTML5  Introduc4on   •  Minimum  HTML5  Document     <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 8. HTML5  Introduc4on   •  HTML5  New  Features   – The  <canvas>  element  for  2D  drawing   – The  <video>  and  <audio>  elements  for  media   playback   – Support  for  local  storage   – New  content-­‐specific  elements,  like  <ar4cle>,   <footer>,  <header>,  <nav>,  <sec4on>   – New  form  controls,  like  calendar,  date,  4me,   email,  url,  search  
  • 9. HTML5  Introduc4on   •  Browser  Support  for  HTML5   – Not  full  standard!   – No  browser  has  full  support   – In  a  con4nuous  development  (Chrome,  Safari,   Internet  Explorer,  Firefox,  Opera)    
  • 11. HTML5  New  Elements   •  Use  of  internet  changed  a  lot  since  HTML  4.01   (1999)   •  Several  HTML  4.01  elements  are  obsolete,  never   used  or  never  used  the  way  they  were  intended   •  To  beSer  handle  todays  internet,  HTML5  brings   new  changes:  New  elements  for  drawing   graphics,  adding  media  content,  beSer  page   structure,  beSer  form  handling,  and  several  APIs   to  drag/drop  elements,  find  Geoloca4on,  include   web  storage,  applica4on  cache,  web  workers,   etc.  
  • 17. HTML5  New  Elements   •  Removed  Elements   –  <acronym>   –  <applet>   –  <basefont>   –  <big>   –  <center>   –  <dir>   –  <font>   –  <frame>   –  <frameset>   –  <noframes>   –  <strike>   –  <S>  
  • 18. HTML5  Canvas   •  The  <canvas>  element  is  used  to  draw  graphics,   on  the  fly,  on  a  web  page.   •  What  is  Canvas?   –  The  HTML5  <canvas>  element  is  used  to  draw   graphics,  on  the  fly,  via  scrip4ng  (usually  JavaScript).   –  The  <canvas>  element  is  only  a  container  for  graphics.   You  must  use  a  script  to  actually  draw  the  graphics.   –  Canvas  has  several  methods  for  drawing  paths,  boxes,   circles,  characters,  and  adding  images.  
  • 19. HTML5  Canvas   •  Browser  Support   – Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and   Safari  support  the  <canvas>  element.   – Note:  Internet  Explorer  8  and  earlier  versions,  do   not  support  the  <canvas>  element.   •  Crea4ng  a  Canvas   <canvas id="myCanvas" width="200" height="100"></canvas>
  • 20. HTML5  Canvas   •  Tip:  You  can  have  mul4ple  <canvas>  elements   on  one  HTML  page.     •  Canvas  example:     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
  • 21. HTML5  Canvas   •  Draw  Onto  The  Canvas  With  Javascript     <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
  • 22. HTML5  Canvas   •  Canvas  Coordinates   •  This  means:  Start  at  the  upper-­‐le5  corner  (0,0)   and  draw  a  150x75  pixels  rectangle.  
  • 23. HTML5  Canvas   •  Canvas  Paths   – To  draw  straight  lines  on  a  canvas,  we  will  use  the   following  two  methods:   •  moveTo(x,y)  defines  the  star4ng  point  of  the  line   •  lineTo(x,y)  defines  the  ending  point  of  the  line   – To  actually  draw  the  line,  we  must  use  one  of  the   "ink"  methods,  like  stroke().   var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
  • 24. HTML5  Canvas   •  To  draw  a  circle  on  a  canvas,  we  will  use  the   following  method:   – arc(x,y,r,start,stop)   •  To  actually  draw  the  circle,  we  must  use  one   of  the  "ink"  methods,  like  stroke()  or  fill().    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
  • 25. HTML5  Canvas   •  To  draw  text  on  a  canvas,  the  most  important   property  and  methods  are:   – font  -­‐  defines  the  font  proper4es  for  text   – fillText(text,x,y)  -­‐  Draws  "filled"  text  on  the  canvas   – strokeText(text,x,y)  -­‐  Draws  text  on  the  canvas  (no   fill)   Using  fillText():    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
  • 26. HTML5  Canvas   Using  strokeText():     var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);
  • 27. HTML5  SVG   •  HTML5  has  support  for  inline  SVG.   •  What  is  SVG?   –  SVG  stands  for  Scalable  Vector  Graphics   –  SVG  is  used  to  define  vector-­‐based  graphics  for  the   Web   –  SVG  defines  the  graphics  in  XML  format   –  SVG  graphics  do  NOT  lose  any  quality  if  they  are   zoomed  or  resized   –  Every  element  and  every  aSribute  in  SVG  files  can  be   animated   –  SVG  is  a  W3C  recommenda4on  
  • 28. HTML5  SVG   •  Advantages  of  using  SVG  over  other  image   formats  (like  JPEG  and  GIF)  are:   –  SVG  images  can  be  created  and  edited  with  any  text   editor   –  SVG  images  can  be  searched,  indexed,  scripted,  and   compressed   –  SVG  images  are  scalable   –  SVG  images  can  be  printed  with  high  quality  at  any   resolu4on   –  SVG  images  are  zoomable  (and  the  image  can  be   zoomed  without  degrada4on)  
  • 29. HTML5  SVG   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,   and  Safari  support  inline  SVG.     •  Embed  SVG  Directly  Into  HTML  Pages    <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke- width:5;fill-rule:evenodd;"> </svg> </body> </html>
  • 30. HTML5  SVG   •  Differences  Between  SVG  and  Canvas   –  SVG  is  a  language  for  describing  2D  graphics  in  XML.   –  Canvas  draws  2D  graphics,  on  the  fly  (with  a  JavaScript).   –  SVG  is  XML  based,  which  means  that  every  element  is  available   within  the  SVG  DOM.  You  can  aSach  JavaScript  event  handlers   for  an  element.   –  In  SVG,  each  drawn  shape  is  remembered  as  an  object.  If   aSributes  of  an  SVG  object  are  changed,  the  browser  can   automa4cally  re-­‐render  the  shape.   –  Canvas  is  rendered  pixel  by  pixel.  In  canvas,  once  the  graphic  is   drawn,  it  is  forgoSen  by  the  browser.  If  its  posi4on  should  be   changed,  the  en4re  scene  needs  to  be  redrawn,  including  any   objects  that  might  have  been  covered  by  the  graphic.  
  • 32. HTML5  Drag  &  Drop   •  Drag  and  drop  is  a  part  of  the  HTML5   standard.     •  Drag  and  drop  is  a  very  common  feature.  It  is   when  you  "grab"  an  object  and  drag  it  to  a   different  loca4on.   •  In  HTML5,  drag  and  drop  is  part  of  the   standard,  and  any  element  can  be  draggable.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,   and  Safari  support  drag  and  drop.  
  • 33. HTML5  Drag  &  Drop   <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69”> </body> </html>
  • 34. HTML5  Geoloca4on   •  HTML5  Geoloca4on  is  used  to  locate  a  user's  posi4on.   •  The  HTML5  Geoloca4on  API  is  used  to  get  the   geographical  posi4on  of  a  user.   •  Since  this  can  compromise  user  privacy,  the  posi4on  is   not  available  unless  the  user  approves  it.   •  Browser  Support   –  Internet  Explorer  9+,  Firefox,  Chrome,  Safari  and  Opera   support  Geoloca4on.   –  Note:  Geoloca4on  is  much  more  accurate  for  devices  with   GPS,  like  iPhone.  
  • 35. HTML5  Geoloca4on   <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
  • 36. HTML5  Geoloca4on   function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }
  • 37. HTML5  Geoloca4on   •  Displaying  the  result  in  a  map     function showPosition(position) { var latlon=position.coords.latitude +","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/ staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
  • 38. HTML5  Video   •  Many  modern  websites  show  videos.  HTML5  provides  a   standard  for  showing  them.     •  Un4l  now,  there  has  not  been  a  standard  for  showing  a   video/movie  on  a  web  page.   •  Today,  most  videos  are  shown  through  a  plug-­‐in  (like  flash).   However,  different  browsers  may  have  different  plug-­‐ins.   •  HTML5  defines  a  new  element  which  specifies  a  standard   way  to  embed  a  video/movie  on  a  web  page:  the  <video>   element.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and  Safari   support  the  <video>  element.   –  Note:  Internet  Explorer  8  and  earlier  versions,  do  not  support   the  <video>  element.  
  • 39. HTML5  Video   <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
  • 40. HTML5  Video   <!DOCTYPE html> <html> <body> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
  • 41. HTML5  Audio   •  HTML5  provides  a  standard  for  playing  audio  files.   •  Un4l  now,  there  has  not  been  a  standard  for  playing  audio   files  on  a  web  page.   •  Today,  most  audio  files  are  played  through  a  plug-­‐in  (like   flash).  However,  different  browsers  may  have  different   plug-­‐ins.   •  HTML5  defines  a  new  element  which  specifies  a  standard   way  to  embed  an  audio  file  on  a  web  page:  the  <audio>   element.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and  Safari   support  the  <audio>  element.   –  Note:  Internet  Explorer  8  and  earlier  versions,  do  not  support   the  <audio>  element.  
  • 42. HTML5  Audio   •  HTML5  Audio  –  How  it  Works     <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/ mpeg"> Your browser does not support the audio element. </audio>
  • 44. HTML5  Input  Types   •  HTML5  has  several  new  input  types  for  forms.  These  new  features  allow  beSer   input  control  and  valida4on.   –  color   –  date   –  date4me   –  date4me-­‐local   –  email   –  month   –  number   –  range   –  search   –  tel   –  4me   –  url   –  week   •  Note:  Not  all  major  browsers  support  all  the  new  input  types.  However,  you  can   already  start  using  them;  If  they  are  not  supported,  they  will  behave  as  regular   text  fields.  
  • 45. HTML5  Form  Elements   •  HTML5  has  the  following  new  form  elements:   – <datalist>   – <keygen>   – <output>   •  Note:  Not  all  major  browsers  support  all  the   new  form  elements.  However,  you  can  already   start  using  them;  If  they  are  not  supported,   they  will  behave  as  regular  text  fields.  
  • 46. HTML5  Form  Elements   •  <datalist>   – HTML5  <datalist>  Element   – The  <datalist>  element  specifies  a  list  of  pre-­‐ defined  op4ons  for  an  <input>  element.   – The  <datalist>  element  is  used  to  provide  an   "autocomplete"  feature  on  <input>  elements.   Users  will  see  a  drop-­‐down  list  of  pre-­‐defined   op4ons  as  they  input  data.   – Use  the  <input>  element's  list  aSribute  to  bind  it   together  with  a  <datalist>  element.  
  • 47. HTML5  Form  Elements   <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
  • 48. HTML5  Form  Elements   •  <keygen>   –  The  purpose  of  the  <keygen>  element  is  to  provide  a   secure  way  to  authen4cate  users.   –  The  <keygen>  tag  specifies  a  key-­‐pair  generator  field   in  a  form.   –  When  the  form  is  submiSed,  two  keys  are  generated,   one  private  and  one  public.   –  The  private  key  is  stored  locally,  and  the  public  key  is   sent  to  the  server.  The  public  key  could  be  used  to   generate  a  client  cer4ficate  to  authen4cate  the  user   in  the  future.  
  • 49. HTML5  Form  Elements   <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
  • 50. HTML5  Form  Elements   •  <output>   – The  <output>  element  represents  the  result  of  a   calcula4on  (like  one  performed  by  a  script).       <form oninput="x.value=parseInt(a.value) +parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
  • 51. HTML5  New  Form  Elements   •  HTML5  has  several  new  aSributes  for  <form>  and  <input>.   •  New  aSributes  for  <form>:   –  autocomplete   –  Novalidate   •  New  aSributes  for  <input>:   –  autocomplete   –  autofocus   –  form   –  formac4on   –  formenctype   –  formmethod   –  formnovalidate   –  formtarget   –  height  and  width   –  list   –  min  and  max   –  mul4ple   –  paSern  (regexp)   –  placeholder   –  required   –  step  
  • 52. HTML5  Seman4c  Elements   •  What  Are  Seman4c  Elements?   – A  seman4c  element  clearly  describes  its  meaning   to  both  the  browser  and  the  developer.   – Examples  of  non-­‐seman4c  elements:  <div>  and   <span>  -­‐  Tells  nothing  about  its  content.   – Examples  of  seman4c  elements:  <form>,  <table>,   and  <img>  -­‐  Clearly  defines  its  content.   – Internet  Explorer  9+,  Firefox,  Chrome,  Safari  and   Opera  supports  the  seman4c  elements  described   in  this  chapter.  
  • 54. HTML5  Web  Storage   •  What  is  HTML5  Web  Storage?   –  With  HTML5,  web  pages  can  store  data  locally  within  the   user's  browser.   –  Earlier,  this  was  done  with  cookies.  However,  Web  Storage   is  more  secure  and  faster.  The  data  is  not  included  with   every  server  request,  but  used  ONLY  when  asked  for.  It  is   also  possible  to  store  large  amounts  of  data,  without   affec4ng  the  website's  performance.   –  The  data  is  stored  in  key/value  pairs,  and  a  web  page  can   only  access  data  stored  by  itself.   –  Web  storage  is  supported  in  Internet  Explorer  8+,  Firefox,   Opera,  Chrome,  and  Safari.  
  • 55. HTML5  Web  Storage   •  localStorage  and  sessionStorage   – There  are  two  new  objects  for  storing  data  on  the   client:   •  localStorage  -­‐  stores  data  with  no  expira4on  date   •  sessionStorage  -­‐  stores  data  for  one  session   – Before  using  web  storage,  check  browser  support   for  localStorage  and  sessionStorage:     if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }
  • 56. HTML5  Web  Storage   •  The  localStorage  Object   – The  localStorage  object  stores  the  data  with  no   expira4on  date.  The  data  will  not  be  deleted  when   the  browser  is  closed,  and  will  be  available  the   next  day,  week,  or  year.       localStorage.lastname="Smith"; document.getElementById("result").innerHTML ="Last name: " + localStorage.lastname;
  • 57. HTML5  Web  Storage   •  The  sessionStorage  Object   – The  sessionStorage  object  is  equal  to  the   localStorage  object,  except  that  it  stores  the  data   for  only  one  session.  The  data  is  deleted  when  the   user  closes  the  browser  window.     if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  • 58. HTML5  Applica4on  Cache   •  With  HTML5  it  is  easy  to  make  an  offline  version  of  a   web  applica4on,  by  crea4ng  a  cache  manifest  file.     •  HTML5  introduces  applica4on  cache,  which  means  that   a  web  applica4on  is  cached,  and  accessible  without  an   internet  connec4on.   •  Applica4on  cache  gives  an  applica4on  three   advantages:   –  Offline  browsing  -­‐  users  can  use  the  applica4on  when   they're  offline   –  Speed  -­‐  cached  resources  load  faster   –  Reduced  server  load  -­‐  the  browser  will  only  download   updated/changed  resources  from  the  server  
  • 59. HTML5  Applica4on  Cache   <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> CACHE MANIFEST /theme.css /logo.gif /main.js CACHE MANIFEST /theme.css /logo.gif /main.js FALLBACK: /html/ /offline.html
  • 60. HTML5  Web  Workers   •  A  web  worker  is  a  JavaScript  running  in  the   background,  without  affec4ng  the  performance  of  the   page.   •  When  execu4ng  scripts  in  an  HTML  page,  the  page   becomes  unresponsive  un4l  the  script  is  finished.   •  A  web  worker  is  a  JavaScript  that  runs  in  the   background,  independently  of  other  scripts,  without   affec4ng  the  performance  of  the  page.  You  can   con4nue  to  do  whatever  you  want:  clicking,  selec4ng   things,  etc.,  while  the  web  worker  runs  in  the   background.  
  • 61. HTML5  Web  Workers   <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script>
  • 62. HTML5  Web  Workers   var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); Demo_workers.js