Page web

Choix d'un thème

Choisir un thème et deux personnages (réels ou imaginaires) desquels parlera votre site web, comme par exemple des scientifiques (Ada Lovelace et Sophie Germain), le film Wonder Woman (Wonder Woman (le personnage) et Gal Gadot), le sport (Amandine Henry et Émilie Andéol), etc.

L'un des personnages au moins devra, au choix :

ne pas avoir de page sur le Wikipédia français ;
avoir une page très pauvre (composé de cinq phrases ou moins, et marqué comme une ébauche).

Mise en place de l'environnement de travail

Créez, dans votre répertoire personnel, un dossier portant votre nom (par exemple, l'élève Sophie Germain crée un dossier s'appelant germain).
À partir de maintenant (sauf mention contraire), l'ensemble du travail de cette séquence se fait dans ce dossier (que l'on appellera dossier ou répertoire de travail).

Première page web

Téléchargez ce fichier (clic droit, puis « Enregistrer la cible du lien sous »), et placez-le dans votre répertoire de travail.
Renommez-le en nom-de-famille.html (où nom-de-famille est le nom de famille de votre personnage sans page Wikipédia : par exemple veil.html pour Simone Veil, ou arwen.html pour Arwen (du Seigneur des anneaux)).
Double-cliquez dessus pour l'ouvrir avec Firefox. Une page très simple devrait s'afficher.
Ouvrez-le avec un éditeur de texte (clic droit, Ouvrir avec…).
Dans l'éditeur de texte, remplacez la ligne Bonjour ! par les lignes suivantes (en l'adaptant à votre personnage).
```
 <h1>Sophie Germain</h1>
 <p>Sophie Germain est une mathématicienne française du 18e siècle.</p>
```
Vérifiez que ces modifications s'affichent dans Firefox (rechargez la page avec l'icône ⟳ (Actualiser la page courante), ou avec la touche F5).

Balises

Le HTML : un langage de balisage

La page web que vous avez construite ressemble à peu près à cela.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ceci est mon titre</title>
  </head>
  <body>
    <h1>Sophie Germain</h1>
    <p>Sophie Germain est une mathématicienne française du 18e siècle.</p>
  </body>
</html>

Le language HTML est un « langage de balisage », les « balises » définissent la structure (et parfois la forme) du document.

Par exemple, la ligne <h1>Sophie Germain</h1> affiche sur la page le titre Sophie Germain (écrit en plus gros, notamment). Toutes les balises rencontrées jusqu'ici fonctionnent par paire, comme les parenthèses : une balise ouvrante (de la forme <BALISE>) et une fermante (de la forme </BALISE>).

Comme les parenthèses, elles peuvent être imbriquées (<p>Ceci est <strong>un</strong> texte</p> est valide, de même que (3×(2+1))), mais pas « mélangées » : [3÷(1]+2) est incorrect, de même que <p>Ceci est <strong>un</p>texte</strong>.

Structure d'un document HTML

Reprenons le code de notre page.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ceci est mon titre</title>
  </head>
  <body>
    <h1>Sophie Germain</h1>
    <p>Sophie Germain est une mathématicienne française du 18e siècle.</p>
  </body>
</html>

Le type du document est indiqué par la première ligne <!DOCTYPE html> (plusieurs versions du HTML existent : nous utilisons le HTML5, plus récent).
Le document est inclus dans les balises <html>...</html>. Nous utilisons ici l'argument lang="fr" pour signifier que la page est en français (d'autres arguments permettent par exemple d'écrire de droite à gauche, comme en arabe).
L'en-tête (délimité par la balise <head>) contient des informations à propos du document, comme son titre (<title>...</title>, qui apparaît sur l'onglet de Firefox lorsqu'on affiche la page), ou l'encodage de caractères (<meta charset="utf-8">, qui permet d'utiliser des caractères avec accents). Nous ajouterons d'autre lignes dans la suite de cette séquence.
Le corps (délimité par la balise <body>) contient tout ce qui sera affiché dans la page.

Quelques balises

Voici quelques balises.

<p>Un paragraphe</p> : Les sauts de lignes dans le code HTML sont ignorés. Pour séparer le texte en paragraphes, il faut alors utiliser la balise <p>.
```
  <p>Voici un premier paragraphe.</p>
  <p>Voici un second paragraphe.</p>
```

<h1>Titre<h1>, <h2>Sous-titre</h2>, <h3>Sous-sous-titre</h3>, etc. : Permet de structurer la page en parties et sous-parties. La structure du corps d'un document ressemble alors à ceci.

  <h1>Sophie Germain</h1>
  <p>Sophie Germain est une mathématicienne française.</p>

  <h2>Biographie</h2>

  <h3>Enfance et adolescence</h3>
  <p>Bla bla bla…</p>

  <h3>Vie active</h3>
  <p>Bla bla bla…</p>

  <h2>Œuvres</h2>

  <h3>Mathématiques</h3>
  <p>Bla bla bla…</p>

  <h3>Philosophie</h3>
  <p>Bla bla bla…</p>

<i>italic</i> et <b>bold</b> : Ces balises permettent de mettre une portion de texte en italique ou en gras.
<em>emphase</em> et <strong>important</strong> : Ces balises permettent de mettre en exergue une portion de texte, ou de le marquer comme important.
<hr> : Sépare deux paragraphes (en traçant une ligne horizontale). Notons que cette balise est autonome : elle n'a pas besoin de balise fermante.
 : Cette balise spéciale est un commentaire : elle permet d'écrire dans le code HTML des choses qui ne seront pas montrée sur la page web.

À vous !

Reprendre le fichier html de la partie précédente, et mettez le nom de votre personnage comme titre (celui qui s'affiche dans l'onglet de Firefox).
Créez deux sections à propos de votre personnage, en utilisant les balises <h2> pour les titres, et <p> pour le contenu des paragraphes.
Séparez les deux sections avec une ligne horizontale en utilisant la balise <hr>.
Utilisez les balises <strong> et <em> pour mettre des mots ou groupes de mots en valeur.

Respect de la norme HTML

Pourquoi est-ce important ?

Si votre page web contient des erreurs (par exemple une balise <p> sans balise </p>), Firefox corrige comme il peut, et affiche une page à l'écran. Il est donc possible que vous ne vous rendiez-pas compte que votre page web contient des erreurs. En revanche, lorsque votre page web va être affichée avec un autre navigateur (Internet Explorer, Chrome, Safari, sur ordinateur, sur mobile, etc.), chaque navigateur va corriger l'erreur différemment, et votre site web ne va alors pas s'afficher correctement.

S'assurer que votre code HTML est correct permet de s'assurer qu'il sera affiché de la même manière avec tous les navigateurs.

Validation de votre page web

Allez sur le site web http://validator.w3.org, puis sur l'onglet Validate by Direct Input. Copiez l'ensemble du contenu du fichier html dans le champs, et validez (Check).

Si le site vous fait remarquer des erreurs dans votre code, corrigez-les.

Évaluation

À la fin de chacun des TP, vous ferez les choses suivantes.

Sur la fiche d'évaluation que vous venez chercher sur mon bureau, vérifiez que vous avez fait l'ensemble du travail en cochant les cases (colonne de gauche).
Copiez le contenu de votre travail dans le dossier partagé, en le renommant NOM-NUMÉRO (où NOM est votre nom, et NUMÉRO le numéro du TP ; par exemple, une fois le TP n°2 terminé, Sophie Germain nomme son dossier Germain-TP2).
Rendez-moi la fiche d'évaluation ; je vérifierai votre travail pour la séance suivante.
Passez au TP suivant (utilisez les liens ci-dessous).

⚠️ Attention ! ⚠️