Technologies web

Denis Dréano

WEB-01

Technologies web

Objectifs cantonaux : O4.1, O4.3.

Cours complet sur la plateforme Runestone de Cédric Donner : Technologies web — introduction.

Nouveau module : après avoir vu comment l’information est représentée et stockée, on s’intéresse à la manière dont elle est publiée et structurée sur le Web, à travers le langage HTML.

Que se passe-t-il quand vous visitez une page web ?

Lorsque vous visitez une page Web dans votre navigateur — par exemple le site du Collège du Sud, https://www.collegedusud.ch — votre navigateur envoie une requête HTTP au serveur du site pour lui demander la page d’accueil. Le serveur lui répond en envoyant le code HTML de la page, ainsi que tous les fichiers accessoires nécessaires à son affichage (fichiers CSS pour les styles, images, scripts JavaScript, …).

▷ Définition — HTML

Le langage HTML (HyperText Markup Language) permet de déterminer la structure et le contenu d’une page Web : quels titres, quels paragraphes, quelles images, quels liens, dans quel ordre.

◈ Voir le code source d’une page

Sur n’importe quelle page Web, vous pouvez afficher le code HTML qui la compose :

raccourci Ctrl + U (ou clic droit → « Afficher le code source de la page ») ;
en préfixant l’URL par view-source:, par exemple view-source:https://collegedusud.ch/.

Les balises, une sorte de parenthèse

L’ingrédient de base du HTML est la balise. Les balises HTML fonctionnent un peu comme des parenthèses : elles délimitent une partie du document, et toute balise ouvrante doit être refermée par une balise fermante du même type, dans le bon ordre — exactement comme des parenthèses imbriquées en mathématiques ne peuvent pas se croiser.

◈ Syntaxe — Une balise HTML

<balise>...contenu...</balise>

La balise ouvrante <balise> doit être fermée par la balise fermante </balise> (avec un /).

→ Exemple — extrait d’une fiche de film

<h1>A Beautiful Mind</h1>

<img src="https://upload.wikimedia.org/wikipedia/en/b/b8/A_Beautiful_Mind_Poster.jpg" alt="">

<h2>Résumé</h2>

<p>En 1947, John Forbes Nash Jr. est un brillant élève...</p>

<h2>Distribution des rôles</h2>

<ul>
    <li>John Nash : Russel Crowe</li>
    <li>Alicia Nash : Jennifer Connelly</li>
</ul>

! Balises auto-fermantes

Certains éléments, comme les images, ne contiennent pas de texte entre une balise ouvrante et une balise fermante : ils n’ont donc pas besoin de balise fermante séparée. C’est le cas de <img src="..." alt="..." />, dite auto-fermante (self-closing tag). Tous les autres éléments vus ici utilisent une paire balise ouvrante / balise fermante.

Balises de base à connaître

▷ À retenir — Éléments HTML essentiels

Élément	Balise	Rôle
Paragraphe	`<p>...</p>`	Un bloc de texte
Titre de niveau 1 à 6	`<h1>...</h1>` … `<h6>...</h6>`	Titres, du plus important (`h1`) au moins important (`h6`)
Bloc générique	`<div>...</div>`	Regrouper des éléments (sans signification propre)
Portion de texte	`<span>...</span>`	Comme `div`, mais à l’intérieur d’une ligne de texte
Liste à puces	`<ul>...</ul>`	Contient des `<li>`
Liste numérotée	`<ol>...</ol>`	Contient des `<li>`
Élément de liste	`<li>...</li>`	Un élément, dans `<ul>` ou `<ol>`
Image	`<img src="..." alt="..." />`	Affiche une image (auto-fermante)
Lien	`<a href="...">...</a>`	Un lien hypertexte

Attributs et hiérarchie parent-enfant

Une balise peut porter des attributs, qui précisent son comportement. Par exemple href (destination d’un lien), src (source d’une image) ou alt (texte de remplacement si l’image ne s’affiche pas) sont des attributs.

◈ Syntaxe — Attributs

<a href="https://google.com">un lien vers Google</a>
<img src="chat.jpg" alt="Un chat noir assis sur un canapé">

Un attribut s’écrit nom="valeur" dans la balise ouvrante.

Les éléments HTML forment une structure arborescente : chaque élément peut contenir d’autres éléments, qui deviennent ses enfants. Par exemple, dans le code ci-dessous, l’élément ul est le parent des éléments li :

→ Exemple — hiérarchie parent-enfant

<ul>
    <li>John Nash : Russel Crowe</li>
    <li>Alicia Nash : Jennifer Connelly</li>
</ul>

ul est le parent des deux éléments li, qui sont ses enfants.

! Erreur fréquente

L’imbrication doit toujours être correcte : une balise ouverte en dernier doit être fermée en premier. <ul><li>texte</ul></li> est invalide (l’ordre de fermeture est inversé), alors que <ul><li>texte</li></ul> est correct.

Structure minimale d’un document HTML

Une page Web codée correctement suit toujours le même squelette de base :

◈ Syntaxe — Structure d’une page HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page (affiché dans l'onglet du navigateur)</title>
</head>
<body>
    contenu de la page
</body>
</html>

▷ À retenir — head vs body

<head> : méta-données invisibles à l’affichage (titre d’onglet, encodage, liens vers les fichiers CSS/JS nécessaires).
<body> : tout le contenu réellement affiché dans la fenêtre du navigateur (titres, textes, images, liens, …).

Devoir donné par Cédric

Sur https://jsfiddle.net/ (ou un éditeur équivalent), présentez votre film préféré à l’aide du squelette HTML ci-dessus : titre principal (h1), affiche du film (img), un résumé en plusieurs paragraphes (p), un titre de section « Distribution des rôles » (h2) suivi d’une liste (ul/li) des acteurs et de leurs rôles.