SlideShare une entreprise Scribd logo
HTML5, les nouvelles
balises
MOHAMED BOUHAMED
HTML5 : les nouvelles balises
 Structure de page web :
 <header>
 <nav>
 <section>
 <article>
 <aside>
 <footer>
<header>
<nav>
<section>
<section>
<footer>
<article>
<article>
<aside>
2
HTML5 : les nouvelles balises
 Balises pour webapplication :
 <list>
 <datalist>
 <detail>
 <summary>
 <meter>
 <progress> } Barre de progression
} Listes déroulantes
3
HTML5 : les nouvelles balises
 Les attributs nouveaux du
champ texte <input> :
 required
 type=’’email’’
 type=’’date’’
 type=’’range’’
 type=’’search’’
 type=’’tel’’
 type=’’number’’
 type=’’color’’
 placeholder
4
Les plus connus
Démo jQuery
 Les sélecteurs simples
 Les sélecteurs complexes
 Les animations
 La manipulation de CSS
CSS3, ce qui est possible
CSS3, ce qui est possible
 Sélecteurs :
 :ntn-child(odd/even)
 :not(.class or #id or elem)
 :first-child
 :last-child
 input[type=’’text’’]
 div > div
8
CSS3, ce qui est possible
 Polices hébergées sur le serveur
 plus besoin d’utiliser une police présente sur tous les ordinateurs
 toutes les polices sont acceptées
9
@font-face{
font-family: 'Gotham';
src: url(Gotham-Black.otf);
}
h1 {
font: bold 90px 'Gotham';
}
CSS3, ce qui est possible
 Apparence des éléments
 border-radius : Wpx XpxYpx Zpx
 transparence : rgba(x,y,z,∝)
 background-size
 background multiple :
 background: url(image1), url(image2)
 text-shadow
 box-shadow
 transitions
10
Mobilité et webapp
Mobilité et webapp
 Géolocalisation
 possibilité d’utiliser le GPS de
l’appareil
 demande de confirmation
 utilisation de l’API Google
Maps JS
 affichage de la position de
l’utilisateur
12
<script
src="http://maps.googleapis.com/maps/api/js?sensor=
false"></script>
<script type=’’text/javascript’’>
function initialize() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
onSuccess,
onError, {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 120000
});
}
}
</script>
HTML5 et multimedia
HTML5 et multimedia
 Images
 utilisation de nouvelles balises en plus de l’images :
14
<figure>
<img src=’’mon_image.jpg’’>
<figcaption>
Texte de légende de l’images
</figcaption>
</figure>
HTML5 et multimedia
 Audio
 balise <audio> prévue à
cet effet
 prévoir les fichiers :
 .ogg (Opera, Firefox)
 .mp3 (Chrome, Safari)
 ajouter les types :
 type=’’audio/ogg’’
 type=’’audio/mpeg’’
 player html5 dans chaque
navigateur web
compatible
 possibilité d’options :
<audio controls="controls" preload="auto"
autobuffer="autobuffer" loop="loop">
<source src="audio.m4a” type=’’audio/mpeg’’>
<source src="audio.mp3” type=’’audio/mpeg’’>
</audio>
15
HTML5 et multimedia
 Vidéo
 balise <video> prévue à
cet effet
 prévoir les fichiers :
 .ogg (Opera, Firefox)
 .mp4 (Chrome, Safari)
 ajouter les types :
 type=’’video/ogg’’
 type=’’video/mp4’’
 player html5 dans chaque
navigateur web
compatible
 possibilité d’options :
<video width="980px" height="551.25px"
controls="controls" autobuffer="autobuffer"
loop="loop" class="shown"
poster="poster.png">
<source src="video.m4v” type=’’video/mp4’’>
</video>
16
Canvas, dessin et
animation
Définition
 Element du DOM
 Effectue des rendus DYNAMIQUES d’images
 Ne produit donc RIEN seul
 Nécessite d’accéder à l’élément et de le modifier à la volée
 Utilisable en dernier ressort
 Introduit par Apple
 Standardisé parWHATWG
Procédure
 Créer le CANVAS en HTML
 Définir ses dimensions en HTML
 Définir son style en CSS
 (Créer un raccourcis vers l’élément)
 (Créer un raccourcis vers son contexte)
 Dessiner ou
 Placer une ressources et l’animer

Contenu connexe

Tendances

JQuery
JQueryJQuery
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
kadzaki
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
kadzaki
 
Draft - Developper Sur Elgg
Draft - Developper Sur ElggDraft - Developper Sur Elgg
Draft - Developper Sur Elgg
Brice Gaillard
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
Voyelle Voyelle
 
Smarty
SmartySmarty
Smarty
afup Paris
 

Tendances (8)

JQuery
JQueryJQuery
JQuery
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Apprenez le jQuery
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Draft - Developper Sur Elgg
Draft - Developper Sur ElggDraft - Developper Sur Elgg
Draft - Developper Sur Elgg
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
 
Smarty
SmartySmarty
Smarty
 

Similaire à Html5 2

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
Hafid Denguir
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Rémi Prévost
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
Yoann Gotthilf
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
Julio Djomo
 
Créer un site web moderne en 30 minutes
Créer un site web moderne en 30 minutesCréer un site web moderne en 30 minutes
Créer un site web moderne en 30 minutes
Valéry BERNARD
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
Philippe Sfeir
 
ASP.NET from Zero to Hero
ASP.NET from Zero to HeroASP.NET from Zero to Hero
ASP.NET from Zero to Hero
Cellenza
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
hugomallet
 
Cours html5
Cours html5Cours html5
Cours html5
Abdelmonem NAAMANE
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 

Similaire à Html5 2 (20)

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
HTML5
HTML5HTML5
HTML5
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
 
Créer un site web moderne en 30 minutes
Créer un site web moderne en 30 minutesCréer un site web moderne en 30 minutes
Créer un site web moderne en 30 minutes
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 
ASP.NET from Zero to Hero
ASP.NET from Zero to HeroASP.NET from Zero to Hero
ASP.NET from Zero to Hero
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Cours html5
Cours html5Cours html5
Cours html5
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 

Plus de TECOS

Bouhamed vuejs-meetup-tecos
Bouhamed vuejs-meetup-tecosBouhamed vuejs-meetup-tecos
Bouhamed vuejs-meetup-tecos
TECOS
 
D3 js-last
D3 js-lastD3 js-last
D3 js-last
TECOS
 
Mta
MtaMta
Mta
TECOS
 
Summer internship
Summer internshipSummer internship
Summer internship
TECOS
 
Mohamed bouhamed - ccna2
Mohamed bouhamed  - ccna2Mohamed bouhamed  - ccna2
Mohamed bouhamed - ccna2
TECOS
 
Mohamed bouhamed - ccna1
Mohamed bouhamed  -  ccna1Mohamed bouhamed  -  ccna1
Mohamed bouhamed - ccna1
TECOS
 
Mobile certified
Mobile certifiedMobile certified
Mobile certified
TECOS
 
Analytics certified
Analytics certifiedAnalytics certified
Analytics certified
TECOS
 
Ad words certified
Ad words certifiedAd words certified
Ad words certified
TECOS
 
Télémétrie d’openstack
Télémétrie d’openstackTélémétrie d’openstack
Télémétrie d’openstack
TECOS
 
cloudu certification
cloudu certificationcloudu certification
cloudu certification
TECOS
 
Internship report
Internship reportInternship report
Internship report
TECOS
 
Gsm presntation
Gsm presntationGsm presntation
Gsm presntation
TECOS
 
Td gsm iit
Td gsm iitTd gsm iit
Td gsm iit
TECOS
 
Complément réseaux informatiques
Complément réseaux informatiquesComplément réseaux informatiques
Complément réseaux informatiques
TECOS
 
Cours réseauxs gsm
Cours réseauxs gsmCours réseauxs gsm
Cours réseauxs gsm
TECOS
 
Cours sécurité 2_asr
Cours sécurité 2_asrCours sécurité 2_asr
Cours sécurité 2_asr
TECOS
 
chapitre 1
chapitre 1chapitre 1
chapitre 1
TECOS
 
Serveur web iit_asr_p2i
Serveur web iit_asr_p2iServeur web iit_asr_p2i
Serveur web iit_asr_p2i
TECOS
 
Examen
Examen Examen
Examen
TECOS
 

Plus de TECOS (20)

Bouhamed vuejs-meetup-tecos
Bouhamed vuejs-meetup-tecosBouhamed vuejs-meetup-tecos
Bouhamed vuejs-meetup-tecos
 
D3 js-last
D3 js-lastD3 js-last
D3 js-last
 
Mta
MtaMta
Mta
 
Summer internship
Summer internshipSummer internship
Summer internship
 
Mohamed bouhamed - ccna2
Mohamed bouhamed  - ccna2Mohamed bouhamed  - ccna2
Mohamed bouhamed - ccna2
 
Mohamed bouhamed - ccna1
Mohamed bouhamed  -  ccna1Mohamed bouhamed  -  ccna1
Mohamed bouhamed - ccna1
 
Mobile certified
Mobile certifiedMobile certified
Mobile certified
 
Analytics certified
Analytics certifiedAnalytics certified
Analytics certified
 
Ad words certified
Ad words certifiedAd words certified
Ad words certified
 
Télémétrie d’openstack
Télémétrie d’openstackTélémétrie d’openstack
Télémétrie d’openstack
 
cloudu certification
cloudu certificationcloudu certification
cloudu certification
 
Internship report
Internship reportInternship report
Internship report
 
Gsm presntation
Gsm presntationGsm presntation
Gsm presntation
 
Td gsm iit
Td gsm iitTd gsm iit
Td gsm iit
 
Complément réseaux informatiques
Complément réseaux informatiquesComplément réseaux informatiques
Complément réseaux informatiques
 
Cours réseauxs gsm
Cours réseauxs gsmCours réseauxs gsm
Cours réseauxs gsm
 
Cours sécurité 2_asr
Cours sécurité 2_asrCours sécurité 2_asr
Cours sécurité 2_asr
 
chapitre 1
chapitre 1chapitre 1
chapitre 1
 
Serveur web iit_asr_p2i
Serveur web iit_asr_p2iServeur web iit_asr_p2i
Serveur web iit_asr_p2i
 
Examen
Examen Examen
Examen
 

Dernier

Chap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdfChap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdf
TimogoTRAORE
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
Editions La Dondaine
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
Txaruka
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
NadineHG
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
NadineHG
 

Dernier (7)

Chap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdfChap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdf
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
 

Html5 2

  • 2. HTML5 : les nouvelles balises  Structure de page web :  <header>  <nav>  <section>  <article>  <aside>  <footer> <header> <nav> <section> <section> <footer> <article> <article> <aside> 2
  • 3. HTML5 : les nouvelles balises  Balises pour webapplication :  <list>  <datalist>  <detail>  <summary>  <meter>  <progress> } Barre de progression } Listes déroulantes 3
  • 4. HTML5 : les nouvelles balises  Les attributs nouveaux du champ texte <input> :  required  type=’’email’’  type=’’date’’  type=’’range’’  type=’’search’’  type=’’tel’’  type=’’number’’  type=’’color’’  placeholder 4
  • 6. Démo jQuery  Les sélecteurs simples  Les sélecteurs complexes  Les animations  La manipulation de CSS
  • 7. CSS3, ce qui est possible
  • 8. CSS3, ce qui est possible  Sélecteurs :  :ntn-child(odd/even)  :not(.class or #id or elem)  :first-child  :last-child  input[type=’’text’’]  div > div 8
  • 9. CSS3, ce qui est possible  Polices hébergées sur le serveur  plus besoin d’utiliser une police présente sur tous les ordinateurs  toutes les polices sont acceptées 9 @font-face{ font-family: 'Gotham'; src: url(Gotham-Black.otf); } h1 { font: bold 90px 'Gotham'; }
  • 10. CSS3, ce qui est possible  Apparence des éléments  border-radius : Wpx XpxYpx Zpx  transparence : rgba(x,y,z,∝)  background-size  background multiple :  background: url(image1), url(image2)  text-shadow  box-shadow  transitions 10
  • 12. Mobilité et webapp  Géolocalisation  possibilité d’utiliser le GPS de l’appareil  demande de confirmation  utilisation de l’API Google Maps JS  affichage de la position de l’utilisateur 12 <script src="http://maps.googleapis.com/maps/api/js?sensor= false"></script> <script type=’’text/javascript’’> function initialize() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( onSuccess, onError, { enableHighAccuracy: true, timeout: 20000, maximumAge: 120000 }); } } </script>
  • 14. HTML5 et multimedia  Images  utilisation de nouvelles balises en plus de l’images : 14 <figure> <img src=’’mon_image.jpg’’> <figcaption> Texte de légende de l’images </figcaption> </figure>
  • 15. HTML5 et multimedia  Audio  balise <audio> prévue à cet effet  prévoir les fichiers :  .ogg (Opera, Firefox)  .mp3 (Chrome, Safari)  ajouter les types :  type=’’audio/ogg’’  type=’’audio/mpeg’’  player html5 dans chaque navigateur web compatible  possibilité d’options : <audio controls="controls" preload="auto" autobuffer="autobuffer" loop="loop"> <source src="audio.m4a” type=’’audio/mpeg’’> <source src="audio.mp3” type=’’audio/mpeg’’> </audio> 15
  • 16. HTML5 et multimedia  Vidéo  balise <video> prévue à cet effet  prévoir les fichiers :  .ogg (Opera, Firefox)  .mp4 (Chrome, Safari)  ajouter les types :  type=’’video/ogg’’  type=’’video/mp4’’  player html5 dans chaque navigateur web compatible  possibilité d’options : <video width="980px" height="551.25px" controls="controls" autobuffer="autobuffer" loop="loop" class="shown" poster="poster.png"> <source src="video.m4v” type=’’video/mp4’’> </video> 16
  • 18. Définition  Element du DOM  Effectue des rendus DYNAMIQUES d’images  Ne produit donc RIEN seul  Nécessite d’accéder à l’élément et de le modifier à la volée  Utilisable en dernier ressort  Introduit par Apple  Standardisé parWHATWG
  • 19. Procédure  Créer le CANVAS en HTML  Définir ses dimensions en HTML  Définir son style en CSS  (Créer un raccourcis vers l’élément)  (Créer un raccourcis vers son contexte)  Dessiner ou  Placer une ressources et l’animer