Langages du Web : HTML et CSS
HTML : La Structure (HyperText Markup Language)
Le HTML n'est pas un langage de programmation, mais un langage de balisage. Son rôle est de structurer le contenu d'une page (titres, paragraphes, images).
Fonctionnement par balises
Le contenu est encadré par des balises ouvrantes et fermantes : <balise> contenu </balise>.
<h1>à<h6>: Titres de différents niveaux.<p>: Paragraphe de texte.<header>,<main>,<footer>: Zones sémantiques (haut de page, contenu principal, pied de page).
La notion d'attribut
Certaines balises ont besoin d'informations supplémentaires appelées attributs :
- L'image :
<img src="image.jpg" alt="description">(La balise img est auto-fermante). - Le lien :
<a href="https://google.fr">Lien vers Google</a>.
Structure de base d'une page
<html lang="fr">
<head> <!-- Informations invisibles (métadonnées) -->
<meta charset="UTF-8">
<title>Titre de l'onglet</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <!-- Contenu visible par l'utilisateur -->
...
</body>
</html>
CSS : La Mise en forme (Cascading Style Sheets)
Le CSS définit l'apparence visuelle des éléments HTML (couleurs, tailles, positions).
Syntaxe de base
On utilise un sélecteur suivi de règles entre accolades :
color: blue;
font-size: 20px;
}
Propriétés courantes
color / background-color : Couleurs.
width / margin / padding : Dimensions et espacements.
border / border-radius : Bordures et arrondis.
text-align / font-family / font-size : Typographie.
cursor : Aspect de la souris.
L'attribut class
Pour appliquer un style à certains éléments précis, on utilise une classe :
- Dans le HTML :
<p class="important"> - Dans le CSS :
.important { font-weight: bold; }
Remarque : Le lien HTML/CSS
Lorsque le client fait sa requête au serveur, il ne reçoit que le fichier html. Il lit alors la balise <link> dans le <head>. Il s'aperçoit qu'un fichier externe est nécessaire et effectue alors une nouvelle requête HTTP pour récupérer le fichier style.css afin d'interpréter le design.
À retenir
- HTML : Structure le fond (balises, attributs).
- CSS : Gère la forme (sélecteurs, propriétés).
- Les balises de base :
h1,p,a(lien),img(image). - Certaines balises nécessitent des informations supplémentaires, données sous la forme d'attributs : attr="valeur".