Comprendre une interface Web : HTML et CSS

HTML décrit des éléments et leurs relations

Le langage HTML organise un document avec des éléments imbriqués : titres, paragraphes, listes, liens, images, champs de formulaire et boutons. Une balise ouvrante et une balise fermante entourent souvent un contenu, comme <p>Un paragraphe</p>. Les attributs précisent des informations, par exemple href pour la destination d’un lien. L’ordre et l’imbrication forment une structure que le navigateur interprète. Les titres donnent une hiérarchie au contenu ; ils ne devraient pas être choisis uniquement pour leur taille visuelle. Cette structure peut aussi être utilisée par des technologies d’assistance.

Un navigateur peut corriger certaines erreurs de balisage, ce qui ne rend pas la structure écrite correcte. Lire l’arbre réellement obtenu aide à comprendre une imbrication inattendue. La hiérarchie des éléments exprime leurs relations et reste utile même lorsque les styles sont désactivés.

Les composants ont un rôle et un nom

Un lien sert à rejoindre une destination ; un bouton déclenche une action. Un champ input reçoit une valeur, et un label lui associe une étiquette compréhensible. Une image peut recevoir un texte alternatif qui transmet son rôle lorsqu’elle n’est pas vue. Ces choix facilitent l’usage au clavier et la compréhension de l’interface. Simuler un bouton avec un élément sans sémantique oblige à reconstruire des comportements déjà fournis par un vrai bouton. En Première, identifier ces composants aide à relier leur description aux événements qu’un programme pourra ensuite traiter.

Dans cet extrait, le lien mène à une section du même document. Le titre décrit la ressource et le bouton déclencherait une action à programmer. Les deux contrôles ont donc des rôles différents, même si CSS leur donne ensuite une apparence proche.

<article class="carte">
  <h2>Découvrir les tableaux</h2>
  <p>Des cases, des indices et des valeurs.</p>
  <a href="#exercices">Aller aux exercices</a>
  <button type="button">Réinitialiser une activité</button>
</article>
<section id="exercices">
  <h2>Exercices sur les tableaux</h2>
  <p>Les énoncés seront présentés ici.</p>
</section>

Une étiquette visible doit être reliée au champ qu’elle décrit. L’attribut for du label reprend l’identifiant du champ. Deux champs ayant le même identifiant rendent cette association ambiguë. Un simple texte voisin peut paraître clair visuellement tout en perdant ce lien programmatique.

CSS choisit la présentation

Une règle CSS possède un sélecteur et des déclarations. Le sélecteur .carte vise les éléments portant la classe carte ; color définit une couleur de texte, tandis que padding ajoute un espace intérieur. HTML peut ainsi garder la même structure pendant que CSS adapte les couleurs, les dimensions et la disposition. Une classe peut être partagée par plusieurs éléments, alors qu’un identifiant doit rester unique dans le document. L’apparence finale résulte de plusieurs règles possibles : il faut examiner celles qui s’appliquent réellement au composant étudié plutôt que modifier une propriété au hasard.

Une classe décrit souvent un rôle de présentation partagé, tandis qu’un identifiant repère un élément unique. Le sélecteur .carte vise une classe ; #exercices vise un identifiant. Ces notations se ressemblent mais ne sélectionnent pas le même ensemble d’éléments.

Adapter l’interface à l’espace disponible

Une disposition à deux colonnes sur un grand écran peut devenir illisible sur un téléphone. Une requête de média CSS permet d’appliquer une autre règle lorsque la largeur franchit un seuil. Cela ne change pas nécessairement le contenu HTML : les mêmes cartes sont présentées dans un ordre cohérent avec moins de colonnes. La lisibilité dépend aussi de la taille du texte, du contraste, des espaces et de la possibilité d’utiliser les contrôles sans précision excessive. Une page doit être examinée à plusieurs largeurs, avec des textes longs et au clavier, pas uniquement avec une capture idéale.

Le seuil de l’atelier inclut exactement six cents pixels. À cette largeur, la règle à une colonne s’applique. Juste au-dessus, deux colonnes réapparaissent. Vérifier la frontière permet de relier une règle de média à la même rigueur que les conditions étudiées en Python.

Relier structure, style et comportement sur un contrôle

Un formulaire contient un champ de prénom et un bouton de validation. HTML décrit le champ, son étiquette et le bouton. CSS peut disposer ces éléments verticalement sur une petite largeur. Un gestionnaire d’événement peut vérifier une saisie, mais le bouton natif possède déjà des comportements d’activation attendus.

Si le texte du bouton est illisible, on examine la présentation. Si le label pointe vers le mauvais champ, on corrige la structure. Si une action de calcul n’est jamais exécutée, on examine le gestionnaire. Cette séparation permet de chercher la cause à partir du symptôme, sans supposer que tout défaut visuel vient du même langage.

Calculer une disposition avant de l’afficher

Pour deux cartes de même largeur séparées par vingt pixels dans un conteneur de six cent vingt pixels, il reste six cents pixels à partager, donc trois cents par carte. À six cents pixels avec la règle responsive de l’atelier, une seule carte occupe toute la largeur et les quatre cartes se répartissent sur quatre lignes.

Ce modèle ne comporte ni bordure ni marge intérieure. Dans une page réelle, ces dimensions peuvent aussi compter selon les règles CSS utilisées. Un calcul de largeur doit donc annoncer les espacements inclus. Le nombre de cartes et leur ordre de lecture peuvent rester identiques pendant que leur disposition change.

De la compréhension à l’autonomie

À vous de résoudre

Cherchez d’abord par vous-même. Vérifiez les résultats demandés, utilisez les indices si nécessaire, puis comparez votre méthode à la correction.

Les erreurs qui méritent un détour

Choisir une balise seulement pour son apparence

Choisissez d’abord le rôle du contenu, puis adaptez son style avec CSS.

Tester uniquement avec un écran large

Les textes longs, petites largeurs et interactions au clavier révèlent d’autres contraintes.

Le prochain pas

• Événements et interactions dans une page Web

Retrouver le catalogue de Première

Ce chapitre s’appuie sur le programme officiel de Première (PDF, nouvel onglet). Les explications et exercices sont proposés pour l’apprentissage.