SNT
Le Web
Ressources

Le Web : langages HTML & CSS

I – Bases du HTML

HTML (HyperText Markup Language) décrit la structure d’une page Web : titres, paragraphes, liens, images. Créé par Tim Berners-Lee et standardisé par le W3C.

Code minimal d’une page :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Titre onglet</title>
  </head>
  <body>
    <h1>Titre principal</h1>
    <p>Un paragraphe.</p>
  </body>
</html>
1 À quoi sert la balise <!DOCTYPE html> ?

Visionnage conseillé : vidéo d’intro HTML (lienmini 3389-305, Delagrave).

II – Balises et imbrication correcte

Les balises doivent être bien imbriquées :

<a> ... <b> ... </b> ... </a>   ✓ correct
<a> ... <b> ... </a> ... </b>   ✗ incorrect

Balises autofermantes (marqueurs) : <meta>, <br>, etc.

Lien hypertexte :

<a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a>

Accéder au code source : Ctrl+U ou clic droit > “Voir le code source” ; inspecteur : F12.

2 Quel attribut de la balise <a> contient l’URL cible ?

III – Paragraphes, titres, listes

Listes :

<ul>  <li>item</li>  </ul>   
<ol>  <li>item</li>  </ol>
3 Dans une liste, quelle balise entoure chaque item ?

IV – Structure complète d’un document HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="author" content="...">
    <title>Titre onglet</title>
  </head>
  <body>
    <h1>Titre</h1>
    <p>Paragraphe avec <strong>mot</strong> et <a href="https://exemple.fr">lien</a>.</p>
    <!-- Commentaire -->
  </body>
</html>

Respecter l’imbrication et la fermeture des balises.

4 Où place-t-on la balise <link> vers une feuille de style ?

V – Activité HTML : remettre en forme

Objectif : structurer un document HTML pour obtenir l’affichage cible (texte + image + liens).

  1. Ouvrir le bac à sable (ex. repl.it) et coller le squelette HTML.
  2. Ajouter les balises pour titres, paragraphes, liens, image (URL d’exemple : https://frederic-junier.org/SNT/Theme1_Web/media/schema-index2.jpg).
  3. Vérifier l’imbrication des balises et la présence de href sur les liens.
  4. Télécharger le projet en zip, ouvrir index.html avec un navigateur et contrôler l’affichage.
<h1>Titre de l'article</h1>
<p>Texte avec <strong>mot important</strong> et <a href="https://exemple.fr">lien</a>.</p>
<img src="https://frederic-junier.org/SNT/Theme1_Web/media/schema-index2.jpg" alt="schéma">
5 Comment vérifier l’imbrication des balises dans l’inspecteur ?

VI – Listes ordonnées / non ordonnées

Transformer un texte en liste :

<ol>
  <li>interstices.info</li>
  <li>wikipedia / fake news</li>
  <li>lemonde.fr/verification</li>
  <li>liberation.fr/desintox</li>
</ol>
6 Quelle différence visuelle entre <ul> et <ol> ?

VII – Bases du CSS

Le CSS (Cascading Style Sheets) gère apparence et positionnement.

h1 { color: #0b2f8f; font-size: 1.4rem; }
p  { line-height: 1.5; }
strong { font-weight: bold; }

Visionnage conseillé : vidéo intro CSS (lienmini 3389-306, Delagrave).

7 Pourquoi parle-t-on de “feuilles de styles en cascade” ?

VIII – Atelier CSS : jouer avec les propriétés

  1. Changer couleurs (cf. w3schools couleurs), alignements et décorations de texte (text, font).
  2. Modifier polices, tailles, graisses via font-family, font-size, font-weight.
  3. Déplacer le style dans un fichier externe style.css et lier avec <link>.
  4. Tester les modifications dans le navigateur (recharger après sauvegarde).
/* Exemple dans style.css */
body { font-family: "Times New Roman", serif; }
h1 { color: #0b2f8f; text-align: center; }
p  { color: #222; text-align: justify; }
8 Quelle balise lie une feuille de style externe au HTML ?

IX – Outils et bonnes pratiques

<!-- Commentaire HTML -->
/* Commentaire CSS */
9 Quel raccourci clavier ouvre l’inspecteur dans le navigateur ?

X – Synthèse et liens utiles

10 Pourquoi séparer HTML et CSS dans deux fichiers ?

XI – HTTP / HTTPS

HTTP est le protocole d’échange Web. HTTPS ajoute le chiffrement (TLS).

GET /index.html HTTP/1.1
Host: www.exemple.fr
User-Agent: Navigateur

HTTP/1.1 200 OK
Content-Type: text/html

# Exemple avec curl
curl -i https://www.exemple.fr
11 Que signifie le code 404 ?

XII – DNS : de l’URL à l’adresse IP

Le DNS résout un nom de domaine vers une adresse IP.

12 À quoi sert un enregistrement CNAME ?

XIII – Hébergement, statique / dynamique, cache

13 Pourquoi utiliser un CDN ?

XIV – HTML : formulaires et liens

<form action="/envoyer" method="POST">
  <label>Nom</label>
  <input type="text" name="nom" required>
  <label>Message</label>
  <textarea name="msg"></textarea>
  <button type="submit">Envoyer</button>
</form>
14 Quelle différence entre lien relatif et absolu ?

XV – CSS : boîte, flex, responsive

.bloc { display: block; margin: 8px 0; padding: 8px; border: 1px solid #ccc; }
.flex { display: flex; gap: 12px; }
.col { flex: 1; }
@media (max-width: 700px) {
  .flex { flex-direction: column; }
}
15 Que fait @media (max-width: 700px) ?

XVI – JS minimal : DOM et fetch

<button id="btn">Clique</button>
<script>
document.getElementById('btn').addEventListener('click', async () => {
  const res = await fetch('https://api.exemple.fr/data');
  const data = await res.json();
  console.log(data);
});
</script>

JS côté client : manipuler le DOM, réagir aux événements, appeler des API (fetch).

16 Quel objet JS permet de faire une requête HTTP ?

XVII – Accessibilité

17 Pourquoi l’attribut alt est-il important ?

XVIII – Exercices

  1. Formulaire de contact : nom, email, message, bouton envoyer. Ajouter labels et alt sur les images.
  2. Page “articles” : liste d’articles avec liens (relatif/absolu), image avec alt, paragraphe descriptif.
  3. Flex/grid : faire deux colonnes sur desktop, une colonne sur mobile (@media).
18 Quels attributs rendent un formulaire accessible ?

XIX – Mini-projet + Checklist

Mini-projet : créer une page perso responsive (photo avec alt, bio, liste de liens, formulaire de contact). Utiliser une feuille CSS externe, flex/grid, media queries.

Checklist compétences :

19 Citer 3 points de la checklist à vérifier avant publication.

XX – Activités & Quiz

Consulte les activités puis reviens sur le cours si besoin. Les pages sont imprimables via le bouton “Imprimer / PDF”.