2de SNT / Écrire du HTML

1. Les bases du HTML

Le langage HTML est un langage de balisage car il utilise des balises <...> pour donner du sens à ses éléments.
Il existe deux types d'éléments en HTML :

	Ceux définis avec une balises ouvrante `<...>` et une balise fermante `</...>`.	Ceux définis avec une balise orpheline `<.../>`
Exemples :	`<p>Ceci est un paragraphe</p>`	`<img src="chat.jpg"/>` pour insérer une image.

Il existe un grand nombre de balises différentes afin de créer des titres, des hyperliens, des images ou des animations ...
Remarque : Les caractères < et > s'appellent des chervons.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre de l'onglet</title>
    </head>
    <body>
        <h1> Bonjour ! </h1>
        <br/>
        <p>Voici un exemple de page HTML... </p>
        <!-- Ceci est un commentaire -->
      </body>
</html>

Au début d'un document HTML, on trouve toujours la balise spéciale
<!DOCTYPE html> suivi de la balise ouvrante <html> qui ne sera fermée (avec </html>) qu'à la fin du document.
Entre les balises <html>...</html> on trouve le code HTML qui est interprété par le navigateur. Elles contiennent toujours deux autres balises :

La tête <head>...</head>. Ce qu'elle contient n'est pas affichée par le navigateur. Il s'agit d'informations importantes pour aider le navigateur à afficher correctement la page. Par exemple :
- <meta charset="utf-8"> précise au navigateur d'utiliser le codage des caractères utf-8. Il sera important de toujours ajouter cette balise dans la tête des pages HTML pour ne pas avoir de problème d'affichage des caractères accentués (é, è, ö, ...).
- <title>...</title> ne correspond pas au titre de la page mais à ce que doit afficher le navigateur dans l'onglet de cette page.
Le corps <body>...</body>. Il s'agit du contenu de la page. Ici, on trouve plusieurs autres balises :
- un grand titre entre les balises <h1>...</h1>. Il existe six niveaux de titres possibles : de <h1> jusqu'à <h6>.
- un saut à la ligne avec la balise orpheline <br/>.
- un paragraphe entre les balises <p>...</p>.
- un commentaire avec la balise spéciale . Ce commentaire est utile pour le développeur web pour expliquer le code. Il n'est pas interprété par le navigateur et n'est pas affiché.

Mon premier site ← à modifier

Quand je serai développeur web... ← en h2

Mon salaire ← en h3

En début de carrière : 2 à 3000€/mois ← paragraphe

Jusqu'à 7000€/mois ← paragraphe

Modifier, en suivant les «indications», le code source HTML ci-dessous afin que la page corresponde exactement à l'affichage ci-contre (sans les indications).
Faire valider par le professeur.

Thème 1 - Web / 2 - HTML Apprentissage 0x Réussite 0/0/3

Où doit être écrit ce que l'on souhaite afficher dans la page web ?

<html> <head> 1 </head> <body> 2 </body> 3 </html> 4

1

2

3

4

Cocher la bonne réponse.

2. Créer un hyperliens

La balise <a href="url">texte</a> permet de créer un hyperlien.
Par défaut, un hyperlien apparaît souligné en bleu et l'icône de la souris change à son survol pour montrer la possibilité de cliquer.

Exemple :
<a href="https://raisintine.fr/chocolatine">Chocolatine</a> donne Chocolatine.

3. Ajouter une image ou une vidéo

Les balises <img/> ou <video/> sont des balises orphelines qui permettent d'insérer respectivement une image ou une video.

Exemples :

<img src="dossier/photo.jpg" width="50" height="50"/>
<video src="dossier/film.mp4" width="300" controls/>

Explications :

L'attribut src est l'adresse du fichier (image ou vidéo) à insérer.
La taille de l'image peut être précisée grâce aux attributs width (largeur) et height (hauteur), en pixels ou bien en pourcentage de l'affichage (exemple : "70%"). Pour ne pas déformer l'image, on peut n'écrire qu'un seul de ces attributs. L'autre est alors automatiquement bien ajusté.
Pour les vidéos, l'attribut controls est nécessaire pour afficher les boutons de contrôle de la vidéo : lecture, pause ...
On peut ajouter d'autres attributs comme alt="message", pour donner une description du fichier utilisé notamment pour les non-voyants. C'est aussi ce texte qui s'affichera en cas de problème d'accès au fichier.

Remarque : Pour définir l'attribut src d'une balise <img/>; avec une adresse sur internet, il faut que ce lien pointe vers un fichier image (ayant l'extension : .jpg, .png, .gif).
On pourra utiliser un clic droit sur l'image puis "copier l'adresse de l'image" pour ensuite coller son adresse dans src="...".

Écrire dans la fenêtre «code source HTML» ci-dessous une instruction qui affiche une image de votre choix (on pourra choisir une image libre de droits sur Pixabay).
En incluant l'image dans un hyperlien, faites en sorte qu'un clic sur l'image renvoie vers l'URL : "https://fr.wikipedia.org/wiki/Tim_Berners-Lee".
Faire valider par le professeur.

4. Structurer la page

Un élément <div>...</div> permet de diviser une page en blocs qui se superposent les uns sur les autres.
Un élément <span>...</span> permet de créer des zones côte-à-côte.
Ces balises permettent de disposer le contenu d'un site.

〈div〉

〈span〉

Thème 1 - Web / 2 - HTML Apprentissage 0x Réussite 0/0

Associer chaque balise à son rôle :

une liste non-ordonnée

un hyperlien

un titre principal

un paragraphe

disposer l'un au dessus de l'autre

disposer côte-à-côte

une image

Former les bons couples par glisser-déposer ou clics successifs.

5. Créer un tableau

Les balises <table>...</table> permettent de créer un tableau, dont le titre est donné entre les balises <caption>...</caption>.
On organise ensuite, entre <tbody>...</tbody>, le corps du tableau, en énumérant chaque ligne entre <tr>...</tr> (table row), puis chaque cellule de la ligne (les colonnes) entre <td>...</td> ou bien <th>...</th> pour les titres des colonnes.

Exercice 3 :

Dans le tableau suivant :

À quoi sert l'attribut rowspan utlisé dans ce tableau ?
Supprimer la colonne "Lieu".
Ajouter une ligne avec l'évènement de votre naissance.
Faire valider par le professeur.

Thème 1 - Web / 2 - HTML Apprentissage 0x Réussite 0/0

Associer chaque balise à son rôle :

écrire un tableau

ligne d'un tableau

une cellule mise en valeur (entête de colonne)

titre d'un tableau

une cellule quelconque

fusionner 3 cellules sur 3 lignes d'une même colonne

fusionner 3 colonnes sur une ligne

Former les bons couples par glisser-déposer ou clics successifs.

6. Listes des balises

balise	effet	balise	effet
`<br/>`	retour à la ligne	`<img src="..."/>`	image
`<p>`	paragraphe	`<video src="..."/>`	video
`<h1>` à `<h6>`	titre du plus au moins important	`<a href="...">`	hyperlien
`<b>`	texte en gras	`<u>`	texte souligné
`<i>`	texte en italique	`<s>`	~~texte barré~~
`<q>`	citation	`<!-- ... -->`	Commentaire
`<sub>`	texte en _indice	`<sup>`	texte en ^exposant
`<ol><li>...</li></ol>`	liste numérotée	`<ul><li>...</li></ul>`	liste d'items
`<div>`	blocs supersposés	`<span>`	côte-à-côte
`<table>`	tableau	`<caption>`	titre du tableau
`<tr>`	ligne du tableau	`<td>`	cellule du tableau