Je réserve ici
Sciences numériques et technologie (SNT) 2ⁿᵈᵉ

Ressources · 2ⁿᵈᵉ · Sciences numériques et technologie (SNT)

Langages HTML et CSS

Structure d'une page, balises, liens hypertextes, feuilles de style : écrire et modifier une page web (SNT de 2nde)

À propos de cette page
Ce cours de sciences numériques et technologie (SNT) en seconde sur « Langages HTML et CSS » suit le programme officiel de sciences numériques et technologie (SNT) de seconde. Il présente les définitions, les propriétés et les méthodes essentielles, accompagnées d'exemples résolus pour bien comprendre. Au programme : L'essentiel : HTML, CSS, balises et attributs, Structure d'une page HTML, Balises courantes et liens hypertextes, Feuilles de style CSS. Chaque notion est expliquée pas à pas, puis mise en pratique grâce à des exercices interactifs, un QCM et une évaluation corrigée. Idéal pour réviser à son rythme, combler ses lacunes et progresser, en autonomie ou avec un professeur. Cours rédigé par un professeur particulier à Marseille pour aider les élèves de seconde à réussir en sciences numériques et technologie (SNT).
1

L'essentiel : HTML, CSS, balises et attributs

HTML (HyperText Markup Language) est un langage de balisage : il décrit le contenu et la structure d'une page web (titres, paragraphes, listes, images, liens). Ce n'est pas un langage de programmation : il ne calcule rien.
CSS (Cascading Style Sheets, feuilles de style en cascade) décrit la présentation de ce contenu : couleurs, polices, tailles, marges, alignements.
Balise : mot-clé entre chevrons. Un élément = balise ouvrante + contenu + balise fermante : <p>Bonjour</p>. Certaines balises n'ont pas de balise fermante (balises orphelines) : <img>, <br>, <meta>, <link>.
Attribut : information placée dans la balise ouvrante, sous la forme nom="valeur". Dans <a href="galerie.html">, l'attribut est href et sa valeur galerie.html.
Le navigateur reçoit du serveur le fichier HTML, puis le fichier CSS, et calcule l'affichage : c'est le rendu de la page.
Repères historiques de HTML et CSS
• 1990-1991 : au CERN, Tim Berners-Lee écrit la première version de HTML, en même temps que le premier serveur et le premier navigateur ; la première description publique du langage (« HTML Tags ») circule fin 1991.
• 1994 : Tim Berners-Lee fonde le W3C (World Wide Web Consortium), l'organisme qui normalise les langages du Web pour que les pages s'affichent de la même façon dans tous les navigateurs ; le 10 octobre 1994, Håkon Wium Lie, alors au CERN, propose les feuilles de style en cascade.
• 17 décembre 1996 : CSS 1 devient une recommandation du W3C (rédigée avec Bert Bos).
• 28 octobre 2014 : HTML5 devient une recommandation du W3C ; depuis 2019, HTML est publié par le WHATWG sous la forme d'un « standard vivant », mis à jour en continu.
2

Structure d'une page HTML

Toute page HTML suit le même squelette :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Club d'astronomie</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Club d'astronomie</h1>
    <p>Séances le jeudi soir.</p>
  </body>
</html>
PartieRôle
<!DOCTYPE html>indique au navigateur qu'il lit du HTML (version actuelle)
<head>en-tête non affiché dans la page : encodage des caractères, titre de l'onglet, lien vers la feuille de style
<body>corps : tout ce qui s'affiche dans la fenêtre
Imbrication : les éléments sont emboîtés comme des poupées russes et forment une arborescence (html contient head et body, body contient h1 et p…). Une balise ouverte à l'intérieur d'une autre doit être fermée avant elle : <p><em>…</em></p>.
L'indentation (décalage des lignes) n'est pas obligatoire mais rend l'imbrication lisible. Les espaces et retours à la ligne multiples sont affichés comme un seul espace.
3

Balises courantes et liens hypertextes

BaliseRôle
<h1> à <h6>titres, du plus important au moins important
<p>paragraphe
<strong>, <em>mot important (gras), mot mis en valeur (italique)
<ul>, <ol>, <li>liste à puces, liste numérotée, élément de liste
<img src="…" alt="…">image : src = fichier, alt = texte de remplacement
<a href="…">lien hypertexte
<div>, <span>conteneurs sans signification, utiles pour appliquer un style
Hypertexte : un texte qui renvoie, par des liens, à d'autres contenus. Le Web est un immense ensemble de pages reliées par des liens hypertextes. En HTML : <a href="cible">texte cliquable</a>.
Chemin absolu : adresse complète d'une ressource, commençant par https:// ; indispensable pour un lien vers un autre site.
Chemin relatif : chemin écrit à partir du dossier de la page où se trouve le lien, pour une page du même site :
• galerie.html : même dossier ;
• photos/lune.html : dans le sous-dossier photos ;
• ../sommaire.html : .. signifie « remonter d'un dossier ».
Exemple. <a href="#horaires">Voir les horaires</a> mène à l'élément de la même page portant l'attribut id="horaires" (lien interne, ou ancre). Ajouter target="_blank" ouvre la cible dans un nouvel onglet.
L'attribut alt d'une image est lu par les logiciels de lecture d'écran des personnes malvoyantes et s'affiche si l'image ne se charge pas : il sert l'accessibilité.
4

Feuilles de style CSS

Règle CSS : sélecteur { propriété: valeur; propriété: valeur; }. Le sélecteur désigne les éléments visés ; chaque déclaration propriété: valeur; fixe un aspect.
Exemple : h1 { color: navy; font-size: 32px; } écrit tous les titres h1 en bleu marine, en 32 pixels.
SélecteurViseCôté HTML
ptoutes les balises p<p>
.attentionles éléments de classe attention (plusieurs possibles)<p class="attention">
#menul'élément d'identifiant menu (unique dans la page)<ul id="menu">
PropriétéEffet
color / background-colorcouleur du texte / du fond
font-family, font-size, font-weightpolice, taille, graisse (bold = gras)
text-alignalignement : left, center, right, justify
border, margin, padding, widthbordure, marge extérieure, marge intérieure, largeur
Couleurs : par un nom (red), en rgb(255, 0, 0) ou en hexadécimal #FF0000. Le code #RRGGBB donne les quantités de rouge, vert et bleu, chacune de 00 (0) à FF (255). Conversion : FF = 15 × 16 + 15 = 255.
Trois façons d'appliquer du CSS : un fichier externe relié par <link> (recommandé) ; une balise <style> dans le head ; un attribut style="…" sur un élément (à éviter).
Cascade : si plusieurs règles fixent la même propriété d'un élément, la plus spécifique l'emporte (attribut style > identifiant > classe > balise) ; à spécificité égale, la dernière écrite gagne.
Héritage : certaines propriétés (color, font-family, font-size…) fixées sur un élément s'appliquent à ses descendants, sauf règle plus précise.
5

Méthodes

Méthode 1 — Prévoir l'affichage d'un extrait HTML
  1. Repérer chaque paire de balises et ce qu'elle encadre.
  2. Associer à chaque balise son rôle (titre, paragraphe, liste, lien…).
  3. Décrire l'affichage dans l'ordre du code, sans les balises, qui ne s'affichent jamais.
Exemple rédigé. <h2>Menu</h2><ul><li>Soupe</li><li>Gratin</li></ul> : un titre de niveau 2 « Menu », puis une liste à puces (ul) de deux éléments, « Soupe » et « Gratin ».
Méthode 2 — Écrire un chemin relatif
  1. Partir du dossier qui contient la page où l'on écrit le lien.
  2. Écrire ../ pour chaque dossier à remonter.
  3. Écrire ensuite les dossiers à descendre, séparés par /, puis le nom du fichier.
Exemple rédigé. Le lien est écrit dans blog/articles/velo.html et vise blog/sommaire.html. La page est dans blog/articles : on remonte d'un dossier vers blog, où se trouve le fichier. Chemin : ../sommaire.html.
Méthode 3 — Styler certains éléments seulement
  1. Donner une classe aux éléments concernés dans le HTML : class="nom".
  2. Écrire une règle CSS dont le sélecteur est .nom.
  3. Vérifier qu'aucune règle plus spécifique (identifiant) ne contredit la classe.
Exemple rédigé. Pour écrire en rouge carmin deux paragraphes d'avertissement : <p class="avertissement">…</p> pour chacun, et dans la feuille de style .avertissement { color: crimson; }. Les autres paragraphes ne changent pas.
Méthode 4 — Déterminer quelle règle s'applique
  1. Lister toutes les règles qui visent l'élément (par sa balise, sa classe, son identifiant).
  2. Pour la propriété étudiée, garder la plus spécifique ; à égalité, la dernière écrite.
  3. Si aucune règle ne vise l'élément, chercher une valeur héritée d'un parent.
Exemple rédigé. Feuille : p { color: black; } .chapo { color: teal; } #intro { color: brown; }. Pour <p class="chapo" id="intro">, les trois règles s'appliquent ; l'identifiant est le plus spécifique : le texte est marron (brown).
6

Pièges et erreurs classiques

Balises mal imbriquées. <p><em>texte</p></em> est incorrect : la dernière balise ouverte se ferme en premier.
Balise oubliée. Un </a> manquant rend cliquable tout le texte qui suit. Le navigateur tolère beaucoup d'erreurs sans message : la page s'affiche, mais pas comme prévu.
Confondre <title> et <h1>. title (dans head) donne le texte de l'onglet ; h1 (dans body) est le titre affiché dans la page.
Chemin relatif écrit depuis le mauvais dossier. Il se lit toujours à partir de la page qui contient le lien, pas depuis la racine du site. De même, les majuscules comptent : Photo.jpg et photo.jpg sont deux fichiers différents sur la plupart des serveurs web.
Syntaxe CSS. Deux-points entre propriété et valeur (pas de signe =), point-virgule entre déclarations, accolades autour du bloc. Une propriété mal orthographiée (colour) est ignorée sans message d'erreur.
Classe ou identifiant ? Le point . vise une classe, le dièse # un identifiant. Un identifiant ne doit apparaître qu'une fois par page.
En bref
  • HTML = contenu et structure ; CSS = présentation. On les sépare dans deux fichiers.
  • Une page : <!DOCTYPE html>, puis html contenant head (non affiché) et body (affiché).
  • Élément = balise ouvrante + contenu + balise fermante ; attributs nom="valeur" dans la balise ouvrante.
  • Lien : <a href="…"> ; chemin relatif depuis le dossier de la page, ../ pour remonter.
  • Règle CSS : sélecteur { propriété: valeur; } ; p, .classe, #identifiant.
  • Cascade : style > identifiant > classe > balise, puis dernière règle écrite ; certaines propriétés s'héritent.
Bloqué sur ce chapitre ?

Moi c'est Ben, j'ai créé ce site pour aider le plus d'élèves possible, partout en France. Je peux aussi reprendre avec toi ce qui coince en cours particulier : en visio, ou à domicile si tu es à Marseille.

Réserver un 1er cours → Voir les tarifs

Soutien scolaire à Marseille · Cours particuliers au lycée · Aide aux devoirs