SlideShare une entreprise Scribd logo
1  sur  7
Télécharger pour lire hors ligne
Qu'est-ce que c'est le HTML 5 ?
Comme son nom l'indique, HTML 5 est le successeur de HTML 4.01. Le travail sur HTML 5 a
commencé fin 2003 grâce à un groupe de travail indépendant, mais ce n'est qu'en 2007 que le
W3C officialise HTML5 en intégrant en son sein ce groupe de travail.

Doctype : Le doctype est simplifié : <!DOCTYPE html>
Nous avons classé les nouvelles balises en trois catégories : Multimédia, formulaire et sémantique
1.     Balises à utilisation multimédia
Les deux éléments principaux sont : <audio> et <video>




             Illustration 1: Balise Vidéo
Voir l'exemple ici




            Illustration 2: Balise audio
Voir l'exemple ici
Pour avoir le résultat de ces deux balises avant l'apparition de HTML5, les développeur web étaient
obligés d'utiliser flash avec ces inconvenants classique : swf volumineux, certains terminaux
mobiles ne supportent pas flash, les problèmes de référencement du flash, ...
 <audio>
  <!-- Deux formats disponibles par ordre de priorité: -->
  <source src="trappeur.ogg" type="audio/ogg">
  <source src="trappeur.aac" type="audio/aac">
  <!-- Contenu alternatif si élément audio ou formats non supportés dans le navigateur: -->
  <a href="trappeur.ogg">Télécharger <cite>Avant j'étais trappeur</cite></a>
  de David TMX (format Ogg Vorbis)
</audio>




Abdelmonem NAAMANE                                                                      Page 1/7
2.      Balises à utilisation sémantique

Section
L'élément <section> permet de définir les différentes sections d'un document comme par
exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il
peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la
structure du document.

Article
<article> représente un texte, comme par exemple un article de journal, de blog ou de forum.

<article>
<p><a href="http://www.alsacreations.com/actu/lire/746-xhtml-est-mort-vive-html.html">
XHTML est mort, vive HTML !</a><br />
Sous ce titre quelque peu provocateur (et faux) se cache une réalité officielle depuis hier soir : le W3C vient
d'annoncer que ses travaux sur XHTML 2 se termineront cette année 2009.</p>
</article>

Aside
L'élément <aside> est destiné au contenu indirectement lié à l'article lui-même, il représente ce
qui l'entoure comme par exemple une barre latérale d'archives.

<aside>
     <h1>Archives</h1>
     <ul>
          <li><a href="/archives/09/05/">Mai 2009</a></li>
          <li><a href="/archives /09/06/">Juin 2009</a></li>
          <li><a href="/archives /09/07/">Juillet 2009</a></li>
     </ul>
</aside>

Header
L'élément <header> représente l'en-tête d'une section ou d'une page.

Footer
L'élément <footer> représente le pied de page d'une section ou d'une page pour mettre les
informations concernant l'auteur, les mentions légales…etc.

Nav
L'élément <nav> représente une section de liens de navigation.

<nav>
<a href="index.php">Page d'accueil</a>
<a href="contact.php">Contact</a>
</nav>




Abdelmonem NAAMANE                                                                          Page 2/7
Figure
L'élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des
vidéos avec leur légende <legend>.

<figure>
<img src="/images/chaton.jpg" alt="oh le beau chaton" />
  <figcaption>Un petit chat mignon tout plein</figcaption>
</figure>

Les nouveaux sites pourront adopter les balises telles que <header> pour                  remplacer
les<div id= "header"> que l'on trouve sur la plupart des sites construits actuellement.




Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi une
meilleure accessibilité puisqu'une structure commune permettra entre autre aux synthétiseurs
vocaux de se développer et aux personnes mal voyantes de se repérer plus facilement.
De nouvelles fonctionnalités permettront aussi d'utiliser HTML et uniquement HTML au lieu d'y
implémenter toute une série de plugins pour faire des choses finalement pas très compliquées.




Abdelmonem NAAMANE                                                                Page 3/7
3.     Balise à utiliser dans les formulaires.
Plusieurs attributs ont été ajoutées au formulaires avec HTML5. L'ajout de ces éléments facilitera
la vie des développeurs vue qu'ils étaient obligés d'utiliser le FLASH ou beaucoup de code
javascript pour ajouter un élément simple au formulaire, comme les sliders, les dates, le
nombres,...




             Illustration 3: Formulaire avec HTML5




Abdelmonem NAAMANE                                                               Page 4/7
Illustration 4: Source du formulaire

Voir la démo ici
Les nouveaux types et attributs de l'élément input :

Number : ce nouveau type permet de saisir des nombre et de faire une incrémentation ou
décrémentation grace aux boutons à droite.


<input type="number" name="points" min="0" max="10" required="required" step="3"/>




Abdelmonem NAAMANE                                                     Page 5/7
Step : le pas d'incrémentation.
Required : indique ce champs est obligatoire
min : la valeur minimale acceptée
max : la valeur maximale acceptée

Range : semblable au type number, mais l'affichage est sous forme de slider.


<input type="range" min="0" max="10" step="2" value="6">

Date : permet d'afficher un champs de saisie de date avec une nouvelle présentation graphique,
affichage de calendrier pour aider au choix.




 <input type="date">
Il existe d'autres type semblable à date : datetime (date et heure), month (année et mois), week
(le numèro de la semaine) et time (heure et minutes)

Email : Champ de saisi texte qui vérifie automatiquement que la valeur saisie est un e-mail valide.
<input type="email">

URL : Champ de saisi texte qui permet de vérifier automatiquement que la valeur saisie est une
URL valide.
<input type="url">

Search (nouveau type): champ de saisi dédié à la recherche.
<input type="search" name="user_search" placeholder="Search W3Schools" />
placeholder : texte à affiché par défaut dans la zone de saisi, il sera masqué quand le curseur sera
le champs, valable pour les champs de saisis.

Color : permet d'afficher une palette de couleur à fin de choisir graphiquement un code couleur.




Abdelmonem NAAMANE                                                                 Page 6/7
<input type="color">

Multiple (attribut pour le type File): permet l'upload de plusieurs fichier simultanément
<input type="file" name="img" multiple="multiple" />

Pattern (attribut pour le type text) : Permet de définir le modèle que devra respecter la valeur
saisi dans le champ.
<input type="text" name="country_code" pattern="[A-z]{3}" />




Ressources :
http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html
http://www.w3schools.com/html5/default.asp
http://diveintohtml5.org/forms.html




Abdelmonem NAAMANE                                                                 Page 7/7

Contenu connexe

Tendances

PHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben AlayaPHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben AlayaMahdi Ben Alaya
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vfThabet Chokri
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3G²FOSS ENIT
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTMLYaya Im
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
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'HTML5jverrecchia
 
Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Faiz Morchid
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francaisVlad Posea
 

Tendances (20)

Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
PHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben AlayaPHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben Alaya
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Formulaires
FormulairesFormulaires
Formulaires
 
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
 
Creation Du Design
Creation Du DesignCreation Du Design
Creation Du Design
 
Formation web
Formation webFormation web
Formation web
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0
 
Formation html5
Formation html5Formation html5
Formation html5
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
 

En vedette

Concierto en directo
Concierto en directoConcierto en directo
Concierto en directoAmandaruiz16
 
Ideas centrales de la investigación acción pp semana 4
Ideas centrales de la investigación acción pp semana 4Ideas centrales de la investigación acción pp semana 4
Ideas centrales de la investigación acción pp semana 4Vilma Monica Bermudez B
 
Material didáctico de matemáticas.
Material didáctico de matemáticas.Material didáctico de matemáticas.
Material didáctico de matemáticas.Ale Sandoval
 
Gestion du risque du compte du fond des changes
Gestion du risque du compte du fond des changesGestion du risque du compte du fond des changes
Gestion du risque du compte du fond des changesMichel Rochette
 
Catalogo virtual-instrumentos-andinos
Catalogo virtual-instrumentos-andinosCatalogo virtual-instrumentos-andinos
Catalogo virtual-instrumentos-andinosJKAKEY
 
Unidad didáctica
Unidad didácticaUnidad didáctica
Unidad didácticaLimaMelgar
 
Evaluación del Nivel de Educación Sexual y Salud Reproductiva en jóvenes entr...
Evaluación del Nivel de Educación Sexual y Salud Reproductiva en jóvenes entr...Evaluación del Nivel de Educación Sexual y Salud Reproductiva en jóvenes entr...
Evaluación del Nivel de Educación Sexual y Salud Reproductiva en jóvenes entr...Carlos Beltran
 
Les diners du ministère de l'Ouverture
Les diners du ministère de l'OuvertureLes diners du ministère de l'Ouverture
Les diners du ministère de l'Ouverturesnoeck
 
S4 tarea4 carof
S4 tarea4 carofS4 tarea4 carof
S4 tarea4 caroffelipesus
 
Dia del planeta tierra
Dia del planeta tierraDia del planeta tierra
Dia del planeta tierraAlexa Liñan
 
Reglamento Interno de Auditoría
Reglamento Interno de AuditoríaReglamento Interno de Auditoría
Reglamento Interno de AuditoríaKevin Arroyo
 
SEMI SISTEMA DE ECUACIONES POR EL METODO GRAFICO
SEMI SISTEMA DE ECUACIONES POR EL METODO GRAFICOSEMI SISTEMA DE ECUACIONES POR EL METODO GRAFICO
SEMI SISTEMA DE ECUACIONES POR EL METODO GRAFICOvaleduarteserrano
 

En vedette (20)

Concierto en directo
Concierto en directoConcierto en directo
Concierto en directo
 
portada 903
portada 903portada 903
portada 903
 
Ideas centrales de la investigación acción pp semana 4
Ideas centrales de la investigación acción pp semana 4Ideas centrales de la investigación acción pp semana 4
Ideas centrales de la investigación acción pp semana 4
 
El golf
El golfEl golf
El golf
 
Mis redes sociales
Mis redes socialesMis redes sociales
Mis redes sociales
 
Ava
AvaAva
Ava
 
Material didáctico de matemáticas.
Material didáctico de matemáticas.Material didáctico de matemáticas.
Material didáctico de matemáticas.
 
Gestion du risque du compte du fond des changes
Gestion du risque du compte du fond des changesGestion du risque du compte du fond des changes
Gestion du risque du compte du fond des changes
 
Catalogo virtual-instrumentos-andinos
Catalogo virtual-instrumentos-andinosCatalogo virtual-instrumentos-andinos
Catalogo virtual-instrumentos-andinos
 
Unidad didáctica
Unidad didácticaUnidad didáctica
Unidad didáctica
 
Evaluación del Nivel de Educación Sexual y Salud Reproductiva en jóvenes entr...
Evaluación del Nivel de Educación Sexual y Salud Reproductiva en jóvenes entr...Evaluación del Nivel de Educación Sexual y Salud Reproductiva en jóvenes entr...
Evaluación del Nivel de Educación Sexual y Salud Reproductiva en jóvenes entr...
 
Power
PowerPower
Power
 
Les diners du ministère de l'Ouverture
Les diners du ministère de l'OuvertureLes diners du ministère de l'Ouverture
Les diners du ministère de l'Ouverture
 
Mora-mora granada 2010
Mora-mora granada 2010Mora-mora granada 2010
Mora-mora granada 2010
 
Quoi de neuf en 2011
Quoi de neuf en 2011Quoi de neuf en 2011
Quoi de neuf en 2011
 
S4 tarea4 carof
S4 tarea4 carofS4 tarea4 carof
S4 tarea4 carof
 
Dia del planeta tierra
Dia del planeta tierraDia del planeta tierra
Dia del planeta tierra
 
Reglamento Interno de Auditoría
Reglamento Interno de AuditoríaReglamento Interno de Auditoría
Reglamento Interno de Auditoría
 
Pluduno theatre
Pluduno theatrePluduno theatre
Pluduno theatre
 
SEMI SISTEMA DE ECUACIONES POR EL METODO GRAFICO
SEMI SISTEMA DE ECUACIONES POR EL METODO GRAFICOSEMI SISTEMA DE ECUACIONES POR EL METODO GRAFICO
SEMI SISTEMA DE ECUACIONES POR EL METODO GRAFICO
 

Similaire à Cours html5

Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java scriptArrow Group
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMAbdelmonem NAAMANE
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation webMOHAMMED MOURADI
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Fnot
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web SémantiqueYounesOuladSayad1
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-élémentsGeoffrey Croftє
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Nicolas Morin
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Nicolas Morin
 

Similaire à Cours html5 (20)

Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java script
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMM
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Présentation WPF
Présentation  WPFPrésentation  WPF
Présentation WPF
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
Les dessous de html+ccs+js
Les dessous de html+ccs+jsLes dessous de html+ccs+js
Les dessous de html+ccs+js
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
HTML5
HTML5HTML5
HTML5
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
Crs javascript
Crs javascriptCrs javascript
Crs javascript
 

Dernier

SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSKennel
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Alain Marois
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 37
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSKennel
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...Faga1939
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfRiDaHAziz
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeXL Groupe
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 37
 
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .Txaruka
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSKennel
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSKennel
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETMedBechir
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSKennel
 
Cours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationCours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationpapediallo3
 
Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsRajiAbdelghani
 
Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Gilles Le Page
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre françaisTxaruka
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETMedBechir
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfRiDaHAziz
 

Dernier (20)

SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdf
 
DO PALÁCIO À ASSEMBLEIA .
DO PALÁCIO À ASSEMBLEIA                 .DO PALÁCIO À ASSEMBLEIA                 .
DO PALÁCIO À ASSEMBLEIA .
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directe
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
 
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSET
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
 
Cours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationCours de Management des Systèmes d'information
Cours de Management des Systèmes d'information
 
Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 temps
 
Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre français
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdf
 

Cours html5

  • 1. Qu'est-ce que c'est le HTML 5 ? Comme son nom l'indique, HTML 5 est le successeur de HTML 4.01. Le travail sur HTML 5 a commencé fin 2003 grâce à un groupe de travail indépendant, mais ce n'est qu'en 2007 que le W3C officialise HTML5 en intégrant en son sein ce groupe de travail. Doctype : Le doctype est simplifié : <!DOCTYPE html> Nous avons classé les nouvelles balises en trois catégories : Multimédia, formulaire et sémantique 1. Balises à utilisation multimédia Les deux éléments principaux sont : <audio> et <video> Illustration 1: Balise Vidéo Voir l'exemple ici Illustration 2: Balise audio Voir l'exemple ici Pour avoir le résultat de ces deux balises avant l'apparition de HTML5, les développeur web étaient obligés d'utiliser flash avec ces inconvenants classique : swf volumineux, certains terminaux mobiles ne supportent pas flash, les problèmes de référencement du flash, ... <audio> <!-- Deux formats disponibles par ordre de priorité: --> <source src="trappeur.ogg" type="audio/ogg"> <source src="trappeur.aac" type="audio/aac"> <!-- Contenu alternatif si élément audio ou formats non supportés dans le navigateur: --> <a href="trappeur.ogg">Télécharger <cite>Avant j'étais trappeur</cite></a> de David TMX (format Ogg Vorbis) </audio> Abdelmonem NAAMANE Page 1/7
  • 2. 2. Balises à utilisation sémantique Section L'élément <section> permet de définir les différentes sections d'un document comme par exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la structure du document. Article <article> représente un texte, comme par exemple un article de journal, de blog ou de forum. <article> <p><a href="http://www.alsacreations.com/actu/lire/746-xhtml-est-mort-vive-html.html"> XHTML est mort, vive HTML !</a><br /> Sous ce titre quelque peu provocateur (et faux) se cache une réalité officielle depuis hier soir : le W3C vient d'annoncer que ses travaux sur XHTML 2 se termineront cette année 2009.</p> </article> Aside L'élément <aside> est destiné au contenu indirectement lié à l'article lui-même, il représente ce qui l'entoure comme par exemple une barre latérale d'archives. <aside> <h1>Archives</h1> <ul> <li><a href="/archives/09/05/">Mai 2009</a></li> <li><a href="/archives /09/06/">Juin 2009</a></li> <li><a href="/archives /09/07/">Juillet 2009</a></li> </ul> </aside> Header L'élément <header> représente l'en-tête d'une section ou d'une page. Footer L'élément <footer> représente le pied de page d'une section ou d'une page pour mettre les informations concernant l'auteur, les mentions légales…etc. Nav L'élément <nav> représente une section de liens de navigation. <nav> <a href="index.php">Page d'accueil</a> <a href="contact.php">Contact</a> </nav> Abdelmonem NAAMANE Page 2/7
  • 3. Figure L'élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des vidéos avec leur légende <legend>. <figure> <img src="/images/chaton.jpg" alt="oh le beau chaton" /> <figcaption>Un petit chat mignon tout plein</figcaption> </figure> Les nouveaux sites pourront adopter les balises telles que <header> pour remplacer les<div id= "header"> que l'on trouve sur la plupart des sites construits actuellement. Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi une meilleure accessibilité puisqu'une structure commune permettra entre autre aux synthétiseurs vocaux de se développer et aux personnes mal voyantes de se repérer plus facilement. De nouvelles fonctionnalités permettront aussi d'utiliser HTML et uniquement HTML au lieu d'y implémenter toute une série de plugins pour faire des choses finalement pas très compliquées. Abdelmonem NAAMANE Page 3/7
  • 4. 3. Balise à utiliser dans les formulaires. Plusieurs attributs ont été ajoutées au formulaires avec HTML5. L'ajout de ces éléments facilitera la vie des développeurs vue qu'ils étaient obligés d'utiliser le FLASH ou beaucoup de code javascript pour ajouter un élément simple au formulaire, comme les sliders, les dates, le nombres,... Illustration 3: Formulaire avec HTML5 Abdelmonem NAAMANE Page 4/7
  • 5. Illustration 4: Source du formulaire Voir la démo ici Les nouveaux types et attributs de l'élément input : Number : ce nouveau type permet de saisir des nombre et de faire une incrémentation ou décrémentation grace aux boutons à droite. <input type="number" name="points" min="0" max="10" required="required" step="3"/> Abdelmonem NAAMANE Page 5/7
  • 6. Step : le pas d'incrémentation. Required : indique ce champs est obligatoire min : la valeur minimale acceptée max : la valeur maximale acceptée Range : semblable au type number, mais l'affichage est sous forme de slider. <input type="range" min="0" max="10" step="2" value="6"> Date : permet d'afficher un champs de saisie de date avec une nouvelle présentation graphique, affichage de calendrier pour aider au choix. <input type="date"> Il existe d'autres type semblable à date : datetime (date et heure), month (année et mois), week (le numèro de la semaine) et time (heure et minutes) Email : Champ de saisi texte qui vérifie automatiquement que la valeur saisie est un e-mail valide. <input type="email"> URL : Champ de saisi texte qui permet de vérifier automatiquement que la valeur saisie est une URL valide. <input type="url"> Search (nouveau type): champ de saisi dédié à la recherche. <input type="search" name="user_search" placeholder="Search W3Schools" /> placeholder : texte à affiché par défaut dans la zone de saisi, il sera masqué quand le curseur sera le champs, valable pour les champs de saisis. Color : permet d'afficher une palette de couleur à fin de choisir graphiquement un code couleur. Abdelmonem NAAMANE Page 6/7
  • 7. <input type="color"> Multiple (attribut pour le type File): permet l'upload de plusieurs fichier simultanément <input type="file" name="img" multiple="multiple" /> Pattern (attribut pour le type text) : Permet de définir le modèle que devra respecter la valeur saisi dans le champ. <input type="text" name="country_code" pattern="[A-z]{3}" /> Ressources : http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html http://www.w3schools.com/html5/default.asp http://diveintohtml5.org/forms.html Abdelmonem NAAMANE Page 7/7