L'essentiel du HTML5

Découvrir le langage et ses acteurs

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les pages web utilisent en majeure partie trois langages client : HTML, CSS et JavaScript. Ces langages se répartissent respectivement la structure, le visuel et l'interaction. Penchez-vous sur le HTML et découvrez ses principaux acteurs.
04:55

Transcription

L'ensemble des pages web, que l'on consulte sur Internet sont toutes composées de trois langages principaux, qui vont être le HTML, le CSS et le JavaScript. Donc je vous propose qu'au travers de cette formation on focalise vraiment sur la partie HTML, et qu'on regarde de près tout ce qui va nous permettre de pouvoir construire au mieux la structure et la sémantique de nos pages. Donc ici si je regarde cette page, je vois un résultat visuel avec des images, de la couleur, des titres, des menus. On le comprend parce que nos yeux nous indiquent ces informations-là et on verra qu'on doit pouvoir indiquer toutes ces informations que les pages soient visibles depuis un navigateur, qu'elles soient lues depuis un lecteur d'écran, ou qu'elles soient vu par un robot ou un moteur de recherche. Donc ici dès qu'on va appeler le code source de la page, la meilleure façon d'appeler le code source de la page c'est de faire un raccourci clavier « CTRL+U », généralement sur l'ensemble de navigateurs, ou la touche « CMD+U » sur les ordinateurs de type Macintosh. Soit de faire un « CTRL » clique ou un clique droit ici sur la souris pour avoir le code source de la page. Et là on arrive donc sur la source même de la page qui est ce fameux HTML on le voit bien ici par la balise HTML. On va venir en détail, sur l'intégralité de sa composition et de sa construction mais voyez déjà l'aspect visuel du HTML. On a d'autres types de langage comme le CSS ici, si je clique sur ce lien interactif au sein du document on voit bien que HTML va chercher de l'information dans un autre langage, qui est le CSS, qui lui va nous permettre de voir le visuel. La meilleure façon de voir ce visuel, c'est ici depuis un navigateur de type Firefox avec un outil comme Web Developers Tools. Ici je vais pouvoir demander de désactiver le style CSS et vous voyez que je n'ai plus l'information visuelle, je n'ai plus que l'information structurelle et du contenu qui est donc ce fameux HTML brute de décoffrage. On a un autre langage ici dans la source que l'on peut venir voir qui est le JavaScript. Le JavaScript va nous permettre d'apporter l'interactivité aux documents, alors on ne verra pas trop de JavaScript, même pas beaucoup JavaScript dans cette formation dédiée sur le HTML, mais c'est un langage qu'on peut facilement après amener pour pouvoir apporter le maximum d'interactivité et d'interaction, à nos contenus dans nos pages web. Là je vais réactiver ce style CSS, voilà ici, on peut le voir et quand on va construire nos pages HTML, nos pages, pourront utiliser d'autres langages, mais on verra qu'on peut utiliser par exemple du PHP, pour venir construire le HTML, donc on va pouvoir utiliser comme ça des CMS, Wordpress, Drupal, Joomla, etc. Pour ne citer qu'eux. Qui vont nous permettre de fabriquer de contenu HTML, parce que ce que les navigateurs voient et lisent, ne peut fonctionner qu'à partir de HTML. Quand vous avez des pages en PHP forcement c'est le serveur qui va transformer ces pages en HTML. Alors on va pouvoir aussi également construire toutes nos pages par HTML, ici j'ai basculé d'un Dreamweaver, voyez que c'est exactement la même page, c'est cette page de contenu. Dreamweaver va nous permettre de pourvoir lister à la fois le contenu de la page HTML, mais voyez tous les contenus qui vont être adjoints à cette page, qu'il s'agisse de CSS, de JavaScript ou d'autres types de langage comme le JSON ou XML qui pourrait venir enrichir ce contenu. Donc un intérêt de Dreamweaver c'est que si je passe en mode fractionné, je vais pouvoir à la fois travailler sur ma page d'un point de vue structurel et code et en même temps, d'un point de vue rendu directement comme si j’étais un peu dans le navigateur pour venir visualiser ces contenus. On peut bien entendu travailler avec tout autre type d'éditeur de code, comme ici en l'occurrence Sublime Text, Sublime Text, va me permettre de travailler ici dans la partie de HTML, dans la partie CSS, pour la partie visuelle, et dans la partie JavaScript. Bien entendu il faudra faire un lien entre chacune de ces pages, on verra ça également en détail dans les étapes futures de ce projet. Mais afin d'aller plus loin dans le HTML, on va aller faire un tour rapidement sur les deux crèmeries qu'il nous faut vraiment fréquenter pour être au plus proche des recommandations du HTML, j'ai cité le Whatwg.org ici qui est un organisme qui a énormément contribué à la naissance de HTML5, et donc ici si vous venez dans la partie de HTML du WHATWG, on va pouvoir retrouver toutes les informations nécessaires, qui vont nous permettre de venir comprendre les balises, comprendre les attributs, comprendre ce que l'on peut ou pas faire, on reviendra en détails sur ces éléments au fur à mesure du déroulé de la formation. Le W3C qui est le consortium qui lui va recommander l'utilisation du HTML, alors vous pouvez venir ici sur le site de W3C, puis venir dans les standards, dans le WEB DESIGN and APPLICATIONS, vous avez HTML et CSS, et là vous avez toutes les explications, comme le ferait le Whatwg ici pour recommander et pour définir l'intégralité des balises HTML. Un plateforme, qui a été mise en place également qui est le Web Platform, qui va permettre de donner un certain nombre de tutoriaux de guides, de petites aides, qui vont vous permettre de mieux appréhender les premiers pas d'un langage si vraiment vous balbutiez. Ce que je vous propose maintenant c'est de reprendre l'intégralité de ce langage étape par étape et de découvrir ensemble tout ce que nous offre et nous apporte le HTML.

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
Date de parution :29 juin 2016

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 !