Partie 1 : HTML et CSS

Programme officiel (B.O.)

B.O. spécial n° 1 du 22 janvier 2019 - NSI Première

Contenus	Capacités attendues	Commentaires
Modalités de l'interaction entre l'homme et la machine. Événements.	Identifier les différents composants graphiques permettant d'interagir avec une application Web.	Il s'agit de connaître les principaux éléments d'une interface homme-machine : boutons, menus, champs de saisie, etc.
Interface homme-machine (IHM).	Identifier les événements que l'utilisateur peut produire sur une interface.

---

1. Rappels sur le Web

1.1 Pages Web statiques

Une page Web est un document affiché par un navigateur. Elle est constituée de trois langages complémentaires :

Langage	Rôle	Analogie
HTML	Structure et contenu	Le squelette
CSS	Mise en forme et apparence	Les vêtements
JavaScript	Comportement et interactivité	Les muscles

Le navigateur (Firefox, Chrome, Edge...) est le client : il envoie une requête au serveur qui lui renvoie les fichiers HTML, CSS et JavaScript composant la page.

1.2 Le modèle client-serveur

┌──────────┐   requête HTTP    ┌──────────┐
│  Client  │ ───────────────► │ Serveur  │
│(navigat.)│ ◄─────────────── │  (Web)   │
└──────────┘   réponse HTTP    └──────────┘
               (HTML/CSS/JS)

Le client demande une ressource (page, image, script) et le serveur la lui fournit. Cette communication repose sur le protocole HTTP (ou HTTPS pour la version sécurisée).

---

2. Le langage HTML

2.1 Qu'est-ce que HTML ?

HTML (HyperText Markup Language) est un langage de balisage qui permet de structurer le contenu d'une page Web. Il ne s'agit pas d'un langage de programmation : HTML décrit la structure du document (titres, paragraphes, listes, liens...) à l'aide de balises.

La version actuelle est HTML5.

2.2 Structure minimale d'une page HTML

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

Élément	Rôle
<!DOCTYPE html>	Indique au navigateur qu'il s'agit de HTML5
<html lang="fr">	Élément racine, langue française
<head>	En-tête (métadonnées, titre, liens CSS)
<meta charset="utf-8">	Encodage des caractères
<title>	Titre affiché dans l'onglet du navigateur
<body>	Corps de la page (contenu visible)

2.3 Les balises essentielles

Titres et paragraphes

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<p>Un paragraphe de texte.</p>

Il existe 6 niveaux de titres (<h1> à <h6>). On ne saute pas de niveau : après <h1> vient <h2>, pas <h4>.

Mise en forme du texte

<strong>Texte important (gras)</strong>
<em>Texte accentué (italique)</em>
<br>  <!-- retour à la ligne -->

Listes

<!-- Liste non ordonnée (à puces) -->
<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
</ul>

<!-- Liste ordonnée (numérotée) -->
<ol>
    <li>Étape 1</li>
    <li>Étape 2</li>
</ol>

Liens hypertextes

<a href="https://www.example.com">Texte du lien</a>
<a href="page2.html">Lien vers une page locale</a>

L'attribut href (Hypertext Reference) contient l'adresse de la cible.

Images

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

L'attribut alt est obligatoire : il décrit l'image pour les lecteurs d'écran et s'affiche si l'image ne charge pas.

Tableaux

<table>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>17</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>16</td>
    </tr>
</table>

Balise	Signification
<table>	Début du tableau
<tr>	Ligne (table row)
<th>	Cellule d'en-tête (table header)
<td>	Cellule de données (table data)

2.4 Les attributs

Les attributs apportent des informations complémentaires à une balise. Ils se placent dans la balise ouvrante :

<balise attribut="valeur">contenu</balise>

Attributs courants :

Attribut	Rôle	Exemple
id	Identifiant unique	<p id="intro">
class	Classe (pour le CSS)	<p class="important">
style	Style en ligne	<p style="color: red;">
href	Adresse d'un lien	<a href="...">
src	Source d'une image	<img src="...">

Attention

L'attribut id doit être unique dans toute la page. Pour appliquer le même style à plusieurs éléments, on utilise class.

2.5 Les divisions et sections

Pour structurer la page en blocs, on utilise des conteneurs :

<div>Bloc générique</div>
<span>Portion de texte en ligne</span>

<!-- Balises sémantiques HTML5 -->
<header>En-tête de page</header>
<nav>Barre de navigation</nav>
<main>Contenu principal</main>
<section>Section thématique</section>
<article>Article autonome</article>
<footer>Pied de page</footer>

Les balises sémantiques (<header>, <nav>, <main>, <footer>...) sont préférables à <div> car elles donnent du sens au contenu, ce qui améliore l'accessibilité et le référencement.

---

3. Le langage CSS

3.1 Qu'est-ce que CSS ?

CSS (Cascading Style Sheets, feuilles de style en cascade) permet de définir la mise en forme d'une page HTML : couleurs, polices, marges, disposition des éléments, etc.

3.2 Trois façons d'appliquer du CSS

Style en ligne (déconseillé)

<p style="color: blue; font-size: 18px;">Texte bleu</p>

Style interne (dans <head>)

<head>
    <style>
        p { color: blue; font-size: 18px; }
    </style>
</head>

Feuille de style externe (recommandé)

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

Fichier style.css :

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

Bonne pratique

La feuille de style externe est la méthode recommandée : elle sépare le contenu (HTML) de la présentation (CSS) et permet de réutiliser le même style sur plusieurs pages.

3.3 Syntaxe d'une règle CSS

sélecteur {
    propriété: valeur;
    propriété: valeur;
}

Exemple :

h1 {
    color: #2c3e50;
    font-size: 24px;
    text-align: center;
}

3.4 Les sélecteurs

Sélecteur	Cible	Exemple
p	Toutes les balises <p>	p { color: red; }
.classe	Tous les éléments avec class="classe"	.important { font-weight: bold; }
#identifiant	L'élément avec id="identifiant"	#titre { font-size: 32px; }
div p	Les <p> à l'intérieur d'un <div>	div p { margin: 10px; }

3.5 Propriétés CSS courantes

Texte et police

p {
    color: #333333;            /* couleur du texte */
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;         /* gras */
    text-align: center;        /* left, right, center, justify */
    text-decoration: underline;
    line-height: 1.5;
}

Couleurs

Les couleurs peuvent être exprimées de plusieurs façons :

color: red;                /* nom de couleur */
color: #ff0000;            /* code hexadécimal */
color: rgb(255, 0, 0);     /* rouge, vert, bleu (0-255) */

Boîte (marges, bordures, espacement)

Chaque élément HTML est une boîte composée de 4 zones :

┌─────────── margin (marge extérieure) ───────────┐
│  ┌──────── border (bordure) ────────┐            │
│  │  ┌───── padding (marge intérieure) ─────┐     │
│  │  │                                      │     │
│  │  │         contenu                      │     │
│  │  │                                      │     │
│  │  └──────────────────────────────────────┘     │
│  └───────────────────────────────────────────┘   │
└──────────────────────────────────────────────────┘

div {
    margin: 10px;              /* marge extérieure */
    padding: 15px;             /* marge intérieure */
    border: 2px solid black;   /* bordure */
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
}

Disposition (Flexbox)

Flexbox permet de disposer les éléments de manière flexible :

.conteneur {
    display: flex;
    justify-content: center;    /* centrage horizontal */
    align-items: center;        /* centrage vertical */
    gap: 10px;                  /* espacement entre éléments */
}

---

4. Exemple complet : une page de présentation

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Ma page NSI</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bienvenue en NSI</h1>
        <nav>
            <a href="#cours">Cours</a>
            <a href="#exercices">Exercices</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="cours">
            <h2>Les cours</h2>
            <p>Retrouvez ici les cours de NSI Première.</p>
            <ul>
                <li>Représentation des données</li>
                <li>Traitement de données en tables</li>
                <li>Interactions homme-machine</li>
            </ul>
        </section>

        <section id="exercices">
            <h2>Les exercices</h2>
            <p>Des exercices corrigés pour chaque partie.</p>
        </section>
    </main>

    <footer id="contact">
        <p>Lycée - NSI Première - 2025</p>
    </footer>
</body>
</html>

Fichier style.css associé :

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f5f5f5;
    color: #333;
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

nav a {
    color: #ecf0f1;
    margin: 0 15px;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

section {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #2c3e50;
    color: white;
}

---

5. L'inspecteur du navigateur

Tous les navigateurs modernes intègrent des outils de développement (touche F12 ou clic droit → « Inspecter »).

L'inspecteur permet de :

• Voir le code HTML de la page en temps réel
• Modifier le CSS temporairement pour tester des changements
• Explorer le DOM (Document Object Model), la représentation arborescente de la page
• Déboguer le JavaScript dans la console

Astuce

L'inspecteur est un outil indispensable pour comprendre comment une page Web est construite. N'hésitez pas à inspecter vos pages favorites pour apprendre.

---

À retenir

• HTML structure le contenu avec des balises (<h1>, <p>, <a>, <img>, <div>...).
• Les attributs complètent les balises (id, class, href, src, alt...).
• CSS met en forme le contenu avec des règles sélecteur { propriété: valeur; }.
• On sélectionne les éléments par balise (p), classe (.classe) ou identifiant (#id).
• Le modèle de boîte (margin, border, padding, contenu) régit l'espacement.
• La séparation HTML / CSS en fichiers distincts est une bonne pratique.
• L'inspecteur du navigateur (F12) permet d'explorer et modifier une page en temps réel.