---
tags : SNT
title : Début en HTML (web capitale nouveau)
---
<!-- Nouveau Capytale WEB-->
*[HTML]: HyperText Markup Language en anglais, soit « Langage de balisage hypertexte »
*[HTTP]: Hypertext Transfer Protocol
*[URL]: Uniform Resource Locator, littéralement « localisateur uniforme de ressource » couramment appelée adresse web
*[CERN]: Conseil européen pour la recherche nucléaire
*[WWW]: World Wide Web, littéralement la « toile (d’araignée) mondiale », abrégé WWW ou le Web
<center>
# Début en HTML
</center>
Dans cette séance vous allez découvrir le langage **HTML** (*HyperText Markup Language en anglais, soit « Langage de balisage hypertexte »*) qui permet de définir et d'organiser la structure d’une page web.
Vous serez évalué selon ce [**barème**](http://b.rynhe.de.tioch.free.fr/SNT/web/Eval_0.html)
:::info
:information_source: **Le début de l'histoire :**
Le **premier** site internet a été publié le 6 août 1991.
- Il présentait le projet World Wide Web développé au sein du CERN par Tim Berners-Lee, Robert Cailliau, Eelco van Asperen, ou encore Alain Favre.
- HTML est une des trois inventions à la base du World Wide Web, avec le HTTP et les URL.
- « Le projet WWW fusionne les techniques de recherche d’informations et d’hypertexte pour créer un système d’information global simple mais puissant ».
- Cette page web a évolué jusqu'en 1993. On peut voir [**ici**](https://info.cern.ch/hypertext/WWW/TheProject.html), une copie de l'état d'alors de ce premier site web de l'histoire.
:::
# Écrire du HTML
:::danger
⚠️ Les instructions de l'activité sont données ci-dessous, mais tout est à faire dans [**Capytale**](https://capytale2.ac-paris.fr/web/c/1012-2247075).
:::
Après avoir ouvert l’activité dans Capytale, vous devez obtenir une fenêtre avec plusieurs zones :
- La zone de <span style="background-color:#91b4d7;"> consigne </span> qui contient le logo de SNT et un lien vers le présent document.
:::success
**Refermez** la zone de consignes en cliquant sur l'icône  au milieu du trait démarquant cette zone.
:::
-  Une zone nommée <span style="color:DodgerBlue;">Éditeur de code</span>, dans laquelle le code `HTML` sera à modifier ou à écrire.
-  Une zone <span style="color:#dc3545;">Prévisualisation</span>, où le résultat de l'exécution du code HTML s'affichera comme dans un navigateur internet.
## Le principe de balisage d'un texte
:::warning
- Les balises HTML sont constituées
- du caractère « **`<`** »,
- suivi par le **nom** de la balise,
- par d'éventuels **attributs** sous la forme **`attribut=valeur`**,
- et par le caractère « **`>`** ».
- Ainsi, **`<head>`** est la balise qui indique le **début** de l'**entête** d'une page *html*.
- Lorsque qu'une balise définit le début d'une zone, la balise qui ferme cette zone possède le **même nom**, mais commence par « **`</`** ».
- Ainsi, **`</head>`** est la balise qui indique la **fin** de l'entête d'une page *html*.
- Les balises **`<body>`** et **`</body>`** définissent le corps de la page **html**, c'est-à-dire ce qui sera affiché dans le navigateur.
:::
Toutes les pages *html* possède la structure :
```htmlmixed
<html> <!-- Ceci est un commentaire pour les humains -->
<head>
⁝ <!-- L'entête, c'est-à-dire des informations utiles au navigateur -->
</head>
<body>
⁝ <!-- Le corps, c'est-à-dire ce qui sera affiché -->
</body>
</html>
```
Vous pouvez reconnaître cette structure dans l'<span style="color:DodgerBlue;">Éditeur de code</span>.
## À vous de jouer
Vous allez expérimenter pour comprendre le rôle et l'intérêt de ces balises !
:::danger
:warning: Dans **Capytale**, pensez à **sauvegarder régulièrement** votre travail en cliquant sur l'icône correspondante <code><i class="fa fa-save fa-inverse" style="color: black"> </i> Enregistrer</code> en haut à gauche !
:::
Dans le **corps** du HTML de l’activité sur Capytale, on constate que le navigateur affiche les textes au fur et à mesure sans tenir compte des sauts de lignes ou espaces laissés.
:::warning
Et pour cause, il n'y a **aucune balise** qui structure le début de la page.
Un peu comme avec le texte avant d'utiliser les styles de *LibreOffice Writer*.
:::
### 💻 Question 1 :
:::success
- **Utilisez** le clavier pour **transformez** le code `Recette de choix` en
```htmlbars
<h1>Recette de choix</h1>
```
- **Observez** l'impact sur la page.
:::
:::info
:information_source: **Un éditeur qui vous veut du bien**
- Vous avez remarqué que l'éditeur de Capytale propose de compléter votre code. Pour accepter une proposition, il suffit d'appuyer la touche `Entrée`.
- Ce sera très pratique pour **fermer** une balise sans erreur.
:::
### 💻 Question 2 :
- La balise `<h1>` sert à définir les titres de premier niveau.
- Il existe 5 autres niveaux de titre de `<h2>` à `<h6>`.
:::success
Dans le texte initial, les indentations du texte par l'auteur créé **implicitement** des titres, des sous-titres et des chapitres.
- **Trouvez** les titres et sous-titre selon leur niveau implicite, **affectez** leur une balise `<h1>` ou `<h2>`.
- **Observez** l'impact sur la page.
- N'oubliez pas de **fermer** les balises !
En écrivant `</` l'éditeur vous propose ce qui convient.
:::
C'est beaucoup mieux, mais l'auteur du texte initial allait parfois à la ligne avec une intention envers son lecteur et cela a disparu dans la prévisualisation.
### 💻 Question 3 :
HTML a prévu que la balise `<p>` indique au navigateur le début d'un **paragraphe** qui composent le texte.
:::success
- **Placez** des balises `<p>` et `</p>` pour retrouver les paragraphes implicites.
- **Observez** l'impact sur la page.
:::
### 💻 Question 4 :
HTML a prévu qu'on puisse insérer des images.
L'image d'illustration `Chef.svg` que j'ai choisi a été copiée dans Capytale. Elle provient du site all-free-download.com.
HTML a également prévu que, parfois les images n'arrivent pas à transiter sur le réseau et alors il affiche un texte **alternatif** à l'image.
:::success
- **Placez** le code
```htmlbars
<img src="Chef.svg"
alt="Une illustration de chef cuisinier" style="width:50%">
```
entre **`<h1>Une recette</h1>`** et **`<h2> Définition</h2>`** .
- **Observez** l'impact sur la page.
- **Modifiez** la taille de l'image pour qu'elle soit adaptée à celle de la page dans la prévisualisation.
:::
### 💻 Question 5 :
HTML a prévu qu'on puisse insérer des liens.
On peut créer des liens **internes** à la page.
:::success
- On définit une cible dans la page en lui donnant un nom, une **identité** :
- Pour **appeler** « top » le titre principal de notre page,
- **modifiez** le titre `<h1>Une recette de choix</h1>` en
```htmlbars
<h1 id="top">Une recette de choix</h1>
```
- `id` est un attribut du langage html,
- `"top"` est la valeur prise par cet attribut.
- Le résultat est que le navigateur sait désormais que le nom "top" est celui de ce titre `<h1>` précisemment.
- Pour **créer le lien** au bas de la page, juste avant `</body>` :
- **Modifiez** le code `<li>Début de cette page</li>` en
```htmlbars
<li><a href="#top"> Début de cette page</a></li>
```
- **Gardez** les balises `<li>`.
- N'oubliez pas de **fermer** la balises `<a>`.
En écrivant `</` l'éditeur vous propose ce qui convient !
- **Observez** l'impact sur la page.
- Dans l'aperçu, **cliquez** sur ce lien que vous venez de créer.
- **Terminez** la table des matières de cette page avec seulement les titres de niveau 1 (`<h1>`).
:::
### 💻 Question 6 :
On peut créer des liens vers des cibles **externes** à la page.
:::success
- On définit une cible externe à la page en utilisant une **URL** :
- Par exemple, `https://fr.wikipedia.org/wiki/Source` est l'URL d'une page *wikipédia* que recense les homonymes du mot « source »,
- **Cliquez** sur ce [**lien**](https://fr.wikipedia.org/wiki/Source) et **repérez** dans le navigateur où se trouve l'URL (`https://fr.wikipedia.org/wiki/Source`) de la page que l'on visite.
- **Trouvez** parmi les différents homonymes de « source » celui qui correspond au sens de la page html que nous sommes en train de construire dans *Capytale*.
- **Cliquez** sur le lien correspondant, puis
- **notez** ou **copiez** l'URL de cette page.
- Pour **créer le lien** vers cette page, on utilise la même syntaxe que pour les liens internes :
```htmlbars
<a href="URL cible"> Texte affiché</a>
```
- **Transformez** le titre « **Source :** » existant dans la page, pour qu'il devienne un lien vers la page correspondante de Wikipédia, **sans changer** son statut de titre.
- **Observez** l'impact sur la page.
- Dans l'aperçu, **cliquez** sur ce lien.
:::
# Pour terminer :
:::danger
:warning: Vous **n'oublierez** pas d'<code><i class="fa fa-save fa-inverse" style="color: black"> </i> Enregistrer</code> votre travail dans Capytale, avant de le quitter.
:::
### 💻 Question 7 :
Vous allez réaliser un **mémento** des balises html et de leur rôle.
Pour cela, j'ai préparé un tableau à **compléter** :
:::success
- **Copiez** l'ensemble du code *html* fourni ci-dessous,
- puis **collez**-le juste avant la balise `</body>`
:::
```htmlbars
<h1> Résumé sur les balises HTML </h1>
<table>
<thead>
<tr>
<th>Balise</th>
<th>Rôle</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><body></code></td>
<td>…</td>
</tr>
<tr>
<td><code><…></code></td>
<td>Entête de la page, non affichée</td>
</tr>
<tr>
<td><code><h1></code></td>
<td>… principal</td>
</tr>
<tr>
<td><code><…></code></td>
<td>Titre moins important</td>
</tr>
<tr>
<td><code><…></code></td>
<td>Paragraphe</td>
</tr>
<tr>
<td><code><a></code></td>
<td>…</td>
</tr>
<tr>
<td><code>id=</code></td>
<td>…</td>
</tr>
<tr>
<td><code>…</code></td>
<td> Cible du lien</td>
</tr>
<tr>
<td><code><…></code></td>
<td>Image</td>
</tr>
<tr>
<td><code>…=</code></td>
<td>Source de l'image</td>
</tr>
<tr>
<td><code>alt=</code></td>
<td>…</td>
</tr>
<tr>
<td><code><…></code></td>
<td>Liste non ordonnée d'éléments</td>
</tr>
<tr>
<td><code><li></code></td>
<td>…</td>
</tr>
<tr>
<td><code><title></code></td>
<td>Texte dans l'onglet du navigateur</td>
</tr>
<tr>
<td><code><…></code></td>
<td> Tableau</td>
</tr>
<tr>
<td><code><td></code></td>
<td>…</td>
</tr>
<tr>
<td><code><…></code></td>
<td> Nouvelle ligne du tableau</td>
</tr>
</tbody>
</table>
```
:::success
- **Remplacez** ensuite les pointillés « … » et rien d'autre dans le tableau par ce qui convient.
:::
### FIN
#### Dans l'entête
:::success
- En **séparant** les auteurs par une virgule, **ajoutez** votre nom comme auteur de cette page *html*.
:::
#### Vérification finale
:::success
-  **Téléchargez** le code *html* final en cliquant sur l'icône sous le nom du fichier `Ma_rec.html` .
- **Déplacez** le fichier obtenu dans votre répertoire **`SNT/Web/Html_debut`**.
- **Ouvrez** ce fichier avec *Firefox* pour vérifier.
- Trouvez le moyen de **récupérer** ce qui manque, **placez**-le dans votre répertoire `SNT/Web` et **rafraichissez** la page dans *Firefox*.
:::
:::danger
:warning: **N'oubliez** pas d'<code><i class="fa fa-save fa-inverse" style="color: black"> </i> Enregistrer</code> dans Capytale, avant de quitter votre travail.
:::