Chapitre 1 : Pages Web - HTML et CSS¶

Programme officiel (B.O.)¶

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).

Repère historique

Le Web a été inventé en 1989 par Tim Berners-Lee, chercheur au CERN (Organisation européenne pour la recherche nucléaire) à Genève. Son objectif était de faciliter le partage de documents scientifiques entre chercheurs du monde entier. Le tout premier site Web est toujours consultable aujourd'hui.

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

Balises auto-fermantes

Certaines balises n'ont pas de contenu et se ferment toutes seules : <img ... />, <br/>, <meta ... />, <link ... />.

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.

Un même contenu, deux apparences

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 : classiqueStyle 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.