« HTML5 » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 10 : Ligne 10 :
La sémantique des balises est amélorée par l'apparition de balise tels que header, nav, article et footer qui permettent de détailler la segmentation du contenu de notre fichier html.
La sémantique des balises est amélorée par l'apparition de balise tels que header, nav, article et footer qui permettent de détailler la segmentation du contenu de notre fichier html.


<source lang="html5strict">
<source lang="html4strict">
  <!--  définit le contenu comme une entête de page -->
  <!--  définit le contenu comme une entête de page -->
  <header>Nom du document</header>
  <header>Nom du document</header>
Ligne 28 : Ligne 28 :
Les balises médias permettent au navigateur de gérer des éléments multimédias, tels que les fichiers audio et les fichiers vidéo.
Les balises médias permettent au navigateur de gérer des éléments multimédias, tels que les fichiers audio et les fichiers vidéo.


...
<source lang="html4strict">
  <!-- crée un objet multimedia de type audio -->
  <!-- crée un objet multimedia de type audio -->
  <audio src="url/fichier.wav" controls="true" autoplay="true">
  <audio src="url/fichier.wav" controls="true" autoplay="true">
Ligne 39 : Ligne 39 :
   Votre navigateur ne supporte pas la balise video
   Votre navigateur ne supporte pas la balise video
  </video>
  </video>
...
</source>
   
   
*[http://www.w3schools.com/tags/html5_audio.asp Balise header]
*[http://www.w3schools.com/tags/html5_audio.asp Balise header]
Ligne 50 : Ligne 50 :
En fonction du typage le navigateur pour utiliser le widget approprié. Exemple pour le type color le navigateur peut afficher une palette de couleur.
En fonction du typage le navigateur pour utiliser le widget approprié. Exemple pour le type color le navigateur peut afficher une palette de couleur.


...
<source lang="htmlstrict">
  <!-- crée un objet INPUT de type date -->
  <!-- crée un objet INPUT de type date -->
  <input type='datetime' name='date'>
  <input type='datetime' name='date'>
Ligne 57 : Ligne 57 :
  <!-- crée un objet INPUT de type date -->
  <!-- crée un objet INPUT de type date -->
  <input type='color' name='date'>
  <input type='color' name='date'>
...
</source>


*[http://www.w3schools.com/tags/html5_input.asp Balise input]
*[http://www.w3schools.com/tags/html5_input.asp Balise input]

Version du 20 octobre 2009 à 20:35

<pageby nominor="false" comments="false"/>

Le HTML 5 définit de nouvelles balises qui permettent une meilleure classification des contenus (éléments) par sémantique.

Attention ces nouveautés ne sont pas prisent en compte par les navigateurs

Nouvelles Balises

La sémantique des balises est amélorée par l'apparition de balise tels que header, nav, article et footer qui permettent de détailler la segmentation du contenu de notre fichier html.

 <!--  définit le contenu comme une entête de page -->
 <header>Nom du document</header>
 <!--  définit le contenu comme élément de navigation (menu) -->
 <nav>Accueil > Articles > article 1</nav>
 <!--  définit le contenu comme un article -->
 <article>Article Le contenu d'un article</article>
 <!-- définit le contenu comme élément de pied de page -->
 <footer>Contact - WebSite 2009</footer>

Les balises médias permettent au navigateur de gérer des éléments multimédias, tels que les fichiers audio et les fichiers vidéo.

 <!-- crée un objet multimedia de type audio -->
 <audio src="url/fichier.wav" controls="true" autoplay="true">
  <!-- Message d'avertissement si le navigateur ne supporte pas cette élément -->
  Votre navigateur ne supporte pas la balise audio
 </audio>
 <!-- crée un objet multimedia de type video -->
 <video src="url/fichier.wmv" controls="true" autoplay="true">
   <!-- Message d'avertissement si le navigateur ne supporte pas cette élément -->
   Votre navigateur ne supporte pas la balise video
 </video>

Nouveaux Attributs

La grande nouveauté des formulaires est la possibilité de déterminer un typage pour chaque champs et par la même occasion de permettre au navigateur de gérer la validation du formulaire.

En fonction du typage le navigateur pour utiliser le widget approprié. Exemple pour le type color le navigateur peut afficher une palette de couleur.

 <!-- crée un objet INPUT de type date -->
 <input type='datetime' name='date'>
 <!-- crée un objet INPUT de type email -->
 <input type='email' name='date'>
 <!-- crée un objet INPUT de type date -->
 <input type='color' name='date'>

Liens

W3School HTML 5