Partie 1 : Pages Web - HTML et CSS

B.O. spécial n° 1 du 22 janvier 2019 - SNT Seconde

Contenus	Capacités attendues
Pages Web et interaction avec l'utilisateur	Distinguer ce qui relève du contenu d'une page et de son style de présentation. Étudier et modifier une page HTML simple.

1. Qu'est-ce que le Web ?

Le Web (World Wide Web) est un des services fonctionnant sur Internet, au même titre que le courrier électronique ou la messagerie instantanée. Il ne faut donc pas confondre Internet (le réseau physique mondial) et le Web (un service accessible via ce réseau).

Le Web permet de consulter des sites Web à l'aide d'un navigateur (Firefox, Chrome, Edge, Safari...). Ces sites sont constitués de pages Web reliées entre elles par des liens hypertextes, ce qui forme une immense toile (web en anglais).

2. Pages Web : HTML et CSS

2.1. Le langage HTML

Une page Web est un document que le navigateur peut afficher. Elle est écrite dans le langage HTML (HyperText Markup Language, langage de balisage hypertexte).

HTML utilise des balises pour structurer le contenu. Une balise s'ouvre avec <nom> et se ferme avec </nom> :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Ma première page</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Bienvenue</h1>
    <p>Ceci est un paragraphe.</p>
    <img src="photo.jpg" alt="Une photo" />
</body>
</html>

Le document HTML est divisé en deux parties principales :

Partie	Balise	Rôle
Tête	`<head>...</head>`	Informations sur la page (titre dans l'onglet, encodage, lien vers la feuille de style). Non visible directement.
Corps	`<body>...</body>`	Contenu visible de la page (textes, images, liens, tableaux...).

Les balises courantes du corps :

Balise	Rôle
`<h1>` à `<h6>`	Titres (du plus grand au plus petit)
`<p>`	Paragraphe
`<a href="...">`	Lien hypertexte
`<img src="..." alt="..." />`	Image
`<ul>`, `<ol>`, `<li>`	Listes à puces ou numérotées
`<table>`, `<tr>`, `<td>`	Tableau
`<br/>`	Retour à la ligne

2.2. Le langage CSS

Le CSS (Cascading Style Sheets, feuilles de style en cascade) est le langage qui définit la présentation visuelle d'une page Web : couleurs, polices, tailles, dispositions, marges...

Le CSS est généralement écrit dans un fichier séparé (par exemple style.css) et relié au HTML via la balise <link> dans le <head> :

<link rel="stylesheet" href="style.css" type="text/css" />

Exemple de règles CSS :

body {
    background-color: beige;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

h1 {
    color: darkblue;
    text-align: center;
}

img {
    float: left;
    margin-right: 20px;
}

2.3. Séparation fond et forme

Le principe fondamental du Web est de séparer le contenu (HTML) de sa présentation (CSS). Un même fichier CSS peut être appliqué à plusieurs pages, garantissant une apparence cohérente sur tout un site. Inversement, un même contenu HTML peut changer radicalement d'apparence simplement en changeant la feuille de style qui lui est associée.

Considérons le fichier HTML suivant :

<h1>Les planètes du système solaire</h1>
<p class="intro">Notre système solaire compte huit planètes.</p>
<ul>
    <li>Mercure</li>
    <li>Vénus</li>
    <li>Terre</li>
    <li>Mars</li>
</ul>

Style A : classique
Style B : moderne et coloré

body {
    background-color: white;
    font-family: Georgia, serif;
    color: #333;
}
h1 {
    color: navy;
    border-bottom: 2px solid navy;
}
.intro {
    font-style: italic;
    color: #666;
}
li {
    list-style-type: disc;
}

Résultat : une page sobre, avec un titre bleu marine souligné, un texte d'introduction en italique gris et une liste à puces classique sur fond blanc.

body {
    background-color: #1a1a2e;
    font-family: Arial, sans-serif;
    color: #eee;
}
h1 {
    color: #e94560;
    text-transform: uppercase;
    text-align: center;
}
.intro {
    background-color: #16213e;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
li {
    list-style-type: "🪐 ";
    margin: 5px 0;
}

Résultat : une page sombre au style moderne, avec un titre rouge centré en majuscules, un texte d'introduction dans un encadré arrondi et une liste décorée d'émojis.

Le contenu HTML est strictement identique dans les deux cas. Seule la feuille CSS change. C'est tout l'intérêt de cette séparation :

On peut modifier l'apparence d'un site sans toucher au contenu.
Un designer peut travailler sur le CSS pendant qu'un rédacteur travaille sur le HTML.
Un même fichier CSS peut être appliqué à toutes les pages d'un site pour assurer une cohérence visuelle.