06 – Les sites de références HTML/CSS

Publié le

Cette courte vidéo présente deux sites de référence pour votre apprentissage HTML et CSS. Il ne faut pas hésiter à les consulter pour avoir de nombreux exemples de syntaxe HTML et CSS.

>> Les formulaires

Bonjour et bienvenue dans cette vidéo dans laquelle nous allons voir un petit peu des sites de référence pour poursuivre l’apprentissage du HTML. Alors cette vidéo va être assez courte, c’est simplement pour vous présenter un peu de la documentation technique, puisque je vous encourage à venir consulter dès que vous avez un doute sur une balise ou un élément, que ce soit aussi HTML ou pour le CSS qu’on verra plus tard, puisque généralement ces documentations vont être des documentations HTML, CSS, Javascript, PHP, etc. Il y a différents types de langages.

Alors je vais vous présenter d’abord le MDM, le Mozilla Developer Network, à l’adresse developer.mozilla.org.fr, puisque ce site est traduit en français. Et on va aller à ce niveau-là, dans le menu au niveau de référence, HTML, et on va voir ici à gauche, dans la rubrique référence, les éléments HTML. Donc on va pouvoir cliquer dessus et on voit qu’on a tout un tas de balises HTML, notamment avec aussi des petites balises qui comportent une petite poubelle ici, puisque ce sont des balises qui sont devenues obsolètes et qu’il ne faut plus utiliser.

Alors si on prend par exemple le cas de Blink, Blink à l’époque, dans un HTML dans les versions précédentes de la version 5, permettait de faire un clignotement de texte comme ceci, mais maintenant on nous met bien des warnings en rouge qu’il ne faut plus utiliser cette balise. Donc dans tous les cas, cette formation HTML que je vous propose permet de voir l’essentiel des balises HTML, mais bien évidemment on ne va pas toutes les détailler en détail, pour ça je vous renvoie à ce type de site pour approfondir votre apprentissage et puis aussi pour voir notamment des exemples de syntaxe si vous avez des doutes parfois sur certaines balises.

Donc on a vu par exemple les balises de titres, là, H1, on nous précise bien qu’on a des titres qui vont de niveau 1 à 6, et à chaque fois on a toujours des petits exemples, donc vous pourrez toujours voir le détail de ces balises et puis voir les différentes propriétés s’il y en a, les différents attributs.

Donc je vous encourage vivement à aller voir ce genre de site, et puis je vais vous présenter aussi le site w3school, donc à l’adresse www.w3school.com, qui permettra aussi de voir, il y a quelques petits tutoriels, etc, donc cette fois ce site est en anglais, donc je vous renvoie ici aussi aux HTML références, et là également on a tout un tas de balises qu’on va pouvoir consulter, donc là encore on a des choses, des balises en rouge qui nous indiquent bien que ce n’est plus supporté par le HTML5 et qu’on fait plutôt généralement du CSS à la place, donc voilà tout un tas de balises, et généralement on a des exemples aussi, donc si on reprend une balise, alors je vais revenir par exemple sur une balise table qu’on a vue précédemment, donc c’est trié par l’alphabétique, voilà, donc on a une balise table, on nous montre bien qu’on a une balise table avec des balises tr, th, et puis td, comme on a vu dans notre cours précédent, et on a surtout un certain nombre d’exemples, et aussi on a des compatibilités avec les navigateurs, donc c’est important aussi de regarder de ce côté-là, puisque votre code HTML, il faut veiller à ce qu’il soit bien compatible avec l’ensemble des navigateurs actuels, et puis surtout, quand on a des petits exemples, on peut cliquer ici sur « Try It Yourself », qui va nous ouvrir notre code HTML avec un rendu ici, et on peut très bien saisir du texte ici, pour modifier quelques valeurs, donc là par exemple, au lieu de mettre du dollar, je vais mettre en euro, on peut vraiment en temps réel modifier les informations, pardon, ici, pour l’euro, et on fait un petit run, et on a bien l’affichage qui vient s’actualiser à ce niveau-là. Donc ça c’est intéressant, vous pouvez faire des tests, vous pouvez rajouter des lignes, des colonnes, et puis tester un petit peu votre code, et voir le rendu. Donc à partir de nombreux exemples, vous pouvez même les recopier d’ailleurs, pour les remettre après dans votre projet, il n’y a pas de problème.

Donc voilà, c’était une petite parenthèse, une petite vidéo assez courte, pour vous montrer un petit peu les sites de base, les sites de référence pour continuer votre apprentissage, et puis surtout aller voir la documentation quand vous avez un doute sur une syntaxe, et puis comme ça vous avez de nombreux exemples. Voilà, c’est tout pour cette vidéo, je vous retrouve bientôt pour une prochaine vidéo.

Partagez !

Laissez le premier commentaire