Vocabulaire essentiel : HTML & CSS

1. Vocabulaire HTML

📌 Balise

Une balise est un mot clé entouré de chevrons. Elle indique au navigateur quel type d’élément afficher.

<p>Ceci est un paragraphe</p>

📌 Balise double

Une balise double possède :

• une balise ouvrante : <p>
• un contenu
• une balise fermante : </p>

📌 Balise orpheline

Une balise qui ne possède pas de balise fermante. Elle sert à afficher un élément direct, sans contenu interne.

<br>
<img src="photo.jpg" alt="Un chat">

📌 Attribut

Un attribut est une information supplémentaire ajoutée dans la balise ouvrante.

<img src="chat.png" alt="Un chat">

Ici :

• src = l’adresse de l’image
• alt = le texte alternatif

📌 Mot clé

Le mot-clé est le nom de l’élément HTML, par exemple p, h1, img, etc.

📌 Instruction HTML

Une instruction HTML complète est une ligne qui utilise une balise pour dire au navigateur quoi afficher.

<h1>Bienvenue</h1>

📘 Exemple HTML complet commenté

<h1>Mon Titre</h1>      <!-- balise double -->
<p>Bonjour à tous !</p>  <!-- paragraphe -->
<img src="image.png" alt="Description">  <!-- balise orpheline avec attributs -->

2. Vocabulaire CSS

📌 Règle CSS

Une règle CSS permet de modifier l’apparence d’un ou plusieurs éléments HTML. Elle possède :

• un sélecteur
• une ou plusieurs propriétés
• des valeurs associées

📌 Sélecteur

Il désigne l’élément que l’on veut modifier : p, h1, .classe, #id…

📌 Propriété

Ce que l’on veut changer : la couleur, la taille du texte, l’alignement…

color
font-size
text-align

📌 Valeur

La valeur précise appliquée à la propriété :

red
20px
center

📌 Rôle des caractères

• { } : délimitent le bloc de propriétés
• : : sépare la propriété de sa valeur
• ; : termine chaque ligne de propriété

📌 Indentation (mise en forme du code)

L’indentation, c’est le fait de décaler les lignes de code vers la droite à l’intérieur d’une règle. Elle ne change pas l’affichage du site, mais elle rend le code :

• plus lisible,
• plus facile à corriger,
• plus facile à comprendre (pour toi plus tard, ou pour quelqu’un d’autre).

On utilise généralement la touche Tabulation pour faire ce décalage.

Sans indentation (difficile à lire) :

p { color: blue; font-size: 18px; text-align: center; }

Avec indentation (propre et lisible) :

p {
    color: blue;
    font-size: 18px;
    text-align: center;
}

📘 Exemple CSS complet commenté

p {                      <!-- sélecteur (toutes les balises <p>) -->
    color: blue;          <!-- propriété : valeur -->
    font-size: 18px;      <!-- autre propriété : valeur -->
    text-align: center;   <!-- autre propriété : valeur -->
}