C’est quoi HTML/CSS ?

C

HTML/CSS est le premier pas indispensable de tout développeur web.

Il y a de fortes chances que vous ayez déjà entendu ces termes plusieurs fois. Peut-être même, qu’à l’occasion, vous vous en êtes déjà approché ou avez déjà eu un cours rapide sur le sujet.

Mais si vous n’êtes pas capable d’expliquer simplement et avec précision le rôle de HTML/CSS dans le web, cet article est fait pour vous !

C'est quoi HTML CSS ? Dialogue : "Bien sur que je sais ce que c'est ! ...C'est un truc pour le web ! ... Qui permet de faire des machins ... Je crois"

C’est quoi HTML ?

HTML signifie “Hypertext Markup Language”.
C’est un langage de description que le navigateur va lire et interpréter. Il enverra ensuite un résultat sous forme visuel à l’écran. En gros, une page web.

Mais nous ne pouvons pas écrire une page web comme on écrit dans un bloc-note. Sauf si vous désirez un résultat simple, hideux, et illisible. (Mais après tout, chacun ses goûts !)

C’est pour cela qu’en plus des mots de la page qui apparaîtront à l’écran, nous utilisons un système de balises, pour communiquer au navigateur avec plus de précisions.

Attends, c’est quoi une balise?

Très bonne question !
Le mieux, est de donner un exemple :

HTML

Évidemment, le “<p>” et le “</p>” ne seront pas visible à l’écran par l’utilisateur.

<p> est en fait une balise, qui informe le navigateur que le texte contenu à l’intérieur doit être traité comme un simple paragraphe.

<p> ouvre le début du paragraphe, et </p> le ferme.

Mais ça sert à quoi d’informer le navigateur que le texte est un paragraphe ?

Dans un premier temps, cela va permettre au navigateur de pouvoir y appliquer des caractéristiques propres aux paragraphes. Il va lui appliquer telle taille, telle police, et telles marges.

Ça aurait été un titre, un lien hypertexte, ou encore un bouton, les propriétés et l’apparence de base n’auraient pas été les mêmes.

En utilisant des balises, on va aussi être capable de demander plein de choses au navigateur. Par exemple, d’afficher une image, à l’aide de la balise <img> :

HTML

Ici, la balise ne se ferme pas, et demande au navigateur d’aller charger l’image qui a pour titre “mon-image.jpg”.

L’image, s’affichera alors à l’écran.

Je suis sûr que vous avez plein de questions sur comment le HTML fonctionne plus en détail, mais vous avez déjà compris la base pour le moment :

HTML est un langage qui nous permet de donner énormément d’instructions au navigateur. On écrit notre contenu, et on utilise des balises : soit pour donner des informations sur le type de contenu, soit pour demander au navigateur d’effectuer telle ou telle action.
Et on obtient une splendide page web !

Enfin splendide…pas tout a fait. Même si les navigateurs comprendront la syntaxe de votre page et réagiront en fonction de vos instructions, en rendant les titres plus gros que les paragraphes par exemple, bah on est très vite limité.

Une page uniquement en HTML n’a que très peu de variations de style, et surtout les éléments ne se placent pas forcement comme vous voulez !

C’est ici qu’intervient CSS

C’est quoi CSS ?

CSS signifie “Cascading Style Sheets”, ou littéralement “Feuille de styles en cascade”.
C’est à l’aide de ce langage que nous allons pouvoir contrôler en détails l’apparence de notre page web.

Imaginons que je veuille changer la couleur du texte de tous mes paragraphes. En rouge par exemple :

CSS

Ici, vous avez compris intuitivement que l’attribut “color” permet de définir la couleur, et que la valeur “red” permet de la choisir rouge.

Cette ligne de code CSS simple, qui donne l’ordre que l’élément sélectionné apparaisse en rouge, est comprise entre accolades.
Devant ces accolades, le “p” permet de spécifier que ce sont les paragraphes de la page HTML qui doivent apparaître en rouge.

Et évidemment, il existe des lignes CSS pour tout et n’importe quoi.
J’aime les diviser en deux catégories :

  • Les attributs d’apparence, qui permettent de changer le style visuel du texte ou d’un élément.
  • Les attributs de placement, qui vont nous permettrent de placer l’élément exactement de la manière voulue.

Conclusion

Vous avez maintenant un aperçu de ce qu’est précisément HTML/CSS.

On utilise HTML pour faire toute la structure de la page et donner plein d’informations et d’instructions au navigateur sur le contenu de notre page web.
Ensuite, CSS vient par dessus et nous permet d’en choisir minutieusement le rendu visuel de la page.

C'est quoi HTML CSS ?
Dialogue : "J'ai tout compris maintenant !"
"CSS c'est un truc pour le style"
"HTML c'est un machin pour le contenu."
"Facile !"

Votre avis sur mon article m’intéresse spécialement…pourquoi ne pas prendre une minute pour me le partager ?