Apprendre la programmation Web - HTML, CSS à travers des TD

I. TD1 Partie 1 - HTML - un langage à balises pour structurer les documents Doctype et premières balises▲

Le but de ce TD est de comprendre comment sont écrites les pages Web basiques, aussi appelées pages statiques (Web 1.0). Une telle page Web contient deux parties :

HTML : le fichier HTML contient la structure de la page et son contenu ; en plus du texte brut, il donne du sens au texte en indiquant ce qui relève d'un paragraphe, d'un titre, etc., à l'aide de balises (exemple <p>, <title>…) ;
CSS : le fichier CSS est responsable de la mise en page de ces éléments (mettre ce paragraphe en rose, utiliser la fonte « Sans Serif » pour ce titre… ).

Le navigateur (Firefox, Chrome, Safari, IE/Edge…) est le logiciel qui nous permet de visualiser les pages Web. Le but de ce TD est de démystifier la façon dont sont interprétés ces deux types de fichiers par le navigateur. Pour cela nous allons réaliser un site dont le rendu correspond au fichier target.png, en partant du fichier index.txt, qui contient le contenu quasiment « brut » du site à réaliser.

Nous allons tout d'abord nous consacrer à préciser la structure (le HTML donc) que l'on peut ajouter à notre contenu brut. Nous verrons ensuite dans la deuxième partie du TDTD1 Partie 2 - Les bases du CSS Un langage de mise en page comment atteindre le rendu proposé par target.png en réalisant un fichier CSS.

I-A. Transformation d'un document texte en un document HTML▲

I-A-1. Le rôle du navigateur▲

Comme dit précédemment, le rôle du navigateur (Firefox, Chrome, Safari, IE/Edge…) est de visualiser les pages Web. Donc le navigateur transforme un fichier texte contenant du langage HTML/CSS en un affichage mis en page, avec des images…

Exercice 1

La page du TD est une page Web. Ouvrez les sources de cette page pour voir le code HTML qui est utilisé pour afficher cette page (clic droit puis code source ou Ctrl+U).

Exercice 2

Pour créer une page Web, il suffit de créer un fichier texte et de lui donner l'extension .html pour que le navigateur comprenne qu'il doit l'interpréter comme un document HTML.
- Sauvegardez le fichier index.txt en local dans un dossier HTMLCSS/TD1/.
  Sauvegardez le même fichier index.txt en local dans le dossier HTMLCSS/TD1/ en le renommant index.html.
- Ouvrez les deux fichiers index.txt et index.html dans le navigateur.
  Quelles différences d'affichage observez-vous ? Pourquoi ?
  Comment sont affichés des sauts de ligne d'un document HTML ?
  Comment est affiché un texte HTML entouré de  ?

I-A-2. Le standard du langage HTML▲

Notre document index.html est bien interprété comme un document HTML par le navigateur.

Le HTML, qui signifie HyperText Markup Language (langage de balisage d'hypertexte), est donc un langage à balises contenant des liens, dits hypertextes, vers d'autres documents.

Le HTML est un standard, c'est-à-dire un langage complètement décrit (n'hésitez pas à jeter un rapide coup d'œil à sa spécification, un document très technique mais complet).

Exercice 3

Testons la conformité de index.html au standard HTML5 à l'aide du validateur https://html5.validator.nu/. Quelles sont les erreurs indiquées ?
Commençons par l'erreur
Sélectionnez
```
Error: Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
```
Le validateur nous dit qu'il s'attendait à voir <!DOCTYPE html> au début de notre document. Cette balise sert à déclarer que le document est écrit en HTML5. En effet, il existe plusieurs standards de « langages HTML » : HTML4, XHTML, HTML5… Aujourd'hui, les gens utilisent majoritairement HTML5 et nous ferons de même.

Pour que le document soit valide et reconnu comme un document HTML 5, ajoutez la balise <!DOCTYPE html> au tout début du fichier.
Retestez la conformité de votre document.
Le validateur nous indique The character encoding was not declared.
L'encodage indique la façon dont le fichier est enregistré (UTF-8, ANSI, iso-8859-15…). Si la plupart des caractères sont enregistrés de manière standard, les caractères spéciaux (accents, œ…) peuvent être enregistrés de manières très différentes.
Lorsque l'encodage n'est pas spécifié, le navigateur risque d'afficher Ã© au lieu de é à cause d'une mauvaise détection de l'encodage. En effet, le caractère é est enregistré en UTF-8 de la même manière que Ã© est enregistré en iso-8859-15 (encodage encore très utilisé dans Windows).
Spécifier l'encodage des caractères est donc nécessaire pour que les caractères spéciaux de votre page soient bien affichés. Nous utiliserons toujours l'encodage UTF-8 (et idéalement tout le monde devrait aussi l'utiliser).
1. Ajoutez donc la ligne suivante qui déclare l'encodage dans l'en-tête du document juste après le DOCTYPE.

Sélectionnez

<meta charset="utf-8">

Rouvrez index.html dans le navigateur et vérifiez que tous les accents s'affichent bien.
Note : si les accents ne marchent toujours pas, c'est parce qu'il ne suffit pas de dire que votre fichier est en UTF-8. Il faut aussi que votre fichier soit bien enregistré en UTF-8. Par exemple dans Notepad++, l'encodage est marqué tout en bas à droite. Vous pouvez convertir votre fichier en UTF-8 en cherchant dans les menus.
Retestez la conformité de votre document.

Sélectionnez

<title>Le site non officiel de Chuck Norris</title>

À ce stade, le validateur indique que le fichier index.html est un document HTML5 valide.

I-B. Structure usuelle d'un document HTML▲

I-B-1. Les balises HTML▲

Nous avons vu dans l'exercice précédent nos premières balises <meta> et <title>. Les balises permettent de structurer le document. Elles annotent le texte qu'elles contiennent et permettent donc d'y ajouter du sens. On distingue deux types de balises :

La plupart des balises englobent du contenu : elles commencent par une balise ouvrante <mabalise>, puis le contenu que l'on veut « annoter » et finissent par une balise fermante </mabalise>.
Par exemple, la balise <title> sert à dire que le texte qu'elle englobe sera le titre du document ;
Certaines balises n'acceptent pas de contenu : elles consistent juste d'une balise ouvrante.
Par exemple, nous avons vu la balise <meta> et nous verrons bientôt <img>, <br>…

Autres exemples :

Sélectionnez

<p>Ceci est un paragraphe HTML puisqu'il est entouré des balises 'p' </p>
La balise 'br' du saut de ligne ne prend pas de contenu <br>

I-B-2. La structure de base▲

Servons-nous donc des balises pour créer une bonne structure de base de document HTML :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<!DOCTYPE html>
<html>
    <head>
        <!-- L'en-tête du document avec au moins un titre -->
        <title>Un titre qui s'affiche dans l'onglet du navigateur</title>
    </head>
    <body>
       <!-- Le corps du document -->
    </body>
</html>

Après la ligne <!DOCTYPE html> de déclaration du langage, le document est inclus dans la balise <html> et est composé de deux parties :

l'en-tête <head> contient des informations sur le document HTML, comme
- un <title> (balise obligatoire),
- un <meta> pour définir l'encodage ;
le corps <body> contient le vrai contenu. Nous verrons des exemples de balises dans la section Balises communes.

I-B-3. Un document HTML est comme un arbre▲

Les balises HTML donnent une structure d'arbre au document. Dans notre exemple index.html

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Le site non officiel de Chuck Norris</title>
    </head>
    <body>
       ...
    </body>
</html>

l'arbre est le suivant :

<html> est l'élément racine.
<head> et <body> sont les deux fils de l'élément <html>.
<title> et <meta> sont deux fils de l'élément <head>.
« Le site non officiel de Chuck Norris » est un fils de l'élément <title>.

Exercice 4

Mettez à jour votre page index.html pour qu'elle respecte la structure HTML ci-dessus.
(Vous devez ajouter les balises <html>, <head> et <body>.)
Retestez la conformité de votre document.

I-C. Outils de développement Web▲

Dans la suite du TD, nous allons utiliser notre navigateur pour « inspecter » notre page Internet. Pour cela nous conseillons Chrome ou Firefox. Appuyer sur la touche F12. Les outils de développement affichent deux parties bien distinctes, une dédiée au HTML et l'autre… aux CSS. Ces outils sont fabuleux pour apprendre comment se construit une page Internet.

Il y a trois façons de s'intéresser à un élément en particulier :

un clic droit avec la souris dans la page affichée, suivi d'un « Inspecter/Examiner l'élément », permet de voir le code HTML correspondant dans l'outil de développement ;
un clic sur dans l'outil de développement permet d'aller inspecter une zone d'intérêt dans la page (par survol avec la souris) ;
quand on passe la souris au-dessus d'un élément dans l'outil de développement, il le colore dans la page.

Exercice 5

Familiarisez-vous avec ces trois techniques en inspectant la page du TD.
Par exemple faites un clic droit sur l'élément « il y a trois façons… » puis « inspecter l'élément ». L'outil de développement doit vous présenter le code HTML et vous positionner directement sur <p>Il y a ....

I-D. Les balises communes du HTML▲

I-D-1. Les commentaires en HTML▲

Il est possible d'ajouter des commentaires dans le HTML. Ces commentaires ne sont pas interprétés par le navigateur, et ne sont donc pas affichés (mais ils restent présents dans le code source). Il s'agit donc d'informations laissées par des développeurs pour des développeurs. On les place entre les balises  :

Sélectionnez

<!--Cela est un commentaire dans un fichier HTML  -->

Il y a justement des commentaires dans le fichier index.html, comme autant de consignes afin de les remplacer par du HTML. Nous expliciterons ces dernières dans les sections suivantes.

I-D-2. Titres▲

Nous allons commencer par ajouter de la structure à notre page. Pour ce faire nous allons utiliser les balises à contenu <h1> à <h6> pour identifier les différentes sections :

<h1> est utilisé pour les gros titres du document ;
<h2> est utilisé pour les sections du document ;
<h3> est utilisé pour les sous-sections du document et ainsi de suite.

Par exemple, le titre ci-dessus est obtenu avec le code suivant :

Sélectionnez

<h2>Titres</h2>

Exercice 6

Vérifiez que le titre Titres juste au-dessus est bien un <h3> à l'aide des outils de développement en faisant un clic droit dessus.
Ajoutez la balise <h2> aux éléments de index.html marqués par les commentaires : .
Ajoutez la balise <h3> aux éléments de index.html marqués par les commentaires : .
Retestez la conformité de votre document.

I-D-3. Éléments de regroupement▲

I-D-3-a. Paragraphes▲

Exercice 7

Utilisez maintenant les balises <p> et </p> autour des paragraphes du document. Les paragraphes vous sont signifiés par  et .

Note : si vous faites un clic droit suivi de « inspecter l'élément » sur ce paragraphe, vous verrez justement que ce texte est dans un paragraphe.

I-D-3-b. Listes▲

En HTML nous pouvons faire des listes ordonnées (numérotées) ou non ordonnées :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.

<ul> <!-- ul pour unordered list -->
  <li>premier item non ordonné</li> <!-- li pour list item -->
  <li>deuxième item</li>
</ul>
<ol> <!-- ol pour ordered list -->
  <li>premier item ordonné</li>
  <li>deuxième item</li>
</ol>

Ce qui donne une fois interprété par le moteur de rendu du navigateur :

premier item non ordonné
deuxième item

premier item ordonné
deuxième item

Exercice 8

Utilisez les balises <ul> et <li> pour structurer la liste à puces  dans index.html.
(Ne vous souciez pas encore des commentaires )
Utiliser les balises <ol> et <li> pour structurer la liste numérotée  dans index.html.
Retestez la conformité de votre document. (En fait vous devriez le tester régulièrement de vous-même, mais on vous tient par la main pour ce premier TD).

I-D-4. Image : un exemple d'élément embarqué▲

Pour insérer une image, on peut utiliser la balise

Sélectionnez

<img src="adresse_image" alt="texte alternatif mais obligatoire">

Cette balise n'a pas de balise fermante, car elle ne peut avoir de contenu (cf. le début du TDLes balises HTML). On remarque qu'elle possède deux champs src et alt que l'on appelle les attributs de la balise. Les attributs se trouvent toujours dans la balise ouvrante.

Exercice 9

Précédemment, on avait vu une autre balise avec un attribut : quelle était cette balise ?

L'attribut src doit contenir l'adresse de l'image. L'attribut alt permet d'ajouter un texte alternatif pour les navigateurs ne pouvant les afficher (navigateur textuel Lynx) ou pour les personnes ne pouvant pas bien les distinguer (aveugles ou déficits visuels légers). Attention, l'attribut alt est obligatoire.

Exercice 10

Enregistrez l'image chuck-jeune.jpg dans un répertoire images par rapport à votre fichier index.html.
Remplacez le commentaire  par la balise <img> suivante
Sélectionnez
```
<img src="./images/chuck-jeune.jpg" alt="Une photo de Chuck Jeune, la légende est en marche.">
```
Note : l'adresse ./images/chuck-jeune.jpg est une adresse relative. Le point signifie « le dossier de la page Web courante ». Donc on va aller chercher l'image dans le dossier images du répertoire contenant la page Web index.html.
Faites de même avec l'image beware.jpg à positionner en lieu et place du commentaire .
Devinez quoi ? Il faut retester la conformité de votre document.

I-D-5. Éléments sémantiques▲

I-D-5-a. Liens externes▲

L'un des éléments les plus emblématiques du HTML est sans doute la balise <a>. Elle permet de faire des liens hypertextes (le HT dans HTML).

Un lien est composé principalement d'une URL cible et d'un libellé (le texte cliquable souvent souligné en bleu) :

Sélectionnez

<a href="http://urlcible">le libellé</a>

On peut renseigner l'URL complète de la cible (URL en chemin absolu), par exemple :

Sélectionnez

<a href="http://lynx.browser.org/">Lynx</a>

ou donner une adresse relative à la page courante (URL en chemin relatif), par exemple :

Sélectionnez

<a href="./images/chuck-jeune.png">Image</a>

Exercice 11

Remplacez les commentaires <!-- lien externe ... par des balises <a> avec la bonne adresse.
Testez la conformité…

I-D-5-b. Liens internes▲

On peut ajouter à ces liens externes une partie lien interne basée sur les ancres #monancre. Toutes les balises peuvent prendre un attribut id comme dans l'exemple suivant. Attention, la valeur de cet attribut doit être unique dans le document.

Sélectionnez

<h2 id="un_identifiant">

On peut alors faire un lien vers cette balise en ajoutant #un_identifiant à la fin de l'URL. Par exemple, voici un lien vers la balise d'identifiant un_identifiant interne à la page Web courante index.html :

Sélectionnez

<a href="index.html#un_identifiant">Exemple de lien interne</a>

On peut raccourcir l'URL comme suit. Si on n'indique pas le document, c'est que l'on pointe vers le document courant par défaut.

Sélectionnez

<a href="#un_identifiant">Exemple de lien interne</a>

Exercice 12

Remplacez le commentaire  de index.html par une balise <a> qui pointera sur l'une des premières balises. Vous aurez donc besoin d'ajouter un identifiant à cette balise cible.
Testez vos liens en cliquant dessus. Ils doivent vous emmener sur la balise dont l'identifiant correspond.
Testez la conformité…

I-D-5-c. Emphase▲

La balise <em> permet de mettre en évidence des passages importants dans un texte.

Exercice 13

Justement, il faut mettre en exergue le fait que Chuck Norris est très fort dans différents arts martiaux. Pour cela il faut mettre en emphase la phrase qui suit le commentaire :  dans le fichier index.html.

Note : il existe un autre type d'emphase qui s'obtient avec la balise <strong>.

I-D-5-d. Citation▲

Voici un magnifique exemple de citation :

Un biscuit ça n'a pas de 'spirit', c'est juste un biscuit. Mais avant c'était du lait, des œufs. Et dans les œufs, il y a la vie potentielle.
Jean-Claude Van Damme

Les citations permettent d'identifier un court texte sur lequel on veut attirer l'attention. Cela est utilisé notamment pour montrer qu'on a du 'spirit'.

Exercice 14

Allez voir le code source de notre citation à l'aide des outils de développement. Quelles sont les deux nouvelles balises utilisées ?
La première balise (qui commence par un b) entoure la citation complète tandis que la deuxième (qui commence par un c) contient uniquement la référence (l'auteur, le livre…).
Utilisez ces deux balises pour mettre en avant la citation en tout début de document (recherchez ).
Avez-vous vérifié tout au long du TD que votre page HTML reste valide ?

I-E. Fini !▲

Nous en avons fini en ce qui concerne le contenu et la structure de notre site. Nous savons ajouter de la structure à une page HTML avec des balises spécifiques.

Dans la partie 2 de ce TDTD1 Partie 2 - Les bases du CSS Un langage de mise en page, nous verrons comment améliorer l'aspect du site.

Remarque : pourquoi le fait d'ajouter <h1> à un titre change effectivement l'apparence des titres ? Cela n'est pas à la charge du CSS justement ?
En fait, les navigateurs appliquent des styles CSS par défaut à certaines balises HTML. Par exemple, les liens <a> sont en bleus et soulignés sans que l'on ait rien à faire. Cela évite d'avoir justement TOUT à refaire en CSS : le navigateur propose un style par défaut.