HTML & CSS - Le Guide du Débutant
Chapitre 2 - Comprendre les bases du langage HTML

Présentation du langage HTML

Qu'est-ce que le HTML ?

HTML signifie HyperText Markup Language que nous pouvons traduire en Langage de Balise Hypertexte.
Le langage HTML est donc un langage de balise. Son rôle est de structurer une page web.
Le langage HTML est lu et interprété par un navigateur comme Edge, Chrome, Firefox, Safari, Opera...
Le langage HTML n'est pas un langage de programmation !

Qu'est-ce que le CSS ?

CSS signifie Cascading Style Sheets que nous pouvons traduire en Feuilles de Style en Cascade.
Son rôle est de mettre en forme le HTML afin de le rendre visuellement plus joli dans le navigateur.
Le langage CSS est lu et interprété par un navigateur comme Edge, Chrome, Firefox, Safari, Opera...
Tout comme le langauge HTML, le langage CSS n'est pas un langage de programmation !

HTML et CSS

Pour conclure sur cette présentation du langage HTML mais également du langage CSS, nous dirons que ce sont des langages complémentaires.
L'un sert à écrire et structurer des mots, des phrases, des médias (images, vidéos, sons...) tandis que l'autre sert à les mettre en forme.
Cette formation fera référence aux dernières versions de ces langages, à savoir le HTML5 et le CSS3.

Ecrire et interpréter du HTML

Depuis un appareil (un ordinateur, une tablette ou un smartphone), nous allons appeler internet via un navigateur web.
Le navigateur web va alors envoyer une requête à un serveur web qui va lui répondre en lui envoyant des fichiers HTML et CSS.
Le navigateur web va alors interpréter ces fichiers HTML et CSS afin de les afficher correctement à l'écran.

Pour apprendre à écrire du HTML, nous n'avons pas besoin de la partie serveur.
Nous allons simplement écrire du code HTML dans un IDE (éditeur de code) dans un simple fichier texte que nous allons enregistrer avec l'extension .html.
Nous pourrons ensuite ouvrir ce fichier HTML avec un navigateur web afin de voir le rendu visuel de notre code HTML.

Composition d'une balise HTML

Comment rédiger une balise ?

Une balise HTML est composée de plusieurs éléments :

• Le chevron ouvrant (symbole plus petit que) : <
• Un élément (nom de la balise) : element
• Le chevron fermant (symbole plus grand que) : >

<element>

Par exemple, voici une balise HTML appelée p (pour paragraphe) :
<p>

<p>
  Ceci est un paragraphe.
</p>

Les familles de balises

Il existe 2 familles de balises HTML :

• Les balises paires (ouvrantes et fermantes) :
  Elles encadrent un contenu. Par exemple, la balise p (paragraphe) s'écrit avec une balise ouvrante <p> et une balise fermante </p>. Le contenu se place entre les deux balises.
• Les balises seules (auto-fermantes) :
  Elles n'ont pas de contenu. Par exemple, la balise img (image) s'écrit avec une seule balise auto-fermante <img />.
  Il existe 2 manières d'écrire une balise auto-fermante :
  • <element>
  • <element /> (avec un espace entre le nom de la balise et le chevron fermant)

Les attributs des balises

Certaines balises HTML peuvent posséder des attributs. Ils permettent de donner des informations supplémentaires à une balise et se placent dans la balise ouvrante, après le nom de la balise. Voici la syntaxe générale d'une balise avec un attribut :

<element attribut="valeur">

Par exemple, la balise a (pour définir un lien) possède un attribut obligatoire appelé href qui permet de définir l'URL de destination du lien.
Voici un exemple de balise a avec son attribut href :

<a href="https://www.google.com">Cliquez ici pour accéder à Google</a>

<element attribut="valeur" attribut_2="valeur_2">

<img src="image.jpg" alt="Description de l'image" />

Imbrication des balises HTML

Les balises HTML peuvent être imbriquées les unes dans les autres afin de structurer le contenu d'une page web.
Il est important de respecter l'ordre d'ouverture et de fermeture des balises pour que le code soit valide. Les balises ne peuvent pas se chevaucher.
Il faut également respecter l'indentation du code pour une meilleure lisibilité.
Voici un exemple d'imbrication correcte de balises HTML :

<div>
  <h1>Titre principal</h1>
  <p>
    Ceci est un paragraphe avec <a href="https://www.example.com">un lien</a>.
  </p>
</div>

Dans cet exemple, la balise div (une boîte) contient une balise h1 (titre principal) et une balise p (paragraphe) qui elle-même contient une balise a (lien).