L'essentiel du HTML5

Découvrir la page et la structure

Testez gratuitement nos 1247 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Tout document HTML va se construire sur une base HTML. Quelques règles de base suffisent. Bien que le HTML5 soit largement employé, il reste quelques sites s'appuyant encore sur d'anciennes versions.
07:04

Transcription

Tout type de document à base html se structure et se compose de la même manière. Ce qui va changer, c'est la rigueur et puis l'obligation de définition que l'on va avoir. Je vais prendre volontairement un vieux document de type html 4 et on voit légèrement cette évolution. Pourquoi ? Tout simplement parce que quand vous allez travailler aujourd'hui, vous n'allez pas vous poser la question, vous allez faire du html 5. Mais si vous devez travailler sur un site déjà existant, vous n'allez pas forcément recommencer à zéro, vous allez peut-être l'améliorer, le transformer et vous allez travailler avec du html 4, voir du xhtml 1. Donc, vous allez travailler avec ça ? De la même manière quelque soit la version. ce qui va changer, c'est la rigueur de la syntaxe. Alors regardons sur un document html, sa composition. Sa composition va être d'entrée de jeu de définir un doctype. C'est à dire de définir avec quel vocabulaire on va travailler. Par le passé, il fallait définir ce doctype de manière précise. Pourquoi ? Parce que c'était la manière de fonctionner avec ces langages à balises. Cétait de dire je vais te parler en html. Et voilà où je vais puiser mon dictionnaire de référence. Et là, le dictionnaire de référence, on allait le choper chez le w3C directement en disant quel type de dictionnaire on utilisait. Donc, si on va sur le w3c ici, maintenant, je vais pointer vers le w3c ici. Et je vois que j'ai les divers types de déclarations que je vais pouvoir utiliser. Donc si je travaille en html, par exemple, j'avais le mode strict, transitionnel ou frameset qui correspondaient à différents degrés de rigueur, de séparation entre la partie visuelle des contenus et le contenu. Il ne faut pas oublier qu'à l'époque, html définissait des attributs de couleurs, des balises de font, etc... Qui n'avaient plus cours dès qu'on arrivait à une utilisation stricte avec une pure séparation du visuel par rapport au structuré. Donc, le DTD va servir à définir cet élément là. On reviendra par la suite sur les évolutions de ces éléments là. La deuxième balise importante, c'est la seule et unique balise externe qui est la balise html, qui englobe l'intégralité du document. Mais vous avez vu, pas le doctype. Cette balise est une balise ouvrante qui va se passer sur la partie première et puis la seconde, la partie fermante, qui est exactement pareil que l'autre sauf qu'elle a un / devant le mot qui dit voilà, là ça se termine. Ensuite, on a une partie d'en-tête et une partie de body. L'en-tête va contenir toutes les informations propres au document. Le body, toutes les informations propres au contenu. Dans la balise head, deux balises sont vraiment intéressantes et importantes à placer. La première, en html 4 toujours, qui était la meta content-type, qui permettait de définir la nature du document. C'est du texte mais attention, il est structuré en html, d'où le texte /html. Et enfin, l'encodage des caractères, qui permet de définir comment on a encodé les caractères pour gérer justement les caractères accentués ou certaines glyphes spéciales qu'on allait pouvoir utiliser. Donc, généralement, ce qui était associé au html 4, c'était le 8859 ou le 8859-15, qui permettait de gérer l'euro de manière différente. Deuxième système de balises nécessaire, à mon sens, dans l'en-tête, et obligatoire, c'est la balise title, qui permet de définir le titre du document. C'est cette partie emmergée de l'iceberg qu'on verra ici dans la partie heute des onglets, généralement, qui va donner le titre de la page. Attention, ce n'est pas un titre qui apparaîtra à l'intérieur du navigateur dans la partie contenu. On a vu un autre langage ici, qui était souvent employé à une période transitoire, qui était le xhtml. Alors, c'est exactement la même manière. C'est à dire en doctype très pointu, avec en plus la définition ici, dans la balise html du namespace. C'est à dire de l'espace de nom maj xml. On devait le pointer. Ainsi que la DTD qu'on allait utiliser et là, pareil, on avait le même jeu de DTD pour du xhtml, c'est à dire stric, transitional, frameset, qui permattait cette définition. Attention, dans le whtml 1.0 parce que dès qu'on est passé en 1.1, on était dans du pur strict, il n'y avait pas le choix. C'était même livré avec des gros problèmes si vraiment le type de MIM était en application xml puisque beaucoup de sites utilisaient ça sans trop savoir ce qu'ils faisaient et ça mettait plus de problèmatiques que ça en solutionnait. Donc, ici, le xhtml est arrivé quand même avec une apparition d'encodage utf-8. On n'était plus en 8859. Faites bien attention si vous devez migrer un vieux site vers un nouveau site et que vous avez un peu des pages hybrides dedans. La plus grosse problèmatique que vous risquez de rencontrer, c'est la cohésion des encodages, du mixage de chacunes de ces pages. En fin de compte, quand on est arrivé en html 5, le doctype s'est complètement simplifié en disant !html, point barre. On te parle en html. Il est certain que si on te parle en html et qu'on a rien défini d'autre, tu sais dans quel html on va te parler. Et c'est celui qui est en train d'évoluer justement, tu sais. Il y a de nouvelles balises qui vont apparaître, des nouveaux attributs, des nouvelles petites versions qui vont évoluer en fonction des api qu'on va utiliser. C'est celui-là que tu dois suivre. Généralement, si le navigateur comprend ça, c'est qu'il comprend la dernière mouture du html 5. Il y a deux attributs que je vous recommande fortement d'utiliser. Le premier, c'est la langue dans laquelle le contenu va être écrit. Pensez à le spécifier. Il est vrai que souvent, on se dit que c'est du français et puis voilà. Faites bien attention, vous avez des mots clès, vous avez des abréviations qui vont être référencées et c'est intéressant pour les moteurs de recherche de définir que le contenu que vous faites, c'est vraiment du français. Vous pouvez rentrer dans un système iso plus précis. Et si vous venez sur la liste des codes 639-1, ici, vous avez l'intégralité des pays qui sont définis et certains, vous pouvez les décrire avec 4 lettres. Donc deux lettres-deux lettres. Par exemple, si je prends le français belge, le français canadien ou le français métropolitain, on n'aura pas la même intonation dans les mots pour les moteurs de recherche, pour la spécifité de certaines particularités, on va dire. Et le deuxième attribut que je vous conseille fortement de venir prendre en considération, c'est, bien qu'il soit pris de manière implicite à chaque fois, la direction dans laquelle on écrit. Ici, vous allez pour dire qu'on écrit de gauche à droite. Left to right. Vous auriez pu marquer la valeur RtL et vous verrez la différence si vous vous amusez dans un navigateur à écrire RtL, vous verrez que vous partirez de droite et non pas de gauche pour ferrer vos documents. Une denière particularité va être les documents php à nature html. Alors je précise bien qu'il s'agit de documents php à nature html. C'est pas du full php applicatif serveur, qui va écrire que des routines php. Ici, on est dans du document html, et dans lequel on va venir truffer des informations php pour afficher les contenus. Donc on va utiliser exactement la même manière de structurer l'information. L'encodage de la balise charset uniquement. Et plus besoin de définir que c'est du texte, html ou xhtml, peu importe. On écrit en html, on le sait par rapport au doctype, ici. Simplement, l'encodage, pensez à ça parce que vous verrez qu'avec php, ça peut causer pas mal de soucis parfois. Et vous allez avoir des instructions php qui peuvent venir écrire en dur des instructions html sans soucis. Donc si vous enregistrez ça et que vous le testez, faites bien attention, assurez-vous de le tester depuis un navigateur parce que sinon, ça ne serait pas interprété. Vous voyez, ici, je suis sur un localhost. Si je le faisais en fill:, le fichier ne va pas se faire puisqu'il n'y aura pas de serveur d'application qui écrira le fichier pour moi. Mais quoi qu'il en soit, si je regarde le code source, ça reste bien du html. Il n'y a plus d'instructions php, On est bien dans du document full html. Un doctype, balise ouvrante/fermante et englobante. Le head et le body.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :29 juin 2016
Durée :5h13 (63 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !