III. Les nouvelles Balises du HTML5
Vous apprendrez ici les nouveautés associées au html5. Voici les balises propres au html5 qui seront utilisées dans la grande majorité des sites . Elles se situent toutes dans le "body", ce sont des balises paires.
indique que l'élément est une en-tête sur la page web, cela servira entre autre à
afficher le titre principal de la page.
indique un élément de navigation tel qu'un menu comme son nom l'indique.
correspond à une zone secondaire non liée au contenu principal de la page.
Un moyen de rajouter de petits détails supplémentaires sans avoir besoin de réquisitionner un bloc entier
et augmenter la clarté de l'affichage.
représente une portion de la page qui garde un sens même séparer de l'ensemble de la page,notammment comme un blog.
indique que l'élément est un pied de la page.
Elle permet d'écrire (en tout petit généralement) les données de contact, à qui appartient le site etc..
Elles ne sont pas difficiles à mettre en place maintenant que vous connaissez les principes du html ,je vous conseille donc vivement de les tester. Attention respectez l'ordre dans lequel je vous les ai présentées pour garder un affichage "correcte".
Les deux balises <asside> et <article> peuvent être multiple dans votre code contrairement aux autres.
Voyons maintenant les éléments attractifs du HTML.
1. La balise vidéo
La balise vidéo permet de créer un lecteur :
Comme pour la balise image l'attribut src indique l'endroit où se trouve la vidéo que vous désirez charger. Dans mon exemple, ma vidéo est au format .ogv, il existe trois formats compatible avec la balise vidéo en HTML5, tous compatiblent avec les différents navigateurs.
Ce sont les suivants:C'est un format non libre et payant , sauf pour certaines applications comme la diffusion gratuite de vidéo.
Il est compatible avec Opéra, Chrome, FireFox .
si vous avez installé un codec vidéo préalablement.
Votre principale soucis sera donc pour vous le choix de ton format.
Comment faire pour choisir le bon type de format pour ma vidéo ?
C'est trés simple!!! Il suffit que vous les mettiez tous et laisser le navigateur de votre visiteur faire le choix à votre place.
Tout d'abord, on défini les tailles que la vidéo devra respecter avec les attributs width et height.
L'attribut controls="controls" indique que la vidéo ne se lance pas tant que l'utilisateur n'a pas appuyé sur play.
Vous pouvez le changer en remplaçant controls par : autoplay="true" , ce qui lancera la vidéo
dès le chargement de la page.
Note : Attention cette balise est valable pour les navigateurs récent, si ce n'est pas le cas de votre navigateur un petit détour par l'onglet télechargement du site s'impose !
Et pour convertir tes vidéos je vous conseille le logiciel Miro Video Converter vous etes maintenant capable de disposer de vidéo sur votre site.
2. La balise audio
La balise audio permet de créer un véritable lecteur mp3 dont l'aspect varie selon les différents navigateurs que vous pourrez modifier avec le CSS3.
Voici la balise audio en html5:
Tout comme précédemment, l'attribut controls garde la même fonction. La balise audio supporte deux formats :
Le MP3 est un format soumis à brevet, il n'est donc pas disponible sur tout les navigateurs, par exemple FireFox n'utilise pas ce format. Il existe donc OGG, une simple conversion de votre fichier mp4 et tout fonctionne magnifiquement bien!
3. La balise canvas
La balise canvas est celle qui va différencier les sites en html actuel de ceux en HTML5.En effet, elle permet l'ajout direct de programme dans votre page web.
Elle va créer une "boite" dans laquelle sera affiché tout le code que vous aurez tapé.
La balise canvas est ainsi un concurrent direct du flash.
seul quelque exemple d'application vous serons montrer.
Pour pouvoir l'.exploiter au maximum, il vous faudra apprendre de nouveau langage tels que le C++, le java, le PHP.
1,
2,
3,
4,
5,
6,
7