Pour tout comprendre des langages HTML et CSS

Toutes les pages Web publiées sur Internet sont écrites dans un langage secret appelé HyperText Markup Language plus connu sous son petit nom le “HTML”.

Ces lignes de programmation informatiques ne sont pas révélées au grand jour.

Seul un navigateur Web (Firefox, Chrome, Safari, Opera, Internet Explorer, Edge…) les lit pour vous, les comprend et affiche une représentation en clair, sous sa forme lisible, une jolie page Web destinée à la plupart des êtres humains qui restent dans l’ignorance crasse de son existence cachée.

Le langage HTML existe depuis des années, mais fort heureusement, au fil du temps, il a évolué considérablement.

Si vous faites partie des petits génies du siècle dernier qui ont déjà manipulé le HTML, oubliez immédiatement ce que vous croyez savoir, surtout si les balises <font> et <table> sont pour vous synonymes de typographie à couper le souffle et de mises en page précises et réglées au cordeau.

Bon ça veut dire quoi ces lettres HTML ? Autant savoir ce dont on parle, c’est un minimum.

html-css

Ce soir, vous vous coucherez un peu moins bête, ces lettres signifient “ HyperText Markup Language ”. Bon d’accord c’est en anglais, mais rien de tel pour briller en société ou pour emballer les filles.

  • HyperText qualifie un type de texte qui accepte des liens qui renvoient vers un autre texte. On clique sur un bidule (un lien) qui va ouvrir une autre page sur laquelle on va continuer sa lecture.
  • Markup signifie qu’il y a des marqueurs invisibles dans le texte que l’on lit signifiant quelque chose de bien précis pour un navigateur qui va les décoder et les interpréter avant d’afficher une page Web. En français on parle de balises pour qualifier ces marqueurs, en anglais le terme tags est employé.
  • Language signifie tout simplement langage (de programmation).

Le langage HTML combiné aux feuilles de style CSS et au JavaScript permet de réaliser de jolies pages Web interactives, mais comme dirait l’autre pour y arriver la pente est rude, mais la route est droite.

Pour réviser ses connaissances, rien de tel qu’un bon tutoriel sur le HTML suivi d’un autre consacré au CSS. Codecademy en propose tout plein d’un niveau excellent accompagnés d’exercices à réaliser en ligne.

Pour ne pas se fatiguer, on peut se reposer sur le site The Ultimate HTML Generator qui propose des exemples tout faits de morceaux de code à copier pour les réutiliser à son propre compte. C’est pratique quand on a oublié la syntaxe pour créer un formulaire, un lien, une barre de progression, etc.

ultimate-html-generator

Les utilisateurs expérimentés se tourneront vers le site HTML Reference qui comme son nom l’indique référence toutes les balises du langage HTML par ordre alphabétique. Un moteur de recherche permet aussi de trouver rapidement une balise.

html-reference

Pour chacune d’entre elles, on dispose d’explications détaillées sur son fonctionnement, des exemples pratiques d’utilisation, la description des éventuels attributs des balises…

html-reference-img

Il s’agit d’un guide extrêmement complet à toujours avoir sous le coude où sont décrits les 113 éléments du langage HTML5.

Sous le même modèle, CSS Reference est lui consacré à la description complète du langage CSS.

css-reference-io

Les subtilités de 129 propriétés CSS y sont expliquées par l’exemple.

css-reference-align

C’est deux guides sont vraiment essentiels, ce sont de bons compagnons de route, quand on a décidé de se mettre à fond dans l’étude des langages HTML et CSS.