Puisque HTML est le langage qui anime le Web, pour vraiment exploiter la puissance d’Internet, vous devez comprendre HTML5. Cette dernière version HTML présente des améliorations significatives qui modifient l’affichage des pages et la façon dont l’interactivité est fournie. Cela réduit également le besoin de plug-ins de navigateur. Lorsque vous maîtriserez HTML5, vous pourrez créer des sites Web dynamiques et puissants qui fonctionnent aussi bien sur une unité de bureau que sur un smartphone ou une tablette.
Table des matières
Le début du HTML5
Il ne fait aucun doute que l’abondance d’appareils, ainsi que les attentes des utilisateurs et des propriétaires de sites pour des sites hautement interactifs et attrayants, ont conduit au besoin de HTML5. Le World Wide Web Consortium (W3C) et le Web Hypertext Application Technology Working Group (WHATWG) ont uni leurs forces en 2006 pour le créer. Le projet a commencé avec des paramètres comprenant:
- Réduire le besoin et la dépendance vis-à-vis des plugins de navigateur comme Flash pour diffuser du contenu
- En utilisant moins de scripts, remplacez plutôt les scripts par du balisage
- Avoir des fonctionnalités basées sur HTML, CSS, DOM et JavaScript
- S’assurer que le langage de balisage est indépendant de l’appareil
Ce que propose HTML5
Pas de plugins
L’un des composants clés de HTML5 est le concept selon lequel les navigateurs ne devraient pas avoir à s’appuyer sur un plugin pour afficher le contenu. Des modifications du langage de balisage étaient nécessaires pour s’adapter à des situations qui, dans le passé, ne pouvaient être résolues qu’en utilisant un plugin. Pour cette raison, HTML5 inclut de nouvelles balises avec leurs attributs et propriétés conçus pour tout gérer, de l’animation aux films sur le Web.
Indépendant de l’appareil
Un autre élément important du système est qu’il est multiplateforme, ce qui signifie que HTML5 fonctionne sur une variété d’appareils, y compris les netbooks, les téléviseurs intelligents, les ordinateurs portables et même les smartphones. En raison de cette amélioration importante, les concepteurs peuvent désormais créer plus facilement des sites avec un plus large éventail de fonctionnalités. La nouvelle norme a emporté une douzaine de balises obsolètes.
Bien que tous les principaux navigateurs prennent en charge HTML5 en théorie, il s’agit en pratique d’un travail en cours. Chacun des cinq principaux navigateurs (Internet Explorer, Firefox, Chrome, Safari et Opera) implémente davantage de fonctionnalités HTML5 à chaque version qu’ils publient.
Plus de contrôle de page
Les modifications créées dans HTML5 s’articulent autour de plusieurs thèmes de base, notamment:
- Plus d’options de contenu structurel
- Nouvelles balises pour accueillir les différentes options multimédias
- Des balises interactives comme le canevas qui intègrent la puissance de JavaScript
- Nouveaux éléments pour les formulaires qui améliorent la conception et la convivialité
Cinq trucs et astuces
Bien qu’il soit impossible d’expliquer tout ce que propose HTML5 dans un seul article, il y a des changements importants que vous voudrez apprendre, y compris les cinq énumérés ci-dessous. Une méthode efficace pour apprendre toutes les nouvelles normes consiste à les diviser en segments gérables et à maîtriser les concepts de chaque unité avant de passer à la suivante.
1. Centrage d’image
Avec la suppression de la balise
- IMG {marge: auto; affichage: bloc;}
- Créez un
et stylisez-le avec text-align: center: div.center-image {text-align: center}
2. Audio
La balise audio spécifie les fichiers audio tels que MP3, Wav et Ogg. La prise en charge de ces formats varie selon le navigateur, mais si vous utilisez un Ogg et un fichier MP3, les cinq principaux navigateurs seront couverts. L’attribut src est obligatoire, les cinq autres ne le sont pas. Ceux-ci incluent: la lecture automatique, les contrôles, la boucle, la mise en sourdine et la précharge. Incluez toujours du texte entre la balise on / off car cela s’affichera dans les navigateurs qui ne prennent pas en charge la balise audio.
src = « https://web-design.lovetoknow.com/web-coding/horse.ogg » type = « audio / ogg »>
src = « https://web-design.lovetoknow.com/web-coding/horse.mp3 » type = « audio / mpeg »>
Votre navigateur ne prend pas en charge la balise audio.
3. Vidéo
La balise vidéo désigne du contenu comme des clips de films ou des vidéos en streaming. Actuellement, trois formats sont pris en charge par la balise: MP4, WebM et Ogg. Tous les principaux navigateurs prennent en charge un ou plusieurs des formats, Chrome prenant en charge les trois. Tout comme avec la balise audio, tout texte placé entre la balise on / off s’affichera dans un navigateur qui ne prend pas en charge la balise. En plus des attributs facultatifs de la balise audio, la balise vidéo a également un attribut de largeur et de hauteur pour contrôler la taille du lecteur vidéo et un attribut d’affiche qui peut être utilisé pour afficher une image pendant le téléchargement de la vidéo.
src = « https://web-design.lovetoknow.com/web-coding/movie.mp4 » type = « video / mp4″>
src = « https://web-design.lovetoknow.com/web-coding/movie.ogg » type = « video / ogg »>
Votre navigateur ne prend pas en charge la balise vidéo.
4. Toile
La fonction de canevas permet à l’utilisateur de créer un changement en temps réel d’une image ou d’un graphique dans son navigateur. Par exemple, l’utilisateur peut cliquer sur un point de données et le script traitera les actions de l’utilisateur et affichera le graphique créé par ces actions.
5. Géolocalisation
Cette norme qui utilise l’API de géolocalisation HTML5 pour trouver la localisation géographique des utilisateurs est un outil puissant notamment avec les smartphones et les sites mobiles. Le code à l’intérieur du document HTML utilise une méthode de programmation pour accéder à l’API et entoure la fonction avec des balises de script. En raison de problèmes potentiels de confidentialité, les utilisateurs doivent autoriser l’accès et la révélation de leur emplacement.
Maîtriser les changements
Si vous souhaitez explorer pleinement les modifications et commencer à les utiliser, les didacticiels proposés par W3Schools.com et Udemy constituent un bon point de départ. L’éditeur Try-It de W3schools vous permet d’expérimenter le codage pour vous aider à comprendre le nouveau standard. Le cours Udemy HTML5 vous donne accès à 37 conférences (allant de 5 à 30 minutes chacune) et à des quiz pour améliorer votre niveau de compétence.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
