✔ Intro A (préparation du poste)° Le but de cette étape est de préparer la prochaine séance : nous allons vérifier que vous avez bien le logiciel nécessaire à la réalisation de page Web.
Il vous faut un éditeur de texte (pas un traitement de texte) capable de rajouter de la coloration syntaxique.
Trouver Notepad++ ou VSCodium dans les programmes.
Ouvrir le logiciel pour vérifier qu'il fonctionne bien. Puis fermer. Son utilisation viendre lors de la 2e séance.
Si vous ne trouvez ni l'un, ni l'autre : demandez à l'enseignant.
Si cela ne donne toujours rien, télécharger Notepad++ ou VSCodium et lancer l'installation sur votre poste en plaçant le tout dans le répertoire Mes Documents dans un répertoire portant le nom du logiciel.
Si vraiment rien ne fonctionne, vous pourrez toujours commencer en allant sur un site comme w3school.
En cas d'installation, vous pouvez laisser la machine travailler, cette première partie ne nécessite pas d'avoir Notepad++ ou VSCodium.
⚙ 01 ° Tapez plusieurs mots en utilisant des espaces et parfois des sauts à la ligne. Observez la différence entre le code HTML (tapé dans la zone jaune) et le visuel qu'en fait le navigateur.
Questions
Comment l'interpréteur interprète-t-il un passage à la ligne dans le code HTML ?
Comment l'interpréteur interprète-t-il un bloc de plusieurs espaces à la suite dans le code HTML ?
CODE HTML
↓ ↓ ↓ ↓ ↓ ↓ INTERPRETATION DU CODE ↓ ↓ ↓ ↓ ↓ ↓
...CORRECTION...
On observe deux choses :
Le passage à la ligne dans le code HTML n'est pas interprété comme un passage à la ligne sur le visuel. Le passage à la ligne est juste transformé en espace
Lorsqu'on place plusieurs espaces dans le code HTML, un seul espace apparaît à l'écran.
⚙ 02 ° Tapez ceci au fur et à mesure dans la zone de texte et regardez l'effet provoqué :
Questions
Que provoque le code ci-dessous ? Quel est le rôle de <p> et </p> ?
<p>Et maintenant</p><p>ça donne</p><p>ceci, ce qui est différent</p>
CODE HTML
↓ ↓ ↓ ↓ ↓ ↓ INTERPRETATION DU CODE ↓ ↓ ↓ ↓ ↓ ↓
Que provoque le code ci-dessous ? Quel est le rôle de <h1> et </h1> ?
<h1>Nouveau truc</h1>
CODE HTML
↓ ↓ ↓ ↓ ↓ ↓ INTERPRETATION DU CODE ↓ ↓ ↓ ↓ ↓ ↓
Que provoque le code ci-dessous ? Quel est le rôle de <mark> et </mark> ?
<p>Un <mark>dernier code</mark> pour la route</p>
CODE HTML
↓ ↓ ↓ ↓ ↓ ↓ INTERPRETATION DU CODE ↓ ↓ ↓ ↓ ↓ ↓
Placez les trois lignes de code précédentes dans la même fenêtre. Toutes les balises provoquent-elles un passage à la ligne automatique ?
...CORRECTION...
On observe ceci :
L'utilisation de <p> et </p> provoque visiblement des passages à la ligne. Nous verrons que ces balises servent à définir des paragraphes, d'où le p.
L'utilisation de <h1> et </h1> provoque un passage à la ligne ET une police d'écriture plus grande. Nous verrons que ces balises servent à définir des titres de niveau 1, d'où le h pour header.
L'utilisation de <mark> et </mark> ne provoque pas de passage à la ligne mais surligne en jaune le texte qu'elles entourent. Nous verrons que ces balises servent à mettre un bout de texte en valeur, d'où le mark, comme marquer.
⚙ 03 ° Quel est le rôle de <hr> ?
<p>Nouvel élément<hr>qui donne ceci</p>
CODE HTML
↓ ↓ ↓ ↓ ↓ ↓ INTERPRETATION DU CODE ↓ ↓ ↓ ↓ ↓ ↓
...CORRECTION...
On voit apparaître une barre au milieu du paragraphe, le séparant en deux.
⚙ 07 ° Lorsque votre navigateur vous affiche une page (qui contient du texte, des images ect...), c'est qu'il a reçu le code HTML qui décrit ce qu'il doit afficher à l'écran.
Sélectionner à l'aide de la souris l'ensemble du texte encadré ci-dessous
Le début du texte à sélectionner
Nous allons voir qu'on peut très facilement modifier les choses qui apparaissent à l'écran et même prendre de fausses captures d'écran.
Moralité : ne jamais croire à une capture d'écran. Trop facilement modifiable, même sans IA.
Faire un clic-droit
Choisir l'option qui se rapproche le plus de "Afficher le code-source" ou "Code-source de la sélection" : le terme exact dépend de votre navigateur.
Que voyez-vous apparaître ?
...CORRECTION...
Avec ce clic-droit, on peut obtenir le code-source HTML qu'a reçu le navigateur.
C'est normal : puisque le navigateur l'a reçu et interprété, il est nécessairement stocké sur votre système informatique.
⚙ 08 ° Voyons comment modifier une page Web LOCALEMENT. Vous n'allez pas hacker un site et modifier la page pour tous les utilisateurs. C'est illégal. Vous allez juste modifier le code HTML lu par votre navigateur : il va donc afficher la partie du code HTML lié à ce que vous voulez.
Aller sur un site qui parle d'un film, d'une série, d'une chanson... dont vous auriez bien voulu être l'acteur principal ou l'actrice principale.
Trouver un endroit où le nom de cette personne apparaît sur votre page.
Appuyer sur F12 : cela va ouvrir la console de développement, une série d'outils permettant d'interagir avec le code HTML.
Avec Firefox, sélectionner INSPECTEUR
Avec l'un des navigateurs basés sur Chromium, sélectionner ELEMENTS.
Cliquer sur l'icône avec la flèche (celle qui apparaît en haut à gauche des deux images ci-dessous)
Cliquer ou sélectionner dans la page Web le texte qui vous intéresse : vous devriez voir que le code correspondant apparaît dans la console du bas. Cliquer sur les petites flèches vous permettant d'ouvrir les balises, jusqu'à voir votre texte dans la console.
Faire un double-clic sur le code HTML que vous voulez modifier : cela vous permettra de le rendre éditable. Il vous suffit de modifier le texte qui se situe à l'intérieur de l'élement voulu.
Valider avec ENTREE puis cliquer ailleurs sur la page pour valider votre modification si vous ne voyez pas de modification à l'écran pour le moment.
Moralité
Aucune capture d'écran n'est nécessairement véridique !
✌ 09 ° Mise en pratique de vos nouvellez connaissances : montrez-moi que vous savez modifier une page. Vous avez 20/20 de moyenne, bravo ! Vous avez été élu député dans votre circonscription, bravo ! Vous avez reçu le prix Nobel cette année, bravo. Surtout à votre age.
Choisissez une page, modifiez son visuel local puis montrez-moi le résultat.
Vous avez maintenant vu ce qu'était le HTML, comment l'utiliser et le modifier sur une page existante. Regardons comment en construire une : que doit-elle contenir, dans quel ordre et sous quelle forme transmettre cela.
⚙ 10° Voici le code HTML d'une page que vous allez observer bientôt.
Répondre à ces questions en observant la structure du code :
Quels sont les deux éléments contenus dans html ?
1 2 3 4 5 6 7 8 9101112131415161718
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>A</title><metaname="author"lang="fr"content="votre nom ici"/><metahttp-equiv="refresh"content="3;url=https://doc.infoforall.fr/activite/html-css/page/page2.html"/></head><body><h1>Premier exemple de page HTML</h1><p>Nous allons voir :</p><ol><li>Que toute la page est contenue dans l'élément html</li><li>Que l'élément head contient des informations à transmettre au navigateur, mais pas pour les afficher directement.</li><li>Que l'élément body contient les éléments à afficher à l'écran</li></ol></body></html>
Les éléments présents dans head apparaissent-ils à l'écran ?
3 4 5 6 7 8
<head><metacharset="utf-8"/><title>A</title><metaname="author"lang="fr"content="votre nom ici"/><metahttp-equiv="refresh"content="3;url=https://doc.infoforall.fr/activite/html-css/page/page2.html"/></head>
Les éléments présents dans body apparaissent-ils à l'écran ? Pour rappel, voici le visuel :
91011121314151617
<body><h1>Premier exemple de page HTML</h1><p>Nous allons voir :</p><ol><li>Que toute la page est contenue dans l'élément html</li><li>Que l'élément head contient des informations à transmettre au navigateur, mais pas pour les afficher directement.</li><li>Que l'élément body contient les éléments à afficher à l'écran</li></ol></body>
...CORRECTION...
Quels sont les deux éléments contenus dans html ?
Regardons le code en ne regardant pas l'intérieur des balises lorsqu'on les ouvre :
On voit bien que l'élément html contient deux balises : head et body.
Les éléments présents dans head apparaissent-ils à l'écran ?
En regardant, on voit bien qu'aucune des lignes présentes dans head n'a l'air d'apparaître à l'écran.
Les éléments présents dans body apparaissent-ils à l'écran ?
A l'inverse, tout ce qui se trouve dans body ont bien une contrepartie à l'écran.
La ligne 1 <!DOCTYPE html> n'est pas à connaître par coeur mais elle est à placer au début de toute page HTML. Elle signale que le fichier est du HTML.
Si les éléments qu'on place entre <head> et </head> n'apparaissent pas, à quoi servent-ils ? Regardons cela avec les questions suivantes.
✔ 11° Utiliser ce lien qui va ouvrir une toute petite page basique. Attendre et observer la page et le titre de l'onglet.
Voici l'affichage que vous devriez avoir sous les yeux au début.
Voici le contenu initial qui va bouger ensuite.
⚙ 12° Dans cette question, nous allons voir d'où viennent les redirections successives et les changement dans le titre de l'onglet qui devient A puis AB puis ABC.
Questions
Le head de la première page est écrit ci-dessous. Sur quelle ligne apparaît le fait de devoir se rediriger vers une autre page au bout de 3 secondes ? Pourquoi le titre dans l'onglet est-il A ?
3 4 5 6 7 8
<head><metacharset="utf-8"/><title>A</title><metaname="author"lang="fr"content="votre nom ici"/><metahttp-equiv="refresh"content="3;url=https://doc.infoforall.fr/activite/html-css/page/page2.html"/></head>
Le head de la deuxième page est écrit ci-dessous. Au bout de combien de secondes a-t-on décider de créer la redirection ? Pourquoi le titre dans l'onglet est-il AB ?
1 2 3 4 5 6 7 8
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>AB</title><metaname="author"lang="fr"content="votre nom ici"/><metahttp-equiv="refresh"content="5;url=https://doc.infoforall.fr/activite/html-css/page/page3.html"/></head>
Le head de la troisième page est écrit ci-dessous. Pourquoi n'y a-t-il pas de redirection ? Pourquoi le titre dans l'onglet est-il ABC ?
1 2 3 4 5 6 7 8
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>ABC</title><metaname="author"lang="fr"content="votre nom ici"/></head>
On part au bout de 5 secondes vers la page dont l'URL est https://doc.infoforall.fr/activite/html-css/page/page3.html.
Pour le AB, il suffit de regarder le contenu interne de la balise title en ligne 5.
Le code HTML de la troisième page ne contient pas d'indications de redirection : on ne bouge plus.
Pour le ABC, il suffit de regarder le contenu interne de la balise title en ligne 5.
Vous venez donc de voir que l'élément head donne des indications générales au navigateur et que l'élément body contient ce qu'il faut afficher à l'écran.
L'élément html contient deux éléments : head et body.
L'élément head contient des informations qui ne sont pas directement affichées sur la page.
L'élément body contient la description de ce qui doit s'afficher à l'écran.
Ces questions vont vous permettre de comprendre qu'on place dans head des métadonnées : des données "annexes" qui ne s'affichent pas directement sur la page, mais permettent au navigateur de travailler correctement.
⚙ 13° Regardons l'absence de metacharset.
1 2 3 4 5 6 7 8
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>ABC</title><metaname="author"lang="fr"content="votre nom ici"/></head>
Questions
3 4 5 6 7
<head><title>ABC</title><metaname="author"lang="fr"content="votre nom ici"/></head>
Utilisez ce lien vers une page similaire ne comportant pas le meta charset. Observer la page, notamment les endroits où on voulait des caractères accentués.
L'absence de cette ligne a-t-il une influence sur l'affichage de la page ?
Est-il malin de réaliser une page sans placer cette ligne ?
...CORRECTION...
On voit clairement que les caractères accentués posent problème à l'affichage : le navigateur ne parvient pas à décoder correctement les valeurs numériques qu'il lit pour les transformer en caractères. Nous avions vu qu'on utilise 65 pour A, 66 pour B ect... Mais il y a plusieurs façons de gérer les caractères plus complexes, comme é è à.
Si on n'indique pas au navigateur quelle technique a été utilisée pour générer le texte, il ne sait pas nécessairement comment les décoder.
Exemple de visualisation :
Le visuel montre bien que non. C'est vraiment la seule ligne qui vous devrez mettre systématiquement dans votre head.
⚙ 14° Regardons l'absence de metaname.
1 2 3 4 5 6 7 8
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>ABC</title><metaname="author"lang="fr"content="votre nom ici"/></head>
Ci-dessous, voici le cours condensant ce que vous venez de voir aujourd'hui.
4.1 Code source HTML
A - Principe
Le HTML est un langage de description : un texte très structuré qui décrit sans ambiguïté ce qu'on désirera voir à l'écran.
HTML veut dire Hyper Text Markup Langage.
Un navigateur WEB est un programme qui interpréte un code-source HTML pour produire un affichage correspondant à cette description HTML.
Le navigateur interprète le HTML pour produire un affichage
B - Exemple d'introduction
Si le navigateur reçoit ce code HTML :
12345678
<h1>Premier exemple de HTML</h1><p>Nous allons voir :</p><ol><li>Comment réaliser des pages avec du texte</li><li>Comment rajouter des images.</li><li>Comment gérer les liens entre les pages.</li><li>Et comment utiliser CSS pour modifier l'apparence.</li></ol>
Alors, il produit alors cet affichage :
Visuel créé par le navigateur après analyse du code HTML
Un clic-droit sur une page Web permet de sélectionner l'affichage du code-source de la page.
En fonction du navigateur que vous utilisez, il faudra choisir
Firefox : code-source de la page ;
Ceux basés sur Chromium : afficher le code source ;
...
4.2 Balise HTML, la parenthèse du HTML
A - Caractères d'ouverture et de fermeture
Dans la plupart des langages (humains ou de programmation), on trouve différents caractères permettant de signaler le début d'une séquence et la fin d'une séquence :
Exemples de caractères d'ouverture/début et de fermeture/fin disponibles sur votre clavier :
Ouverture ( et fermeture )
Ouverture [ et fermeture ]
Ouverture { et fermeture }
Ouverture " et fermeture "
Ouverture ' et fermeture '
B - Balises d'ouverture et de fermeture
Le HTML classifie les informations. Or, il y a beaucoup plus de types d'informations que de caractères permettant de signaler une ouverture de transmission d'informations et la fermeture qui correspond.
Une balise d'ouverture indique le début de transmission d'une information typée.
Elle commence par <, contient la catégorie de l'information et finit par >.
Exemple : <p> indique le début d'un paragraphe.
Une balise de fermeture indique le début de transmission d'une information typée.
Elle commence par </, contient la catégorie de l'information et finit par >. Important : notez la présence du slash, c'est lui qui différencie ouverture et fermeture.
Exemple : </p> indique la fin d'un paragraphe.
4.3 Elément HTML
A - Elément
Un élément HTML est un bloc structuré d'informations : on peut séparer son type et son contenu. Il comporte soit une partie, soit trois parties.
Un élément en trois parties se décompose ainsi :
Balise d'ouverture - contenu interne - Balise de fermeture.
<h1>ici-mettre-le-texte-du-titre</h1>
Un élément HTML d'une seule partie est nommé balise orpheline.
<hr>
<imgsrc="adresse-à-fournir-ici">
Une balise orpheline transporte à elle seule tout ce qui est nécessaire à la gestion de cette information. Il est donc inutile d'indiquer où se trouve la fermeture.
Distinguer les trois parties d'une balise est la compétence fondamental à acquérir sur ce thème.
Exemple :
<h1>INTRODUCTION AUX PAGES HTML</h1>
Cette balise se décompose ainsi :
<h1>INTRODUCTION AUX PAGES HTML</h1> 1 2 3
<h1>est la balise d'ouverture d'un titre : on signale le début de transmission.
INTRODUCTION AUX PAGES HTMLest le contenu de ce titre : son texte.
</h1>est la balise de fermeture qui indique la fin de transmission du titre.
B - Quelques exemples
Elément p paragraphe :
<p>texte du paragraphe</p>
Elément h1 de titre (de niveau 1) :
<h1>texte du titre</h1>
Elément h2 de titre (de niveau 2) :
<h2>texte du titre</h2>
Elément mark de pertinence :
<mark>texte du lien</mark>
C - Remarque : élément contenant des éléments
Un élément peut très bien contenir d'autres éléments.
<p>Un <mark>dernier code</mark> pour la route</p>
1 2 3
Ici, l'élément p contient du texte et un élément mark.
4.4 Structure d'une page Web vide
A - Structure initiale
La structure d'une page HTML est la suivante
Une première ligne <!DOCTYPE html> indiquant que la suite est du HTML
Un élément html contenant
Un élément head qui va contenir des informations pour le navigateur ;
Un élément body qui va contenir tout ce qu'on veut voir à l'écran.
Un élément est le parent des éléments qui sont entre sa balise d'ouverture et sa balise de fermeture. Cela veut dire qu'il "possède" d'autres éléments qu'on nomme alors ses enfants.
On voit bien que <html> a deux enfants car <head> et <body> sont situées entre <html> et </html>.
Visuellement, on indente le code dès qu'il appartient à un élement. Mais contrairement à Python, il ne s'agit que d'une indication visuelle, pas d'une contrainte réelle.
4.5 Elément head
Métadonnées
Les métadonnées sont des données présentes dans un fichier mais qui n'apparaissent pas à l'écran lorsqu'on utilise le fichier.
En HTML, on transmet des métadonnées avec la balise orpheline meta.
Element head
L'élément head permet de fournir des informations au navigateur, notamment des métadonnées qui ne seront pas visibles directement à l'écran.
L'exemple ci-dessous donne des indications sur 4 choses qu'on peut transmettre :
A B C D
<head><metacharset="utf-8"/><title>Page HTML</title><metaname="author"lang="fr"content="votre nom ici"/><metahttp-equiv="refresh"content="3;url=https://www.infoforall.fr"/></head>
La ligne notée A permet de transmettre l'encodage à utiliser pour décoder ce code HTMLtexte contenu dans ce textequi a été utilisé pour texte à mettre dans l'onglet du navigateur à l'aide d'une balise orpheline nommée <meta>.
A
<metacharset="utf-8"/>
Et si on supprime cette ligne ? Vous risquez d'avoir des problèmes pour afficher correctement les caractères différents de A..Z a..z et 0..1.
La ligne notée B permet de modifier le texte qui s'affiche en tant que titre d'onglet. On utilise l'élément title.
B
<title>Page HTML</title>
Ce n'est pas une métadonnée puisque cette valeur apparaît à l'écran, même si ce n'est pas directement "sur la page".
Et si on supprime cette ligne ? Rien de grave. L'onglet aura juste un nom par défaut.
La ligne notée C permet de signaler qui est l'autre de la page. On utilise l'élément meta.
B
<metaname="author"lang="fr"content="votre nom ici"/>
Et si on supprime cette ligne ? Rien de grave. Le nom de l'auteur n'apparaît pas dans les métadonnées.
La ligne notée D est vraiment totalement optionnelle et doit être exceptionnelle. Ele permet de signaler qu'on veut provoquer une redirection automatique au bout de 3 secondes. On utilise l'élément meta.
Et si on supprime cette ligne ? C'est même plutôt bien ! Je ne présente cela que pour vous montrer que l'élément head reçoit des choses qui ne sont pas à afficher mais qui permettent néanmoins au navigateur de travailler.
Et encore d'autres choses encore.
L'activité suivante redonnera des explications sur l'utilisation des balises qu'on peut placer dans l'élément body.
